ws-robot.html 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>WebSocket Remote Robot</title>
  6. <style>
  7. canvas {
  8. border: 1px solid #000000;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <h1>WebSocket Remote Robot</h1>
  14. <p>Touch the canvas to control the robot.</p>
  15. <canvas id="canvas" width="400" height="400"></canvas>
  16. <script language="javascript" type="text/javascript">
  17. var wsUri = "ws://" + location.hostname + "/ws-robot.lc";
  18. var websocket;
  19. var canvas, context;
  20. function init() {
  21. websocket = new WebSocket(wsUri);
  22. websocket.onopen = function(evt) { };
  23. websocket.onclose = function(evt) { };
  24. websocket.onmessage = function(evt) { };
  25. websocket.onerror = function(evt) { };
  26. canvas = document.getElementById('canvas');
  27. context = canvas.getContext("2d");
  28. // Add mouse event listeners to canvas element
  29. canvas.addEventListener("mousedown", press, false);
  30. canvas.addEventListener("mousemove", drag, false);
  31. canvas.addEventListener("mouseup", release);
  32. canvas.addEventListener("mouseout", cancel, false);
  33. // Add touch event listeners to canvas element
  34. canvas.addEventListener("touchstart", press, false);
  35. canvas.addEventListener("touchmove", drag, false);
  36. canvas.addEventListener("touchend", release, false);
  37. canvas.addEventListener("touchcancel", cancel, false);
  38. }
  39. function sendMessage(message) {
  40. websocket.send(message);
  41. }
  42. function press(e) {
  43. var mouseX = (e.changedTouches ? e.changedTouches[0].pageX : e.pageX) - this.offsetLeft;
  44. var mouseY = (e.changedTouches ? e.changedTouches[0].pageY : e.pageY) - this.offsetTop;
  45. if (mouseX < 150) {
  46. sendMessage('L');
  47. } else if (mouseX > 250) {
  48. sendMessage('R');
  49. } else {
  50. sendMessage('F');
  51. }
  52. }
  53. function drag(e) {
  54. var mouseX = (e.changedTouches ? e.changedTouches[0].pageX : e.pageX) - this.offsetLeft;
  55. var mouseY = (e.changedTouches ? e.changedTouches[0].pageY : e.pageY) - this.offsetTop;
  56. if (mouseX < 150) {
  57. sendMessage('L');
  58. } else if (mouseX > 250) {
  59. sendMessage('R');
  60. } else {
  61. sendMessage('F');
  62. }
  63. }
  64. function release(e) {
  65. sendMessage('S');
  66. }
  67. function cancel(e) {
  68. sendMessage('S');
  69. }
  70. window.addEventListener("load", init, false);
  71. </script>
  72. </body>
  73. </html>