mirror of
https://gitlab.fdmci.hva.nl/technische-informatica-sm3/ti-projectten/rooziinuubii79.git
synced 2025-08-04 04:14:58 +00:00
update website so it shows image
This commit is contained in:
@@ -14,7 +14,7 @@ def on_message(client, userdata, message):
|
|||||||
# Create an MQTT client instance
|
# Create an MQTT client instance
|
||||||
mqtt_client = mqtt.Client()
|
mqtt_client = mqtt.Client()
|
||||||
mqtt_client.username_pw_set("server", "serverwachtwoordofzo")
|
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.loop_start()
|
||||||
mqtt_client.subscribe("kobuki/data")
|
mqtt_client.subscribe("kobuki/data")
|
||||||
mqtt_client.subscribe("kobuki/cam")
|
mqtt_client.subscribe("kobuki/cam")
|
||||||
|
@@ -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);
|
|
||||||
});
|
|
57
src/Python/flask/web/static/script.js
Normal file
57
src/Python/flask/web/static/script.js
Normal file
@@ -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);
|
||||||
|
});
|
@@ -167,4 +167,4 @@ th,td {
|
|||||||
th {
|
th {
|
||||||
background-color: #f2f2f2;
|
background-color: #f2f2f2;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
@@ -1,6 +1,8 @@
|
|||||||
{% extends 'base.html' %} {% block head %}
|
{% extends 'base.html' %}
|
||||||
|
{% block head %}
|
||||||
<link rel="stylesheet" href="../static/style.css" />
|
<link rel="stylesheet" href="../static/style.css" />
|
||||||
{% endblock %} {% block content %}
|
{% endblock %}
|
||||||
|
{% block content %}
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
@@ -11,8 +13,8 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="image-section">
|
<div class="robot-image">
|
||||||
<img src="kobuki.jpg" alt="Kobuki Robot" id="robot-image" />
|
<img src="/image" alt="Kobuki Camera Feed" id="robot-image" />
|
||||||
</div>
|
</div>
|
||||||
<div class="button-section">
|
<div class="button-section">
|
||||||
<form id="form" action="/move" method="post">
|
<form id="form" action="/move" method="post">
|
||||||
@@ -42,7 +44,8 @@
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="../static/script.js"></script>
|
<script src="../static/script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
{% endblock %}
|
{% endblock %}
|
Reference in New Issue
Block a user