Code runtime

assets/css/style.css

@@ -169,16 +169,26 @@ div.twitchstream iframe {
 }
 
 .runtime {
-  background-color: #24252a;
   margin: 10px;
   text-align: left;
   color: #ffffff;
-  border-radius: 10px;
   font-family: "Source Code Pro", monospace;
-  border: 2px solid white; /* Adjust thickness as needed */
+  background: none; /* remove filled background */
+  border: none; /* remove complete border */
+  border-bottom: 2px solid white; /* line graph baseline */
   width: calc(35vw / 2);
-  height: 20vh;
+  height: auto; /* remove fixed height */
   float: left;
+  position: relative;
+}
+
+.runtime::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 0; /* no extra height */
 }
 
 .voltage {
@@ -369,4 +379,12 @@ div.twitchstream iframe {
 .checklist {
   font-family: "Source Code Pro", monospace;
   font-size: 15px;
-}
+}
+
+.graph-container {
+  border: 2px solid #fff;
+  padding: 5px;
+  margin: 5px 0;
+  width: 300px;
+  height: 200px;
+}

assets/js/robot.js

@@ -2,7 +2,12 @@
  * contains client-side JavaScript functions
  * (primarily event handlers to fetch data from the Node server)
  */
-const socket = window.io();
+
+// Ensure `socket` is declared only once and avoid redeclaration
+
+window.socket = window.io(); // Attach `socket` to the global `window` object
+
+const socket = window.socket;
 
 socket.on("temperatures", (entry) => {
   const temperatures = document.querySelector("div.temp");
@@ -14,14 +19,77 @@ socket.on("pdhCurrents", (entry) => {
   pdhDisplay.innerHTML = entry;
 });
 
-socket.on("powerStats", (stats) => {
-  const runtimeDisplay = document.querySelector("div.runtime");
-  const voltageDisplay = document.querySelector("div.voltage");
+// new web socket connection for robot runtime data
+// web dev code vid
+
+// Remove Chart.js setup and runtime graph logic
+// const ctx = document.getElementById("runtimeGraph").getContext("2d");
+// const runtimeChart = new Chart(ctx, {
+//   type: "line",
+//   data: {
+//     labels: [], // timestamps
+//     datasets: [
+//       {
+//         label: "Robot Code Runtime",
+//         data: [],
+//         borderColor: "rgba(75, 192, 192, 1)",
+//         fill: false,
+//       },
+//     ],
+//   },
+
+//   options: {
+//     scales: {
+//       x: { display: true },
+//       y: {
+//         beginAtZero: true,
+//       },
+//     },
+//     plugins: {
+//       annotation: {
+//         annotations: {
+//           line1: {
+//             type: "line",
+//             yMin: 20,
+//             yMax: 20,
+//             borderColor: "red",
+//             borderWidth: 2,
+//             label: {
+//               content: "20 ms",
+//               enabled: true,
+//               position: "center",
+//             },
+//           },
+//         },
+//       },
+//     },
+//     responsive: false,
+//   },
+// });
 
-  runtimeDisplay.innerHTML = stats.currentDisplay;
-  voltageDisplay.innerHTML = stats.voltageDisplay;
+// Add WebSocket listener for robotRuntime event
+socket.on("robotRuntime", (data) => {
+  const runtimeDisplay = document.querySelector("div.runtime");
+  runtimeDisplay.innerHTML = `Runtime: Timestamp: ${data.timestamp}, Runtime: ${data.runtime} ms`;
 });
 
+async function fetchRuntime() {
+  const runtimeDisplay = document.querySelector("div.runtime");
+  const response = await fetch("/runtime");
+  if (response.ok) {
+    runtimeDisplay.innerHTML = `Runtime: ${await response.text()}`;
+  } else {
+    console.error("Error fetching runtime data");
+  }
+}
+
+// Call the function to fetch runtime info on page load
+// add a check to see if runtime data was fetched
+
+fetchRuntime();
+const data = fetchRuntime();
+console.log("Fetched runtime data:", data); // Debugging statement
+
 async function fetchTemperatures() {
   const temperatures = document.querySelector("div.temp");
   const response = await fetch("/temperatures");
@@ -41,40 +109,26 @@ async function fetchPDHCurrents() {
     console.log("error fetching PDH currents");
   }
 }
-
-async function fetchPowerStats() {
-  const runtimeDisplay = document.querySelector("div.runtime");
-  const voltageDisplay = document.querySelector("div.voltage");
-  const response = await fetch("/powerStats");
-  if (response.ok) {
-    const stats = await response.json();
-    runtimeDisplay.innerHTML = stats.currentDisplay;
-    voltageDisplay.innerHTML = stats.voltageDisplay;
-  } else {
-    console.log("error fetching power stats");
-  }
-}
-
+// change the data
 fetchTemperatures();
 fetchPDHCurrents();
-fetchPowerStats();
 
 // Select all checkboxes with a data-key attribute for persistence
 const checklist = document.querySelectorAll('input[type="checkbox"][data-key]');
 
 checklist.forEach((checkbox) => {
   // Load persisted state on page load
-  const key = checkbox.getAttribute('data-key');
+  const key = checkbox.getAttribute("data-key");
   const saved = localStorage.getItem(key);
-  if (saved === 'true') {
+  if (saved === "true") {
     checkbox.checked = true;
   }
 
   checkbox.addEventListener("click", (event) => {
     const label = event.target.closest("label");
     const taskText = label.textContent.trim();
     const isChecked = event.target.checked;
-    const key = event.target.getAttribute('data-key');
+    const key = event.target.getAttribute("data-key");
     // Save state to localStorage
     localStorage.setItem(key, isChecked);
     socket.emit("checklist", { taskText, isChecked });

js/robot.js

@@ -0,0 +1,12 @@
+// Ensure the rest of the code uses the `socket` variable declared in the main HTML file
+
+// Example usage of the socket variable
+socket.on("connect", () => {
+  console.log("Connected to server");
+});
+
+socket.on("disconnect", () => {
+  console.log("Disconnected from server");
+});
+
+// Add other socket event listeners and handlers as needed