From ecc6d859f666afcc23842a15a880fc41c09e0e71 Mon Sep 17 00:00:00 2001
From: Balaji-Ganesh <balganeshboda27@gmail.com>
Date: Sat, 17 Jun 2023 22:35:59 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9A=97=EF=B8=8F=20#2=20Able=20to=20capture?=
 =?UTF-8?q?=20the=20arrowkeys=20in=20`manualMode.htm`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/templates/base.html      |  1 +
 web/templates/manualMode.htm | 60 +++++++++++++++++++++++++++++++++---
 2 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/web/templates/base.html b/web/templates/base.html
index 423527c..105d5b8 100644
--- 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
index 6d7f37e..e5eb840 100644
--- a/web/templates/manualMode.htm
+++ b/web/templates/manualMode.htm
@@ -97,7 +97,7 @@ <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>
@@ -105,13 +105,13 @@ <h1>Manual Mode</h1>
               </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>
@@ -119,7 +119,7 @@ <h1>Manual Mode</h1>
               <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 %}