API tools faq
paste
Advertisement
Guest User

test

a guest
Jan 18th, 2020
256
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.83 KB | None | 0 0
raw download clone embed print report
  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.  
  64.  <figure style="height:49vh">
  65.     <div id="stream-container" class="image-container"> <img id="stream" src=""> </div>
  66.   </figure>
  67.  
  68. <input type='textarea' id='area' disabled />
  69. <div id='outerContainer'>
  70.   <div id='container'>
  71.     <div id='item'> </div>
  72.   </div>
  73.  
  74. </div>
  75. <script>
  76. const view = document.getElementById('stream');
  77. const WS_URL = "ws://" + window.location.host + ":82";
  78. const ws = new WebSocket(WS_URL);
  79.        
  80. ws.onmessage = message => {
  81.     if (message.data instanceof Blob) {
  82.       var urlObject = URL.createObjectURL(message.data);
  83.       view.src = urlObject;
  84.     }
  85. };
  86.  
  87. var dragItem = document.querySelector('#item');
  88. var container = document.querySelector('#container');
  89. var containerWidth = container.offsetWidth;
  90. var containerHeight = container.offsetHeight;
  91. var maxDragHorizontal = containerWidth / 2;
  92. var maxDragVertical = containerHeight / 2;
  93. document.getElementById('area').value = 'width: ' + maxDragHorizontal + ' height: ' + maxDragVertical;
  94. var active = false;
  95. var currentX;
  96. var currentY;
  97. var initialX;
  98. var initialY;
  99. var xOffset = 0;
  100. var yOffset = 0;
  101. var lastText, lastSend, sendTimeout;
  102. container.addEventListener('touchstart', dragStart, false);
  103. container.addEventListener('touchend', dragEnd, false);
  104. container.addEventListener('touchmove', drag, false);
  105. container.addEventListener('mousedown', dragStart, false);
  106. container.addEventListener('mouseup', dragEnd, false);
  107. container.addEventListener('mousemove', drag, false);
  108.  
  109. function dragStart(e) {
  110.     if (e.type === 'touchstart') {
  111.         initialX = e.touches[0].clientX - xOffset;
  112.         initialY = e.touches[0].clientY - yOffset;
  113.     } else {
  114.         initialX = e.clientX - xOffset;
  115.         initialY = e.clientY - yOffset;
  116.     }
  117.     if (e.target === dragItem) {
  118.         active = true;
  119.     }
  120. }
  121.  
  122. function dragEnd(e) {
  123.     initialX = currentX;
  124.     initialY = currentY;
  125.     active = false;
  126. }
  127.  
  128. function drag(e) {
  129.     if (active) {
  130.         e.preventDefault();
  131.         if (e.type === 'touchmove') {
  132.             currentX = e.touches[0].clientX - initialX;
  133.             currentY = e.touches[0].clientY - initialY;
  134.         } else {
  135.             currentX = e.clientX - initialX;
  136.             currentY = e.clientY - initialY;
  137.         }
  138.         xOffset = currentX;
  139.         yOffset = currentY;
  140.         if (Math.abs(currentY) < maxDragVertical && Math.abs(currentX) < maxDragHorizontal) {
  141.           setTranslate(currentX, currentY, dragItem);
  142.       }
  143.       document.getElementById('area').value = 'X: ' + currentX + ' Y: ' + currentY;
  144.   }
  145. }
  146.  
  147. // limit sending to one message every 30 ms
  148. // https://github.com/neonious/lowjs_esp32_examples/blob/master/neonious_one/cellphone_controlled_rc_car/www/index.html
  149. function send(txt) {
  150.   var now = new Date().getTime();
  151.   if(lastSend === undefined || now - lastSend >= 30) {
  152.         try {
  153.             ws.send(txt);
  154.             lastSend = new Date().getTime();
  155.             return;
  156.         } catch(e) {
  157.             console.log(e);
  158.         }
  159.     }
  160.     lastText = txt;
  161.     if(!sendTimeout) {
  162.         var ms = lastSend !== undefined ? 30 - (now - lastSend) : 30;
  163.         if(ms < 0)
  164.           ms = 0;
  165.       sendTimeout = setTimeout(() => {
  166.             sendTimeout = null;
  167.             send(lastText);
  168.         }, ms);
  169.     }
  170. }
  171.  
  172. function setTranslate(xPos, yPos, el) {
  173.     el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)';
  174.     var panDegrees = xPos * 90 / maxDragHorizontal;
  175.     var tiltDegrees = yPos * 90 / maxDragVertical;
  176.     send(panDegrees + ',' + tiltDegrees);
  177. }
  178. </script>
  179. </body>
  180. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!