diff --git a/src/Python/flask/web/static/script.js b/src/Python/flask/web/static/script.js index 2fb6c50..c71f095 100644 --- a/src/Python/flask/web/static/script.js +++ b/src/Python/flask/web/static/script.js @@ -1,46 +1,45 @@ -// 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 +document.addEventListener("DOMContentLoaded", function () { + document.querySelectorAll(".btn").forEach((button) => { + button.addEventListener("click", function (event) { + event.preventDefault(); // prevents page refresh - // Haal de waarde van de knop op - const direction = event.target.value; + // 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); + fetch("/move", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ direction: direction }), }) - .catch((error) => { - console.error("Error:", error); - }); + .then((response) => response.json()) + .then((data) => { + script; + console.log("Success:", data); + }) + .catch((error) => { + console.error("Error:", error); + }); + }); }); // Fetch data from the server async function fetchData() { + try { const response = await fetch("/data"); const data = await response.json(); return data; - + } catch (error) { + console.error("Error:", error); + } } - // Parse the data and show it on the website async function parseData() { const data = await fetchData(); - - if(!data){ - console.error("No data received"); - return; - } 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 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}`; @@ -48,6 +47,15 @@ document.querySelectorAll(".btn").forEach((button) => { } } + // 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, 5000); + setInterval(parseData, 1000); + + // Update the image every 5 seconds + setInterval(updateImage, 200); });