diff --git a/src/Python/flask/web/static/script.js b/src/Python/flask/web/static/script.js index e5b4fee..ceaecef 100644 --- a/src/Python/flask/web/static/script.js +++ b/src/Python/flask/web/static/script.js @@ -1,41 +1,121 @@ -document.querySelectorAll(".btn").forEach(button => { - button.addEventListener("click", async function(event) { // Maak de functie async - 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; - try { - const response = await fetch("/move", { + 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); }); - const data = await response.json(); - console.log("Success:", data); - } catch (error) { - console.error("Error:", error); - } + }); + }); - // Fetch data from the server - async function fetchData() { + // 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 + // 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 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); // Voeg het element toe aan de container + 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 1 second + setInterval(parseData, 1000); + + // Update the image every 200 milliseconds + setInterval(updateImage, 100); +});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() { + 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(); + 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 1 second + setInterval(parseData, 1000); + + // Update the image every 200 milliseconds + setInterval(updateImage, 100); +}); \ No newline at end of file