Improve webserver page

2025-12-13 01:32:20 +00:00 · 2021-01-30 10:07:17 +00:00
parent b732ade9e1
commit 8f9133bcc2
4 changed files with 203 additions and 18 deletions
--- a/data/index.html
+++ b/data/index.html
@@ -0,0 +1,46 @@
+<html>
+<head>
+    <style>
+        body {
+            background-color: black;
+        }
+        a {
+            display: inline-block;
+            padding: 0.35em 1.2em;
+            border: 0.1em solid #FFFFFF;
+            margin: 0 0.3em 0.3em 0;
+            border-radius: 0.12em;
+            box-sizing: border-box;
+            text-decoration: none;
+            font-family: 'Roboto', sans-serif;
+            font-weight: 300;
+            color: #FFFFFF;
+            text-align: center;
+            transition: all 0.2s;
+            width: 100%;
+        }
+
+        a.active {
+            background-color: grey;
+            color: black;
+        }
+
+        a:hover {
+            color: #000000;
+            background-color: #FFFFFF;
+        }
+
+        @media all and (max-width:30em) {
+            a {
+                display: block;
+                margin: 0.4em auto;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    ~LIST~
+</body>
+
+</html>
--- a/include/ESPTemplateProcessor.h
+++ b/include/ESPTemplateProcessor.h
@@ -0,0 +1,116 @@
+#ifndef ESP_TEMPLATE_PROCESSOR_H
+#define ESP_TEMPLATE_PROCESSOR_H
+
+#ifdef ESP8266
+#define WebServer ESP8266WebServer
+#include <ESP8266WebServer.h>
+#else
+#include <WebServer.h>
+#endif
+
+#include <LittleFS.h>
+
+typedef String ProcessorCallback(const String& key);
+
+class ESPTemplateProcessor {
+  public:
+    ESPTemplateProcessor(WebServer& _server) :
+      server(_server)
+    {
+    }
+
+    bool send(const String& filePath, ProcessorCallback& processor, char bookend = '~', bool silentSerial = false)
+    {
+      // Open file.
+      if(!LittleFS.exists(filePath)) {
+        if(!silentSerial) {
+          Serial.print("Cannot process "); Serial.print(filePath); Serial.println(": Does not exist.");
+        }
+        return false;
+      }
+
+      File file = LittleFS.open(filePath, "r");
+      if (!file) {
+        if(!silentSerial) {
+          Serial.print("Cannot process "); Serial.print(filePath); Serial.println(": Failed to open.");
+        }
+        return false;
+      }
+
+      server.setContentLength(CONTENT_LENGTH_UNKNOWN);
+      server.sendHeader("Content-Type","text/html",true);
+      server.sendHeader("Cache-Control","no-cache");
+      server.send(200);
+      //server.sendContent(<chunk>)
+
+      // Process!
+      static const uint16_t MAX = 100;
+      String buffer;
+      int bufferLen = 0;
+      String keyBuffer;
+      int val;
+      char ch;
+      while ((val = file.read()) != -1) {
+        ch = char(val);
+        
+        // Lookup expansion.
+        if (ch == bookend) {
+          // Clear out buffer.
+          server.sendContent(buffer);
+          buffer = "";
+          bufferLen = 0;
+
+          // Process substitution.
+          keyBuffer = "";
+          bool found = false;
+          while (!found && (val = file.read()) != -1) {
+            ch = char(val);
+            if (ch == bookend) {
+              found = true;
+            } else {
+              keyBuffer += ch;
+            }
+          }
+          
+          // Check for bad exit.
+          if (val == -1 && !found) {
+            if(!silentSerial) {
+              Serial.print("Cannot process "); Serial.print(filePath); Serial.println(": Unable to parse.");
+            }
+            return false;
+          }
+
+          // Get substitution
+          String processed = processor(keyBuffer);
+          if(!silentSerial) {
+            Serial.print("Lookup '"); Serial.print(keyBuffer); Serial.print("' received: "); Serial.println(processed);
+          }
+          server.sendContent(processed);
+        } else {
+          bufferLen++;
+          buffer += ch;
+          if (bufferLen >= MAX) {
+            server.sendContent(buffer);
+            bufferLen = 0;
+            buffer = "";
+          }
+        }
+      }
+
+      if (val == -1) {
+        server.sendContent(buffer);
+        server.sendContent("");
+        return true;
+      } else {
+        if(!silentSerial) {
+          Serial.print("Failed to process '"); Serial.print(filePath); Serial.println("': Didn't reach the end of the file.");
+        }
+      }
+    }
+
+
+  private:
+    WebServer &server;
+};
+
+#endif
--- a/platformio.ini
+++ b/platformio.ini
@@ -11,6 +11,7 @@
 [env:wemos-d1]
 platform = espressif8266
 board = d1
+board_build.filesystem = littlefs
 upload_speed = 460800
 framework = arduino
 lib_deps = 
--- a/src/busylight.cpp
+++ b/src/busylight.cpp
@@ -12,7 +12,9 @@ WiFiClientSecure wifi_secure;
 char current_state[20];

 #ifdef ENABLE_WEBSERVER
+#include <LittleFS.h>
 #include <ESP8266WebServer.h>
+#include "ESPTemplateProcessor.h"
 ESP8266WebServer server;
 #endif

@@ -71,7 +73,7 @@ bool Switch_Status(String name) {
  Serial.println("Switching to " + name);
  for(int j=0; j<STATUSES_COUNT; j++) {
    if (String(statuses[j].name) == name) {
-      Switch_Status(statuses[j]); 
+      Switch_Status(statuses[j]);
      return true;
    }
  }
@@ -79,22 +81,29 @@ bool Switch_Status(String name) {
 }

 #ifdef ENABLE_WEBSERVER
-void IndexPage() {
-  char buffer[1024] = "<html><head><title>Busylight</title></head><body>";
-  for(int j=0; j<STATUSES_COUNT; j++) {
-    strcat(buffer, "<a href=/");
-    strcat(buffer, statuses[j].name);
-    strcat(buffer, ">");
-    strcat(buffer, statuses[j].name); 
-    strcat(buffer, "</a><br/>");
+String ProcessIndexPage(const String& var) {
+  Serial.println(current_state);
+  if (var == "LIST") {
+    String buffer;
+    for(int j=0; j<STATUSES_COUNT; j++) {
+      buffer += "<a href='/";
+      buffer += statuses[j].name;
+      buffer += "'";
+      if (strcmp(statuses[j].name, current_state) == 0) {
+        buffer += " class='active'";
+      }
+      buffer += ">";
+      buffer += statuses[j].name;
+      buffer += "</a><br/>";
+    }
+    return buffer;
  }
-  strcat(buffer, "</body></html>");
-  server.send(200, "text/html", buffer);
 }

 void StatusLookup() {
-  if (Switch_Status(server.uri().substring(1))) { 
-    server.send(204, "text/plain", "OK");
+  if (Switch_Status(server.uri().substring(1))) {
+    server.sendHeader("Location", String("/"), true);
+    server.send ( 302, "text/plain", ""); 
    return;
  }
  server.send(404, "text/plain", "Missing");
@@ -139,13 +148,15 @@ void setup()
  Serial.begin(9600);
  Serial.println("");
  Serial.println("---");
-  
+
+  // Define the output pins
  pinMode(RED_LED_PIN, OUTPUT);
  pinMode(GREEN_LED_PIN, OUTPUT);
  pinMode(BLUE_LED_PIN, OUTPUT);

  Serial.println("Config - Pins: (" + String(RED_LED_PIN) + "," + String(GREEN_LED_PIN) + "," + String(BLUE_LED_PIN) + "), PWM: " + String(PWM_MAX_VALUE));
-  
+
+  // Start Wifi
  WiFi.begin(WIFI_SSID, WIFI_PASS);
  Serial.print("Connecting to " + String(WIFI_SSID));
  while(WiFi.status()!= WL_CONNECTED)
@@ -157,6 +168,7 @@ void setup()
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

+  // Disable inbuilt LED, and go 'offline'
  digitalWrite(LED_BUILTIN, LOW);
  Switch_Status("offline");

@@ -166,9 +178,19 @@ void setup()
 #endif

 #ifdef ENABLE_WEBSERVER
-  server.on("/",IndexPage);
-  server.on("/health", [](){server.send(200,"text/plain","OK");});
-  server.on("/state", [](){server.send(200,"text/plain", current_state);});
+  if(!LittleFS.begin()){
+    Serial.println("An Error has occurred while mounting LittleFS");
+    return;
+  }
+  server.on("/", HTTP_GET, [](){
+    ESPTemplateProcessor(server).send(String("/index.html"), ProcessIndexPage);
+  });
+  server.on("/health", HTTP_GET, [](){
+    server.send(200,"text/plain","OK");
+  });
+  server.on("/state", HTTP_GET, [](){
+    server.send(200,"text/plain", current_state);
+  });
  server.onNotFound(StatusLookup);
  server.begin();
 #endif