diff --git a/src/C++/Driver/src/main.cpp b/src/C++/Driver/src/main.cpp index b8a7650..073ebd5 100644 --- a/src/C++/Driver/src/main.cpp +++ b/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; } diff --git a/src/Python/flask/web/app.py b/src/Python/flask/web/app.py index e49edcf..d92d5b0 100644 --- a/src/Python/flask/web/app.py +++ b/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) \ No newline at end of file diff --git a/src/Python/flask/web/static/script.js b/src/Python/flask/web/static/script.js index c6e8451..109916d 100644 --- a/src/Python/flask/web/static/script.js +++ b/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); +}); \ No newline at end of file