Version 2.0.2

Signed-off-by: Lukas Bachschwell <lukas@lbsfilm.at>

.clang-format

@@ -0,0 +1,58 @@
+---
+# Based on Webkit style
+BasedOnStyle: Webkit
+IndentWidth: 4
+ColumnLimit: 120
+---
+Language: Cpp
+Standard: Cpp11
+# Pointers aligned to the left
+DerivePointerAlignment: false
+PointerAlignment: Left
+AccessModifierOffset: -4
+AllowShortFunctionsOnASingleLine: Inline
+AlwaysBreakTemplateDeclarations: true
+BreakBeforeBraces: Custom
+BraceWrapping:
+    AfterClass: true
+    AfterControlStatement: true
+    AfterEnum: true
+    AfterFunction: true
+    AfterNamespace: true
+    AfterStruct: true
+    AfterUnion: true
+    AfterExternBlock: true
+    BeforeCatch: true
+    BeforeElse: true
+    SplitEmptyFunction: false
+    SplitEmptyRecord: false
+    SplitEmptyNamespace: false
+BreakConstructorInitializers: BeforeColon
+CompactNamespaces: false
+ConstructorInitializerAllOnOneLineOrOnePerLine: true
+ConstructorInitializerIndentWidth: 4
+Cpp11BracedListStyle: true
+FixNamespaceComments: true
+IncludeBlocks: Regroup
+IncludeCategories:
+    # C++ standard headers (no .h)
+    - Regex: '<[[:alnum:]_-]+>'
+      Priority: 1
+    # Extenal libraries (with .h)
+    - Regex: '<[[:alnum:]_./-]+>'
+      Priority: 2
+    # Headers from same folder
+    - Regex: '"[[:alnum:]_.-]+"'
+      Priority: 3
+    # Headers from other folders
+    - Regex: '"[[:alnum:]_/.-]+"'
+      Priority: 4
+IndentCaseLabels: false
+NamespaceIndentation: All
+SortIncludes: true
+SortUsingDeclarations: true
+SpaceAfterTemplateKeyword: true
+SpacesInAngles: false
+SpacesInParentheses: false
+SpacesInSquareBrackets: false
+UseTab: Never

data/css/style.css

@@ -12,6 +12,7 @@
 }
 
 .card {
+  min-height: 100px;
   margin-top: 2%;
   border-radius: 6px;
   box-shadow: 0 4px 4px rgba(204, 197, 185, 0.5);
@@ -28,9 +29,7 @@
   }
 }
 
-.card-slider {
+.card-slider {}
-  padding-bottom: 10px;
-}
 
 .turquoise {
   background: #1abc9c;
@@ -80,7 +79,7 @@
   text-align: center;
   color: #ffffff;
   font-weight: 700;
-  line-height: 1;
+  line-height: 1.3;
   margin-bottom: 5px;
   display: inline-block;
   white-space: nowrap;

data/js/controls.js

@@ -557,7 +557,7 @@ function start() {
 
       case UI_TAB:
         $("#tabsnav").append(
-          "<li><a href='#tab" + data.id + "'>" + data.value + "</a></li>"
+          "<li><a onmouseup='tabclick(" + data.id + ")' href='#tab" + data.id + "'>" + data.value + "</a></li>"
         );
         $("#tabscontent").append("<div id='tab" + data.id + "'></div>");
 
@@ -814,6 +814,11 @@ function textchange(number) {
   websock.send("tvalue:" + val + ":" + number);
 }
 
+function tabclick(number) {
+  var val = $("#tab" + number).val();
+  websock.send("tabvalue:" + val + ":" + number);
+}
+
 function selectchange(number) {
   var val = $("#select" + number).val();
   websock.send("svalue:" + val + ":" + number);

examples/prepareFilesystem/prepareFilesystem.ino

@@ -1,11 +1,11 @@
 #include <ESPUI.h>
 
-ESPUIClass ESPUI( Verbosity::VerboseJSON );
+void setup(void)
-
+{
-void setup(void) {
   Serial.begin(115200);
   ESPUI.prepareFileSystem();
 }
 
-void loop() {
+void loop()
+{
 }

library.json

@@ -23,7 +23,7 @@
       "frameworks": "arduino"
     }
   ],
-  "version": "2.0.1",
+  "version": "2.0.2",
   "frameworks": "arduino",
   "platforms": "*"
 }

library.properties

@@ -1,5 +1,5 @@
 name=ESPUI
-version=2.0.1
+version=2.0.2
 author=Lukas Bachschwell
 maintainer=Lukas Bachschwell <lukas@lbsfilm.at>
 sentence=ESP32 and ESP8266 Web Interface Library

src/ESPUI.cpp

@@ -1,48 +1,58 @@
 #include "ESPUI.h"
 
-#include "dataIndexHTML.h"
+#include <functional>
 
-#include "dataNormalizeCSS.h"
+#include <ESPAsyncWebServer.h>
-#include "dataStyleCSS.h"
 
 #include "dataControlsJS.h"
 #include "dataGraphJS.h"
+#include "dataIndexHTML.h"
+#include "dataNormalizeCSS.h"
 #include "dataSliderJS.h"
+#include "dataStyleCSS.h"
 #include "dataTabbedcontentJS.h"
 #include "dataZeptoJS.h"
 
-#include <ESPAsyncWebServer.h>
+uint16_t Control::idCounter = 1;
-#include <functional>
-
-uint16_t Control::idCounter = 0;
 
 // ################# Spiffs functions
 #if defined(ESP32)
 void listDir(const char* dirname, uint8_t levels)
 {
+#if defined(DEBUG_ESPUI)
     if (ESPUI.verbosity)
     {
-    Serial.printf("Listing directory: %s\n", dirname);
+        Serial.printf_P(PSTR("Listing directory: %s\n"), dirname);
     }
+#endif
 
+#if defined(ESP32)
+  File root = SPIFFS.open(dirname);
+#else
   File root = LittleFS.open(dirname);
+#endif
+
 
     if (!root)
     {
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.println("Failed to open directory");
+            Serial.println(F("Failed to open directory"));
         }
+#endif
 
         return;
     }
 
     if (!root.isDirectory())
     {
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.println("Not a directory");
+            Serial.println(F("Not a directory"));
         }
+#endif
 
         return;
     }
@@ -53,11 +63,13 @@ void listDir(const char *dirname, uint8_t levels)
     {
         if (file.isDirectory())
         {
+#if defined(DEBUG_ESPUI)
             if (ESPUI.verbosity)
             {
-        Serial.print("  DIR : ");
+                Serial.print(F("  DIR : "));
                 Serial.println(file.name());
             }
+#endif
 
             if (levels)
             {
@@ -66,13 +78,15 @@ void listDir(const char *dirname, uint8_t levels)
         }
         else
         {
+#if defined(DEBUG_ESPUI)
             if (ESPUI.verbosity)
             {
-        Serial.print("  FILE: ");
+                Serial.print(F("  FILE: "));
                 Serial.print(file.name());
-        Serial.print("  SIZE: ");
+                Serial.print(F("  SIZE: "));
                 Serial.println(file.size());
             }
+#endif
         }
 
         file = root.openNextFile();
@@ -83,16 +97,16 @@ void listDir(const char *dirname, uint8_t levels)
 void listDir(const char* dirname, uint8_t levels)
 {
     // ignoring levels for esp8266
-  Serial.printf("Listing directory: %s\n", dirname);
+    Serial.printf_P(PSTR("Listing directory: %s\n"), dirname);
 
     String str = "";
     Dir dir = LittleFS.openDir("/");
 
     while (dir.next())
     {
-    Serial.print("  FILE: ");
+        Serial.print(F("  FILE: "));
         Serial.print(dir.fileName());
-    Serial.print("  SIZE: ");
+        Serial.print(F("  SIZE: "));
         Serial.println(dir.fileSize());
     }
 }
@@ -101,17 +115,25 @@ void listDir(const char *dirname, uint8_t levels)
 
 void ESPUIClass::list()
 {
-  if (!LittleFS.begin())
+#if defined(ESP32)
+  if (!SPIFFS.begin())
   {
-    Serial.println("SPIFFS Mount Failed");
+    Serial.println(F("SPIFFS Mount Failed"));
     return;
   }
+#else 
+if (!LittleFS.begin())
+  {
+    Serial.println(F("LittleFS Mount Failed"));
+    return;
+  }
+#endif
 
     listDir("/", 1);
 #if defined(ESP32)
 
-  Serial.println(LittleFS.totalBytes());
+  Serial.println(SPIFFS.totalBytes());
-  Serial.println(LittleFS.usedBytes());
+  Serial.println(SPIFFS.usedBytes());
 
 #else
     FSInfo fs_info;
@@ -125,57 +147,79 @@ void ESPUIClass::list()
 
 void deleteFile(const char* path)
 {
-  if (ESPUI.verbosity)
+ #if defined(ESP32)
-  {
+  bool exists = SPIFFS.exists(path);
-    Serial.print(LittleFS.exists(path));
+#else
-  }
+  bool exists = LittleFS.exists(path);
+#endif
 
-  if (!LittleFS.exists(path))
+    if (!exists)
     {
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.printf("File: %s does not exist, not deleting\n", path);
+            Serial.printf_P(PSTR("File: %s does not exist, not deleting\n"), path);
         }
+#endif
 
         return;
     }
 
+#if defined(DEBUG_ESPUI)
     if (ESPUI.verbosity)
     {
-    Serial.printf("Deleting file: %s\n", path);
+        Serial.printf_P(PSTR("Deleting file: %s\n"), path);
     }
+#endif
 
-  if (LittleFS.remove(path))
+#if defined(ESP32)
+  bool didRemove = SPIFFS.remove(path);
+#else
+  bool didRemove = LittleFS.remove(path);
+#endif
+  if (didRemove)
   {
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.println("File deleted");
+            Serial.println(F("File deleted"));
         }
+#endif
     }
     else
     {
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.println("Delete failed");
+            Serial.println(F("Delete failed"));
         }
+#endif
     }
 }
 
 void writeFile(const char* path, const char* data)
 {
+#if defined(DEBUG_ESPUI)
     if (ESPUI.verbosity)
     {
-    Serial.printf("Writing file: %s\n", path);
+        Serial.printf_P(PSTR("Writing file: %s\n"), path);
     }
+#endif
 
+#if defined(ESP32)
+  File file = SPIFFS.open(path, FILE_WRITE);
+#else
   File file = LittleFS.open(path, FILE_WRITE);
+#endif
 
   if (!file)
   {
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.println("Failed to open file for writing");
+            Serial.println(F("Failed to open file for writing"));
         }
+#endif
 
         return;
     }
@@ -184,34 +228,42 @@ void writeFile(const char *path, const char *data)
 
     if (file.print(data))
     {
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.println("File written");
+            Serial.println(F("File written"));
         }
+#endif
     }
     else
     {
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.println("Write failed");
+            Serial.println(F("Write failed"));
         }
+#endif
     }
 
 #else
 
     if (file.print(FPSTR(data)))
     {
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.println("File written");
+            Serial.println(F("File written"));
         }
+#endif
     }
     else
     {
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.println("Write failed");
+            Serial.println(F("Write failed"));
         }
+#endif
     }
 
 #endif
@@ -224,38 +276,46 @@ void ESPUIClass::prepareFileSystem()
 {
     // this function should only be used once
 
+#if defined(DEBUG_ESPUI)
     if (this->verbosity)
     {
-    Serial.println("About to prepare filesystem...");
+        Serial.println(F("About to prepare filesystem..."));
     }
+#endif
 
 #if defined(ESP32)
-  LittleFS.format();
+    SPIFFS.format();
 
-  if (!LittleFS.begin(true))
+    if (!SPIFFS.begin(true))
     {
+#if defined(DEBUG_ESPUI)
         if (this->verbosity)
         {
-      Serial.println("SPIFFS Mount Failed");
+            Serial.println(F("SPIFFS Mount Failed"));
         }
+#endif
 
         return;
     }
 
+#if defined(DEBUG_ESPUI)
     if (this->verbosity)
     {
         listDir("/", 1);
-    Serial.println("SPIFFS Mount ESP32 Done");
+        Serial.println(F("SPIFFS Mount ESP32 Done"));
     }
+#endif
 
 #else
     LittleFS.format();
     LittleFS.begin();
 
+#if defined(DEBUG_ESPUI)
     if (this->verbosity)
     {
-    Serial.println("SPIFFS Mount ESP8266 Done");
+        Serial.println(F("SPIFFS Mount ESP8266 Done"));
     }
+#endif
 
 #endif
 
@@ -270,10 +330,12 @@ void ESPUIClass::prepareFileSystem()
     deleteFile("/js/graph.js");
     deleteFile("/js/tabbedcontent.js");
 
+#if defined(DEBUG_ESPUI)
     if (this->verbosity)
     {
-    Serial.println("Cleanup done");
+        Serial.println(F("Cleanup done"));
     }
+#endif
 
     // Now write
     writeFile("/index.htm", HTML_INDEX);
@@ -288,72 +350,91 @@ void ESPUIClass::prepareFileSystem()
 
     writeFile("/js/tabbedcontent.js", JS_TABBEDCONTENT);
 
+#if defined(DEBUG_ESPUI)
     if (this->verbosity)
     {
-    Serial.println("Done Initializing filesystem :-)");
+        Serial.println(F("Done Initializing filesystem :-)"));
     }
+#endif
 
 #if defined(ESP32)
 
+#if defined(DEBUG_ESPUI)
     if (this->verbosity)
     {
         listDir("/", 1);
     }
+#endif
 
 #endif
 
+#if defined(ESP32)
+  SPIFFS.end();
+#else
   LittleFS.end();
+#endif
 }
 
 // Handle Websockets Communication
-void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len)
+void onWsEvent(
+    AsyncWebSocket* server, AsyncWebSocketClient* client, AwsEventType type, void* arg, uint8_t* data, size_t len)
 {
     switch (type)
     {
     case WS_EVT_DISCONNECT:
     {
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.printf("Disconnected!\n");
+            Serial.print(F("Disconnected!\n"));
         }
+#endif
 
         break;
     }
 
     case WS_EVT_PONG:
     {
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.printf("Received PONG!\n");
+            Serial.print(F("Received PONG!\n"));
         }
+#endif
 
         break;
     }
 
     case WS_EVT_ERROR:
     {
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.printf("WebSocket Error!\n");
+            Serial.print(F("WebSocket Error!\n"));
         }
+#endif
 
         break;
     }
 
     case WS_EVT_CONNECT:
     {
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.print("Connected: ");
+            Serial.print(F("Connected: "));
             Serial.println(client->id());
         }
+#endif
 
         ESPUI.jsonDom(client);
 
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.println("JSON Data Sent to Client!");
+            Serial.println(F("JSON Data Sent to Client!"));
         }
+#endif
     }
     break;
 
@@ -369,117 +450,127 @@ void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventTyp
 
         uint16_t id = msg.substring(msg.lastIndexOf(':') + 1).toInt();
 
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity >= Verbosity::VerboseJSON)
         {
-      Serial.print("WS rec: ");
+            Serial.print(F("WS rec: "));
             Serial.println(msg);
-      Serial.print("WS recognised ID: ");
+            Serial.print(F("WS recognised ID: "));
             Serial.println(id);
         }
+#endif
 
         Control* c = ESPUI.getControl(id);
 
         if (c == nullptr)
         {
+#if defined(DEBUG_ESPUI)
             if (ESPUI.verbosity)
             {
-        Serial.print("No control found for ID ");
+                Serial.print(F("No control found for ID "));
                 Serial.println(id);
             }
+#endif
 
             return;
         }
 
         if (c->callback == nullptr)
         {
+#if defined(DEBUG_ESPUI)
             if (ESPUI.verbosity)
             {
-        Serial.print("No callback found for ID ");
+                Serial.print(F("No callback found for ID "));
                 Serial.println(id);
             }
+#endif
 
             return;
         }
 
-    if (msg.startsWith("bdown:"))
+        if (msg.startsWith(F("bdown:")))
         {
             c->callback(c, B_DOWN);
         }
-    else if (msg.startsWith("bup:"))
+        else if (msg.startsWith(F("bup:")))
         {
             c->callback(c, B_UP);
         }
-    else if (msg.startsWith("pfdown:"))
+        else if (msg.startsWith(F("pfdown:")))
         {
             c->callback(c, P_FOR_DOWN);
         }
-    else if (msg.startsWith("pfup:"))
+        else if (msg.startsWith(F("pfup:")))
         {
             c->callback(c, P_FOR_UP);
         }
-    else if (msg.startsWith("pldown:"))
+        else if (msg.startsWith(F("pldown:")))
         {
             c->callback(c, P_LEFT_DOWN);
         }
-    else if (msg.startsWith("plup:"))
+        else if (msg.startsWith(F("plup:")))
         {
             c->callback(c, P_LEFT_UP);
         }
-    else if (msg.startsWith("prdown:"))
+        else if (msg.startsWith(F("prdown:")))
         {
             c->callback(c, P_RIGHT_DOWN);
         }
-    else if (msg.startsWith("prup:"))
+        else if (msg.startsWith(F("prup:")))
         {
             c->callback(c, P_RIGHT_UP);
         }
-    else if (msg.startsWith("pbdown:"))
+        else if (msg.startsWith(F("pbdown:")))
         {
             c->callback(c, P_BACK_DOWN);
         }
-    else if (msg.startsWith("pbup:"))
+        else if (msg.startsWith(F("pbup:")))
         {
             c->callback(c, P_BACK_UP);
         }
-    else if (msg.startsWith("pcdown:"))
+        else if (msg.startsWith(F("pcdown:")))
         {
             c->callback(c, P_CENTER_DOWN);
         }
-    else if (msg.startsWith("pcup:"))
+        else if (msg.startsWith(F("pcup:")))
         {
             c->callback(c, P_CENTER_UP);
         }
-    else if (msg.startsWith("sactive:"))
+        else if (msg.startsWith(F("sactive:")))
         {
             c->value = "1";
             ESPUI.updateControl(c, client->id());
             c->callback(c, S_ACTIVE);
         }
-    else if (msg.startsWith("sinactive:"))
+        else if (msg.startsWith(F("sinactive:")))
         {
             c->value = "0";
             ESPUI.updateControl(c, client->id());
             c->callback(c, S_INACTIVE);
         }
-    else if (msg.startsWith("slvalue:"))
+        else if (msg.startsWith(F("slvalue:")))
         {
             c->value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':'));
             ESPUI.updateControl(c, client->id());
             c->callback(c, SL_VALUE);
         }
-    else if (msg.startsWith("nvalue:"))
+        else if (msg.startsWith(F("nvalue:")))
         {
             c->value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':'));
             ESPUI.updateControl(c, client->id());
             c->callback(c, N_VALUE);
         }
-    else if (msg.startsWith("tvalue:"))
+        else if (msg.startsWith(F("tvalue:")))
         {
             c->value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':'));
             ESPUI.updateControl(c, client->id());
             c->callback(c, T_VALUE);
         }
-    else if (msg.startsWith("svalue:"))
+        else if (msg.startsWith("tabvalue:"))
+        {
+            c->callback(c, client->id());
+        }        
+        else if (msg.startsWith(F("svalue:")))
         {
             c->value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':'));
             ESPUI.updateControl(c, client->id());
@@ -487,10 +578,12 @@ void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventTyp
         }
         else
         {
+#if defined(DEBUG_ESPUI)
             if (ESPUI.verbosity)
             {
-        Serial.println("Malformated message from the websocket");
+                Serial.println(F("Malformated message from the websocket"));
             }
+#endif
         }
     }
     break;
@@ -500,8 +593,8 @@ void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventTyp
     }
 }
 
-uint16_t ESPUIClass::addControl(ControlType type, const char *label, String value, ControlColor color, uint16_t parentControl,
+uint16_t ESPUIClass::addControl(ControlType type, const char* label, const String& value, ControlColor color,
-                                void (*callback)(Control *, int))
+    uint16_t parentControl, void (*callback)(Control*, int))
 {
     Control* control = new Control(type, label, callback, value, color, parentControl);
 
@@ -571,11 +664,18 @@ bool ESPUIClass::removeControl(uint16_t id, bool force_reload_ui)
     return false;
 }
 
-uint16_t ESPUIClass::label(const char *label, ControlColor color, String value) { return addControl(ControlType::Label, label, value, color); }
+uint16_t ESPUIClass::label(const char* label, ControlColor color, const String& value)
+{
+    return addControl(ControlType::Label, label, value, color);
+}
 
-uint16_t ESPUIClass::graph(const char *label, ControlColor color) { return addControl(ControlType::Graph, label, "", color); }
+uint16_t ESPUIClass::graph(const char* label, ControlColor color)
+{
+    return addControl(ControlType::Graph, label, "", color);
+}
 
-uint16_t ESPUIClass::slider(const char *label, void (*callback)(Control *, int), ControlColor color, int value, int min, int max)
+uint16_t ESPUIClass::slider(
+    const char* label, void (*callback)(Control*, int), ControlColor color, int value, int min, int max)
 {
     uint16_t sliderId = addControl(ControlType::Slider, label, String(value), color, Control::noParent, callback);
     addControl(ControlType::Min, label, String(min), ControlColor::None, sliderId);
@@ -584,7 +684,7 @@ uint16_t ESPUIClass::slider(const char *label, void (*callback)(Control *, int),
     return sliderId;
 }
 
-uint16_t ESPUIClass::button(const char *label, void (*callback)(Control *, int), ControlColor color, String value)
+uint16_t ESPUIClass::button(const char* label, void (*callback)(Control*, int), ControlColor color, const String& value)
 {
     return addControl(ControlType::Button, label, value, color, Control::noParent, callback);
 }
@@ -603,7 +703,8 @@ uint16_t ESPUIClass::padWithCenter(const char *label, void (*callback)(Control *
     return addControl(ControlType::PadWithCenter, label, "", color, Control::noParent, callback);
 }
 
-uint16_t ESPUIClass::number(const char *label, void (*callback)(Control *, int), ControlColor color, int number, int min, int max)
+uint16_t ESPUIClass::number(
+    const char* label, void (*callback)(Control*, int), ControlColor color, int number, int min, int max)
 {
     uint16_t numberId = addControl(ControlType::Number, label, String(number), color, Control::noParent, callback);
     addControl(ControlType::Min, label, String(min), ControlColor::None, numberId);
@@ -624,7 +725,7 @@ uint16_t ESPUIClass::accelerometer(const char *label, void (*callback)(Control *
     return addControl(ControlType::Accel, label, "", color, Control::noParent, callback);
 }
 
-uint16_t ESPUIClass::text(const char *label, void (*callback)(Control *, int), ControlColor color, String value)
+uint16_t ESPUIClass::text(const char* label, void (*callback)(Control*, int), ControlColor color, const String& value)
 {
     return addControl(ControlType::Text, label, value, color, Control::noParent, callback);
 }
@@ -663,17 +764,21 @@ void ESPUIClass::updateControl(Control *control, int clientId)
     root["color"] = (int)control->color;
     serializeJson(document, json);
 
+#if defined(DEBUG_ESPUI)
     if (this->verbosity >= Verbosity::VerboseJSON)
     {
         Serial.println(json);
     }
+#endif
 
     if (clientId < 0)
     {
+#if defined(DEBUG_ESPUI)
         if (this->verbosity >= Verbosity::VerboseJSON)
         {
-      Serial.println("TextAll");
+            Serial.println(F("TextAll"));
         }
+#endif
         this->ws->textAll(json);
         return;
     }
@@ -703,17 +808,19 @@ void ESPUIClass::updateControl(uint16_t id, int clientId)
 
     if (!control)
     {
+#if defined(DEBUG_ESPUI)
         if (this->verbosity)
         {
-      Serial.println(String("Error: There is no control with ID ") + String(id));
+            Serial.printf_P(PSTR("Error: There is no control with ID %d"), id);
         }
+#endif
         return;
     }
 
     updateControl(control, clientId);
 }
 
-void ESPUIClass::updateControlValue(Control *control, String value, int clientId)
+void ESPUIClass::updateControlValue(Control* control, const String& value, int clientId)
 {
     if (!control)
     {
@@ -724,37 +831,63 @@ void ESPUIClass::updateControlValue(Control *control, String value, int clientId
     updateControl(control, clientId);
 }
 
-void ESPUIClass::updateControlValue(uint16_t id, String value, int clientId)
+void ESPUIClass::updateControlValue(uint16_t id, const String& value, int clientId)
 {
     Control* control = getControl(id);
 
     if (!control)
     {
+#if defined(DEBUG_ESPUI)
         if (this->verbosity)
         {
-      Serial.println(String("Error: There is no control with ID ") + String(id));
+            Serial.printf_P(PSTR("Error: There is no control with ID %d"), id);
         }
+#endif
         return;
     }
 
     updateControlValue(control, value, clientId);
 }
 
-void ESPUIClass::print(uint16_t id, String value) { updateControlValue(id, value); }
+void ESPUIClass::print(uint16_t id, const String& value)
+{
+    updateControlValue(id, value);
+}
 
-void ESPUIClass::updateLabel(uint16_t id, String value) { updateControlValue(id, value); }
+void ESPUIClass::updateLabel(uint16_t id, const String& value)
+{
+    updateControlValue(id, value);
+}
 
-void ESPUIClass::updateSlider(uint16_t id, int nValue, int clientId) { updateControlValue(id, String(nValue), clientId); }
+void ESPUIClass::updateSlider(uint16_t id, int nValue, int clientId)
+{
+    updateControlValue(id, String(nValue), clientId);
+}
 
-void ESPUIClass::updateSwitcher(uint16_t id, bool nValue, int clientId) { updateControlValue(id, String(nValue ? "1" : "0"), clientId); }
+void ESPUIClass::updateSwitcher(uint16_t id, bool nValue, int clientId)
+{
+    updateControlValue(id, String(nValue ? "1" : "0"), clientId);
+}
 
-void ESPUIClass::updateNumber(uint16_t id, int number, int clientId) { updateControlValue(id, String(number), clientId); }
+void ESPUIClass::updateNumber(uint16_t id, int number, int clientId)
+{
+    updateControlValue(id, String(number), clientId);
+}
 
-void ESPUIClass::updateText(uint16_t id, String text, int clientId) { updateControlValue(id, text, clientId); }
+void ESPUIClass::updateText(uint16_t id, const String& text, int clientId)
+{
+    updateControlValue(id, text, clientId);
+}
 
-void ESPUIClass::updateSelect(uint16_t id, String text, int clientId) { updateControlValue(id, text, clientId); }
+void ESPUIClass::updateSelect(uint16_t id, const String& text, int clientId)
+{
+    updateControlValue(id, text, clientId);
+}
 
-void ESPUIClass::updateGauge(uint16_t id, int number, int clientId) { updateControlValue(id, String(number), clientId); }
+void ESPUIClass::updateGauge(uint16_t id, int number, int clientId)
+{
+    updateControlValue(id, String(number), clientId);
+}
 
 void ESPUIClass::clearGraph(uint16_t id, int clientId) {}
 
@@ -775,10 +908,12 @@ void ESPUIClass::addGraphPoint(uint16_t id, int nValue, int clientId)
     root["id"] = control->id;
     serializeJson(document, json);
 
+#if defined(DEBUG_ESPUI)
     if (this->verbosity >= Verbosity::VerboseJSON)
     {
         Serial.println(json);
     }
+#endif
 
     if (clientId < 0)
     {
@@ -797,10 +932,12 @@ void ESPUIClass::addGraphPoint(uint16_t id, int nValue, int clientId)
             {
                 this->ws->client(tryId)->text(json);
 
+#if defined(DEBUG_ESPUI)
                 if (this->verbosity >= Verbosity::VerboseJSON)
                 {
                     Serial.println(json);
                 }
+#endif
             }
 
             count++;
@@ -864,10 +1001,12 @@ void ESPUIClass::jsonDom(AsyncWebSocketClient *client)
     // Send as one big bunch
     serializeJson(document, json);
 
+#if defined(DEBUG_ESPUI)
     if (this->verbosity >= Verbosity::VerboseJSON)
     {
         Serial.println(json);
     }
+#endif
 
     if (client != nullptr)
     {
@@ -888,10 +1027,12 @@ void ESPUIClass::jsonReload()
     root["type"] = (int)UI_RELOAD;
     serializeJson(document, json);
 
+#if defined(DEBUG_ESPUI)
     if (this->verbosity >= Verbosity::VerboseJSON)
     {
         Serial.println(json);
     }
+#endif
 
     this->ws->textAll(json);
 }
@@ -914,27 +1055,45 @@ void ESPUIClass::beginSPIFFS(const char *_title, const char *username, const cha
     server = new AsyncWebServer(80);
     ws = new AsyncWebSocket("/ws");
 
-  if (!LittleFS.begin())
+#if defined(ESP32)
+  bool fsBegin = SPIFFS.begin();
+#else
+  bool fsBegin = LittleFS.begin();
+#endif
+  if (!fsBegin)
   {
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.println("SPIFFS Mount Failed, PLEASE CHECK THE README ON HOW TO PREPARE YOUR ESP!!!!!!!");
+            Serial.println(F("SPIFFS Mount Failed, PLEASE CHECK THE README ON HOW TO "
+                             "PREPARE YOUR ESP!!!!!!!"));
         }
+#endif
 
         return;
     }
 
+#if defined(DEBUG_ESPUI)
     if (ESPUI.verbosity)
     {
         listDir("/", 1);
     }
+#endif
 
-  if (!LittleFS.exists("/index.htm"))
+#if defined(ESP32)
+  bool indexExists = SPIFFS.exists("/index.htm");
+#else
+  bool indexExists = LittleFS.exists("/index.htm");
+#endif
+  if (!indexExists)
   {
+#if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-      Serial.println("Please read the README!!!!!!!, Make sure to ESPUI.prepareFileSystem() once in an empty sketch");
+            Serial.println(F("Please read the README!!!!!!!, Make sure to "
+                             "ESPUI.prepareFileSystem() once in an empty sketch"));
         }
+#endif
 
         return;
     }
@@ -948,11 +1107,19 @@ void ESPUIClass::beginSPIFFS(const char *_title, const char *username, const cha
         {
             ws->setAuthentication(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword);
         }
+#if defined(ESP32)
+    server->serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm").setAuthentication(username, password);
+#else
     server->serveStatic("/", LittleFS, "/").setDefaultFile("index.htm").setAuthentication(username, password);
+#endif
   }
   else
   {
+#if defined(ESP32)
+    server->serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm");
+#else
     server->serveStatic("/", LittleFS, "/").setDefaultFile("index.htm");
+#endif
     }
 
     // Heap for general Servertest
@@ -969,10 +1136,12 @@ void ESPUIClass::beginSPIFFS(const char *_title, const char *username, const cha
 
     server->begin();
 
+#if defined(DEBUG_ESPUI)
     if (this->verbosity)
     {
-    Serial.println("UI Initialized");
+        Serial.println(F("UI Initialized"));
     }
+#endif
 }
 
 void ESPUIClass::begin(const char* _title, const char* username, const char* password)
@@ -1018,7 +1187,8 @@ void ESPUIClass::begin(const char *_title, const char *username, const char *pas
             return request->requestAuthentication();
         }
 
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
+        AsyncWebServerResponse* response
+            = request->beginResponse_P(200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
         response->addHeader("Content-Encoding", "gzip");
         request->send(response);
     });
@@ -1029,7 +1199,8 @@ void ESPUIClass::begin(const char *_title, const char *username, const char *pas
             return request->requestAuthentication();
         }
 
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_CONTROLS_GZIP, sizeof(JS_CONTROLS_GZIP));
+        AsyncWebServerResponse* response
+            = request->beginResponse_P(200, "application/javascript", JS_CONTROLS_GZIP, sizeof(JS_CONTROLS_GZIP));
         response->addHeader("Content-Encoding", "gzip");
         request->send(response);
     });
@@ -1040,7 +1211,8 @@ void ESPUIClass::begin(const char *_title, const char *username, const char *pas
             return request->requestAuthentication();
         }
 
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_SLIDER_GZIP, sizeof(JS_SLIDER_GZIP));
+        AsyncWebServerResponse* response
+            = request->beginResponse_P(200, "application/javascript", JS_SLIDER_GZIP, sizeof(JS_SLIDER_GZIP));
         response->addHeader("Content-Encoding", "gzip");
         request->send(response);
     });
@@ -1051,7 +1223,8 @@ void ESPUIClass::begin(const char *_title, const char *username, const char *pas
             return request->requestAuthentication();
         }
 
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_GRAPH_GZIP, sizeof(JS_GRAPH_GZIP));
+        AsyncWebServerResponse* response
+            = request->beginResponse_P(200, "application/javascript", JS_GRAPH_GZIP, sizeof(JS_GRAPH_GZIP));
         response->addHeader("Content-Encoding", "gzip");
         request->send(response);
     });
@@ -1062,7 +1235,8 @@ void ESPUIClass::begin(const char *_title, const char *username, const char *pas
             return request->requestAuthentication();
         }
 
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_TABBEDCONTENT_GZIP, sizeof(JS_TABBEDCONTENT_GZIP));
+        AsyncWebServerResponse* response = request->beginResponse_P(
+            200, "application/javascript", JS_TABBEDCONTENT_GZIP, sizeof(JS_TABBEDCONTENT_GZIP));
         response->addHeader("Content-Encoding", "gzip");
         request->send(response);
     });
@@ -1075,7 +1249,8 @@ void ESPUIClass::begin(const char *_title, const char *username, const char *pas
             return request->requestAuthentication();
         }
 
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "text/css", CSS_STYLE_GZIP, sizeof(CSS_STYLE_GZIP));
+        AsyncWebServerResponse* response
+            = request->beginResponse_P(200, "text/css", CSS_STYLE_GZIP, sizeof(CSS_STYLE_GZIP));
         response->addHeader("Content-Encoding", "gzip");
         request->send(response);
     });
@@ -1086,7 +1261,8 @@ void ESPUIClass::begin(const char *_title, const char *username, const char *pas
             return request->requestAuthentication();
         }
 
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "text/css", CSS_NORMALIZE_GZIP, sizeof(CSS_NORMALIZE_GZIP));
+        AsyncWebServerResponse* response
+            = request->beginResponse_P(200, "text/css", CSS_NORMALIZE_GZIP, sizeof(CSS_NORMALIZE_GZIP));
         response->addHeader("Content-Encoding", "gzip");
         request->send(response);
     });
@@ -1105,12 +1281,17 @@ void ESPUIClass::begin(const char *_title, const char *username, const char *pas
 
     server->begin();
 
+#if defined(DEBUG_ESPUI)
     if (this->verbosity)
     {
-    Serial.println("UI Initialized");
+        Serial.println(F("UI Initialized"));
     }
+#endif
 }
 
-void ESPUIClass::setVerbosity(Verbosity v) { this->verbosity = v; }
+void ESPUIClass::setVerbosity(Verbosity v)
+{
+    this->verbosity = v;
+}
 
 ESPUIClass ESPUI;

src/ESPUI.h

@@ -6,16 +6,15 @@
 
 #include "Arduino.h"
 #include "ArduinoJson.h"
-#include "FS.h"
 #include "stdlib_noniso.h"
 
 #if defined(ESP32)
-
-#include "LittleFS.h"
-#include "WiFi.h"
 #include <AsyncTCP.h>
 #include <ESPAsyncWebServer.h>
 
+#include "SPIFFS.h"
+#include "WiFi.h"
+
 #else
 
 #include <ArduinoOTA.h>
@@ -23,8 +22,8 @@
 #include <ESP8266mDNS.h>
 #include <ESPAsyncTCP.h>
 #include <ESPAsyncWebServer.h>
-#include <LittleFS.h>
 #include <Hash.h>
+#include <LittleFS.h>
 #include <SPIFFSEditor.h>
 
 #define FILE_WRITE "w"
@@ -140,16 +139,29 @@ public:
 
     static constexpr uint16_t noParent = 0xffff;
 
-  Control(ControlType type, const char *label, void (*callback)(Control *, int), String value, ControlColor color,
+    Control(ControlType type, const char* label, void (*callback)(Control*, int), const String& value,
-          uint16_t parentControl = Control::noParent)
+        ControlColor color, uint16_t parentControl = Control::noParent)
-      : type(type), label(label), callback(callback), value(value), color(color), parentControl(parentControl), next(nullptr)
+        : type(type),
+          label(label),
+          callback(callback),
+          value(value),
+          color(color),
+          parentControl(parentControl),
+          next(nullptr)
     {
         id = idCounter++;
     }
 
     Control(const Control& control)
-      : type(control.type), id(control.id), label(control.label), callback(control.callback), value(control.value), color(control.color),
+        : type(control.type),
-        parentControl(control.parentControl), next(control.next) {}
+          id(control.id),
+          label(control.label),
+          callback(control.callback),
+          value(control.value),
+          color(control.color),
+          parentControl(control.parentControl),
+          next(control.next)
+    { }
 
 private:
     static uint16_t idCounter;
@@ -200,31 +212,43 @@ public:
     bool sliderContinuous;
 
     void setVerbosity(Verbosity verbosity);
-  void begin(const char *_title, const char *username = nullptr, const char *password = nullptr);       // Setup server and page in Memorymode
+    void begin(const char* _title, const char* username = nullptr,
-  void beginSPIFFS(const char *_title, const char *username = nullptr, const char *password = nullptr); // Setup server and page in SPIFFSmode
+        const char* password = nullptr); // Setup server and page in Memorymode
+    void beginSPIFFS(const char* _title, const char* username = nullptr,
+        const char* password = nullptr); // Setup server and page in SPIFFSmode
 
-  void prepareFileSystem(); // Initially preps the filesystem and loads a lot of stuff into SPIFFS
+    void prepareFileSystem(); // Initially preps the filesystem and loads a lot of
+                              // stuff into SPIFFS
     void list(); // Lists SPIFFS directory
 
-  uint16_t addControl(ControlType type, const char *label, String value = String(""), ControlColor color = ControlColor::Turquoise, uint16_t parentControl = Control::noParent, void (*callback)(Control *, int) = nullptr);
+    uint16_t addControl(ControlType type, const char* label, const String& value = String(""),
+        ControlColor color = ControlColor::Turquoise, uint16_t parentControl = Control::noParent,
+        void (*callback)(Control*, int) = nullptr);
     bool removeControl(uint16_t id, bool force_reload_ui = false);
 
     // create Elements
-  uint16_t button(const char *label, void (*callback)(Control *, int), ControlColor color, String value = "");         // Create Event Button
+    uint16_t button(const char* label, void (*callback)(Control*, int), ControlColor color,
-  uint16_t switcher(const char *label, void (*callback)(Control *, int), ControlColor color, bool startState = false); // Create Toggle Button
+        const String& value = ""); // Create Event Button
-  uint16_t pad(const char *label, void (*callback)(Control *, int), ControlColor color);                               // Create Pad Control
+    uint16_t switcher(const char* label, void (*callback)(Control*, int), ControlColor color,
-  uint16_t padWithCenter(const char *label, void (*callback)(Control *, int), ControlColor color);                     // Create Pad Control with Centerbutton
+        bool startState = false); // Create Toggle Button
+    uint16_t pad(const char* label, void (*callback)(Control*, int),
+        ControlColor color); // Create Pad Control
+    uint16_t padWithCenter(const char* label, void (*callback)(Control*, int),
+        ControlColor color); // Create Pad Control with Centerbutton
 
     uint16_t slider(const char* label, void (*callback)(Control*, int), ControlColor color, int value, int min = 0,
         int max = 100); // Create Slider Control
     uint16_t number(const char* label, void (*callback)(Control*, int), ControlColor color, int value, int min = 0,
         int max = 100); // Create a Number Input Control
-  uint16_t text(const char *label, void (*callback)(Control *, int), ControlColor color, String value = ""); // Create a Text Input Control
+    uint16_t text(const char* label, void (*callback)(Control*, int), ControlColor color,
+        const String& value = ""); // Create a Text Input Control
 
     // Output only
-  uint16_t label(const char *label, ControlColor color, String value = "");                     // Create Label
+    uint16_t label(const char* label, ControlColor color,
+        const String& value = ""); // Create Label
     uint16_t graph(const char* label, ControlColor color); // Create Graph display
-  uint16_t gauge(const char *label, ControlColor color, int value, int min = 0, int max = 100); // Create Gauge display
+    uint16_t gauge(const char* label, ControlColor color, int value, int min = 0,
+        int max = 100); // Create Gauge display
 
     // Input only
     uint16_t accelerometer(const char* label, void (*callback)(Control*, int), ControlColor color);
@@ -234,19 +258,19 @@ public:
     Control* getControl(uint16_t id);
 
     // Update Elements
-  void updateControlValue(uint16_t id, String value, int clientId = -1);
+    void updateControlValue(uint16_t id, const String& value, int clientId = -1);
-  void updateControlValue(Control *control, String value, int clientId = -1);
+    void updateControlValue(Control* control, const String& value, int clientId = -1);
 
     void updateControl(uint16_t id, int clientId = -1);
     void updateControl(Control* control, int clientId = -1);
 
-  void print(uint16_t id, String value);
+    void print(uint16_t id, const String& value);
-  void updateLabel(uint16_t id, String value);
+    void updateLabel(uint16_t id, const String& value);
     void updateSwitcher(uint16_t id, bool nValue, int clientId = -1);
     void updateSlider(uint16_t id, int nValue, int clientId = -1);
     void updateNumber(uint16_t id, int nValue, int clientId = -1);
-  void updateText(uint16_t id, String nValue, int clientId = -1);
+    void updateText(uint16_t id, const String& nValue, int clientId = -1);
-  void updateSelect(uint16_t id, String nValue, int clientId = -1);
+    void updateSelect(uint16_t id, const String& nValue, int clientId = -1);
     void updateGauge(uint16_t id, int number, int clientId);
 
     void clearGraph(uint16_t id, int clientId = -1);