Customized ElegantOTA Web Interface ("Back to Emulator" Button+Firmware Version & Hardware ID)

Software/src/devboard/webserver/webserver.cpp

@@ -1,6 +1,7 @@
 #include "webserver.h"
 #include <Preferences.h>
 #include "../../datalayer/datalayer.h"
+#include "../../lib/bblanchon-ArduinoJson/ArduinoJson.h"
 #include "../utils/events.h"
 #include "../utils/led_handler.h"
 #include "../utils/timer.h"
@@ -34,6 +35,7 @@ unsigned const long MAX_WIFI_RETRY_INTERVAL = 90000;         // Maximum wifi ret
 unsigned long last_wifi_monitor_time = millis();             //init millis so wifi monitor doesn't run immediately
 unsigned long wifi_reconnect_interval = DEFAULT_WIFI_RECONNECT_INTERVAL;
 unsigned long last_wifi_attempt_time = millis();  //init millis so wifi monitor doesn't run immediately
+const char get_firmware_info_html[] = R"rawliteral(%X%)rawliteral";
 
 void init_webserver() {
   // Configure WiFi
@@ -53,6 +55,13 @@ void init_webserver() {
 
   server.on("/logout", HTTP_GET, [](AsyncWebServerRequest* request) { request->send(401); });
 
+  // Route for firmware info from ota update page
+  server.on("/GetFirmwareInfo", HTTP_GET, [](AsyncWebServerRequest* request) {
+    if (WEBSERVER_AUTH_REQUIRED && !request->authenticate(http_username, http_password))
+      return request->requestAuthentication();
+    request->send_P(200, "application/json", get_firmware_info_html, get_firmware_info_processor);
+  });
+
   // Route for root / web page
   server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
     if (WEBSERVER_AUTH_REQUIRED && !request->authenticate(http_username, http_password))
@@ -455,6 +464,24 @@ void init_ElegantOTA() {
   ElegantOTA.onEnd(onOTAEnd);
 }
 
+String get_firmware_info_processor(const String& var) {
+  if (var == "X") {
+    String content = "";
+    static JsonDocument doc;
+#ifdef HW_LILYGO
+    doc["hardware"] = "LilyGo T-CAN485";
+#endif  // HW_LILYGO
+#ifdef HW_STARK
+    doc["hardware"] = "Stark CMR Module";
+#endif  // HW_STARK
+
+    doc["firmware"] = String(version_number);
+    serializeJson(doc, content);
+    return content;
+  }
+  return String();
+}
+
 String processor(const String& var) {
   if (var == "X") {
     String content = "";

Software/src/devboard/webserver/webserver.h

@@ -103,6 +103,7 @@ void init_ElegantOTA();
  * @return String
  */
 String processor(const String& var);
+String get_firmware_info_processor(const String& var);
 
 /**
  * @brief Executes on OTA start 

Software/src/lib/ayushsharma82-ElegantOTA/howtochangeHTML.txt

@@ -0,0 +1,30 @@
+Modifying HTML for the ElegantOTA Library
+
+This guide provides the necessary steps to update and modify the HTML used in the ElegantOTA library. 
+Follow these steps carefully to ensure that your changes are properly integrated.
+
+Steps to Modify the HTML:
+
+1 - Edit the CurrentPlainHTML.txt:
+
+Locate the file CurrentPlainHTML.txt in your project directory.
+Modify the HTML content as needed. This file contains the plain HTML code that will be served through the OTA interface.
+
+Convert the HTML to GZIP and Decimal Format:
+
+Copy the content of the updated CurrentPlainHTML.txt.
+Navigate to the CyberChef tool for encoding and compression.
+Apply the following recipe:
+Gzip with the "Dynamic Huffman Coding" option enabled.
+Convert to Decimal with a comma separator.
+Use this link for the process: https://gchq.github.io/CyberChef/#recipe=Gzip('Dynamic%20Huffman%20Coding','','',false)To_Decimal('Comma',false)
+
+2 - Update the ELEGANT_HTML Array:
+
+Copy the resulting decimal output from CyberChef.
+Replace the existing content of the ELEGANT_HTML array in elop.cpp with the new decimal data from CyberChef.
+
+3 - Adjust the ELEGANT_HTML Array Size:
+
+After updating the ELEGANT_HTML array in both elop.h and elop.cpp, update the array size to match the length of the new output from CyberChef.
+Ensure that the array size reflects the new length of the compressed HTML to avoid errors during compilation.

Software/src/lib/ayushsharma82-ElegantOTA/src/elop.h

@@ -3,6 +3,6 @@
 
 #include <Arduino.h>
 
-extern const uint8_t ELEGANT_HTML[10214];
+extern const uint8_t ELEGANT_HTML[39251];
 
 #endif