Improve events view

Software/src/devboard/utils/events.cpp

@@ -19,10 +19,10 @@ void init_events(void) {
     entries[i].timestamp = 0;
     entries[i].data = 0;
     entries[i].occurences = 0;
-    entries[i].led_color = RED;  // Most events are RED
+    entries[i].led_color = RED;  // Most events are RED, critical errors
   }
 
-  // YELLOW events below
+  // YELLOW warning events below
   entries[EVENT_12V_LOW].led_color = YELLOW;
   entries[EVENT_CAN_WARNING].led_color = YELLOW;
   entries[EVENT_CELL_DEVIATION_HIGH].led_color = YELLOW;
@@ -59,13 +59,13 @@ static void update_led_color(EVENTS_ENUM_TYPE event) {
 const char* get_led_color_display_text(u_int8_t led_color) {
   switch (led_color) {
     case RED:
-      return "RED";
+      return "Error";
     case YELLOW:
-      return "YELLOW";
+      return "Warning";
     case GREEN:
-      return "GREEN";
+      return "Info";
     case BLUE:
-      return "BLUE";
+      return "Debug";
     default:
       return "UNKNOWN";
   }

Software/src/devboard/webserver/README.md

@@ -24,10 +24,6 @@ This section lists a number of features that can be implemented as part of the w
 
 - TODO: list all available ssids: scan WiFi Networks https://randomnerdtutorials.com/esp32-useful-wi-fi-functions-arduino/
 - TODO: add option to add/change ssid and password and save, connect to the new ssid (Option: save ssid and password using Preferences.h library https://randomnerdtutorials.com/esp32-save-data-permanently-preferences/)
-- TODO: display WiFi connection strength (https://randomnerdtutorials.com/esp32-useful-wi-fi-functions-arduino/)
-- TODO: display CAN state (indicate if there is a communication error)
-- TODO: display battery errors in battery diagnosis tab
-- TODO: display inverter errors in battery diagnosis tab
 - TODO: add functionality to turn WiFi AP off
 - TODO: fix IP address on home network (https://randomnerdtutorials.com/esp32-static-fixed-ip-address-arduino-ide/)
 - TODO: set hostname (https://randomnerdtutorials.com/esp32-set-custom-hostname-arduino/)

Software/src/devboard/webserver/events_html.cpp

@@ -9,21 +9,57 @@ const char EVENTS_HTML_START[] = R"=====(
     .event > div { flex: 1; min-width: 100px; max-width: 90%; word-break: break-word; }
 </style>
 <div style='background-color: #303E47; padding: 10px; margin-bottom: 10px;border-radius: 50px'>
-<h4 style='color: white;'>Event log:</h4>
 <div class="event-log">
 <div class="event">
-<div>Event Type</div><div>LED Color</div><div>Last Event (seconds ago)</div><div>Count</div><div>Data</div><div>Message</div>
+<div>Event Type</div><div>Severity</div><div>Last Event</div><div>Count</div><div>Data</div><div>Message</div>
 </div>
 )=====";
 const char EVENTS_HTML_END[] = R"=====(
 </div></div>
 <button onclick='goToMainPage()'>Back to main page</button>
+<script>function displayEventLog(){document.querySelector(".event-log");var i=(new Date).getTime()/1e3;document.querySelectorAll(".event").forEach(function(e){var n=e.querySelector(".last-event-seconds-ago"),t=e.querySelector(".timestamp");if(n&&t){var o=parseInt(n.innerText,10),a=parseFloat(t.innerText),r=new Date(1e3*(i-a+o)).toLocaleString();n.innerText=r}})}function goToMainPage(){window.location.href="/"}window.onload=function(){displayEventLog()}</script>
+)=====";
+
+/* The above <script> section is minified to save storage and increase performance, here is the full function: 
 <script>
+function displayEventLog() {
+    var eventLogElement = document.querySelector('.event-log');
+
+    // Get the current time on the client side
+    var currentTime = new Date().getTime() / 1000; // Convert milliseconds to seconds
+
+    // Loop through the events and update the "Last Event" column
+    var events = document.querySelectorAll('.event');
+    events.forEach(function(event) {
+        var secondsAgoElement = event.querySelector('.last-event-seconds-ago');
+        var timestampElement = event.querySelector('.timestamp');
+
+        if (secondsAgoElement && timestampElement) {
+            var secondsAgo = parseInt(secondsAgoElement.innerText, 10);
+            var uptimeTimestamp = parseFloat(timestampElement.innerText); // Parse as float to handle seconds with decimal parts
+
+            // Calculate the actual system time based on the client-side current time
+            var actualTime = new Date((currentTime - uptimeTimestamp + secondsAgo) * 1000);
+
+            // Format the date and time
+            var formattedTime = actualTime.toLocaleString();
+
+            // Update the "Last Event" column with the formatted time
+            secondsAgoElement.innerText = formattedTime;
+        }
+    });
+}
+
+// Call the displayEventLog function when the page is loaded
+window.onload = function() {
+    displayEventLog();
+};
+
 function goToMainPage() {
     window.location.href = '/';
 }
 </script>
-)=====";
+*/
 
 String events_processor(const String& var) {
   if (var == "PLACEHOLDER") {
@@ -39,10 +75,12 @@ String events_processor(const String& var) {
         content.concat("<div class='event'>");
         content.concat("<div>" + String(get_event_enum_string(static_cast<EVENTS_ENUM_TYPE>(i))) + "</div>");
         content.concat("<div>" + String(get_led_color_display_text(entries[i].led_color)) + "</div>");
-        content.concat("<div>" + String((millis() / 1000) - entries[i].timestamp) + "</div>");
+        content.concat("<div class='last-event-seconds-ago'>" + String((millis() / 1000) - entries[i].timestamp) +
+                       "</div>");
         content.concat("<div>" + String(entries[i].occurences) + "</div>");
         content.concat("<div>" + String(entries[i].data) + "</div>");
         content.concat("<div>" + String(get_event_message(static_cast<EVENTS_ENUM_TYPE>(i))) + "</div>");
+        content.concat("<div class='timestamp'>" + String(entries[i].timestamp) + "</div>");
         content.concat("</div>");  // End of event row
       }
     }

Software/src/devboard/webserver/index_html.cpp

@@ -1,9 +1,12 @@
 const char index_html[] = R"rawliteral(
+<!DOCTYPE HTML><html><head><title>Battery Emulator</title><meta name="viewport" content="width=device-width,initial-scale=1"><style>html{font-family:Arial;display:inline-block;text-align:center}h2{font-size:3rem}p{font-size:3rem}body{max-width:600px;margin:0 auto;padding-bottom:25px}.switch{position:relative;display:inline-block;width:120px;height:68px}.switch input{display:none}.slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#ccc;border-radius:6px}.slider:before{position:absolute;content:"";height:52px;width:52px;left:8px;bottom:8px;background-color:#fff;-webkit-transition:.4s;transition:.4s;border-radius:3px}input:checked+.slider{background-color:#b30000}input:checked+.slider:before{-webkit-transform:translateX(52px);-ms-transform:translateX(52px);transform:translateX(52px)}</style></head><body><h2>Battery Emulator</h2>%PLACEHOLDER%</body></html>
+)rawliteral";
+
+/* The above code is minified to increase performance. Here is the full HTML function:
 <!DOCTYPE HTML><html>
 <head>
   <title>Battery Emulator</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/png" href="favicon.png">
   <style>
     html {font-family: Arial; display: inline-block; text-align: center;}
     h2 {font-size: 3.0rem;}
@@ -23,4 +26,4 @@ const char index_html[] = R"rawliteral(
 </script>
 </body>
 </html>
-)rawliteral";
+*/