Attempt fixing switcher inconsistent state

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

README.md

@@ -104,7 +104,7 @@ function `ESPUI.prepareFileSystem()`
 Just open the example sketch **prepareFileSystem** and run it on the ESP, (give
 it up to 30 seconds, you can see the status on the Serial Monitor), The library
 will create all needed files. Congratulations, you are done, from now on you
-just need to to this again when there is a library update, or when you want to
+just need to do this again when there is a library update, or when you want to
 use another chip :-) Now you can upload your normal sketch, when you do not call
 the `ESPUI.prepareFileSystem()` function the compiler will strip out all the
 unnecessary strings that are already saved in the chip's filesystem and you have

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

@@ -380,28 +380,28 @@ function start() {
             data.id +
             ", false)' id='pf" +
             data.id +
-            "'>▲</a></li>" +
+            "'>&#9650;</a></li>" +
             "<li><a onmousedown='padclick(RIGHT, " +
             data.id +
             ", true)' onmouseup='padclick(RIGHT, " +
             data.id +
             ", false)' id='pr" +
             data.id +
-            "'>▲</a></li>" +
+            "'>&#9650;</a></li>" +
             "<li><a onmousedown='padclick(LEFT, " +
             data.id +
             ", true)' onmouseup='padclick(LEFT, " +
             data.id +
             ", false)' id='pl" +
             data.id +
-            "'>▲</a></li>" +
+            "'>&#9650;</a></li>" +
             "<li><a onmousedown='padclick(DOWN, " +
             data.id +
             ", true)' onmouseup='padclick(DOWN, " +
             data.id +
             ", false)' id='pb" +
             data.id +
-            "'>▲</a></li>" +
+            "'>&#9650;</a></li>" +
             "</ul>" +
             (data.type == UI_CPAD
               ? "<a class='confirm' onmousedown='padclick(CENTER," +
@@ -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>");
 
@@ -799,9 +799,11 @@ function start() {
   websock.onmessage = handleEvent;
 }
 
+var sliderCache = {};
 function sliderchange(number) {
   var val = $("#sl" + number).val();
-  websock.send("slvalue:" + val + ":" + number);
+  sliderCache[number] !== val && websock.send("slvalue:" + val + ":" + number);
+  sliderCache[number] = val;
 }
 
 function numberchange(number) {
@@ -814,6 +816,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);
@@ -854,9 +861,11 @@ function switcher(number, state) {
     if ($("#s" + number).is(":checked")) {
       websock.send("sactive:" + number);
       $("#sl" + number).addClass("checked");
+      $("#sl" + number).prop("checked", true);
     } else {
       websock.send("sinactive:" + number);
       $("#sl" + number).removeClass("checked");
+      $("#sl" + number).prop("checked", false);
     }
   } else if (state == 1) {
     $("#sl" + number).addClass("checked");

data/js/controls.min.js

@@ -80,28 +80,28 @@ data.id+
 data.id+
 ", false)' id='pf"+
 data.id+
-"'>▲</a></li>"+
+"'>&#9650;</a></li>"+
 "<li><a onmousedown='padclick(RIGHT, "+
 data.id+
 ", true)' onmouseup='padclick(RIGHT, "+
 data.id+
 ", false)' id='pr"+
 data.id+
-"'>▲</a></li>"+
+"'>&#9650;</a></li>"+
 "<li><a onmousedown='padclick(LEFT, "+
 data.id+
 ", true)' onmouseup='padclick(LEFT, "+
 data.id+
 ", false)' id='pl"+
 data.id+
-"'>▲</a></li>"+
+"'>&#9650;</a></li>"+
 "<li><a onmousedown='padclick(DOWN, "+
 data.id+
 ", true)' onmouseup='padclick(DOWN, "+
 data.id+
 ", false)' id='pb"+
 data.id+
-"'>▲</a></li>"+
+"'>&#9650;</a></li>"+
 "</ul>"+
 (data.type==UI_CPAD?"<a class='confirm' onmousedown='padclick(CENTER,"+
 data.id+
@@ -162,7 +162,7 @@ data.value+
 "' onchange='textchange("+
 data.id+
 ")' />"+
-"</div>");break;case UI_TAB:$("#tabsnav").append("<li><a href='#tab"+data.id+"'>"+data.value+"</a></li>");$("#tabscontent").append("<div id='tab"+data.id+"'></div>");tabs=$(".tabscontent").tabbedContent({loop:true}).data("api");$("a").filter(function(){return $(this).attr("href")==="#click-to-switch";}).on("click",function(e){var tab=prompt("Tab to switch to (number or id)?");if(!tabs.switchTab(tab)){alert("That tab does not exist :\\");}
+"</div>");break;case UI_TAB:$("#tabsnav").append("<li><a onmouseup='tabclick("+data.id+")' href='#tab"+data.id+"'>"+data.value+"</a></li>");$("#tabscontent").append("<div id='tab"+data.id+"'></div>");tabs=$(".tabscontent").tabbedContent({loop:true}).data("api");$("a").filter(function(){return $(this).attr("href")==="#click-to-switch";}).on("click",function(e){var tab=prompt("Tab to switch to (number or id)?");if(!tabs.switchTab(tab)){alert("That tab does not exist :\\");}
 e.preventDefault();});break;case UI_SELECT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 parent.append("<div id='id"+
 data.id+
@@ -239,11 +239,12 @@ data.id+
 "'></pre>"+
 "</div>");requestOrientationPermission();break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);break;case UPDATE_SLIDER:slider_move($("#id"+data.id),data.value,"100",false);break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);break;case UPDATE_BUTTON:case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);break;case UPDATE_ACCEL:break;default:console.error("Unknown type or event");break;}
 if(data.type>=UPDATE_OFFSET&&data.type<UI_INITIAL_GUI){var element=$("#id"+data.id);if(data.type==UPDATE_SLIDER){element.removeClass("slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin");element.addClass("slider-"+colorClass(data.color));}else{element.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin");element.addClass(colorClass(data.color));}}};websock.onmessage=handleEvent;}
-function sliderchange(number){var val=$("#sl"+number).val();websock.send("slvalue:"+val+":"+number);}
+var sliderCache={};function sliderchange(number){var val=$("#sl"+number).val();sliderCache[number]!==val&&websock.send("slvalue:"+val+":"+number);sliderCache[number]=val;}
 function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);}
 function textchange(number){var val=$("#text"+number).val();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);}
 function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}
 function padclick(type,number,isdown){switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case UP:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case DOWN:if(isdown)websock.send("pbdown:"+number);else websock.send("pbup:"+number);break;case LEFT:if(isdown)websock.send("pldown:"+number);else websock.send("plup:"+number);break;case RIGHT:if(isdown)websock.send("prdown:"+number);else websock.send("prup:"+number);break;}}
-function switcher(number,state){if(state==null){if($("#s"+number).is(":checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}
+function switcher(number,state){if(state==null){if($("#s"+number).is(":checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}
 var rangeSlider=function(isDiscrete){var slider=$(".range-slider"),range=$(".range-slider__range"),value=$(".range-slider__value");slider.each(function(){value.each(function(){var value=$(this).prev().attr("value");$(this).html(value);});if(!isDiscrete){range.on({input:function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));},});}else{range.on({input:function(){$(this).next().html(this.value);},change:function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));},});}});};

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);