Split webserver into separate files

Software/USER_SETTINGS.cpp

@@ -16,11 +16,6 @@ volatile uint16_t MAXDISCHARGEAMP =
     300;  //30.0A , BYD CAN specific setting, Max discharge speed in Amp (Some inverters needs to be artificially limited)
 
 /* Charger settings (Optional, when generator charging) */
-// MQTT
-#ifdef MQTT
-const char* mqtt_user = "REDACTED";
-const char* mqtt_password = "REDACTED";
-#endif  // USE_MQTT
 /* Charger settings */
 volatile float CHARGER_SET_HV = 384;      // Reasonably appropriate 4.0v per cell charging of a 96s pack
 volatile float CHARGER_MAX_HV = 420;      // Max permissible output (VDC) of charger
@@ -37,4 +32,11 @@ const char* password = "REPLACE_WITH_YOUR_PASSWORD";  // Minimum of 8 characters
 const char* ssidAP = "Battery Emulator";              // Maximum of 63 characters;
 const char* passwordAP = "123456789";  // Minimum of 8 characters; set to NULL if you want the access point to be open
 const uint8_t wifi_channel = 0;        // set to 0 for automatic channel selection
+
+// MQTT
+#ifdef MQTT
+const char* mqtt_user = "REDACTED";
+const char* mqtt_password = "REDACTED";
+#endif  // USE_MQTT
+
 #endif

Software/USER_SETTINGS.h

@@ -37,7 +37,7 @@
 //#define SERIAL_LINK_RECEIVER  //Enable this line to receive battery data over RS485 pins from another Lilygo (This LilyGo interfaces with inverter)
 //#define SERIAL_LINK_TRANSMITTER  //Enable this line to send battery data over RS485 pins to another Lilygo (This LilyGo interfaces with battery)
 #define WEBSERVER  //Enable this line to enable WiFi, and to run the webserver. See USER_SETTINGS.cpp for the Wifi settings.
-//#define LOAD_SAVED_SETTINGS_ON_BOOT  //Enable this line to read settings stored via the webserver on boot
+#define LOAD_SAVED_SETTINGS_ON_BOOT  //Enable this line to read settings stored via the webserver on boot
 
 /* MQTT options */
 //#define MQTT  // Enable this line to enable MQTT
@@ -47,7 +47,6 @@
 #define MQTT_PORT 1883
 
 /* Event options*/
-#define EVENTLOGGING               //Enable this line to log events to the event log
 #define DUMMY_EVENT_ENABLED false  //Enable this line to have a dummy event that gets logged to test the interface
 
 /* Select charger used (Optional) */

Software/src/devboard/webserver/cellmonitor_html.cpp

@@ -0,0 +1,56 @@
+#include "cellmonitor_html.h"
+#include <Arduino.h>
+
+String cellmonitor_processor(const String& var) {
+  if (var == "PLACEHOLDER") {
+    String content = "";
+    // Page format
+    content += "<style>";
+    content += "body { background-color: black; color: white; }";
+    content += ".container { display: flex; flex-wrap: wrap; justify-content: space-around; }";
+    content += ".cell { width: 48%; margin: 1%; padding: 10px; border: 1px solid white; text-align: center; }";
+    content += ".low-voltage { color: red; }";              // Style for low voltage text
+    content += ".voltage-values { margin-bottom: 10px; }";  // Style for voltage values section
+    content += "</style>";
+
+    // Start a new block with a specific background color
+    content += "<div style='background-color: #303E47; padding: 10px; margin-bottom: 10px; border-radius: 50px'>";
+
+    // Display max, min, and deviation voltage values
+    content += "<div class='voltage-values'>";
+    content += "Max Voltage: " + String(cell_max_voltage) + " mV<br>";
+    content += "Min Voltage: " + String(cell_min_voltage) + " mV<br>";
+    int deviation = cell_max_voltage - cell_min_voltage;
+    content += "Voltage Deviation: " + String(deviation) + " mV";
+    content += "</div>";
+
+    // Visualize the populated cells in forward order using flexbox with conditional text color
+    content += "<div class='container'>";
+    for (int i = 0; i < 120; ++i) {
+      // Skip empty values
+      if (cellvoltages[i] == 0) {
+        continue;
+      }
+
+      String cellContent = "Cell " + String(i + 1) + "<br>" + String(cellvoltages[i]) + " mV";
+
+      // Check if the cell voltage is below 3000, apply red color
+      if (cellvoltages[i] < 3000) {
+        cellContent = "<span class='low-voltage'>" + cellContent + "</span>";
+      }
+
+      content += "<div class='cell'>" + cellContent + "</div>";
+    }
+    content += "</div>";
+
+    // Close the block
+    content += "</div>";
+
+    content += "<button onclick='goToMainPage()'>Back to main page</button>";
+    content += "<script>";
+    content += "function goToMainPage() { window.location.href = '/'; }";
+    content += "</script>";
+    return content;
+  }
+  return String();
+}

Software/src/devboard/webserver/cellmonitor_html.h

@@ -0,0 +1,17 @@
+#ifndef CELLMONITOR_H
+#define CELLMONITOR_H
+
+extern uint16_t cell_max_voltage;   //mV,   0-4350
+extern uint16_t cell_min_voltage;   //mV,   0-4350
+extern uint16_t cellvoltages[120];  //mV    0-4350 per cell
+
+/**
+ * @brief Replaces placeholder with content section in web page
+ *
+ * @param[in] var
+ *
+ * @return String
+ */
+String cellmonitor_processor(const String& var);
+
+#endif

Software/src/devboard/webserver/events_html.cpp

@@ -0,0 +1,53 @@
+#include "events_html.h"
+#include <Arduino.h>
+
+const char EVENTS_HTML_START[] = R"=====(
+<style>
+    body { background-color: black; color: white; }
+    .event-log { display: flex; flex-direction: column; }
+    .event { display: flex; flex-wrap: wrap; border: 1px solid white; padding: 10px; }
+    .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>
+)=====";
+const char EVENTS_HTML_END[] = R"=====(
+</div></div>
+<button onclick='goToMainPage()'>Back to main page</button>
+<script>
+function goToMainPage() {
+    window.location.href = '/';
+}
+</script>
+)=====";
+
+String events_processor(const String& var) {
+  if (var == "PLACEHOLDER") {
+    String content = "";
+    content.reserve(5000);
+    // Page format
+    content.concat(FPSTR(EVENTS_HTML_START));
+    for (int i = 0; i < EVENT_NOF_EVENTS; i++) {
+      Serial.println("Event: " + String(get_event_enum_string(static_cast<EVENTS_ENUM_TYPE>(i))) +
+                     " count: " + String(entries[i].occurences) + " seconds: " + String(entries[i].timestamp) +
+                     " data: " + String(entries[i].data));
+      if (entries[i].occurences > 0) {
+        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>" + 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>");  // End of event row
+      }
+    }
+    content.concat(FPSTR(EVENTS_HTML_END));
+    return content;
+  }
+  return String();
+}

Software/src/devboard/webserver/events_html.h

@@ -0,0 +1,17 @@
+#ifndef EVENTS_H
+#define EVENTS_H
+
+#include "../utils/events.h"
+
+extern EVENTS_STRUCT_TYPE entries[EVENT_NOF_EVENTS];
+
+/**
+ * @brief Replaces placeholder with content section in web page
+ *
+ * @param[in] var
+ *
+ * @return String
+ */
+String events_processor(const String& var);
+
+#endif

Software/src/devboard/webserver/index_html.cpp

@@ -0,0 +1,26 @@
+const char index_html[] = R"rawliteral(
+<!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;}
+    p {font-size: 3.0rem;}
+    body {max-width: 600px; margin:0px 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%
+</script>
+</body>
+</html>
+)rawliteral";