Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no' />
- <title>Pan and Tilt ESP32-CAM</title>
- <style>
- #container {
- width: 100%;
- height: 49vh;
- background-color: #333;
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- border-radius: 7px;
- touch-action: none;
- }
- #item {
- width: 100px;
- height: 100px;
- background-color: rgb(245, 230, 99);
- border: 10px solid rgba(136, 136, 136, .5);
- border-radius: 50%;
- touch-action: none;
- user-select: none;
- }
- #item:active {
- background-color: rgba(168, 218, 220, 1.00);
- }
- #item:hover {
- cursor: pointer;
- border-width: 20px;
- }
- #area {
- position: fixed;
- right: 0;
- top: 0;
- }
- #stream-container{
- height: 49vh;
- padding:0;
- margin:0;
- margin-block-start:0;
- margin-block-end:0;
- margin-inline-start:0;
- margin-inline-end:0
- }
- #stream-container img{
- display:block;
- max-width:100%;
- min-height:49vh;
- border-radius:4px;
- margin-top:8px
- }
- </style>
- </head>
- <body>
- <input type='textarea' id='area' disabled />
- <div id='outerContainer'>
- <div id='container'>
- <div id='item'> </div>
- </div>
- <div id="stream-container" class="image-container">
- <img id="stream" src="">
- </div>
- </div>
- <script>
- const view = document.getElementById('stream');
- const WS_URL = "ws://" + window.location.host + ":8084";
- const ws = new WebSocket(WS_URL);
- ws.onmessage = message => {
- if (message.data instanceof Blob) {
- var urlObject = URL.createObjectURL(message.data);
- view.src = urlObject;
- }
- };
- var dragItem = document.querySelector('#item');
- var container = document.querySelector('#container');
- var containerWidth = container.offsetWidth;
- var containerHeight = container.offsetHeight;
- var maxDragHorizontal = containerWidth / 2;
- var maxDragVertical = containerHeight / 2;
- document.getElementById('area').value = 'width: ' + maxDragHorizontal + ' height: ' + maxDragVertical;
- var active = false;
- var currentX;
- var currentY;
- var initialX;
- var initialY;
- var xOffset = 0;
- var yOffset = 0;
- var lastText, lastSend, sendTimeout;
- container.addEventListener('touchstart', dragStart, false);
- container.addEventListener('touchend', dragEnd, false);
- container.addEventListener('touchmove', drag, false);
- container.addEventListener('mousedown', dragStart, false);
- container.addEventListener('mouseup', dragEnd, false);
- container.addEventListener('mousemove', drag, false);
- function dragStart(e) {
- if (e.type === 'touchstart') {
- initialX = e.touches[0].clientX - xOffset;
- initialY = e.touches[0].clientY - yOffset;
- } else {
- initialX = e.clientX - xOffset;
- initialY = e.clientY - yOffset;
- }
- if (e.target === dragItem) {
- active = true;
- }
- }
- function dragEnd(e) {
- initialX = currentX;
- initialY = currentY;
- active = false;
- }
- function drag(e) {
- if (active) {
- e.preventDefault();
- if (e.type === 'touchmove') {
- currentX = e.touches[0].clientX - initialX;
- currentY = e.touches[0].clientY - initialY;
- } else {
- currentX = e.clientX - initialX;
- currentY = e.clientY - initialY;
- }
- xOffset = currentX;
- yOffset = currentY;
- if (Math.abs(currentY) < maxDragVertical && Math.abs(currentX) < maxDragHorizontal) {
- setTranslate(currentX, currentY, dragItem);
- }
- document.getElementById('area').value = 'X: ' + currentX + ' Y: ' + currentY;
- }
- }
- // limit sending to one message every 30 ms
- // https://github.com/neonious/lowjs_esp32_examples/blob/master/neonious_one/cellphone_controlled_rc_car/www/index.html
- function send(txt) {
- var now = new Date().getTime();
- if(lastSend === undefined || now - lastSend >= 30) {
- try {
- ws.send(txt);
- lastSend = new Date().getTime();
- return;
- } catch(e) {
- console.log(e);
- }
- }
- lastText = txt;
- if(!sendTimeout) {
- var ms = lastSend !== undefined ? 30 - (now - lastSend) : 30;
- if(ms < 0)
- ms = 0;
- sendTimeout = setTimeout(() => {
- sendTimeout = null;
- send(lastText);
- }, ms);
- }
- }
- function setTranslate(xPos, yPos, el) {
- el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)';
- var panDegrees = xPos * 90 / maxDragHorizontal;
- var tiltDegrees = yPos * 90 / maxDragVertical;
- send(panDegrees + ',' + tiltDegrees);
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement