Enhance MQTT message handling and add data fetching in Flask app

src/C++/Driver/src/main.cpp

@@ -27,9 +27,11 @@ int main()
     setup();
     std::thread safety([&]() { robot.robotSafety(&message); });
     std::thread sendMqtt([&]() { sendKobukiData(robot.parser.data); });
+    
     while(true){
     parseMQTT(readMQTT());
     }
+    sendMqtt.join();
     safety.join();
     return 0;
 }

src/Python/flask/web/app.py

@@ -2,12 +2,19 @@ from flask import Flask, request, render_template, jsonify
 import paho.mqtt.client as mqtt
 
 app = Flask(__name__)
+# This function gets triggered when it receives a mqtt message
+def on_message(client, userdata, message):
+    global kobuki_message #set scope for this variable
+    kobuki_message = str(message.payload.decode("utf-8"))
 
 # Create an MQTT client instance
 mqtt_client = mqtt.Client()
 mqtt_client.username_pw_set("ishak", "kobuki")
-mqtt_client.connect("localhost", 1883, 60)
+mqtt_client.connect("145.92.224.21", 1883, 60)
 mqtt_client.loop_start()
+mqtt_client.subscribe("kobuki/data")
+mqtt_client.on_message = on_message # this lines needs to be under the function definition otherwise it cant find which function it needs to use
+
 
 @app.route('/', methods=["GET","POST"])
 def index():
@@ -23,6 +30,14 @@ def move():
         mqtt_client.publish("home/commands", direction)  # Het topic kan aangepast worden
 
     return jsonify({"status": "success", "direction": direction})
-# Run the Flask application in debug mode
+
+
+@app.route('/data', methods=['GET'])
+def data():
+    return kobuki_message
+
+
+
+
 if __name__ == '__main__':
     app.run(debug=True)

src/Python/flask/web/static/script.js

@@ -6,7 +6,6 @@ document.querySelectorAll(".btn").forEach(button => {
     // Haal de waarde van de knop op
     const direction = event.target.value;
 
-    // Verstuur de richting naar de server met fetch
     fetch("/move", {
       method: "POST",
       headers: {
@@ -22,4 +21,27 @@ document.querySelectorAll(".btn").forEach(button => {
       console.error("Error:", error);
     });
   });
+
+  // Fetch data from the server
+  async function fetchData() {
+    const response = await fetch("/data");
+    const data = await response.json();
+    return data;
+  }
+
+  // Parse the data and show it on the website
+  async function parseData() {
+    const data = await fetchData();
+    const sensorDataContainer = document.getElementById("sensor-data");
+    sensorDataContainer.innerHTML = ""; // Clear previous data
+    //for each object in json array create a new paragraph element and append it to the sensorDataContainer
+    for (const [key, value] of Object.entries(data)) {
+      const dataElement = document.createElement("p");
+      dataElement.textContent = `${key}: ${value}`;
+      sensorDataContainer.appendChild(dataElement);
+    }
+  }
+
+  // Fetch and display sensor data every 5 seconds
+  setInterval(parseData, 5000);
 });