⚗️ #1 came back to socket.io (in html)

web/templates/manualMode.htm

@@ -82,7 +82,7 @@ <h1>Manual Mode</h1>
             </form>
             <p>
               Collision detected at:
-              <span id="collision-distance">50</span>cm
+              <span id="collision-dist">50</span>cm
             </p>
           </div>
         </div>
@@ -175,66 +175,67 @@ <h1>Manual Mode</h1>
 
 {% block socketio_connection %}
 <script type="text/javascript" charset="utf-8">
-    // const socket = io.connect('http://127.0.0.1:5000'); // url of the python server, later use namespace/room specific to mode
+    const socket = io.connect('http://127.0.0.1:8000'); // url of the python server, later use namespace/room specific to mode
 
-    // socket.on('connect', function(){
-    //   socket.emit('ack', {
-    //     msg: 'CONN_ESTABLISHED'
-    //   });
-    //   console.log('Connected to server')
-    // });
+    socket.on('connect', function(){
+      socket.emit('ack', {
+        msg: 'CONN_ESTABLISHED'
+      });
+      console.log('Connected to server')
+    });
 
-    // socket.on('disconnect', function(){
-    //   console.log("Disconnecting with the server")
-    //   socket.emit('ack', {
-    //     msg: 'CONN_TERMINATED'
-    //   });
-    // })
+    socket.on('disconnect', function(){
+      console.log("Disconnecting with the server")
+      socket.emit('ack', {
+        msg: 'CONN_TERMINATED'
+      });
+    })
 
-    // socket.on('json', (data)=>{
-    //   console.log('server replied: ', data)
-    // })
+    socket.on('json', (data)=>{
+      console.log('server replied: ', data)
+    })
 
     // if(confirm("Start streaming?") == true){
     //   console.log('streaming begins...')
     //   socket.emit('stream', {msg: 'start streaming'})
     // }
-    // socket.on('img_data', function(msg){
-    //   console.log("Image received")
-    //   const img_element = document.getElementById("cam_img")
-    //   console.log(typeof(img_element))
-    //   console.log(img_element)
-    //   img_element.src="data:image/jpeg;base64,"+msg;
-    // })
-    uri = 'ws://127.0.0.1:8000/web'
-    const collsion_sock = new WebSocket(uri+'/collision')
-
-    collsion_sock.onopen = ()=>{
-      console.log("Collision Websocket connection established")
-      // collsion_sock.send('start')
-    }
-
-    collsion_sock.onclose = ()=>{
-      console.log("Collision Websocket connection terminated")
-    }
+    socket.on('img_data', function(msg){
+      console.log("Image received")
+      const img_element = document.getElementById("cam_img")
+      console.log(typeof(img_element))
+      console.log(img_element)
+      img_element.src="data:image/jpeg;base64,"+msg;
+    })
+    socket.on('collsion_data', function(msg){
+      console.log("Image received")
+      const span_element = document.getElementById("collision-dist")
+      console.log(img_element)
+      span_element.value=msg;
+    })
 
-    collsion_sock.onmessage = (event)=>{
-      console.log("Received: ", event.data)
-      return false // Prevent from closing
-    }
 
     // Adding event listeners to features..
-    const collision_chkbx = document.getElementById('collision_avoidance')
+    const cam_chkbx = document.getElementById('camera_streaming')
+    cam_chkbx.addEventListener('change', (event) => {
+      if (event.currentTarget.checked) {
+        socket.send({'camera_feed':'start'})
+        console.log("[cam] gave start command")
+      } else {
+        socket.send({'camera_feed':'stop'})
+        console.log("[cam] gave stop command")
+      }
+    });
 
+    const collision_chkbx = document.getElementById('collision_avoidance')
     collision_chkbx.addEventListener('change', (event) => {
-
       if (event.currentTarget.checked) {
-        collsion_sock.send('start')
+        socket.send({'collision_feed':'start'})
         console.log("[coll] gave start command")
       } else {
-        collsion_sock.send('stop')
+        socket.send({'collision_feed':'stop'})
         console.log("[coll] gave stop command")
       }
-    })
+    });
+    camera_streaming
 </script>
 {% endblock %}