From 480d36393a96da6e7a0c6d6221dbc356833d8013 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Tue, 10 Dec 2024 13:29:58 +0100 Subject: [PATCH] update website so it shows image --- src/Python/flask/web/app.py | 2 +- src/Python/flask/web/static/images/script.js | 47 ---------------- src/Python/flask/web/static/script.js | 57 ++++++++++++++++++++ src/Python/flask/web/static/style.css | 2 +- src/Python/flask/web/templates/control.html | 13 +++-- 5 files changed, 67 insertions(+), 54 deletions(-) delete mode 100644 src/Python/flask/web/static/images/script.js create mode 100644 src/Python/flask/web/static/script.js diff --git a/src/Python/flask/web/app.py b/src/Python/flask/web/app.py index 9b91158..841e42c 100644 --- a/src/Python/flask/web/app.py +++ b/src/Python/flask/web/app.py @@ -14,7 +14,7 @@ def on_message(client, userdata, message): # Create an MQTT client instance mqtt_client = mqtt.Client() mqtt_client.username_pw_set("server", "serverwachtwoordofzo") -mqtt_client.connect("localhost", 1884, 60) +mqtt_client.connect("localhost", 1883, 60) mqtt_client.loop_start() mqtt_client.subscribe("kobuki/data") mqtt_client.subscribe("kobuki/cam") diff --git a/src/Python/flask/web/static/images/script.js b/src/Python/flask/web/static/images/script.js deleted file mode 100644 index 109916d..0000000 --- a/src/Python/flask/web/static/images/script.js +++ /dev/null @@ -1,47 +0,0 @@ -// Selecteer alle knoppen en voeg een event listener toe aan elke knop -document.querySelectorAll(".btn").forEach(button => { - button.addEventListener("click", function(event) { - event.preventDefault(); // voorkomt pagina-verversing - - // Haal de waarde van de knop op - const direction = event.target.value; - - fetch("/move", { - method: "POST", - headers: { - "Content-Type": "application/json" - }, - body: JSON.stringify({ direction: direction }) - }) - .then(response => response.json()) - .then(data => { - console.log("Success:", data); - }) - .catch(error => { - 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 diff --git a/src/Python/flask/web/static/script.js b/src/Python/flask/web/static/script.js new file mode 100644 index 0000000..2121cc9 --- /dev/null +++ b/src/Python/flask/web/static/script.js @@ -0,0 +1,57 @@ +document.addEventListener("DOMContentLoaded", function() { + document.querySelectorAll(".btn").forEach(button => { + button.addEventListener("click", function(event) { + event.preventDefault(); // prevents page refresh + + // Get the value of the button + const direction = event.target.value; + + fetch("/move", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ direction: direction }) + }) + .then(response => response.json()) + .then(data => { + console.log("Success:", data); + }) + .catch(error => { + 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); + } + } + + // Update the image + function updateImage() { + var img = document.getElementById("robot-image"); + img.src = "/image?" + new Date().getTime(); // Add timestamp to avoid caching + } + + // Fetch and display sensor data every 5 seconds + setInterval(parseData, 1000); + + // Update the image every 5 seconds + setInterval(updateImage, 400); +}); \ No newline at end of file diff --git a/src/Python/flask/web/static/style.css b/src/Python/flask/web/static/style.css index dc848db..2ab49cb 100644 --- a/src/Python/flask/web/static/style.css +++ b/src/Python/flask/web/static/style.css @@ -167,4 +167,4 @@ th,td { th { background-color: #f2f2f2; text-align: left; -} +} \ No newline at end of file diff --git a/src/Python/flask/web/templates/control.html b/src/Python/flask/web/templates/control.html index 519402f..93b9b46 100644 --- a/src/Python/flask/web/templates/control.html +++ b/src/Python/flask/web/templates/control.html @@ -1,6 +1,8 @@ -{% extends 'base.html' %} {% block head %} +{% extends 'base.html' %} +{% block head %} -{% endblock %} {% block content %} +{% endblock %} +{% block content %} @@ -11,8 +13,8 @@
-
- Kobuki Robot +
+ Kobuki Camera Feed
@@ -42,7 +44,8 @@
+ -{% endblock %} +{% endblock %} \ No newline at end of file