SHARE
TWEET

Untitled

a guest Sep 23rd, 2019 67 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2. <head>
  3. <meta name='viewport'         content='width=device-width,         initial-scale=1.0,         user-scalable=no' />
  4. <title>Pan and Tilt ESP32-CAM</title>
  5. <style>
  6. #container {
  7.      width: 100%;
  8.      height: 49vh;
  9.      background-color: #333;
  10.      display: flex;
  11.      align-items: center;
  12.      justify-content: center;
  13.      overflow: hidden;
  14.      border-radius: 7px;
  15.      touch-action: none;
  16. }
  17.  #item {
  18.      width: 100px;
  19.      height: 100px;
  20.      background-color: rgb(245, 230, 99);
  21.      border: 10px solid rgba(136, 136, 136, .5);
  22.      border-radius: 50%;
  23.      touch-action: none;
  24.      user-select: none;
  25. }
  26.  #item:active {
  27.      background-color: rgba(168, 218, 220, 1.00);
  28. }
  29.  #item:hover {
  30.      cursor: pointer;
  31.      border-width: 20px;
  32. }
  33.  #area {
  34.      position: fixed;
  35.      right: 0;
  36.      top: 0;
  37. }
  38.  
  39. figure{
  40.      height: 49vh;
  41.      padding:0;
  42.      margin:0;
  43.      -webkit-margin-before:0;
  44.      margin-block-start:0;
  45.      -webkit-margin-after:0;
  46.      margin-block-end:0;
  47.      -webkit-margin-start:0;
  48.      margin-inline-start:0;
  49.      -webkit-margin-end:0;
  50.      margin-inline-end:0
  51. }
  52. figure img{
  53.      display:block;
  54.      width:auto;
  55.      height:49vh;
  56.      border-radius:4px;
  57.      margin-top:8px
  58. }
  59.  
  60. </style>
  61. </head>
  62. <body>
  63. <input type='textarea' id='area' disabled />
  64. <div id='outerContainer'>
  65.   <div id='container'>
  66.     <div id='item'> </div>
  67.   </div>
  68.   <figure style="height:49vh">
  69.     <div id="stream-container" class="image-container"> <img id="stream" src=""> </div>
  70.   </figure>
  71. </div>
  72. <script>
  73. const view = document.getElementById('stream');
  74. const WS_URL = "ws://" + window.location.host + ":82";
  75. const ws = new WebSocket(WS_URL);
  76.        
  77. ws.onmessage = message => {
  78.     if (message.data instanceof Blob) {
  79.       var urlObject = URL.createObjectURL(message.data);
  80.       view.src = urlObject;
  81.     }
  82. };
  83.  
  84. var dragItem = document.querySelector('#item');
  85. var container = document.querySelector('#container');
  86. var containerWidth = container.offsetWidth;
  87. var containerHeight = container.offsetHeight;
  88. var maxDragHorizontal = containerWidth / 2;
  89. var maxDragVertical = containerHeight / 2;
  90. document.getElementById('area').value = 'width: ' + maxDragHorizontal + ' height: ' + maxDragVertical;
  91. var active = false;
  92. var currentX;
  93. var currentY;
  94. var initialX;
  95. var initialY;
  96. var xOffset = 0;
  97. var yOffset = 0;
  98. var lastText, lastSend, sendTimeout;
  99. container.addEventListener('touchstart', dragStart, false);
  100. container.addEventListener('touchend', dragEnd, false);
  101. container.addEventListener('touchmove', drag, false);
  102. container.addEventListener('mousedown', dragStart, false);
  103. container.addEventListener('mouseup', dragEnd, false);
  104. container.addEventListener('mousemove', drag, false);
  105.  
  106. function dragStart(e) {
  107.     if (e.type === 'touchstart') {
  108.         initialX = e.touches[0].clientX - xOffset;
  109.         initialY = e.touches[0].clientY - yOffset;
  110.     } else {
  111.         initialX = e.clientX - xOffset;
  112.         initialY = e.clientY - yOffset;
  113.     }
  114.     if (e.target === dragItem) {
  115.         active = true;
  116.     }
  117. }
  118.  
  119. function dragEnd(e) {
  120.     initialX = currentX;
  121.     initialY = currentY;
  122.     active = false;
  123. }
  124.  
  125. function drag(e) {
  126.     if (active) {
  127.         e.preventDefault();
  128.         if (e.type === 'touchmove') {
  129.             currentX = e.touches[0].clientX - initialX;
  130.             currentY = e.touches[0].clientY - initialY;
  131.         } else {
  132.             currentX = e.clientX - initialX;
  133.             currentY = e.clientY - initialY;
  134.         }
  135.         xOffset = currentX;
  136.         yOffset = currentY;
  137.         if (Math.abs(currentY) < maxDragVertical && Math.abs(currentX) < maxDragHorizontal) {
  138.            setTranslate(currentX, currentY, dragItem);
  139.        }
  140.        document.getElementById('area').value = 'X: ' + currentX + ' Y: ' + currentY;
  141.    }
  142. }
  143.  
  144. // limit sending to one message every 30 ms
  145. // https://github.com/neonious/lowjs_esp32_examples/blob/master/neonious_one/cellphone_controlled_rc_car/www/index.html
  146. function send(txt) {
  147.    var now = new Date().getTime();
  148.    if(lastSend === undefined || now - lastSend >= 30) {
  149.         try {
  150.             ws.send(txt);
  151.             lastSend = new Date().getTime();
  152.             return;
  153.         } catch(e) {
  154.             console.log(e);
  155.         }
  156.     }
  157.     lastText = txt;
  158.     if(!sendTimeout) {
  159.         var ms = lastSend !== undefined ? 30 - (now - lastSend) : 30;
  160.         if(ms < 0)
  161.            ms = 0;
  162.        sendTimeout = setTimeout(() => {
  163.             sendTimeout = null;
  164.             send(lastText);
  165.         }, ms);
  166.     }
  167. }
  168.  
  169. function setTranslate(xPos, yPos, el) {
  170.     el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)';
  171.     var panDegrees = xPos * 90 / maxDragHorizontal;
  172.     var tiltDegrees = yPos * 90 / maxDragVertical;
  173.     send(panDegrees + ',' + tiltDegrees);
  174. }
  175. </script>
  176. </body>
  177. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top