captainj56

Untitled

Mar 25th, 2020
192
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. #stream-container{
  40. height: 49vh;
  41. padding:0;
  42. margin:0;
  43. margin-block-start:0;
  44. margin-block-end:0;
  45. margin-inline-start:0;
  46. margin-inline-end:0
  47. }
  48. #stream-container img{
  49. display:block;
  50. max-width:100%;
  51. min-height:49vh;
  52. border-radius:4px;
  53. margin-top:8px
  54. }
  55.  
  56. </style>
  57. </head>
  58. <body>
  59. <input type='textarea' id='area' disabled />
  60. <div id='outerContainer'>
  61. <div id='container'>
  62. <div id='item'> </div>
  63. </div>
  64. <div id="stream-container" class="image-container">
  65. <img id="stream" src="">
  66. </div>
  67. </div>
  68. <script>
  69. const view = document.getElementById('stream');
  70. const WS_URL = "ws://" + window.location.host + ":8084";
  71. const ws = new WebSocket(WS_URL);
  72.  
  73. ws.onmessage = message => {
  74. if (message.data instanceof Blob) {
  75. var urlObject = URL.createObjectURL(message.data);
  76. view.src = urlObject;
  77. }
  78. };
  79.  
  80. var dragItem = document.querySelector('#item');
  81. var container = document.querySelector('#container');
  82. var containerWidth = container.offsetWidth;
  83. var containerHeight = container.offsetHeight;
  84. var maxDragHorizontal = containerWidth / 2;
  85. var maxDragVertical = containerHeight / 2;
  86. document.getElementById('area').value = 'width: ' + maxDragHorizontal + ' height: ' + maxDragVertical;
  87. var active = false;
  88. var currentX;
  89. var currentY;
  90. var initialX;
  91. var initialY;
  92. var xOffset = 0;
  93. var yOffset = 0;
  94. var lastText, lastSend, sendTimeout;
  95. container.addEventListener('touchstart', dragStart, false);
  96. container.addEventListener('touchend', dragEnd, false);
  97. container.addEventListener('touchmove', drag, false);
  98. container.addEventListener('mousedown', dragStart, false);
  99. container.addEventListener('mouseup', dragEnd, false);
  100. container.addEventListener('mousemove', drag, false);
  101.  
  102. function dragStart(e) {
  103. if (e.type === 'touchstart') {
  104. initialX = e.touches[0].clientX - xOffset;
  105. initialY = e.touches[0].clientY - yOffset;
  106. } else {
  107. initialX = e.clientX - xOffset;
  108. initialY = e.clientY - yOffset;
  109. }
  110. if (e.target === dragItem) {
  111. active = true;
  112. }
  113. }
  114.  
  115. function dragEnd(e) {
  116. initialX = currentX;
  117. initialY = currentY;
  118. active = false;
  119. }
  120.  
  121. function drag(e) {
  122. if (active) {
  123. e.preventDefault();
  124. if (e.type === 'touchmove') {
  125. currentX = e.touches[0].clientX - initialX;
  126. currentY = e.touches[0].clientY - initialY;
  127. } else {
  128. currentX = e.clientX - initialX;
  129. currentY = e.clientY - initialY;
  130. }
  131. xOffset = currentX;
  132. yOffset = currentY;
  133. if (Math.abs(currentY) < maxDragVertical && Math.abs(currentX) < maxDragHorizontal) {
  134. setTranslate(currentX, currentY, dragItem);
  135. }
  136. document.getElementById('area').value = 'X: ' + currentX + ' Y: ' + currentY;
  137. }
  138. }
  139.  
  140. // limit sending to one message every 30 ms
  141. // https://github.com/neonious/lowjs_esp32_examples/blob/master/neonious_one/cellphone_controlled_rc_car/www/index.html
  142. function send(txt) {
  143. var now = new Date().getTime();
  144. if(lastSend === undefined || now - lastSend >= 30) {
  145. try {
  146. ws.send(txt);
  147. lastSend = new Date().getTime();
  148. return;
  149. } catch(e) {
  150. console.log(e);
  151. }
  152. }
  153. lastText = txt;
  154. if(!sendTimeout) {
  155. var ms = lastSend !== undefined ? 30 - (now - lastSend) : 30;
  156. if(ms < 0)
  157. ms = 0;
  158. sendTimeout = setTimeout(() => {
  159. sendTimeout = null;
  160. send(lastText);
  161. }, ms);
  162. }
  163. }
  164.  
  165. function setTranslate(xPos, yPos, el) {
  166. el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)';
  167. var panDegrees = xPos * 90 / maxDragHorizontal;
  168. var tiltDegrees = yPos * 90 / maxDragVertical;
  169. send(panDegrees + ',' + tiltDegrees);
  170. }
  171. </script>
  172. </body>
  173. </html>
RAW Paste Data