From a050058361bd31f24db0bfacc396bda13f9907fd Mon Sep 17 00:00:00 2001
From: edisonqu <edisonquu@gmail.com>
Date: Sun, 9 Feb 2025 01:21:57 -0500
Subject: [PATCH 1/2] fix web interface to actually work when pressing on
 buttons

---
 examples/web_interface.html | 70 ++++++++++++++++++++++++++++++++-----
 1 file changed, 61 insertions(+), 9 deletions(-)

diff --git a/examples/web_interface.html b/examples/web_interface.html
index 97ee3c8..574cf0b 100644
--- a/examples/web_interface.html
+++ b/examples/web_interface.html
@@ -47,15 +47,33 @@
     <div id="status">Disconnected</div>
     
     <div class="control-pad">
-        <button class="control-button" ontouchstart="sendVelocity(0.35, -1.0)" ontouchend="sendVelocity(0, 0)"> </button>
-        <button class="control-button" ontouchstart="sendVelocity(0.35, 0)" ontouchend="sendVelocity(0, 0)">^</button>
-        <button class="control-button" ontouchstart="sendVelocity(0.35, 1.0)" ontouchend="sendVelocity(0, 0)"> </button>
-        <button class="control-button" ontouchstart="sendVelocity(0, -1.0)" ontouchend="sendVelocity(0, 0)"><</button>
-        <button class="control-button" ontouchstart="sendVelocity(0, 0)" ontouchend="sendVelocity(0, 0)">+</button>
-        <button class="control-button" ontouchstart="sendVelocity(0, 1.0)" ontouchend="sendVelocity(0, 0)">></button>
-        <button class="control-button" ontouchstart="sendVelocity(-0.35, -1.0)" ontouchend="sendVelocity(0, 0)"> </button>
-        <button class="control-button" ontouchstart="sendVelocity(-0.35, 0)" ontouchend="sendVelocity(0, 0)">v</button>
-        <button class="control-button" ontouchstart="sendVelocity(-0.35, 1.0)" ontouchend="sendVelocity(0, 0)"> </button>
+        <button class="control-button" 
+                ontouchstart="sendVelocity(0.3, -1.3)" ontouchend="sendVelocity(0, 0)"
+                onmousedown="sendVelocity(0.3, -1.3)" onmouseup="sendVelocity(0, 0)"> </button>
+        <button class="control-button" 
+                ontouchstart="sendVelocity(0.3, 0)" ontouchend="sendVelocity(0, 0)"
+                onmousedown="sendVelocity(0.3, 0)" onmouseup="sendVelocity(0, 0)">^</button>
+        <button class="control-button" 
+                ontouchstart="sendVelocity(0.3, 1.3)" ontouchend="sendVelocity(0, 0)"
+                onmousedown="sendVelocity(0.3, 1.3)" onmouseup="sendVelocity(0, 0)"> </button>
+        <button class="control-button" 
+                ontouchstart="sendVelocity(0, -1.3)" ontouchend="sendVelocity(0, 0)"
+                onmousedown="sendVelocity(0, -1.3)" onmouseup="sendVelocity(0, 0)"><</button>
+        <button class="control-button" 
+                ontouchstart="sendVelocity(0, 0)" ontouchend="sendVelocity(0, 0)"
+                onmousedown="sendVelocity(0, 0)" onmouseup="sendVelocity(0, 0)">+</button>
+        <button class="control-button" 
+                ontouchstart="sendVelocity(0, 1.3)" ontouchend="sendVelocity(0, 0)"
+                onmousedown="sendVelocity(0, 1.3)" onmouseup="sendVelocity(0, 0)">></button>
+        <button class="control-button" 
+                ontouchstart="sendVelocity(-0.3, -1.3)" ontouchend="sendVelocity(0, 0)"
+                onmousedown="sendVelocity(-0.3, -1.3)" onmouseup="sendVelocity(0, 0)"> </button>
+        <button class="control-button" 
+                ontouchstart="sendVelocity(-0.3, 0)" ontouchend="sendVelocity(0, 0)"
+                onmousedown="sendVelocity(-0.3, 0)" onmouseup="sendVelocity(0, 0)">v</button>
+        <button class="control-button" 
+                ontouchstart="sendVelocity(-0.3, 1.3)" ontouchend="sendVelocity(0, 0)"
+                onmousedown="sendVelocity(-0.3, 1.3)" onmouseup="sendVelocity(0, 0)"> </button>
     </div>
 
     <div class="speech-box">
@@ -116,6 +134,40 @@
             }
         });
 
+        function onKeyDown(event) {
+            const key = event.key.toLowerCase();
+            switch (key) {
+                case 'w':
+                    sendVelocity(0.5, 0.0);
+                    break;
+                case 's':
+                sendVelocity(-0.5, 0.0);
+                    break;
+                case 'a':
+                sendVelocity(0.0, 45.0);
+                    break;
+                case 'd':
+                sendVelocity(0.0, -45.0);
+                    break;
+                case 'q':
+                sendVelocity(0.0, 0.0);
+                    break;
+                default:
+                    break;
+            }
+        }
+
+        function onKeyUp(event) {
+            const key = event.key.toLowerCase();
+            if (['w','a','s','d','arrowup','arrowdown','arrowleft','arrowright'].includes(key)) {
+                sendVelocity(0.0, 0.0);
+            }
+        }
+
+        document.addEventListener('keydown', onKeyDown);
+        document.addEventListener('keyup', onKeyUp);
+
+
         function updateVelocity() {
             // Calculate linear velocity (forward/backward)
             let linear = 0;

From 47373a8b031329c85cf18e2126166d3d44894a42 Mon Sep 17 00:00:00 2001
From: edisonqu <edisonquu@gmail.com>
Date: Sun, 9 Feb 2025 01:30:03 -0500
Subject: [PATCH 2/2] Add text

---
 examples/web_interface.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/examples/web_interface.html b/examples/web_interface.html
index 574cf0b..5d3583a 100644
--- a/examples/web_interface.html
+++ b/examples/web_interface.html
@@ -45,7 +45,13 @@
 </head>
 <body>
     <div id="status">Disconnected</div>
-    
+
+    <p style="margin: 20px;">
+        Use <b>W</b>, <b>A</b>, <b>S</b>, <b>D</b> to move/turn.<br>
+        Press <b>Q</b> to stop movement.<br>
+        Releasing any key also stops the robot.
+    </p>
+
     <div class="control-pad">
         <button class="control-button" 
                 ontouchstart="sendVelocity(0.3, -1.3)" ontouchend="sendVelocity(0, 0)"