Bump Version

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

README.md

@@ -32,6 +32,7 @@ The Library runs fine on any kind of **ESP8266** and **ESP32** (NodeMCU Boards,
 - OptionList by @eringerli
 - Public Access to ESPAsyncServer
 - Graph Widget (Persist save graph in local storage #10)
+- Inline CSS styles by @iangray001
 
 ## Further Roadmap
 
@@ -49,6 +50,7 @@ This library is dependent on the following libraries to function properly.
 
 - (_For ESP8266_) [ESPAsyncTCP](https://github.com/me-no-dev/ESPAsyncTCP)
 - (_For ESP32_) [AsyncTCP](https://github.com/me-no-dev/AsyncTCP)
+- (_For ESP32_) [lorol/LittleFS_esp32](https://github.com/lorol/LITTLEFS)
 
 ## How to Install
 
@@ -89,13 +91,13 @@ Go to Sketch>Include Library>Add .zip Library> Select the Downloaded .zip File.
 ## Getting started
 
 ESPUI serves several files to the browser to build up its web interface. This
-can be achieved in 2 ways: _PROGMEM_ or _SPIFFS_
+can be achieved in 2 ways: _PROGMEM_ or _LITTLEFS_
 
 _When `ESPUI.begin()` is called the default is serving files from Memory and
 ESPUI should work out of the box!_
 
 **OPTIONAL:** But if this causes your program to _use too much memory_ you can
-burn the files into the SPIFFS filesystem on the ESP. There are now two ways to
+burn the files into the LITTLEFS filesystem on the ESP. There are now two ways to
 do this: you can either use the ESP file upload tool or you use the library
 function `ESPUI.prepareFileSystem()`
 
@@ -104,7 +106,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
@@ -214,7 +216,17 @@ on creation and a initial value. The name is not changeable once the UI
 initialised.
 
 Labels automatically wrap your text. If you want them to have multiple lines use
-the normal `<br>` tag in the string you print to the label
+the normal `<br>` tag in the string you print to the label.
+
+In fact, because HTML can be used in the label's value, you can make a label display
+images by including an `<img>` tag. 
+
+```
+ ESPUI.label("An Image Label", ControlColor::Peterriver, "<img src='path/to/image'>");
+```
+
+This requires that the client has access to the image in question, either from the internet or a local web server.
+
 
 #### Slider
 
@@ -296,7 +308,7 @@ Then all widgets for the tab need to be added to it by specifying the tab as the
 ### Initialisation of the UI
 
 After all the elements are configured you can use `ESPUI.begin("Some Title");`
-to start the UI interface. (Or `ESPUI.beginSPIFFS("Some Title");` respectively)
+to start the UI interface. (Or `ESPUI.beginLITTLEFS("Some Title");` respectively)
 Make sure you setup a working network connection or AccesPoint **before** (See
 gui.ino example). The web interface can then be used from multiple devices at once and
 also shows an connection status in the top bar.
@@ -342,6 +354,43 @@ If you have many different widgets it might be necessary to adjust the JSON Buff
  ESPUI.begin("ESPUI Control");
 ```
 
+### Inline Styles
+
+You can add custom CSS styles to controls. This allows you to style the UI with custom colors, drop shadows, 
+or other CSS effects. Add styles with the following functions:
+
+```
+ setPanelStyle(uint16_t id, String style);
+ setElementStyle(uint16_t id, String style)
+```
+
+A panel style is applied to the panel on which the UI element is placed, an element style is applied to the element itself. 
+Because CSS inline styles can only style one specific DOM element, for controls made up of multiple elements (like the pad) 
+this is limited. Element styles can be applied to all controls, but will only work correctly for the Button, Label, Slider, 
+Switcher, Number, Text, and Selector. 
+
+Dynamic update of styles is supported. When either of the above functions are called, the control is updated live. This could 
+be used to refect a warning state by changing the color of a button, or for similar effects.
+
+For example, this code will set a control's panel to a random background color:
+
+```
+ char stylecol[30];
+ sprintf(stylecol, "background-color: #%06X;", (unsigned int) random(0x0, 0xFFFFFF));
+ ESPUI.setPanelStyle(switch1, stylecol);
+```
+
+You can get quite creative with this.
+
+![Inline Styles](docs/inlinestyles.gif)
+
+Note: The images in this example are formed by setting a Label to contain an `<img>` tag:
+
+```
+ ESPUI.addControl(ControlType::Label, "Label", "<img src='path/to/image'>", ControlColor::Peterriver);
+```
+
+
 # Notes for Development
 
 If you want to work on the HTML/CSS/JS files, do make changes in the _data_

data/css/style.css

@@ -400,6 +400,11 @@ button {
   background-color: #999999;
 }
 
+button:active {
+  background-color: #666666;
+  transform: translateX(4px) translateY(4px);
+}
+
 /* Main Head Part
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
 

data/js/controls.js

@@ -2,6 +2,8 @@ const UI_INITIAL_GUI = 200;
 const UI_RELOAD = 201;
 const UPDATE_OFFSET = 100;
 
+const UI_EXTEND_GUI = 210;
+
 const UI_TITEL = 0;
 
 const UI_PAD = 1;
@@ -230,6 +232,10 @@ function start() {
     var data = JSON.parse(evt.data);
     var e = document.body;
     var center = "";
+
+    panelStyle = data.hasOwnProperty('panelStyle') ? " style='" + data.panelStyle + "'" : "";
+    elementStyle = data.hasOwnProperty('elementStyle') ? " style='" + data.elementStyle + "'" : "";
+
     switch (data.type) {
       case UI_INITIAL_GUI:
         // Clear current elements
@@ -247,6 +253,16 @@ function start() {
           handleEvent(fauxEvent);
         });
         break;
+
+      case UI_EXTEND_GUI:
+        data.controls.forEach(element => {
+          var fauxEvent = {
+            data: JSON.stringify(element),
+          };
+          handleEvent(fauxEvent);
+        });
+        break;
+      
       case UI_RELOAD:
         window.location.reload();
         break;
@@ -263,10 +279,11 @@ function start() {
         } else {
           parent = $("#row");
         }
+		if (data.visible) {
         parent.append(
-          "<div id='id" +
+          "<div id='id" + 
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -274,11 +291,12 @@ function start() {
             "</h5><hr/>" +
             "<span id='l" +
             data.id +
-            "' class='label label-wrap'>" +
+            "' " + elementStyle + " class='label label-wrap'>" +
             data.value +
             "</span>" +
             "</div>"
         );
+		}
         break;
 
       case UI_BUTTON:
@@ -288,10 +306,11 @@ function start() {
         } else {
           parent = $("#row");
         }
+		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='one columns card tcenter " +
+            "' " + panelStyle + " class='one columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -299,7 +318,7 @@ function start() {
             "</h5><hr/>" +
             "<button id='btn" +
             data.id +
-            "' " +
+            "' " + elementStyle + " " +
             "onmousedown='buttonclick(" +
             data.id +
             ", true)' " +
@@ -319,6 +338,7 @@ function start() {
             buttonclick(data.id, false);
           },
         });
+		}
         break;
 
       case UI_SWITCHER:
@@ -328,10 +348,11 @@ function start() {
         } else {
           parent = $("#row");
         }
+		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='one columns card tcenter " +
+            "' " + panelStyle + " class='one columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -339,7 +360,7 @@ function start() {
             "</h5><hr/>" +
             "<label id='sl" +
             data.id +
-            "' class='switch " +
+            "' " + elementStyle + " class='switch " +
             (data.value == "1" ? "checked" : "") +
             "'>" +
             "<div class='in'><input type='checkbox' id='s" +
@@ -353,6 +374,7 @@ function start() {
             "</div>"
         );
         switcher(data.id, data.value);
+		}
         break;
 
       case UI_CPAD:
@@ -363,10 +385,11 @@ function start() {
         } else {
           parent = $("#row");
         }
+		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -380,28 +403,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," +
@@ -466,7 +489,7 @@ function start() {
             padclick(CENTER, data.id, false);
           },
         });
-
+		}
         break;
 
       //https://codepen.io/seanstopnik/pen/CeLqA
@@ -477,10 +500,11 @@ function start() {
         } else {
           parent = $("#row");
         }
+		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='two columns card tcenter card-slider " +
+            "' " + panelStyle + " class='two columns card tcenter card-slider " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -491,7 +515,7 @@ function start() {
             data.id +
             "' type='range' min='0' max='100' value='" +
             data.value +
-            "' class='range-slider__range'>" +
+            "' " + elementStyle + " class='range-slider__range'>" +
             "<span class='range-slider__value'>" +
             data.value +
             "</span>" +
@@ -499,6 +523,7 @@ function start() {
             "</div>"
         );
         rangeSlider(!sliderContinuous);
+		}
         break;
 
       case UI_NUMBER:
@@ -508,16 +533,17 @@ function start() {
         } else {
           parent = $("#row");
         }
+		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
             data.label +
             "</h5><hr/>" +
-            "<input style='color:black;' id='num" +
+            "<input style='color:black;' " + elementStyle + " id='num" +
             data.id +
             "' type='number' value='" +
             data.value +
@@ -526,6 +552,7 @@ function start() {
             ")' />" +
             "</div>"
         );
+		}
         break;
 
       case UI_TEXT_INPUT:
@@ -535,16 +562,17 @@ function start() {
         } else {
           parent = $("#row");
         }
+		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
             data.label +
             "</h5><hr/>" +
-            "<input style='color:black;' id='text" +
+            "<input style='color:black;' " + elementStyle + " id='text" +
             data.id +
             "' value='" +
             data.value +
@@ -553,9 +581,11 @@ function start() {
             ")' />" +
             "</div>"
         );
+		}
         break;
 
       case UI_TAB:
+		if (data.visible) {
         $("#tabsnav").append(
           "<li><a onmouseup='tabclick(" + data.id + ")' href='#tab" + data.id + "'>" + data.value + "</a></li>"
         );
@@ -574,6 +604,7 @@ function start() {
             }
             e.preventDefault();
           });
+		}
         break;
 
       case UI_SELECT:
@@ -583,22 +614,24 @@ function start() {
         } else {
           parent = $("#row");
         }
+		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
             data.label +
             "</h5><hr/>" +
-            "<select style='color:black;' id='select" +
+            "<select style='color:black;' " + elementStyle + " id='select" +
             data.id +
             "' onchange='selectchange(" +
             data.id +
             ")' />" +
             "</div>"
         );
+		}
         break;
 
       case UI_OPTION:
@@ -651,10 +684,11 @@ function start() {
         } else {
           parent = $("#row");
         }
+		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -671,6 +705,7 @@ function start() {
         );
         graphData[data.id] = restoreGraphData(data.id);
         renderGraphSvg(graphData[data.id], "graph" + data.id);
+		}
         break;
       case ADD_GRAPH_POINT:
         var ts = Math.round(new Date().getTime() / 1000);
@@ -690,10 +725,11 @@ function start() {
         } else {
           parent = $("#row");
         }
+		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -708,6 +744,7 @@ function start() {
             ")' />" +
             "</div>"
         );
+		}
         break;
 
       case UI_ACCEL:
@@ -719,10 +756,11 @@ function start() {
           parent = $("#row");
         }
         hasAccel = true;
+		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -739,30 +777,49 @@ function start() {
         );
 
         requestOrientationPermission();
+		}
         break;
 
       case UPDATE_LABEL:
         $("#l" + data.id).html(data.value);
+        if(data.hasOwnProperty('elementStyle')) {
+          $("#l" + data.id).attr("style", data.elementStyle);
+        }
         break;
 
       case UPDATE_SWITCHER:
         switcher(data.id, data.value == "0" ? 0 : 1);
+        if(data.hasOwnProperty('elementStyle')) {
+          $("#sl" + data.id).attr("style", data.elementStyle);
+        }
         break;
 
       case UPDATE_SLIDER:
         slider_move($("#id" + data.id), data.value, "100", false);
+        if(data.hasOwnProperty('elementStyle')) {
+          $("#sl" + data.id).attr("style", data.elementStyle);
+        }
         break;
 
       case UPDATE_NUMBER:
         $("#num" + data.id).val(data.value);
+        if(data.hasOwnProperty('elementStyle')) {
+          $("#num" + data.id).attr("style", data.elementStyle);
+        }
         break;
 
       case UPDATE_TEXT_INPUT:
         $("#text" + data.id).val(data.value);
+        if(data.hasOwnProperty('elementStyle')) {
+          $("#text" + data.id).attr("style", data.elementStyle);
+        }
         break;
 
       case UPDATE_SELECT:
         $("#select" + data.id).val(data.value);
+        if(data.hasOwnProperty('elementStyle')) {
+          $("#select" + data.id).attr("style", data.elementStyle);
+        }
         break;
 
       case UPDATE_BUTTON:
@@ -771,6 +828,9 @@ function start() {
         break;
       case UPDATE_GAUGE:
         $("#gauge" + data.id).val(data.value);
+        if(data.hasOwnProperty('elementStyle')) {
+          $("#gauge" + data.id).attr("style", data.elementStyle);
+        }
         break;
       case UPDATE_ACCEL:
         break;
@@ -782,6 +842,11 @@ function start() {
 
     if (data.type >= UPDATE_OFFSET && data.type < UI_INITIAL_GUI) {
       var element = $("#id" + data.id);
+
+      if(data.hasOwnProperty('panelStyle')) {
+        $("#id" + data.id).attr("style", data.panelStyle);
+      }
+
       if (data.type == UPDATE_SLIDER) {
         element.removeClass(
           "slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin"
@@ -794,6 +859,11 @@ function start() {
         element.addClass(colorClass(data.color));
       }
     }
+
+    $(".range-slider__range").each(function(){ 
+      $(this)[0].value = $(this).attr("value");
+      $(this).next().html($(this).attr("value"));
+    });
   };
 
   websock.onmessage = handleEvent;
@@ -873,31 +943,24 @@ function switcher(number, state) {
 }
 
 var rangeSlider = function (isDiscrete) {
-  var slider = $(".range-slider"),
+  var range = $(".range-slider__range");
-    range = $(".range-slider__range"),
+  var slidercb = function() {
-    value = $(".range-slider__value");
+    sliderchange($(this).attr("id").replace(/^\D+/g, ""));
+  };
 
-  slider.each(function () {
+  range.on({input: function() {
-    value.each(function () {
+    $(this).next().html(this.value)}
-      var value = $(this).prev().attr("value");
+  });
-      $(this).html(value);
-    });
 
-    if (!isDiscrete) {
+  range.each(function() {
-      range.on({
+    $(this).next().html(this.value);
-        input: function () {
+    if($(this).attr("callbackSet") != "true") {
-          sliderchange($(this).attr("id").replace(/^\D+/g, ""));
+      if (!isDiscrete) {
-        },
+        $(this).on({input: slidercb}); //input fires when dragging
-      });
+      } else {
-    } else {
+        $(this).on({change: slidercb}); //change fires only once released
-      range.on({
+      }
-        input: function () {
+      $(this).attr("callbackSet", "true");
-          $(this).next().html(this.value);
-        },
-        change: function () {
-          sliderchange($(this).attr("id").replace(/^\D+/g, ""));
-        },
-      });
     }
   });
 };

examples/gui-generic-api/gui-generic-api.ino

@@ -2,7 +2,7 @@
 #include <ESPUI.h>
 
 const byte DNS_PORT = 53;
-IPAddress apIP(192, 168, 1, 1);
+IPAddress apIP(192, 168, 4, 1);
 DNSServer dnsServer;
 
 #if defined(ESP32)
@@ -11,252 +11,289 @@ DNSServer dnsServer;
 #include <ESP8266WiFi.h>
 #endif
 
-const char *ssid = "ESPUI";
+const char* ssid = "ESPUI";
-const char *password = "espui";
+const char* password = "espui";
-const char *hostname = "espui";
+const char* hostname = "espui";
 
 uint16_t status;
 uint16_t button1;
 uint16_t millisLabelId;
 uint16_t switchOne;
 
-void numberCall( Control* sender, int type ) {
+void numberCall(Control* sender, int type)
-  Serial.println( sender->value );
+{
+    Serial.println(sender->value);
 }
 
-void textCall(Control *sender, int type) {
+void textCall(Control* sender, int type)
-  Serial.print("Text: ID: ");
+{
-  Serial.print(sender->id);
+    Serial.print("Text: ID: ");
-  Serial.print(", Value: ");
+    Serial.print(sender->id);
-  Serial.println(sender->value);
+    Serial.print(", Value: ");
+    Serial.println(sender->value);
 }
 
-void slider(Control *sender, int type) {
+void slider(Control* sender, int type)
-  Serial.print("Slider: ID: ");
+{
-  Serial.print(sender->id);
+    Serial.print("Slider: ID: ");
-  Serial.print(", Value: ");
+    Serial.print(sender->id);
-  Serial.println(sender->value);
+    Serial.print(", Value: ");
+    Serial.println(sender->value);
 }
 
-void buttonCallback(Control *sender, int type) {
+void buttonCallback(Control* sender, int type)
-  switch (type) {
+{
-  case B_DOWN:
+    switch (type)
-    Serial.println("Button DOWN");
+    {
-    break;
+    case B_DOWN:
+        Serial.println("Button DOWN");
+        break;
 
-  case B_UP:
+    case B_UP:
-    Serial.println("Button UP");
+        Serial.println("Button UP");
-    break;
+        break;
-  }
+    }
 }
 
-void buttonExample(Control *sender, int type) {
+void buttonExample(Control* sender, int type)
-  switch (type) {
+{
-  case B_DOWN:
+    switch (type)
-    Serial.println("Status: Start");
+    {
-    ESPUI.updateControlValue(status, "Start");
+    case B_DOWN:
+        Serial.println("Status: Start");
+        ESPUI.updateControlValue(status, "Start");
 
-    ESPUI.getControl(button1)->color = ControlColor::Carrot;
+        ESPUI.getControl(button1)->color = ControlColor::Carrot;
-    ESPUI.updateControl(button1);
+        ESPUI.updateControl(button1);
-    break;
+        break;
 
-  case B_UP:
+    case B_UP:
-    Serial.println("Status: Stop");
+        Serial.println("Status: Stop");
-    ESPUI.updateControlValue(status, "Stop");
+        ESPUI.updateControlValue(status, "Stop");
 
-    ESPUI.getControl(button1)->color = ControlColor::Peterriver;
+        ESPUI.getControl(button1)->color = ControlColor::Peterriver;
-    ESPUI.updateControl(button1);
+        ESPUI.updateControl(button1);
-    break;
+        break;
-  }
+    }
 }
 
-void padExample(Control *sender, int value) {
+void padExample(Control* sender, int value)
-  switch (value) {
+{
-  case P_LEFT_DOWN:
+    switch (value)
-    Serial.print("left down");
+    {
-    break;
+    case P_LEFT_DOWN:
+        Serial.print("left down");
+        break;
 
-  case P_LEFT_UP:
+    case P_LEFT_UP:
-    Serial.print("left up");
+        Serial.print("left up");
-    break;
+        break;
 
-  case P_RIGHT_DOWN:
+    case P_RIGHT_DOWN:
-    Serial.print("right down");
+        Serial.print("right down");
-    break;
+        break;
 
-  case P_RIGHT_UP:
+    case P_RIGHT_UP:
-    Serial.print("right up");
+        Serial.print("right up");
-    break;
+        break;
 
-  case P_FOR_DOWN:
+    case P_FOR_DOWN:
-    Serial.print("for down");
+        Serial.print("for down");
-    break;
+        break;
 
-  case P_FOR_UP:
+    case P_FOR_UP:
-    Serial.print("for up");
+        Serial.print("for up");
-    break;
+        break;
 
-  case P_BACK_DOWN:
+    case P_BACK_DOWN:
-    Serial.print("back down");
+        Serial.print("back down");
-    break;
+        break;
 
-  case P_BACK_UP:
+    case P_BACK_UP:
-    Serial.print("back up");
+        Serial.print("back up");
-    break;
+        break;
 
-  case P_CENTER_DOWN:
+    case P_CENTER_DOWN:
-    Serial.print("center down");
+        Serial.print("center down");
-    break;
+        break;
 
-  case P_CENTER_UP:
+    case P_CENTER_UP:
-    Serial.print("center up");
+        Serial.print("center up");
-    break;
+        break;
-  }
+    }
 
-  Serial.print(" ");
+    Serial.print(" ");
-  Serial.println(sender->id);
+    Serial.println(sender->id);
 }
 
-void switchExample(Control *sender, int value) {
+void switchExample(Control* sender, int value)
-  switch (value) {
+{
-  case S_ACTIVE:
+    switch (value)
-    Serial.print("Active:");
+    {
-    break;
+    case S_ACTIVE:
+        Serial.print("Active:");
+        break;
 
-  case S_INACTIVE:
+    case S_INACTIVE:
-    Serial.print("Inactive");
+        Serial.print("Inactive");
-    break;
+        break;
-  }
+    }
 
-  Serial.print(" ");
+    Serial.print(" ");
-  Serial.println(sender->id);
+    Serial.println(sender->id);
 }
 
-void selectExample(Control *sender, int value) {
+void selectExample(Control* sender, int value)
-  Serial.print("Select: ID: ");
+{
-  Serial.print(sender->id);
+    Serial.print("Select: ID: ");
-  Serial.print(", Value: ");
+    Serial.print(sender->id);
-  Serial.println(sender->value);
+    Serial.print(", Value: ");
+    Serial.println(sender->value);
 }
 
-void otherSwitchExample(Control *sender, int value) {
+void otherSwitchExample(Control* sender, int value)
-  switch (value) {
+{
-  case S_ACTIVE:
+    switch (value)
-    Serial.print("Active:");
+    {
-    break;
+    case S_ACTIVE:
+        Serial.print("Active:");
+        break;
 
-  case S_INACTIVE:
+    case S_INACTIVE:
-    Serial.print("Inactive");
+        Serial.print("Inactive");
-    break;
+        break;
-  }
+    }
 
-  Serial.print(" ");
+    Serial.print(" ");
-  Serial.println(sender->id);
+    Serial.println(sender->id);
 }
 
-void setup(void) {
+void setup(void)
-  ESPUI.setVerbosity(Verbosity::VerboseJSON);
+{
-  Serial.begin(115200);
+    ESPUI.setVerbosity(Verbosity::VerboseJSON);
+    Serial.begin(115200);
 
 #if defined(ESP32)
-  WiFi.setHostname(hostname);
+    WiFi.setHostname(hostname);
 #else
-  WiFi.hostname(hostname);
+    WiFi.hostname(hostname);
 #endif
 
-  // try to connect to existing network
+    // try to connect to existing network
-  WiFi.begin(ssid, password);
+    WiFi.begin(ssid, password);
-  Serial.print("\n\nTry to connect to existing network");
+    Serial.print("\n\nTry to connect to existing network");
 
-  {
+    {
-    uint8_t timeout = 10;
+        uint8_t timeout = 10;
 
-    // Wait for connection, 5s timeout
+        // Wait for connection, 5s timeout
-    do {
+        do
-      delay(500);
+        {
-      Serial.print(".");
+            delay(500);
-      timeout--;
+            Serial.print(".");
-    } while (timeout && WiFi.status() != WL_CONNECTED);
+            timeout--;
+        } while (timeout && WiFi.status() != WL_CONNECTED);
 
-    // not connected -> create hotspot
+        // not connected -> create hotspot
-    if (WiFi.status() != WL_CONNECTED) {
+        if (WiFi.status() != WL_CONNECTED)
-      Serial.print("\n\nCreating hotspot");
+        {
+            Serial.print("\n\nCreating hotspot");
 
-      WiFi.mode(WIFI_AP);
+            WiFi.mode(WIFI_AP);
-      WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
+            delay(100);
-      WiFi.softAP(ssid);
+            WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
+#if defined(ESP32)
+            uint32_t chipid = 0;
+            for (int i = 0; i < 17; i = i + 8)
+            {
+                chipid |= ((ESP.getEfuseMac() >> (40 - i)) & 0xff) << i;
+            }
+#else
+            uint32_t chipid = ESP.getChipId();
+#endif char ap_ssid[25];
+            snprintf(ap_ssid, 26, "ESPUI-%08X", chipid);
+            WiFi.softAP(ap_ssid);
 
-      timeout = 5;
+            timeout = 5;
 
-      do {
+            do
-        delay(500);
+            {
-        Serial.print(".");
+                delay(500);
-        timeout--;
+                Serial.print(".");
-      } while (timeout);
+                timeout--;
+            } while (timeout);
+        }
     }
-  }
 
-  dnsServer.start(DNS_PORT, "*", apIP);
+    dnsServer.start(DNS_PORT, "*", apIP);
 
-  Serial.println("\n\nWiFi parameters:");
+    Serial.println("\n\nWiFi parameters:");
-  Serial.print("Mode: ");
+    Serial.print("Mode: ");
-  Serial.println(WiFi.getMode() == WIFI_AP ? "Station" : "Client");
+    Serial.println(WiFi.getMode() == WIFI_AP ? "Station" : "Client");
-  Serial.print("IP address: ");
+    Serial.print("IP address: ");
-  Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP());
+    Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP());
 
-  status = ESPUI.addControl(ControlType::Label, "Status:", "Stop", ControlColor::Turquoise);
+    status = ESPUI.addControl(ControlType::Label, "Status:", "Stop", ControlColor::Turquoise);
 
-  uint16_t select1 = ESPUI.addControl(ControlType::Select, "Select:", "", ControlColor::Alizarin, Control::noParent, &selectExample);
+    uint16_t select1 = ESPUI.addControl(
+        ControlType::Select, "Select:", "", ControlColor::Alizarin, Control::noParent, &selectExample);
 
-  ESPUI.addControl(ControlType::Option, "Option1", "Opt1", ControlColor::Alizarin, select1);
+    ESPUI.addControl(ControlType::Option, "Option1", "Opt1", ControlColor::Alizarin, select1);
-  ESPUI.addControl(ControlType::Option, "Option2", "Opt2", ControlColor::Alizarin, select1);
+    ESPUI.addControl(ControlType::Option, "Option2", "Opt2", ControlColor::Alizarin, select1);
-  ESPUI.addControl(ControlType::Option, "Option3", "Opt3", ControlColor::Alizarin, select1);
+    ESPUI.addControl(ControlType::Option, "Option3", "Opt3", ControlColor::Alizarin, select1);
 
-  ESPUI.addControl(ControlType::Text, "Text Test:", "a Text Field", ControlColor::Alizarin, Control::noParent, &textCall);
+    ESPUI.addControl(
+        ControlType::Text, "Text Test:", "a Text Field", ControlColor::Alizarin, Control::noParent, &textCall);
 
-  millisLabelId = ESPUI.addControl(ControlType::Label, "Millis:", "0", ControlColor::Emerald, Control::noParent);
+    millisLabelId = ESPUI.addControl(ControlType::Label, "Millis:", "0", ControlColor::Emerald, Control::noParent);
-  button1 = ESPUI.addControl(ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, Control::noParent, &buttonCallback);
+    button1 = ESPUI.addControl(
-  ESPUI.addControl(ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, Control::noParent, &buttonExample);
+        ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, Control::noParent, &buttonCallback);
-  ESPUI.addControl(ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, Control::noParent, &padExample);
+    ESPUI.addControl(
-  ESPUI.addControl(ControlType::Pad, "Pad without center", "", ControlColor::Carrot, Control::noParent, &padExample);
+        ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, Control::noParent, &buttonExample);
-  switchOne = ESPUI.addControl(ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, Control::noParent, &switchExample);
+    ESPUI.addControl(
-  ESPUI.addControl(ControlType::Switcher, "Switch two", "", ControlColor::None, Control::noParent, &otherSwitchExample);
+        ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, Control::noParent, &padExample);
-  ESPUI.addControl(ControlType::Slider, "Slider one", "30", ControlColor::Alizarin, Control::noParent, &slider);
+    ESPUI.addControl(ControlType::Pad, "Pad without center", "", ControlColor::Carrot, Control::noParent, &padExample);
-  ESPUI.addControl(ControlType::Slider, "Slider two", "100", ControlColor::Alizarin, Control::noParent, &slider);
+    switchOne = ESPUI.addControl(
-  ESPUI.addControl(ControlType::Number, "Number:", "50", ControlColor::Alizarin, Control::noParent, &numberCall);
+        ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, Control::noParent, &switchExample);
+    ESPUI.addControl(
+        ControlType::Switcher, "Switch two", "", ControlColor::None, Control::noParent, &otherSwitchExample);
+    ESPUI.addControl(ControlType::Slider, "Slider one", "30", ControlColor::Alizarin, Control::noParent, &slider);
+    ESPUI.addControl(ControlType::Slider, "Slider two", "100", ControlColor::Alizarin, Control::noParent, &slider);
+    ESPUI.addControl(ControlType::Number, "Number:", "50", ControlColor::Alizarin, Control::noParent, &numberCall);
 
-  /*
+    /*
-   * .begin loads and serves all files from PROGMEM directly.
+     * .begin loads and serves all files from PROGMEM directly.
-   * If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
+     * If you want to serve the files from LITTLEFS use ESPUI.beginLITTLEFS
-   * (.prepareFileSystem has to be run in an empty sketch before)
+     * (.prepareFileSystem has to be run in an empty sketch before)
-   */
+     */
 
-  // Enable this option if you want sliders to be continuous (update during move) and not discrete (update on stop)
+    // Enable this option if you want sliders to be continuous (update during move) and not discrete (update on stop)
-  // ESPUI.sliderContinuous = true;
+    // ESPUI.sliderContinuous = true;
 
-  /*
+    /*
-   * Optionally you can use HTTP BasicAuth. Keep in mind that this is NOT a
+     * Optionally you can use HTTP BasicAuth. Keep in mind that this is NOT a
-   * SECURE way of limiting access.
+     * SECURE way of limiting access.
-   * Anyone who is able to sniff traffic will be able to intercept your password
+     * Anyone who is able to sniff traffic will be able to intercept your password
-   * since it is transmitted in cleartext. Just add a string as username and
+     * since it is transmitted in cleartext. Just add a string as username and
-   * password, for example begin("ESPUI Control", "username", "password")
+     * password, for example begin("ESPUI Control", "username", "password")
-   */
+     */
 
-
+    ESPUI.begin("ESPUI Control");
-  ESPUI.begin("ESPUI Control");
 }
 
-void loop(void) {
+void loop(void)
-  dnsServer.processNextRequest();
+{
+    dnsServer.processNextRequest();
 
-  static long oldTime = 0;
+    static long oldTime = 0;
-  static bool testSwitchState = false;
+    static bool testSwitchState = false;
 
-  if (millis() - oldTime > 5000) {
+    if (millis() - oldTime > 5000)
-    ESPUI.updateControlValue(millisLabelId, String(millis()));
+    {
-    testSwitchState = !testSwitchState;
+        ESPUI.updateControlValue(millisLabelId, String(millis()));
-    ESPUI.updateControlValue(switchOne, testSwitchState ? "1" : "0");
+        testSwitchState = !testSwitchState;
+        ESPUI.updateControlValue(switchOne, testSwitchState ? "1" : "0");
 
-    oldTime = millis();
+        oldTime = millis();
-  }
+    }
 }

examples/gui/gui.ino

@@ -2,7 +2,7 @@
 #include <ESPUI.h>
 
 const byte DNS_PORT = 53;
-IPAddress apIP(192, 168, 1, 1);
+IPAddress apIP(192, 168, 4, 1);
 DNSServer dnsServer;
 
 #if defined(ESP32)
@@ -11,238 +11,270 @@ DNSServer dnsServer;
 #include <ESP8266WiFi.h>
 #endif
 
-const char *ssid = "ESPUI";
+const char* ssid = "ESPUI";
-const char *password = "espui";
+const char* password = "espui";
 
-const char *hostname = "espui";
+const char* hostname = "espui";
 
 int statusLabelId;
 int graphId;
 int millisLabelId;
 int testSwitchId;
 
-void numberCall(Control *sender, int type) { Serial.println(sender->value); }
+void numberCall(Control* sender, int type)
-
+{
-void textCall(Control *sender, int type) {
+    Serial.println(sender->value);
-  Serial.print("Text: ID: ");
-  Serial.print(sender->id);
-  Serial.print(", Value: ");
-  Serial.println(sender->value);
 }
 
-void slider(Control *sender, int type) {
+void textCall(Control* sender, int type)
-  Serial.print("Slider: ID: ");
+{
-  Serial.print(sender->id);
+    Serial.print("Text: ID: ");
-  Serial.print(", Value: ");
+    Serial.print(sender->id);
-  Serial.println(sender->value);
+    Serial.print(", Value: ");
-  // Like all Control Values in ESPUI slider values are Strings. To use them as int simply do this:
+    Serial.println(sender->value);
-  int sliderValueWithOffset = sender->value.toInt() + 100;
-  Serial.print("SliderValue with offset");
-  Serial.println(sliderValueWithOffset);
 }
 
-void buttonCallback(Control *sender, int type) {
+void slider(Control* sender, int type)
-  switch (type) {
+{
-  case B_DOWN:
+    Serial.print("Slider: ID: ");
-    Serial.println("Button DOWN");
+    Serial.print(sender->id);
-    break;
+    Serial.print(", Value: ");
-
+    Serial.println(sender->value);
-  case B_UP:
+    // Like all Control Values in ESPUI slider values are Strings. To use them as int simply do this:
-    Serial.println("Button UP");
+    int sliderValueWithOffset = sender->value.toInt() + 100;
-    break;
+    Serial.print("SliderValue with offset");
-  }
+    Serial.println(sliderValueWithOffset);
 }
 
-void buttonExample(Control *sender, int type) {
+void buttonCallback(Control* sender, int type)
-  switch (type) {
+{
-  case B_DOWN:
+    switch (type)
-    Serial.println("Status: Start");
+    {
-    ESPUI.print(statusLabelId, "Start");
+    case B_DOWN:
-    break;
+        Serial.println("Button DOWN");
+        break;
 
-  case B_UP:
+    case B_UP:
-    Serial.println("Status: Stop");
+        Serial.println("Button UP");
-    ESPUI.print(statusLabelId, "Stop");
+        break;
-    break;
+    }
-  }
-}
-void padExample(Control *sender, int value) {
-  switch (value) {
-  case P_LEFT_DOWN:
-    Serial.print("left down");
-    break;
-
-  case P_LEFT_UP:
-    Serial.print("left up");
-    break;
-
-  case P_RIGHT_DOWN:
-    Serial.print("right down");
-    break;
-
-  case P_RIGHT_UP:
-    Serial.print("right up");
-    break;
-
-  case P_FOR_DOWN:
-    Serial.print("for down");
-    break;
-
-  case P_FOR_UP:
-    Serial.print("for up");
-    break;
-
-  case P_BACK_DOWN:
-    Serial.print("back down");
-    break;
-
-  case P_BACK_UP:
-    Serial.print("back up");
-    break;
-
-  case P_CENTER_DOWN:
-    Serial.print("center down");
-    break;
-
-  case P_CENTER_UP:
-    Serial.print("center up");
-    break;
-  }
-
-  Serial.print(" ");
-  Serial.println(sender->id);
 }
 
-void switchExample(Control *sender, int value) {
+void buttonExample(Control* sender, int type)
-  switch (value) {
+{
-  case S_ACTIVE:
+    switch (type)
-    Serial.print("Active:");
+    {
-    break;
+    case B_DOWN:
+        Serial.println("Status: Start");
+        ESPUI.print(statusLabelId, "Start");
+        break;
 
-  case S_INACTIVE:
+    case B_UP:
-    Serial.print("Inactive");
+        Serial.println("Status: Stop");
-    break;
+        ESPUI.print(statusLabelId, "Stop");
-  }
+        break;
+    }
+}
+void padExample(Control* sender, int value)
+{
+    switch (value)
+    {
+    case P_LEFT_DOWN:
+        Serial.print("left down");
+        break;
 
-  Serial.print(" ");
+    case P_LEFT_UP:
-  Serial.println(sender->id);
+        Serial.print("left up");
+        break;
+
+    case P_RIGHT_DOWN:
+        Serial.print("right down");
+        break;
+
+    case P_RIGHT_UP:
+        Serial.print("right up");
+        break;
+
+    case P_FOR_DOWN:
+        Serial.print("for down");
+        break;
+
+    case P_FOR_UP:
+        Serial.print("for up");
+        break;
+
+    case P_BACK_DOWN:
+        Serial.print("back down");
+        break;
+
+    case P_BACK_UP:
+        Serial.print("back up");
+        break;
+
+    case P_CENTER_DOWN:
+        Serial.print("center down");
+        break;
+
+    case P_CENTER_UP:
+        Serial.print("center up");
+        break;
+    }
+
+    Serial.print(" ");
+    Serial.println(sender->id);
 }
 
-void otherSwitchExample(Control *sender, int value) {
+void switchExample(Control* sender, int value)
-  switch (value) {
+{
-  case S_ACTIVE:
+    switch (value)
-    Serial.print("Active:");
+    {
-    break;
+    case S_ACTIVE:
+        Serial.print("Active:");
+        break;
 
-  case S_INACTIVE:
+    case S_INACTIVE:
-    Serial.print("Inactive");
+        Serial.print("Inactive");
-    break;
+        break;
-  }
+    }
 
-  Serial.print(" ");
+    Serial.print(" ");
-  Serial.println(sender->id);
+    Serial.println(sender->id);
 }
 
-void setup(void) {
+void otherSwitchExample(Control* sender, int value)
-  ESPUI.setVerbosity(Verbosity::VerboseJSON);
+{
-  Serial.begin(115200);
+    switch (value)
+    {
+    case S_ACTIVE:
+        Serial.print("Active:");
+        break;
+
+    case S_INACTIVE:
+        Serial.print("Inactive");
+        break;
+    }
+
+    Serial.print(" ");
+    Serial.println(sender->id);
+}
+
+void setup(void)
+{
+    ESPUI.setVerbosity(Verbosity::VerboseJSON);
+    Serial.begin(115200);
 
 #if defined(ESP32)
-  WiFi.setHostname(hostname);
+    WiFi.setHostname(hostname);
 #else
-  WiFi.hostname(hostname);
+    WiFi.hostname(hostname);
 #endif
 
-  // try to connect to existing network
+    // try to connect to existing network
-  WiFi.begin(ssid, password);
+    WiFi.begin(ssid, password);
-  Serial.print("\n\nTry to connect to existing network");
+    Serial.print("\n\nTry to connect to existing network");
 
-  {
+    {
-    uint8_t timeout = 10;
+        uint8_t timeout = 10;
 
-    // Wait for connection, 5s timeout
+        // Wait for connection, 5s timeout
-    do {
+        do
-      delay(500);
+        {
-      Serial.print(".");
+            delay(500);
-      timeout--;
+            Serial.print(".");
-    } while (timeout && WiFi.status() != WL_CONNECTED);
+            timeout--;
+        } while (timeout && WiFi.status() != WL_CONNECTED);
 
-    // not connected -> create hotspot
+        // not connected -> create hotspot
-    if (WiFi.status() != WL_CONNECTED) {
+        if (WiFi.status() != WL_CONNECTED)
-      Serial.print("\n\nCreating hotspot");
+        {
+            Serial.print("\n\nCreating hotspot");
 
-      WiFi.mode(WIFI_AP);
+            WiFi.mode(WIFI_AP);
-      WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
+            delay(100);
-      WiFi.softAP(ssid);
+            WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
+#if defined(ESP32)
+            uint32_t chipid = 0;
+            for (int i = 0; i < 17; i = i + 8)
+            {
+                chipid |= ((ESP.getEfuseMac() >> (40 - i)) & 0xff) << i;
+            }
+#else
+            uint32_t chipid = ESP.getChipId();
+#endif
+            char ap_ssid[25];
+            snprintf(ap_ssid, 26, "ESPUI-%08X", chipid);
+            WiFi.softAP(ap_ssid);
 
-      timeout = 5;
+            timeout = 5;
 
-      do {
+            do
-        delay(500);
+            {
-        Serial.print(".");
+                delay(500);
-        timeout--;
+                Serial.print(".");
-      } while (timeout);
+                timeout--;
+            } while (timeout);
+        }
     }
-  }
 
-  dnsServer.start(DNS_PORT, "*", apIP);
+    dnsServer.start(DNS_PORT, "*", apIP);
 
-  Serial.println("\n\nWiFi parameters:");
+    Serial.println("\n\nWiFi parameters:");
-  Serial.print("Mode: ");
+    Serial.print("Mode: ");
-  Serial.println(WiFi.getMode() == WIFI_AP ? "Station" : "Client");
+    Serial.println(WiFi.getMode() == WIFI_AP ? "Station" : "Client");
-  Serial.print("IP address: ");
+    Serial.print("IP address: ");
-  Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP());
+    Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP());
 
-  statusLabelId = ESPUI.label("Status:", ControlColor::Turquoise, "Stop");
+    statusLabelId = ESPUI.label("Status:", ControlColor::Turquoise, "Stop");
-  millisLabelId = ESPUI.label("Millis:", ControlColor::Emerald, "0");
+    millisLabelId = ESPUI.label("Millis:", ControlColor::Emerald, "0");
-  ESPUI.button("Push Button", &buttonCallback, ControlColor::Peterriver, "Press");
+    ESPUI.button("Push Button", &buttonCallback, ControlColor::Peterriver, "Press");
-  ESPUI.button("Other Button", &buttonExample, ControlColor::Wetasphalt, "Press");
+    ESPUI.button("Other Button", &buttonExample, ControlColor::Wetasphalt, "Press");
-  ESPUI.padWithCenter("Pad with center", &padExample, ControlColor::Sunflower);
+    ESPUI.padWithCenter("Pad with center", &padExample, ControlColor::Sunflower);
-  ESPUI.pad("Pad without center", &padExample, ControlColor::Carrot);
+    ESPUI.pad("Pad without center", &padExample, ControlColor::Carrot);
-  testSwitchId = ESPUI.switcher("Switch one", &switchExample, ControlColor::Alizarin, false);
+    testSwitchId = ESPUI.switcher("Switch one", &switchExample, ControlColor::Alizarin, false);
-  ESPUI.switcher("Switch two", &otherSwitchExample, ControlColor::None, true);
+    ESPUI.switcher("Switch two", &otherSwitchExample, ControlColor::None, true);
-  ESPUI.slider("Slider one", &slider, ControlColor::Alizarin, 30);
+    ESPUI.slider("Slider one", &slider, ControlColor::Alizarin, 30);
-  ESPUI.slider("Slider two", &slider, ControlColor::None, 100);
+    ESPUI.slider("Slider two", &slider, ControlColor::None, 100);
-  ESPUI.text("Text Test:", &textCall, ControlColor::Alizarin, "a Text Field");
+    ESPUI.text("Text Test:", &textCall, ControlColor::Alizarin, "a Text Field");
-  ESPUI.number("Numbertest", &numberCall, ControlColor::Alizarin, 5, 0, 10);
+    ESPUI.number("Numbertest", &numberCall, ControlColor::Alizarin, 5, 0, 10);
 
-  graphId = ESPUI.graph("Graph Test", ControlColor::Wetasphalt);
+    graphId = ESPUI.graph("Graph Test", ControlColor::Wetasphalt);
 
-  /*
+    /*
-   * .begin loads and serves all files from PROGMEM directly.
+     * .begin loads and serves all files from PROGMEM directly.
-   * If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
+     * If you want to serve the files from LITTLEFS use ESPUI.beginLITTLEFS
-   * (.prepareFileSystem has to be run in an empty sketch before)
+     * (.prepareFileSystem has to be run in an empty sketch before)
-   */
+     */
- 
-  // Enable this option if you want sliders to be continuous (update during move) and not discrete (update on stop)
-  // ESPUI.sliderContinuous = true;
 
-  /*
+    // Enable this option if you want sliders to be continuous (update during move) and not discrete (update on stop)
-   * Optionally you can use HTTP BasicAuth. Keep in mind that this is NOT a
+    // ESPUI.sliderContinuous = true;
-   * SECURE way of limiting access.
-   * Anyone who is able to sniff traffic will be able to intercept your password
-   * since it is transmitted in cleartext. Just add a string as username and
-   * password, for example begin("ESPUI Control", "username", "password")
-   */
 
+    /*
+     * Optionally you can use HTTP BasicAuth. Keep in mind that this is NOT a
+     * SECURE way of limiting access.
+     * Anyone who is able to sniff traffic will be able to intercept your password
+     * since it is transmitted in cleartext. Just add a string as username and
+     * password, for example begin("ESPUI Control", "username", "password")
+     */
 
-  ESPUI.begin("ESPUI Control");
+    ESPUI.begin("ESPUI Control");
 }
 
-void loop(void) {
+void loop(void)
-  dnsServer.processNextRequest();
+{
+    dnsServer.processNextRequest();
 
-  static long oldTime = 0;
+    static long oldTime = 0;
-  static bool testSwitchState = false;
+    static bool testSwitchState = false;
 
-  if (millis() - oldTime > 5000) {
+    if (millis() - oldTime > 5000)
-    ESPUI.print(millisLabelId, String(millis()));
+    {
+        ESPUI.print(millisLabelId, String(millis()));
 
-    ESPUI.addGraphPoint(graphId, random(1, 50));
+        ESPUI.addGraphPoint(graphId, random(1, 50));
 
-    testSwitchState = !testSwitchState;
+        testSwitchState = !testSwitchState;
-    ESPUI.updateSwitcher(testSwitchId, testSwitchState);
+        ESPUI.updateSwitcher(testSwitchId, testSwitchState);
-    
+
-    oldTime = millis();
+        oldTime = millis();
-  }
+    }
-}
+}

examples/tabbedGui/tabbedGui.ino

@@ -2,7 +2,7 @@
 #include <ESPUI.h>
 
 const byte DNS_PORT = 53;
-IPAddress apIP( 192, 168, 1, 1 );
+IPAddress apIP(192, 168, 4, 1);
 DNSServer dnsServer;
 
 #if defined(ESP32)
@@ -19,244 +19,279 @@ uint16_t button1;
 uint16_t switchOne;
 uint16_t status;
 
-void numberCall( Control* sender, int type ) {
+void numberCall(Control* sender, int type)
-  Serial.println( sender->value );
+{
+    Serial.println(sender->value);
 }
 
-void textCall( Control* sender, int type ) {
+void textCall(Control* sender, int type)
-  Serial.print("Text: ID: ");
+{
-  Serial.print(sender->id);
+    Serial.print("Text: ID: ");
-  Serial.print(", Value: ");
+    Serial.print(sender->id);
-  Serial.println( sender->value );}
+    Serial.print(", Value: ");
+    Serial.println(sender->value);
+}
 
-void slider( Control* sender, int type ) {
+void slider(Control* sender, int type)
-  Serial.print("Slider: ID: ");
+{
-  Serial.print(sender->id);
+    Serial.print("Slider: ID: ");
-  Serial.print(", Value: ");
+    Serial.print(sender->id);
-  Serial.println( sender->value );}
+    Serial.print(", Value: ");
+    Serial.println(sender->value);
+}
 
-void buttonCallback( Control* sender, int type ) {
+void buttonCallback(Control* sender, int type)
-  switch ( type ) {
+{
+    switch (type)
+    {
     case B_DOWN:
-      Serial.println( "Button DOWN" );
+        Serial.println("Button DOWN");
-      break;
+        break;
 
     case B_UP:
-      Serial.println( "Button UP" );
+        Serial.println("Button UP");
-      break;
+        break;
-  }
+    }
 }
 
-void buttonExample( Control* sender, int type ) {
+void buttonExample(Control* sender, int type)
-  switch ( type ) {
+{
+    switch (type)
+    {
     case B_DOWN:
-      Serial.println( "Status: Start" );
+        Serial.println("Status: Start");
-      ESPUI.updateControlValue( status, "Start" );
+        ESPUI.updateControlValue(status, "Start");
-    
+
-      ESPUI.getControl( button1 )->color = ControlColor::Carrot;
+        ESPUI.getControl(button1)->color = ControlColor::Carrot;
-      ESPUI.updateControl( button1 );
+        ESPUI.updateControl(button1);
-      break;
+        break;
 
     case B_UP:
-      Serial.println( "Status: Stop" );
+        Serial.println("Status: Stop");
-      ESPUI.updateControlValue( status, "Stop" );
+        ESPUI.updateControlValue(status, "Stop");
-   
+
-      ESPUI.getControl( button1 )->color = ControlColor::Peterriver;
+        ESPUI.getControl(button1)->color = ControlColor::Peterriver;
-      ESPUI.updateControl( button1 );
+        ESPUI.updateControl(button1);
-      break;
+        break;
-  }
+    }
 }
 
-void padExample( Control* sender, int value ) {
+void padExample(Control* sender, int value)
-  switch ( value ) {
+{
+    switch (value)
+    {
     case P_LEFT_DOWN:
-      Serial.print( "left down" );
+        Serial.print("left down");
-      break;
+        break;
 
     case P_LEFT_UP:
-      Serial.print( "left up" );
+        Serial.print("left up");
-      break;
+        break;
 
     case P_RIGHT_DOWN:
-      Serial.print( "right down" );
+        Serial.print("right down");
-      break;
+        break;
 
     case P_RIGHT_UP:
-      Serial.print( "right up" );
+        Serial.print("right up");
-      break;
+        break;
 
     case P_FOR_DOWN:
-      Serial.print( "for down" );
+        Serial.print("for down");
-      break;
+        break;
 
     case P_FOR_UP:
-      Serial.print( "for up" );
+        Serial.print("for up");
-      break;
+        break;
 
     case P_BACK_DOWN:
-      Serial.print( "back down" );
+        Serial.print("back down");
-      break;
+        break;
 
     case P_BACK_UP:
-      Serial.print( "back up" );
+        Serial.print("back up");
-      break;
+        break;
 
     case P_CENTER_DOWN:
-      Serial.print( "center down" );
+        Serial.print("center down");
-      break;
+        break;
 
     case P_CENTER_UP:
-      Serial.print( "center up" );
+        Serial.print("center up");
-      break;
+        break;
-  }
+    }
 
-  Serial.print( " " );
+    Serial.print(" ");
-  Serial.println( sender->id );
+    Serial.println(sender->id);
 }
 
-void switchExample( Control* sender, int value ) {
+void switchExample(Control* sender, int value)
-  switch ( value ) {
+{
+    switch (value)
+    {
     case S_ACTIVE:
-      Serial.print( "Active:" );
+        Serial.print("Active:");
-      break;
+        break;
 
     case S_INACTIVE:
-      Serial.print( "Inactive" );
+        Serial.print("Inactive");
-      break;
+        break;
-  }
+    }
 
-  Serial.print( " " );
+    Serial.print(" ");
-  Serial.println( sender->id );
+    Serial.println(sender->id);
 }
 
-void selectExample( Control* sender, int value ) {
+void selectExample(Control* sender, int value)
-  Serial.print("Select: ID: ");
+{
-  Serial.print(sender->id);
+    Serial.print("Select: ID: ");
-  Serial.print(", Value: ");
+    Serial.print(sender->id);
-  Serial.println( sender->value );
+    Serial.print(", Value: ");
+    Serial.println(sender->value);
 }
 
-void otherSwitchExample( Control* sender, int value ) {
+void otherSwitchExample(Control* sender, int value)
-  switch ( value ) {
+{
+    switch (value)
+    {
     case S_ACTIVE:
-      Serial.print( "Active:" );
+        Serial.print("Active:");
-      break;
+        break;
 
     case S_INACTIVE:
-      Serial.print( "Inactive" );
+        Serial.print("Inactive");
-      break;
+        break;
-  }
+    }
 
-  Serial.print( " " );
+    Serial.print(" ");
-  Serial.println( sender->id );
+    Serial.println(sender->id);
 }
 
-void setup( void ) {
+void setup(void)
-  Serial.begin( 115200 );
+{
+    Serial.begin(115200);
 
 #if defined(ESP32)
-  WiFi.setHostname( hostname );
+    WiFi.setHostname(hostname);
 #else
-  WiFi.hostname( hostname );
+    WiFi.hostname(hostname);
 #endif
 
-  // try to connect to existing network
+    // try to connect to existing network
-  WiFi.begin( ssid, password );
+    WiFi.begin(ssid, password);
-  Serial.print( "\n\nTry to connect to existing network" );
+    Serial.print("\n\nTry to connect to existing network");
 
-  {
+    {
-    uint8_t timeout = 10;
+        uint8_t timeout = 10;
 
-    // Wait for connection, 5s timeout
+        // Wait for connection, 5s timeout
-    do {
+        do
-      delay( 500 );
+        {
-      Serial.print( "." );
+            delay(500);
-      timeout--;
+            Serial.print(".");
-    } while ( timeout && WiFi.status() != WL_CONNECTED );
+            timeout--;
+        } while (timeout && WiFi.status() != WL_CONNECTED);
 
-    // not connected -> create hotspot
+        // not connected -> create hotspot
-    if ( WiFi.status() != WL_CONNECTED ) {
+        if (WiFi.status() != WL_CONNECTED)
-      Serial.print( "\n\nCreating hotspot" );
+        {
+            Serial.print("\n\nCreating hotspot");
 
-      WiFi.mode( WIFI_AP );
+            WiFi.mode(WIFI_AP);
-      WiFi.softAPConfig( apIP, apIP, IPAddress( 255, 255, 255, 0 ) );
+            delay(100);
-      WiFi.softAP( ssid );
+            WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
+#if defined(ESP32)
+            uint32_t chipid = 0;
+            for (int i = 0; i < 17; i = i + 8)
+            {
+                chipid |= ((ESP.getEfuseMac() >> (40 - i)) & 0xff) << i;
+            }
+#else
+            uint32_t chipid = ESP.getChipId();
+#endif
+            char ap_ssid[25];
+            snprintf(ap_ssid, 26, "ESPUI-%08X", chipid);
+            WiFi.softAP(ap_ssid);
 
-      timeout = 5;
+            timeout = 5;
 
-      do {
+            do
-        delay( 500 );
+            {
-        Serial.print( "." );
+                delay(500);
-        timeout--;
+                Serial.print(".");
-      } while ( timeout );
+                timeout--;
+            } while (timeout);
+        }
     }
-  }
 
-  dnsServer.start( DNS_PORT, "*", apIP );
+    dnsServer.start(DNS_PORT, "*", apIP);
 
-  Serial.println( "\n\nWiFi parameters:" );
+    Serial.println("\n\nWiFi parameters:");
-  Serial.print( "Mode: " );
+    Serial.print("Mode: ");
-  Serial.println( WiFi.getMode() == WIFI_AP ? "Station" : "Client" );
+    Serial.println(WiFi.getMode() == WIFI_AP ? "Station" : "Client");
-  Serial.print( "IP address: " );
+    Serial.print("IP address: ");
-  Serial.println( WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP() );
+    Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP());
 
-  uint16_t tab1 = ESPUI.addControl( ControlType::Tab, "Settings 1", "Settings 1" );
+    uint16_t tab1 = ESPUI.addControl(ControlType::Tab, "Settings 1", "Settings 1");
-  uint16_t tab2 = ESPUI.addControl( ControlType::Tab, "Settings 2", "Settings 2" );
+    uint16_t tab2 = ESPUI.addControl(ControlType::Tab, "Settings 2", "Settings 2");
-  uint16_t tab3 = ESPUI.addControl( ControlType::Tab, "Settings 3", "Settings 3" );
+    uint16_t tab3 = ESPUI.addControl(ControlType::Tab, "Settings 3", "Settings 3");
 
-  // shown above all tabs
+    // shown above all tabs
-  status = ESPUI.addControl( ControlType::Label, "Status:", "Stop", ControlColor::Turquoise );
+    status = ESPUI.addControl(ControlType::Label, "Status:", "Stop", ControlColor::Turquoise);
 
-  uint16_t select1 = ESPUI.addControl( ControlType::Select, "Select:", "", ControlColor::Alizarin, tab1, &selectExample );
+    uint16_t select1
-  ESPUI.addControl( ControlType::Option, "Option1", "Opt1", ControlColor::Alizarin, select1 );
+        = ESPUI.addControl(ControlType::Select, "Select:", "", ControlColor::Alizarin, tab1, &selectExample);
-  ESPUI.addControl( ControlType::Option, "Option2", "Opt2", ControlColor::Alizarin, select1 );
+    ESPUI.addControl(ControlType::Option, "Option1", "Opt1", ControlColor::Alizarin, select1);
-  ESPUI.addControl( ControlType::Option, "Option3", "Opt3", ControlColor::Alizarin, select1 );
+    ESPUI.addControl(ControlType::Option, "Option2", "Opt2", ControlColor::Alizarin, select1);
-  
+    ESPUI.addControl(ControlType::Option, "Option3", "Opt3", ControlColor::Alizarin, select1);
-  ESPUI.addControl( ControlType::Text, "Text Test:", "a Text Field", ControlColor::Alizarin, tab1, &textCall );
 
-  // tabbed controls
+    ESPUI.addControl(ControlType::Text, "Text Test:", "a Text Field", ControlColor::Alizarin, tab1, &textCall);
-  ESPUI.addControl( ControlType::Label, "Millis:", "0", ControlColor::Emerald, tab1 );
-  button1 = ESPUI.addControl( ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, tab1, &buttonCallback );
-  ESPUI.addControl( ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, tab1, &buttonExample );
-  ESPUI.addControl( ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, tab2, &padExample );
-  ESPUI.addControl( ControlType::Pad, "Pad without center", "", ControlColor::Carrot, tab3, &padExample );
-  switchOne = ESPUI.addControl( ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, tab3, &switchExample );
-  ESPUI.addControl( ControlType::Switcher, "Switch two", "", ControlColor::None, tab3, &otherSwitchExample );
-  ESPUI.addControl( ControlType::Slider, "Slider one", "30", ControlColor::Alizarin, tab1, &slider );
-  ESPUI.addControl( ControlType::Slider, "Slider two", "100", ControlColor::Alizarin, tab3, &slider );
-  ESPUI.addControl( ControlType::Number, "Number:", "50", ControlColor::Alizarin, tab3, &numberCall );
 
-  /*
+    // tabbed controls
-   * .begin loads and serves all files from PROGMEM directly.
+    ESPUI.addControl(ControlType::Label, "Millis:", "0", ControlColor::Emerald, tab1);
-   * If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
+    button1 = ESPUI.addControl(
-   * (.prepareFileSystem has to be run in an empty sketch before)
+        ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, tab1, &buttonCallback);
-   */
+    ESPUI.addControl(ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, tab1, &buttonExample);
+    ESPUI.addControl(ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, tab2, &padExample);
+    ESPUI.addControl(ControlType::Pad, "Pad without center", "", ControlColor::Carrot, tab3, &padExample);
+    switchOne = ESPUI.addControl(ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, tab3, &switchExample);
+    ESPUI.addControl(ControlType::Switcher, "Switch two", "", ControlColor::None, tab3, &otherSwitchExample);
+    ESPUI.addControl(ControlType::Slider, "Slider one", "30", ControlColor::Alizarin, tab1, &slider);
+    ESPUI.addControl(ControlType::Slider, "Slider two", "100", ControlColor::Alizarin, tab3, &slider);
+    ESPUI.addControl(ControlType::Number, "Number:", "50", ControlColor::Alizarin, tab3, &numberCall);
 
-  // Enable this option if you want sliders to be continuous (update during move) and not discrete (update on stop)
+    /*
-  // ESPUI.sliderContinuous = true;
+     * .begin loads and serves all files from PROGMEM directly.
+     * If you want to serve the files from LITTLEFS use ESPUI.beginLITTLEFS
+     * (.prepareFileSystem has to be run in an empty sketch before)
+     */
 
-  /*
+    // Enable this option if you want sliders to be continuous (update during move) and not discrete (update on stop)
-   * Optionally you can use HTTP BasicAuth. Keep in mind that this is NOT a
+    // ESPUI.sliderContinuous = true;
-   * SECURE way of limiting access.
-   * Anyone who is able to sniff traffic will be able to intercept your password
-   * since it is transmitted in cleartext. Just add a string as username and
-   * password, for example begin("ESPUI Control", "username", "password")
-   */
 
+    /*
+     * Optionally you can use HTTP BasicAuth. Keep in mind that this is NOT a
+     * SECURE way of limiting access.
+     * Anyone who is able to sniff traffic will be able to intercept your password
+     * since it is transmitted in cleartext. Just add a string as username and
+     * password, for example begin("ESPUI Control", "username", "password")
+     */
 
-  ESPUI.begin("ESPUI Control");
+    ESPUI.begin("ESPUI Control");
 }
 
-void loop( void ) {
+void loop(void)
-  dnsServer.processNextRequest();
+{
+    dnsServer.processNextRequest();
 
-  static long oldTime = 0;
+    static long oldTime = 0;
-  static bool switchi = false;
+    static bool switchi = false;
 
-  if ( millis() - oldTime > 5000 ) {
+    if (millis() - oldTime > 5000)
-    switchi = !switchi;
+    {
-    ESPUI.updateControlValue( switchOne, switchi ? "1" : "0" );
+        switchi = !switchi;
+        ESPUI.updateControlValue(switchOne, switchi ? "1" : "0");
 
-    oldTime = millis();
+        oldTime = millis();
-  }
+    }
 }

keywords.txt

@@ -21,6 +21,7 @@ slider	KEYWORD2
 
 begin	KEYWORD2
 beginSPIFFS	KEYWORD2
+beginLITTLEFS	KEYWORD2
 print	KEYWORD2
 updateSwitcher	KEYWORD2
 updateSlider	KEYWORD2

library.json

@@ -6,13 +6,16 @@
     "type": "git",
     "url": "https://github.com/s00500/ESPUI.git"
   },
-  "authors": [{
+  "authors": [
-    "name": "Lukas Bachschwell",
+    {
-    "email": "lukas@lbsfilm.at",
+      "name": "Lukas Bachschwell",
-    "url": "https://lbsfilm.at",
+      "email": "lukas@lbsfilm.at",
-    "maintainer": true
+      "url": "https://lbsfilm.at",
-  }],
+      "maintainer": true
-  "dependencies": [{
+    }
+  ],
+  "dependencies": [
+    {
       "name": "ESP Async WebServer",
       "authors": "Hristo Gochkov",
       "frameworks": "arduino"
@@ -21,9 +24,14 @@
       "name": "ArduinoJson",
       "authors": "Benoit Blanchon",
       "frameworks": "arduino"
+    },
+    {
+      "name": "LittleFS_esp32",
+      "authors": "lorol",
+      "frameworks": "arduino"
     }
   ],
-  "version": "2.0.1",
+  "version": "2.1.0",
   "frameworks": "arduino",
   "platforms": "*"
 }

library.properties

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

pio_examples/gui/.gitignore

@@ -0,0 +1 @@
+.pio

pio_examples/gui/platformio.ini

@@ -0,0 +1,37 @@
+; PlatformIO Project Configuration File
+;
+;   Build options: build flags, source filter
+;   Upload options: custom upload port, speed and extra flags
+;   Library options: dependencies, extra library storages
+;   Advanced options: extra scripting
+;
+; Please visit documentation for the other options and examples
+; https://docs.platformio.org/page/projectconf.html
+
+[platformio]
+src_dir = ./src
+data_dir = ../../data
+
+[env]
+lib_extra_dirs = ../../
+board_build.filesystem = littlefs
+; Additional scripts: Usage: see https://github.com/s00500/ESPUI/issues/144#issuecomment-1005135077
+;extra_scripts =
+;	LittleFSBuilder.py
+
+[env:esp8266]
+platform = espressif8266
+framework = arduino
+board = nodemcuv2
+lib_deps =
+   bblanchon/ArduinoJson @ ^6.18.5
+   me-no-dev/ESP Async WebServer @ ^1.2.3
+
+[env:esp32]
+platform = espressif32
+framework = arduino
+board = esp32dev
+lib_deps =
+   lorol/LittleFS_esp32@^1.0.6
+   bblanchon/ArduinoJson @ ^6.18.5
+   me-no-dev/ESP Async WebServer @ ^1.2.3

pio_examples/gui/src/gui.ino

@@ -0,0 +1,283 @@
+#include <DNSServer.h>
+#include <ESPUI.h>
+
+const byte DNS_PORT = 53;
+IPAddress apIP(192, 168, 4, 1);
+DNSServer dnsServer;
+
+#if defined(ESP32)
+#include <WiFi.h>
+#else
+#include <ESP8266WiFi.h>
+#endif
+
+const char* ssid = "ESPUI";
+const char* password = "espui";
+
+const char* hostname = "espui";
+
+int statusLabelId;
+int graphId;
+int millisLabelId;
+int testSwitchId;
+
+void numberCall(Control* sender, int type)
+{
+    Serial.println(sender->value);
+}
+
+void textCall(Control* sender, int type)
+{
+    Serial.print("Text: ID: ");
+    Serial.print(sender->id);
+    Serial.print(", Value: ");
+    Serial.println(sender->value);
+}
+
+void slider(Control* sender, int type)
+{
+    Serial.print("Slider: ID: ");
+    Serial.print(sender->id);
+    Serial.print(", Value: ");
+    Serial.println(sender->value);
+    // Like all Control Values in ESPUI slider values are Strings. To use them as int simply do this:
+    int sliderValueWithOffset = sender->value.toInt() + 100;
+    Serial.print("SliderValue with offset");
+    Serial.println(sliderValueWithOffset);
+}
+
+void buttonCallback(Control* sender, int type)
+{
+    switch (type)
+    {
+    case B_DOWN:
+        Serial.println("Button DOWN");
+        break;
+
+    case B_UP:
+        Serial.println("Button UP");
+        break;
+    }
+}
+
+void buttonExample(Control* sender, int type)
+{
+    switch (type)
+    {
+    case B_DOWN:
+        Serial.println("Status: Start");
+        ESPUI.print(statusLabelId, "Start");
+        break;
+
+    case B_UP:
+        Serial.println("Status: Stop");
+        ESPUI.print(statusLabelId, "Stop");
+        break;
+    }
+}
+void padExample(Control* sender, int value)
+{
+    switch (value)
+    {
+    case P_LEFT_DOWN:
+        Serial.print("left down");
+        break;
+
+    case P_LEFT_UP:
+        Serial.print("left up");
+        break;
+
+    case P_RIGHT_DOWN:
+        Serial.print("right down");
+        break;
+
+    case P_RIGHT_UP:
+        Serial.print("right up");
+        break;
+
+    case P_FOR_DOWN:
+        Serial.print("for down");
+        break;
+
+    case P_FOR_UP:
+        Serial.print("for up");
+        break;
+
+    case P_BACK_DOWN:
+        Serial.print("back down");
+        break;
+
+    case P_BACK_UP:
+        Serial.print("back up");
+        break;
+
+    case P_CENTER_DOWN:
+        Serial.print("center down");
+        break;
+
+    case P_CENTER_UP:
+        Serial.print("center up");
+        break;
+    }
+
+    Serial.print(" ");
+    Serial.println(sender->id);
+}
+
+void switchExample(Control* sender, int value)
+{
+    switch (value)
+    {
+    case S_ACTIVE:
+        Serial.print("Active:");
+        break;
+
+    case S_INACTIVE:
+        Serial.print("Inactive");
+        break;
+    }
+
+    Serial.print(" ");
+    Serial.println(sender->id);
+}
+
+void otherSwitchExample(Control* sender, int value)
+{
+    switch (value)
+    {
+    case S_ACTIVE:
+        Serial.print("Active:");
+        break;
+
+    case S_INACTIVE:
+        Serial.print("Inactive");
+        break;
+    }
+
+    Serial.print(" ");
+    Serial.println(sender->id);
+}
+
+void setup(void)
+{
+    ESPUI.setVerbosity(Verbosity::VerboseJSON);
+    Serial.begin(115200);
+
+#if defined(ESP32)
+    WiFi.setHostname(hostname);
+#else
+    WiFi.hostname(hostname);
+#endif
+
+    // try to connect to existing network
+    WiFi.begin(ssid, password);
+    Serial.print("\n\nTry to connect to existing network");
+
+    {
+        uint8_t timeout = 10;
+
+        // Wait for connection, 5s timeout
+        do
+        {
+            delay(500);
+            Serial.print(".");
+            timeout--;
+        } while (timeout && WiFi.status() != WL_CONNECTED);
+
+        // not connected -> create hotspot
+        if (WiFi.status() != WL_CONNECTED)
+        {
+            Serial.print("\n\nCreating hotspot");
+
+            WiFi.mode(WIFI_AP);
+            delay(100);
+            WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
+#if defined(ESP32)
+            uint32_t chipid = 0;
+            for (int i = 0; i < 17; i = i + 8)
+            {
+                chipid |= ((ESP.getEfuseMac() >> (40 - i)) & 0xff) << i;
+            }
+#else
+            uint32_t chipid = ESP.getChipId();
+#endif
+
+            char ap_ssid[25];
+            snprintf(ap_ssid, 26, "ESPUI-%08X", chipid);
+            WiFi.softAP(ap_ssid);
+
+            timeout = 5;
+
+            do
+            {
+                delay(500);
+                Serial.print(".");
+                timeout--;
+            } while (timeout);
+        }
+    }
+
+    dnsServer.start(DNS_PORT, "*", apIP);
+
+    Serial.println("\n\nWiFi parameters:");
+    Serial.print("Mode: ");
+    Serial.println(WiFi.getMode() == WIFI_AP ? "Station" : "Client");
+    Serial.print("IP address: ");
+    Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP());
+
+    statusLabelId = ESPUI.label("Status:", ControlColor::Turquoise, "Stop");
+    millisLabelId = ESPUI.label("Millis:", ControlColor::Emerald, "0");
+    ESPUI.button("Push Button", &buttonCallback, ControlColor::Peterriver, "Press");
+    ESPUI.button("Other Button", &buttonExample, ControlColor::Wetasphalt, "Press");
+    ESPUI.padWithCenter("Pad with center", &padExample, ControlColor::Sunflower);
+    ESPUI.pad("Pad without center", &padExample, ControlColor::Carrot);
+    testSwitchId = ESPUI.switcher("Switch one", &switchExample, ControlColor::Alizarin, false);
+    ESPUI.switcher("Switch two", &otherSwitchExample, ControlColor::None, true);
+    ESPUI.slider("Slider one", &slider, ControlColor::Alizarin, 30, 0, 30);
+    ESPUI.slider("Slider two", &slider, ControlColor::None, 100);
+    ESPUI.text("Text Test:", &textCall, ControlColor::Alizarin, "a Text Field");
+    ESPUI.number("Numbertest", &numberCall, ControlColor::Alizarin, 5, 0, 10);
+
+    graphId = ESPUI.graph("Graph Test", ControlColor::Wetasphalt);
+
+    /*
+     * .begin loads and serves all files from PROGMEM directly.
+     * If you want to serve the files from LITTLEFS use ESPUI.beginLITTLEFS
+     * (.prepareFileSystem has to be run in an empty sketch before)
+     */
+
+    // Enable this option if you want sliders to be continuous (update during move) and not discrete (update on stop)
+    // ESPUI.sliderContinuous = true;
+
+    /*
+     * Optionally you can use HTTP BasicAuth. Keep in mind that this is NOT a
+     * SECURE way of limiting access.
+     * Anyone who is able to sniff traffic will be able to intercept your password
+     * since it is transmitted in cleartext. Just add a string as username and
+     * password, for example begin("ESPUI Control", "username", "password")
+     */
+    ESPUI.sliderContinuous = true;
+    ESPUI.begin("ESPUI Control");
+}
+
+void loop(void)
+{
+    dnsServer.processNextRequest();
+
+    static long oldTime = 0;
+    static bool testSwitchState = false;
+    delay(10);
+    return;
+
+    if (millis() - oldTime > 5000)
+    {
+        ESPUI.print(millisLabelId, String(millis()));
+
+        ESPUI.addGraphPoint(graphId, random(1, 50));
+
+        testSwitchState = !testSwitchState;
+        ESPUI.updateSwitcher(testSwitchId, testSwitchState);
+
+        oldTime = millis();
+    }
+}

src/ESPUI.cpp

@@ -15,7 +15,7 @@
 
 uint16_t Control::idCounter = 1;
 
-// ################# Spiffs functions
+// ################# LITTLEFS functions
 #if defined(ESP32)
 void listDir(const char* dirname, uint8_t levels)
 {
@@ -27,12 +27,11 @@ void listDir(const char* dirname, uint8_t levels)
 #endif
 
 #if defined(ESP32)
-  File root = SPIFFS.open(dirname);
+    File root = LITTLEFS.open(dirname);
 #else
-  File root = LittleFS.open(dirname);
+    File root = LittleFS.open(dirname);
 #endif
 
-
     if (!root)
     {
 #if defined(DEBUG_ESPUI)
@@ -116,24 +115,24 @@ void listDir(const char* dirname, uint8_t levels)
 void ESPUIClass::list()
 {
 #if defined(ESP32)
-  if (!SPIFFS.begin())
+    if (!LITTLEFS.begin())
-  {
+    {
-    Serial.println(F("SPIFFS Mount Failed"));
+        Serial.println(F("LITTLEFS Mount Failed"));
-    return;
+        return;
-  }
+    }
-#else 
+#else
-if (!LittleFS.begin())
+    if (!LittleFS.begin())
-  {
+    {
-    Serial.println(F("LittleFS Mount Failed"));
+        Serial.println(F("LittleFS Mount Failed"));
-    return;
+        return;
-  }
+    }
 #endif
 
     listDir("/", 1);
 #if defined(ESP32)
 
-  Serial.println(SPIFFS.totalBytes());
+    Serial.println(LITTLEFS.totalBytes());
-  Serial.println(SPIFFS.usedBytes());
+    Serial.println(LITTLEFS.usedBytes());
 
 #else
     FSInfo fs_info;
@@ -147,10 +146,10 @@ if (!LittleFS.begin())
 
 void deleteFile(const char* path)
 {
- #if defined(ESP32)
+#if defined(ESP32)
-  bool exists = SPIFFS.exists(path);
+    bool exists = LITTLEFS.exists(path);
 #else
-  bool exists = LittleFS.exists(path);
+    bool exists = LittleFS.exists(path);
 #endif
 
     if (!exists)
@@ -173,12 +172,12 @@ void deleteFile(const char* path)
 #endif
 
 #if defined(ESP32)
-  bool didRemove = SPIFFS.remove(path);
+    bool didRemove = LITTLEFS.remove(path);
 #else
-  bool didRemove = LittleFS.remove(path);
+    bool didRemove = LittleFS.remove(path);
 #endif
-  if (didRemove)
+    if (didRemove)
-  {
+    {
 #if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
@@ -207,13 +206,13 @@ void writeFile(const char* path, const char* data)
 #endif
 
 #if defined(ESP32)
-  File file = SPIFFS.open(path, FILE_WRITE);
+    File file = LITTLEFS.open(path, FILE_WRITE);
 #else
-  File file = LittleFS.open(path, FILE_WRITE);
+    File file = LittleFS.open(path, FILE_WRITE);
 #endif
 
-  if (!file)
+    if (!file)
-  {
+    {
 #if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
@@ -270,7 +269,7 @@ void writeFile(const char* path, const char* data)
     file.close();
 }
 
-// end Spiffs functions
+// end LITTLEFS functions
 
 void ESPUIClass::prepareFileSystem()
 {
@@ -284,14 +283,14 @@ void ESPUIClass::prepareFileSystem()
 #endif
 
 #if defined(ESP32)
-    SPIFFS.format();
+    LITTLEFS.format();
 
-    if (!SPIFFS.begin(true))
+    if (!LITTLEFS.begin(true))
     {
 #if defined(DEBUG_ESPUI)
         if (this->verbosity)
         {
-            Serial.println(F("SPIFFS Mount Failed"));
+            Serial.println(F("LITTLEFS Mount Failed"));
         }
 #endif
 
@@ -302,7 +301,7 @@ void ESPUIClass::prepareFileSystem()
     if (this->verbosity)
     {
         listDir("/", 1);
-        Serial.println(F("SPIFFS Mount ESP32 Done"));
+        Serial.println(F("LITTLEFS Mount ESP32 Done"));
     }
 #endif
 
@@ -313,7 +312,7 @@ void ESPUIClass::prepareFileSystem()
 #if defined(DEBUG_ESPUI)
     if (this->verbosity)
     {
-        Serial.println(F("SPIFFS Mount ESP8266 Done"));
+        Serial.println(F("LITTLEFS Mount ESP8266 Done"));
     }
 #endif
 
@@ -369,9 +368,9 @@ void ESPUIClass::prepareFileSystem()
 #endif
 
 #if defined(ESP32)
-  SPIFFS.end();
+    LITTLEFS.end();
 #else
-  LittleFS.end();
+    LittleFS.end();
 #endif
 }
 
@@ -381,8 +380,7 @@ void onWsEvent(
 {
     switch (type)
     {
-    case WS_EVT_DISCONNECT:
+    case WS_EVT_DISCONNECT: {
-    {
 #if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
@@ -393,8 +391,7 @@ void onWsEvent(
         break;
     }
 
-    case WS_EVT_PONG:
+    case WS_EVT_PONG: {
-    {
 #if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
@@ -405,8 +402,7 @@ void onWsEvent(
         break;
     }
 
-    case WS_EVT_ERROR:
+    case WS_EVT_ERROR: {
-    {
 #if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
@@ -417,8 +413,7 @@ void onWsEvent(
         break;
     }
 
-    case WS_EVT_CONNECT:
+    case WS_EVT_CONNECT: {
-    {
 #if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
@@ -438,8 +433,7 @@ void onWsEvent(
     }
     break;
 
-    case WS_EVT_DATA:
+    case WS_EVT_DATA: {
-    {
         String msg = "";
         msg.reserve(len + 1);
 
@@ -569,7 +563,7 @@ void onWsEvent(
         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(':'));
@@ -596,7 +590,7 @@ void onWsEvent(
 uint16_t ESPUIClass::addControl(ControlType type, const char* label, const String& value, ControlColor color,
     uint16_t parentControl, void (*callback)(Control*, int))
 {
-    Control* control = new Control(type, label, callback, value, color, parentControl);
+    Control* control = new Control(type, label, callback, value, color, true, parentControl);
 
     if (this->controls == nullptr)
     {
@@ -761,7 +755,12 @@ void ESPUIClass::updateControl(Control* control, int clientId)
     root["type"] = (int)control->type + ControlType::UpdateOffset;
     root["value"] = control->value;
     root["id"] = control->id;
+    root["visible"] = control->visible;
     root["color"] = (int)control->color;
+    if (control->panelStyle != 0)
+        root["panelStyle"] = control->panelStyle;
+    if (control->elementStyle != 0)
+        root["elementStyle"] = control->elementStyle;
     serializeJson(document, json);
 
 #if defined(DEBUG_ESPUI)
@@ -786,7 +785,7 @@ void ESPUIClass::updateControl(Control* control, int clientId)
     // function like this and it's clients array is private
     int tryId = 0;
 
-    for (int count = 0; count < this->ws->count();)
+    for (size_t count = 0; count < this->ws->count();)
     {
         if (this->ws->hasClient(tryId))
         {
@@ -802,6 +801,26 @@ void ESPUIClass::updateControl(Control* control, int clientId)
     }
 }
 
+void ESPUIClass::setPanelStyle(uint16_t id, String style, int clientId)
+{
+    Control* control = getControl(id);
+    if (control)
+    {
+        control->panelStyle = style;
+        updateControl(control, clientId);
+    }
+}
+
+void ESPUIClass::setElementStyle(uint16_t id, String style, int clientId)
+{
+    Control* control = getControl(id);
+    if (control)
+    {
+        control->elementStyle = style;
+        updateControl(control, clientId);
+    }
+}
+
 void ESPUIClass::updateControl(uint16_t id, int clientId)
 {
     Control* control = getControl(id);
@@ -889,7 +908,7 @@ void ESPUIClass::updateGauge(uint16_t id, int number, int clientId)
     updateControlValue(id, String(number), clientId);
 }
 
-void ESPUIClass::clearGraph(uint16_t id, int clientId) {}
+void ESPUIClass::clearGraph(uint16_t id, int clientId) { }
 
 void ESPUIClass::addGraphPoint(uint16_t id, int nValue, int clientId)
 {
@@ -924,7 +943,7 @@ void ESPUIClass::addGraphPoint(uint16_t id, int nValue, int clientId)
     // function like this and it's clients array is private
     int tryId = 0;
 
-    for (int count = 0; count < this->ws->count();)
+    for (size_t count = 0; count < this->ws->count();)
     {
         if (this->ws->hasClient(tryId))
         {
@@ -954,7 +973,7 @@ sent as one blob at the beginning. Therefore a new type is used as well
 */
 void ESPUIClass::jsonDom(AsyncWebSocketClient* client)
 {
-    String json;
+
     DynamicJsonDocument document(jsonInitialDocumentSize);
     document["type"] = (int)UI_INITIAL_GUI;
     document["sliderContinuous"] = sliderContinuous;
@@ -966,15 +985,55 @@ void ESPUIClass::jsonDom(AsyncWebSocketClient* client)
     titleItem["type"] = (int)UI_TITLE;
     titleItem["label"] = ui_title;
 
-    while (control != nullptr)
+    while (1)
     {
-        JsonObject item = items.createNestedObject();
+        control = prepareJSONChunk(client, control, &items);
+
+        String json;
+        serializeJson(document, json);
+#if defined(DEBUG_ESPUI)
+        if (this->verbosity >= Verbosity::VerboseJSON)
+        {
+            Serial.println("Sending elements --------->");
+            Serial.println(json);
+        }
+#endif
+        if (client != nullptr)
+            client->text(json);
+        else
+            this->ws->textAll(json);
+
+        if (control == nullptr)
+            break;
+
+        document.clear();
+        items.clear();
+        document["type"] = (int)UI_EXTEND_GUI;
+        items = document.createNestedArray("controls");
+    }
+}
+
+/* Prepare a chunk of elements as a single JSON string. If the allowed number of elements is greater than the total
+number this will represent the entire UI and this function will return null. If a control pointer is returned then the
+limit was reached, the currently serialised must be sent, and then processing resumed to send the next chunk. */
+Control* ESPUIClass::prepareJSONChunk(AsyncWebSocketClient* client, Control* control, JsonArray* items)
+{
+    int elementcount = 0;
+
+    while (control != nullptr && elementcount < 10)
+    {
+        JsonObject item = items->createNestedObject();
 
         item["id"] = String(control->id);
         item["type"] = (int)control->type;
         item["label"] = control->label;
         item["value"] = String(control->value);
         item["color"] = (int)control->color;
+        item["visible"] = (int)control->visible;
+        if (control->panelStyle != 0)
+            item["panelStyle"] = String(control->panelStyle);
+        if (control->elementStyle != 0)
+            item["elementStyle"] = String(control->elementStyle);
 
         if (control->parentControl != Control::noParent)
         {
@@ -996,26 +1055,9 @@ void ESPUIClass::jsonDom(AsyncWebSocketClient* client)
         }
 
         control = control->next;
+        elementcount++;
     }
-
+    return control;
-    // Send as one big bunch
-    serializeJson(document, json);
-
-#if defined(DEBUG_ESPUI)
-    if (this->verbosity >= Verbosity::VerboseJSON)
-    {
-        Serial.println(json);
-    }
-#endif
-
-    if (client != nullptr)
-    {
-        client->text(json);
-    }
-    else
-    {
-        this->ws->textAll(json);
-    }
 }
 
 void ESPUIClass::jsonReload()
@@ -1037,7 +1079,13 @@ void ESPUIClass::jsonReload()
     this->ws->textAll(json);
 }
 
-void ESPUIClass::beginSPIFFS(const char* _title, const char* username, const char* password)
+void ESPUIClass::beginSPIFFS(const char* _title, const char* username, const char* password, uint16_t port)
+{
+    // Backwards compatibility wrapper
+    beginLITTLEFS(_title, username, password, port);
+}
+
+void ESPUIClass::beginLITTLEFS(const char* _title, const char* username, const char* password, uint16_t port)
 {
     ui_title = _title;
     this->basicAuthUsername = username;
@@ -1052,20 +1100,20 @@ void ESPUIClass::beginSPIFFS(const char* _title, const char* username, const cha
         basicAuth = true;
     }
 
-    server = new AsyncWebServer(80);
+    server = new AsyncWebServer(port);
     ws = new AsyncWebSocket("/ws");
 
 #if defined(ESP32)
-  bool fsBegin = SPIFFS.begin();
+    bool fsBegin = LITTLEFS.begin();
 #else
-  bool fsBegin = LittleFS.begin();
+    bool fsBegin = LittleFS.begin();
 #endif
-  if (!fsBegin)
+    if (!fsBegin)
-  {
+    {
 #if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
-            Serial.println(F("SPIFFS Mount Failed, PLEASE CHECK THE README ON HOW TO "
+            Serial.println(F("LITTLEFS Mount Failed, PLEASE CHECK THE README ON HOW TO "
                              "PREPARE YOUR ESP!!!!!!!"));
         }
 #endif
@@ -1081,12 +1129,12 @@ void ESPUIClass::beginSPIFFS(const char* _title, const char* username, const cha
 #endif
 
 #if defined(ESP32)
-  bool indexExists = SPIFFS.exists("/index.htm");
+    bool indexExists = LITTLEFS.exists("/index.htm");
 #else
-  bool indexExists = LittleFS.exists("/index.htm");
+    bool indexExists = LittleFS.exists("/index.htm");
 #endif
-  if (!indexExists)
+    if (!indexExists)
-  {
+    {
 #if defined(DEBUG_ESPUI)
         if (ESPUI.verbosity)
         {
@@ -1108,17 +1156,17 @@ 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);
+        server->serveStatic("/", LITTLEFS, "/").setDefaultFile("index.htm").setAuthentication(username, password);
 #else
-    server->serveStatic("/", LittleFS, "/").setDefaultFile("index.htm").setAuthentication(username, password);
+        server->serveStatic("/", LittleFS, "/").setDefaultFile("index.htm").setAuthentication(username, password);
 #endif
-  }
+    }
-  else
+    else
-  {
+    {
 #if defined(ESP32)
-    server->serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm");
+        server->serveStatic("/", LITTLEFS, "/").setDefaultFile("index.htm");
 #else
-    server->serveStatic("/", LittleFS, "/").setDefaultFile("index.htm");
+        server->serveStatic("/", LittleFS, "/").setDefaultFile("index.htm");
 #endif
     }
 
@@ -1129,7 +1177,7 @@ void ESPUIClass::beginSPIFFS(const char* _title, const char* username, const cha
             return request->requestAuthentication();
         }
 
-        request->send(200, "text/plain", String(ESP.getFreeHeap()) + " In SPIFFSmode");
+        request->send(200, "text/plain", String(ESP.getFreeHeap()) + " In LITTLEFS mode");
     });
 
     server->onNotFound([](AsyncWebServerRequest* request) { request->send(404); });
@@ -1144,7 +1192,7 @@ void ESPUIClass::beginSPIFFS(const char* _title, const char* username, const cha
 #endif
 }
 
-void ESPUIClass::begin(const char* _title, const char* username, const char* password)
+void ESPUIClass::begin(const char* _title, const char* username, const char* password, uint16_t port)
 {
     basicAuthUsername = username;
     basicAuthPassword = password;
@@ -1160,7 +1208,7 @@ void ESPUIClass::begin(const char* _title, const char* username, const char* pas
 
     ui_title = _title;
 
-    server = new AsyncWebServer(80);
+    server = new AsyncWebServer(port);
     ws = new AsyncWebSocket("/ws");
 
     ws->onEvent(onWsEvent);

src/ESPUI.h

@@ -11,8 +11,8 @@
 #if defined(ESP32)
 #include <AsyncTCP.h>
 #include <ESPAsyncWebServer.h>
+#include <LITTLEFS.h>
 
-#include "SPIFFS.h"
 #include "WiFi.h"
 
 #else
@@ -24,7 +24,6 @@
 #include <ESPAsyncWebServer.h>
 #include <Hash.h>
 #include <LittleFS.h>
-#include <SPIFFSEditor.h>
 
 #define FILE_WRITE "w"
 
@@ -77,11 +76,13 @@ enum ControlType : uint8_t
     UpdateAccel,
 
     InitialGui = 200,
-    Reload = 201
+    Reload = 201,
+    ExtendGUI = 210
 };
 
 #define UI_INITIAL_GUI ControlType::InitialGui
 #define UI_RELOAD ControlType::Reload
+#define UI_EXTEND_GUI ControlType::ExtendGUI
 
 #define UI_TITLE ControlType::Title
 #define UI_LABEL ControlType::Label
@@ -134,18 +135,22 @@ public:
     void (*callback)(Control*, int);
     String value;
     ControlColor color;
+    bool visible;
     uint16_t parentControl;
+    String panelStyle;
+    String elementStyle;
     Control* next;
 
     static constexpr uint16_t noParent = 0xffff;
 
     Control(ControlType type, const char* label, void (*callback)(Control*, int), const String& value,
-        ControlColor color, uint16_t parentControl = Control::noParent)
+        ControlColor color, bool visible = true, uint16_t parentControl = Control::noParent)
         : type(type),
           label(label),
           callback(callback),
           value(value),
           color(color),
+          visible(visible),
           parentControl(parentControl),
           next(nullptr)
     {
@@ -159,6 +164,7 @@ public:
           callback(control.callback),
           value(control.value),
           color(control.color),
+          visible(control.visible),
           parentControl(control.parentControl),
           next(control.next)
     { }
@@ -212,14 +218,16 @@ public:
     bool sliderContinuous;
 
     void setVerbosity(Verbosity verbosity);
-    void begin(const char* _title, const char* username = nullptr,
+    void begin(const char* _title, const char* username = nullptr, const char* password = nullptr,
-        const char* password = nullptr); // Setup server and page in Memorymode
+        uint16_t port = 80); // Setup server and page in Memorymode
-    void beginSPIFFS(const char* _title, const char* username = nullptr,
+    void beginSPIFFS(const char* _title, const char* username = nullptr, const char* password = nullptr,
-        const char* password = nullptr); // Setup server and page in SPIFFSmode
+        uint16_t port = 80); // Setup server and page in LITTLEFS mode (DEPRECATED, use beginLITTLEFS)
+    void beginLITTLEFS(const char* _title, const char* username = nullptr, const char* password = nullptr,
+        uint16_t port = 80); // Setup server and page in LITTLEFS mode
 
     void prepareFileSystem(); // Initially preps the filesystem and loads a lot of
-                              // stuff into SPIFFS
+                              // stuff into LITTLEFS
-    void list(); // Lists SPIFFS directory
+    void list(); // Lists LITTLEFS directory
 
     uint16_t addControl(ControlType type, const char* label, const String& value = String(""),
         ControlColor color = ControlColor::Turquoise, uint16_t parentControl = Control::noParent,
@@ -276,6 +284,9 @@ public:
     void clearGraph(uint16_t id, int clientId = -1);
     void addGraphPoint(uint16_t id, int nValue, int clientId = -1);
 
+    void setPanelStyle(uint16_t id, String style, int clientId = -1);
+    void setElementStyle(uint16_t id, String style, int clientId = -1);
+
     // Variables
     const char* ui_title = "ESPUI"; // Store UI Title and Header Name
     Control* controls = nullptr;
@@ -291,6 +302,8 @@ private:
     const char* basicAuthUsername = nullptr;
     const char* basicAuthPassword = nullptr;
     bool basicAuth = true;
+
+    Control* prepareJSONChunk(AsyncWebSocketClient* client, Control* control, JsonArray* items);
 };
 
 extern ESPUIClass ESPUI;