⚗️✨ #1 Able to send image from Flask to Web-app.

app/templates/base.html

@@ -71,21 +71,24 @@
   <!-- Socketio library and establishing connection with python flask server -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
   <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script> -->
-  {% 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
 
     socket.on('connect', function(){
-      socket.emit('manual_mode', {
+      socket.emit('test', {
         testdata: 'dummmy data'
       });
       console.log('Connected to server')
     });
 
-    // socket.on('disconnect', function(){
-    //   socket.send('Disconnecting');
-    // })
+    socket.on('disconnect', function(){
+      console.log("Disconnecting with the server")
+      socket.send('Disconnecting');
+    })
+
 </script>
-  {% endblock %}
+{% block socketio_connection %}
+{% endblock %}
 
 </html>

app/templates/index.html

@@ -35,5 +35,26 @@ <h1 class="jumbotron-heading">Self-Driving car</h1>
       </li>
     </ul>
   </div>
+  <img src="" id="cam_img"/>
 </div>
 {% endblock %}
+{% block socketio_connection %}
+<script type="text/javascript" charset="utf-8">
+    // Connection is already setup with variable `socket` in `base.html`, which will be top of this in final rendering.
+    // here just using setting up those events, which are specific to the page
+    // FIXME: Currently this page doesn't need cam feed. Later move to that specific pages
+    socket.on('img_data', function(data){
+      var arrayBufferView = new Uint8Array(data['image']);
+      var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
+
+      var img_url = URL.createObjectURL(blob);
+      document.getElementById("cam_img").src = img_url;
+
+      // console.log(imageId)
+      // var imageId = document.getElementById("cam_img");
+      imageId.src = URL.createObjectURL(event.data);
+      console.log("image data placed")
+    })
+
+</script>
+{% endblock %}

main.py

@@ -4,20 +4,40 @@
 
 #FIXME: later figure out the way to place this in some file like, `web` and `feed`
 
+def send_image():
+    with open('640x480.jpg', 'rb') as f:
+        image_data = f.read()
+    socketio.emit('img_data', {'image': image_data})
+
+# Event handlers for connection events
+@socketio.on('connect')
+def handle_connect():
+    print("Client connected successfully");
+    # send image data..
+    print("Server about to send the image")
+    send_image()
+    print("Server sent the image")
+
+@socketio.on('disconnect')
+def handle_connect():
+    print("Client connected successfully");
+
 # Handle specific events -- client uses `emit` for these
 @socketio.on('manual_mode') # alternative to socketio.on_event('manual_mode', handler=handle_manual_mode, namespace='/')
 def handle_manual_mode(data):
     app.logger.info(data)
     print("Received data: "+str(data))
     # socketio.emit('acknowledgement', "You are connected")
+    socketio.send('test')
 
 
 # socketio.on_event('manual_mode', handler=handle_message, namespace='/')
 
 # handle pre-defined events -- client uses `send` for these
-@socketio.on('message')
+@socketio.on('test')
 def handle_message(data):
-    print('client says: '+data)
+    print('client says: '+str(data))
+    socketio.send("server sending data")
 
 
 if __name__ == '__main__':