⚗️ #2 Able to capture the arrowkeys in manualMode.htm

Balaji-Ganesh · Jun 17, 2023 · ecc6d85 · ecc6d85
1 parent 1114cee
commit ecc6d85
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 5 deletions.
diff --git a/web/templates/base.html b/web/templates/base.html
@@ -12,6 +12,7 @@
 
     <!-- Latest compiled JavaScript -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> <!-- for bootstrap icons-->
     <!-- Custom Stylesheet -->
     <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css')}}" >
     <title>{% block title %}{% endblock %}</title>

diff --git a/web/templates/manualMode.htm b/web/templates/manualMode.htm
@@ -97,29 +97,29 @@ <h1>Manual Mode</h1>
               <tr>
                 <td></td>
                 <td>
-                  <button class="btn btn-block">
+                  <button class="btn btn-block" id="ArrowUp" onclick="listen_navigations(this)">
                     <i class="bi bi-arrow-up"></i>
                   </button>
                 </td>
                 <td></td>
               </tr>
               <tr>
                 <td>
-                  <button class="btn btn-block">
+                  <button class="btn btn-block" id="ArrowLeft" onclick="listen_navigations(this)">
                     <i class="bi bi-arrow-left"></i>
                   </button>
                 </td>
                 <td></td>
                 <td>
-                  <button class="btn btn-block">
+                  <button class="btn btn-block" id="ArrowRight" onclick="listen_navigations(this)">
                     <i class="bi bi-arrow-right"></i>
                   </button>
                 </td>
               </tr>
               <tr>
                 <td></td>
                 <td>
-                  <button class="btn btn-block">
+                  <button class="btn btn-block" id="ArrowDown" onclick="listen_navigations(this)">
                     <i class="bi bi-arrow-down"></i>
                   </button>
                 </td>
@@ -231,6 +231,7 @@ <h1>Manual Mode</h1>
 
 
     //-------------------------------------------------------- Adding event listeners to features..
+    // For toggling ON and OFF of CameraStreaming
     const cam_chkbx = document.getElementById('camera_streaming')
     cam_chkbx.addEventListener('change', (event) => {
       if (event.currentTarget.checked) {
@@ -241,7 +242,8 @@ <h1>Manual Mode</h1>
         console.log("[cam] gave stop command")
       }
     });
-
+
+    // For toggling ON and OFF of CameraStreaming
     const collision_chkbx = document.getElementById('collision_avoidance')
     collision_chkbx.addEventListener('change', (event) => {
       if (event.currentTarget.checked) {
@@ -252,5 +254,53 @@ <h1>Manual Mode</h1>
         console.log("[coll] gave stop command")
       }
     });
+
+    // For toggling ON and OFF of NavigationControls
+    const navigation_chkbx = document.getElementById('navigation_controls')
+    in_navigation_mode=false // initial state
+    document.getElementById('ArrowUp').disabled=true
+    document.getElementById('ArrowDown').disabled=true
+    document.getElementById('ArrowLeft').disabled=true
+    document.getElementById('ArrowRight').disabled=true
+
+    navigation_chkbx.addEventListener('change', (event) => {
+      if (event.currentTarget.checked) {
+        socket.emit('navigations', 'start')
+        in_navigation_mode=true
+        // enable the arrow keys
+        document.getElementById('ArrowUp').disabled=false
+        document.getElementById('ArrowDown').disabled=false
+        document.getElementById('ArrowLeft').disabled=false
+        document.getElementById('ArrowRight').disabled=false
+        console.log("[navig] gave start command and now captures arrowkeys.")
+      } else {
+        socket.emit('navigations', 'stop')
+        in_navigation_mode=false
+        // disable the arrow keys
+        document.getElementById('ArrowUp').disabled=true
+        document.getElementById('ArrowDown').disabled=true
+        document.getElementById('ArrowLeft').disabled=true
+        document.getElementById('ArrowRight').disabled=true
+        console.log("[navig] gave stop command and stopped capturing arrowkeys.")
+      }
+    });
+
+    // for capturing the ArrowKeys..
+    keymap = {
+        'ArrowUp':'UP', 'ArrowDown': 'DOWN', 'ArrowLeft':'LEFT', 'ArrowRight':'RIGHT'
+      }// mapping of JS keyboard presses -to-> keys to be sent as direction
+    function listen_navigations(element){
+      if(in_navigation_mode && element.id in keymap)
+        console.log(element.id);
+        // socket.emit('direction', keymap[key])
+    }
+    document.addEventListener('keydown', (event)=>{
+      // only when in navigation mode..
+      if(in_navigation_mode && event.code in keymap){
+        // capture only the arrow key presses..
+        console.log(event.code);
+        // socket.emit('direction', keymap[key])          
+      }
+    })
 </script>
 {% endblock %}