switched to this branch

This commit is contained in:
ishak jmilou.ishak
2024-12-18 12:28:59 +01:00
parent 072b54af04
commit 1ecd474ca1

View File

@@ -1,32 +1,36 @@
// 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);
})
.catch(error => {
console.error("Error:", error);
fetch("/move", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ direction: direction })
})
.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
@@ -34,7 +38,7 @@ document.querySelectorAll(".btn").forEach(button => {
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}`;
@@ -42,6 +46,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);
});