update website so it shows image

src/C++/Driver/CMakeLists.txt

@@ -6,7 +6,9 @@ set(CMAKE_CXX_STANDARD 23)
 find_library(PAHO_MQTTPP_LIBRARY paho-mqttpp3 PATHS /usr/local/lib)
 find_library(PAHO_MQTT_LIBRARY paho-mqtt3a PATHS /usr/local/lib)
 
-include_directories(/usr/local/include)
+# Find OpenCV package
+find_package(OpenCV REQUIRED)
+include_directories(${OpenCV_INCLUDE_DIRS})
 
 set(SOURCE_FILES
     src/KobukiDriver/KobukiParser.cpp
@@ -20,4 +22,4 @@ set(SOURCE_FILES
 add_executable(kobuki_control ${SOURCE_FILES})
 
 # Link the static libraries
-target_link_libraries(kobuki_control ${PAHO_MQTTPP_LIBRARY} ${PAHO_MQTT_LIBRARY} pthread)
+target_link_libraries(kobuki_control ${PAHO_MQTTPP_LIBRARY} ${PAHO_MQTT_LIBRARY} ${OpenCV_LIBS} pthread)

src/C++/Driver/src/main.cpp

@@ -13,7 +13,7 @@ std::string readMQTT();
 void parseMQTT(std::string message);
 void CapnSend();
 //ip, clientID, username, password
-MqttClient client("mqtt://localhost:1883", "KobukiRPI", "rpi", "rpiwachtwoordofzo"); // create a client object
+MqttClient client("ws://145.92.224.21/ws/", "KobukiRPI", "rpi", "rpiwachtwoordofzo"); // create a client object
 std::string message = "stop";
 std::string serializeKobukiData(const TKobukiData &data);
 void sendKobukiData(TKobukiData &data);
@@ -305,9 +305,8 @@ void CapnSend() {
         auto* enc_msg = reinterpret_cast<unsigned char*>(buf.data());
 
         // Publish the image data
-        client.publishMessage("kobuki/cam", string(enc_msg, enc_msg + buf.size()));
+        client.publishMessage("kobuki/cam-", string(enc_msg, enc_msg + buf.size()));
         cout << "Sent image" << endl;
-
         std::this_thread::sleep_for(std::chrono::milliseconds(400)); // Send image every 1000ms
     }
 }

src/Python/flask/web/app.py

@@ -14,7 +14,7 @@ def on_message(client, userdata, message):
 # Create an MQTT client instance
 mqtt_client = mqtt.Client()
 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.subscribe("kobuki/data")
 mqtt_client.subscribe("kobuki/cam")

src/Python/flask/web/static/images/script.js

@@ -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);
-});

src/Python/flask/web/static/script.js

@@ -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);
+});

src/Python/flask/web/static/style.css

@@ -167,4 +167,4 @@ th,td {
 th {
   background-color: #f2f2f2;
   text-align: left;
-}
+}

src/Python/flask/web/templates/control.html

@@ -1,6 +1,8 @@
-{% extends 'base.html' %} {% block head %}
+{% extends 'base.html' %} 
+{% block head %}
 <link rel="stylesheet" href="../static/style.css" />
-{% endblock %} {% block content %}
+{% endblock %} 
+{% block content %}
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -11,8 +13,8 @@
   </head>
   <body>
     <div class="container">
-      <div class="image-section">
-        <img src="kobuki.jpg" alt="Kobuki Robot" id="robot-image" />
+      <div class="robot-image">
+        <img src="/image" alt="Kobuki Camera Feed" id="robot-image" />
       </div>
       <div class="button-section">
         <form id="form" action="/move" method="post">
@@ -42,7 +44,8 @@
         </table>
       </div>
     </div>
+
     <script src="../static/script.js"></script>
   </body>
 </html>
-{% endblock %}
+{% endblock %}