mirror of
https://gitlab.fdmci.hva.nl/technische-informatica-sm3/ti-projectten/rooziinuubii79.git
synced 2025-08-04 04:14:58 +00:00
added js from main branch
This commit is contained in:
@@ -1,41 +1,121 @@
|
|||||||
document.querySelectorAll(".btn").forEach(button => {
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
button.addEventListener("click", async function(event) { // Maak de functie async
|
document.querySelectorAll(".btn").forEach(button => {
|
||||||
event.preventDefault(); // voorkomt pagina-verversing
|
button.addEventListener("click", function(event) {
|
||||||
|
event.preventDefault(); // prevents page refresh
|
||||||
|
|
||||||
// Haal de waarde van de knop op
|
// Get the value of the button
|
||||||
const direction = event.target.value;
|
const direction = event.target.value;
|
||||||
|
|
||||||
try {
|
fetch("/move", {
|
||||||
const response = await fetch("/move", {
|
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json"
|
"Content-Type": "application/json"
|
||||||
},
|
},
|
||||||
body: JSON.stringify({ direction: direction })
|
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
|
// Fetch data from the server
|
||||||
async function fetchData() {
|
async function fetchData() {
|
||||||
|
try {
|
||||||
const response = await fetch("/data");
|
const response = await fetch("/data");
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
return data;
|
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 data = await fetchData();
|
||||||
const sensorDataContainer = document.getElementById("sensor-data");
|
const sensorDataContainer = document.getElementById("sensor-data");
|
||||||
sensorDataContainer.innerHTML = ""; // Clear previous 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)) {
|
for (const [key, value] of Object.entries(data)) {
|
||||||
const dataElement = document.createElement("p");
|
const dataElement = document.createElement("p");
|
||||||
dataElement.textContent = `${key}: ${value}`;
|
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);
|
||||||
|
});
|
Reference in New Issue
Block a user