Bump Version

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

@@ -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

@@ -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 {
-  padding-bottom: 10px;
-}
+.card-slider {}
 
 .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;
@@ -401,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" + 
             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,11 +581,13 @@ function start() {
             ")' />" +
             "</div>"
         );
+		}
         break;
 
       case UI_TAB:
+		if (data.visible) {
         $("#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>");
 
@@ -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;
@@ -814,6 +884,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);
@@ -868,31 +943,24 @@ function switcher(number, state) {
 }
 
 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 () {
+  var range = $(".range-slider__range");
+  var slidercb = function() {
     sliderchange($(this).attr("id").replace(/^\D+/g, ""));
-        },
+  };
+
+  range.on({input: function() {
+    $(this).next().html(this.value)}
   });
-    } else {
-      range.on({
-        input: function () {
+
+  range.each(function() {
     $(this).next().html(this.value);
-        },
-        change: function () {
-          sliderchange($(this).attr("id").replace(/^\D+/g, ""));
-        },
-      });
+    if($(this).attr("callbackSet") != "true") {
+      if (!isDiscrete) {
+        $(this).on({input: slidercb}); //input fires when dragging
+      } else {
+        $(this).on({change: slidercb}); //change fires only once released
+      }
+      $(this).attr("callbackSet", "true");
     }
   });
 };

data/js/controls.min.js

@@ -1,4 +1,4 @@
-const UI_INITIAL_GUI=200;const UI_RELOAD=201;const UPDATE_OFFSET=100;const UI_TITEL=0;const UI_PAD=1;const UPDATE_PAD=101;const UI_CPAD=2;const UPDATE_CPAD=102;const UI_BUTTON=3;const UPDATE_BUTTON=103;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const UI_TAB=11;const UPDATE_TAB=111;const UI_SELECT=12;const UPDATE_SELECT=112;const UI_OPTION=13;const UPDATE_OPTION=113;const UI_MIN=14;const UPDATE_MIN=114;const UI_MAX=15;const UPDATE_MAX=115;const UI_STEP=16;const UPDATE_STEP=116;const UI_GAUGE=17;const UPDATE_GAUGE=117;const UI_ACCEL=18;const UPTDATE_ACCEL=117;const UP=0;const DOWN=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_DARK=7;const C_NONE=255;var graphData=new Array();var hasAccel=false;var sliderContinuous=false;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";default:return"";}}
+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;const UPDATE_PAD=101;const UI_CPAD=2;const UPDATE_CPAD=102;const UI_BUTTON=3;const UPDATE_BUTTON=103;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const UI_TAB=11;const UPDATE_TAB=111;const UI_SELECT=12;const UPDATE_SELECT=112;const UI_OPTION=13;const UPDATE_OPTION=113;const UI_MIN=14;const UPDATE_MIN=114;const UI_MAX=15;const UPDATE_MAX=115;const UI_STEP=16;const UPDATE_STEP=116;const UI_GAUGE=17;const UPDATE_GAUGE=117;const UI_ACCEL=18;const UPTDATE_ACCEL=117;const UP=0;const DOWN=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_DARK=7;const C_NONE=255;var graphData=new Array();var hasAccel=false;var sliderContinuous=false;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";default:return"";}}
 var websock;var websockConnected=false;function requestOrientationPermission(){}
 function saveGraphData(){localStorage.setItem("espuigraphs",JSON.stringify(graphData));}
 function restoreGraphData(id){var savedData=localStorage.getItem("espuigraphs",graphData);if(savedData!=null){savedData=JSON.parse(savedData);return savedData[id];}
@@ -7,11 +7,11 @@ function restart(){$(document).add("*").off();$("#row").html("");websock.close()
 function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart,});}
 function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
 function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);if(window.location.port!=""||window.location.port!=80||window.location.port!=443){websock=new WebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws");}else{websock=new WebSocket("ws://"+window.location.hostname+"/ws");}
-websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
-data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-parent.append("<div id='id"+
+websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){console.log(evt);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:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
+data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};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;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}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>"+
@@ -19,13 +19,14 @@ data.label+
 "</h5><hr/>"+
 "<span id='l"+
 data.id+
-"' class='label label-wrap'>"+
+"' "+elementStyle+" class='label label-wrap'>"+
 data.value+
 "</span>"+
-"</div>");break;case UI_BUTTON:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-parent.append("<div id='id"+
+"</div>");}
+break;case UI_BUTTON:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}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>"+
@@ -33,7 +34,7 @@ data.label+
 "</h5><hr/>"+
 "<button id='btn"+
 data.id+
-"' "+
+"' "+elementStyle+" "+
 "onmousedown='buttonclick("+
 data.id+
 ", true)' "+
@@ -41,10 +42,11 @@ data.id+
 data.id+
 ", false)'>"+
 data.value+
-"</button></div>");$("#btn"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);},touchend:function(e){e.preventDefault();buttonclick(data.id,false);},});break;case UI_SWITCHER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-parent.append("<div id='id"+
+"</button></div>");$("#btn"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);},touchend:function(e){e.preventDefault();buttonclick(data.id,false);},});}
+break;case UI_SWITCHER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}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>"+
@@ -52,7 +54,7 @@ data.label+
 "</h5><hr/>"+
 "<label id='sl"+
 data.id+
-"' class='switch "+
+"' "+elementStyle+" class='switch "+
 (data.value=="1"?"checked":"")+
 "'>"+
 "<div class='in'><input type='checkbox' id='s"+
@@ -63,10 +65,11 @@ data.id+
 (data.value=="1"?"checked":"")+
 "/></div>"+
 "</label>"+
-"</div>");switcher(data.id,data.value);break;case UI_CPAD:case UI_PAD:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-parent.append("<div id='id"+
+"</div>");switcher(data.id,data.value);}
+break;case UI_CPAD:case UI_PAD:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}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>"+
@@ -80,28 +83,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+
@@ -111,10 +114,11 @@ data.id+
 data.id+
 "'>OK</a>":"")+
 "</nav>"+
-"</div>");$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(UP,data.id,true);},touchend:function(e){e.preventDefault();padclick(UP,data.id,false);},});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);},touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);},});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);},touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);},});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(DOWN,data.id,true);},touchend:function(e){e.preventDefault();padclick(DOWN,data.id,false);},});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);},touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);},});break;case UI_SLIDER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-parent.append("<div id='id"+
+"</div>");$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(UP,data.id,true);},touchend:function(e){e.preventDefault();padclick(UP,data.id,false);},});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);},touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);},});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);},touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);},});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(DOWN,data.id,true);},touchend:function(e){e.preventDefault();padclick(DOWN,data.id,false);},});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);},touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);},});}
+break;case UI_SLIDER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}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>"+
@@ -125,59 +129,64 @@ data.label+
 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>"+
 "</div>"+
-"</div>");rangeSlider(!sliderContinuous);break;case UI_NUMBER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-parent.append("<div id='id"+
+"</div>");rangeSlider(!sliderContinuous);}
+break;case UI_NUMBER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}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+
 "' onchange='numberchange("+
 data.id+
 ")' />"+
-"</div>");break;case UI_TEXT_INPUT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-parent.append("<div id='id"+
+"</div>");}
+break;case UI_TEXT_INPUT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}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+
 "' 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 :\\");}
-e.preventDefault();});break;case UI_SELECT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-parent.append("<div id='id"+
+"</div>");}
+break;case UI_TAB:if(data.visible){$("#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");}
+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:if(data.parentControl){var parent=$("#select"+data.parentControl);parent.append("<option id='option"+
+"</div>");}
+break;case UI_OPTION:if(data.parentControl){var parent=$("#select"+data.parentControl);parent.append("<option id='option"+
 data.id+
 "' value='"+
 data.value+
@@ -190,9 +199,9 @@ break;case UI_MIN:if(data.parentControl){var parent=$("#id"+data.parentControl+"
 break;case UI_MAX:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){parent.attr("max",data.value);}}
 break;case UI_STEP:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){parent.attr("step",data.value);}}
 break;case UI_GRAPH:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-parent.append("<div id='id"+
+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>"+
@@ -205,10 +214,11 @@ data.id+
 data.label+
 "</figcaption>"+
 "</figure>"+
-"</div>");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);graphData[data.id].push({x:ts,y:data.value});saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case CLEAR_GRAPH:graphData[data.id]=[];saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case UI_GAUGE:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-parent.append("<div id='id"+
+"</div>");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);graphData[data.id].push({x:ts,y:data.value});saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case CLEAR_GRAPH:graphData[data.id]=[];saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case UI_GAUGE:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}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>"+
@@ -221,10 +231,11 @@ data.value+
 "' onchange='numberchange("+
 data.id+
 ")' />"+
-"</div>");break;case UI_ACCEL:if(hasAccel)break;var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-hasAccel=true;parent.append("<div id='id"+
+"</div>");}
+break;case UI_ACCEL:if(hasAccel)break;var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{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>"+
@@ -237,13 +248,25 @@ data.id+
 "'></div><pre class='accelerometeroutput"+
 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;}
+"</div>");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:case UPDATE_PAD:case UPDATE_CPAD: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;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.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");element.addClass("slider-"+colorClass(data.color));}else{element.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin");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;}
 function sliderchange(number){var val=$("#sl"+number).val();websock.send("slvalue:"+val+":"+number);}
 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);}}
-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,""));},});}});};
+var rangeSlider=function(isDiscrete){var range=$(".range-slider__range");var slidercb=function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));};range.on({input:function(){$(this).next().html(this.value)}});range.each(function(){$(this).next().html(this.value);if($(this).attr("callbackSet")!="true"){if(!isDiscrete){$(this).on({input:slidercb});}else{$(this).on({change:slidercb});}
+$(this).attr("callbackSet","true");}});};

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,35 +11,40 @@ DNSServer dnsServer;
 #include <ESP8266WiFi.h>
 #endif
 
-const char *ssid = "ESPUI";
-const char *password = "espui";
-const char *hostname = "espui";
+const char* ssid = "ESPUI";
+const char* password = "espui";
+const char* hostname = "espui";
 
 uint16_t status;
 uint16_t button1;
 uint16_t millisLabelId;
 uint16_t switchOne;
 
-void numberCall( Control* sender, int type ) {
-  Serial.println( sender->value );
+void numberCall(Control* sender, int type)
+{
+    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(", 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(", Value: ");
     Serial.println(sender->value);
 }
 
-void buttonCallback(Control *sender, int type) {
-  switch (type) {
+void buttonCallback(Control* sender, int type)
+{
+    switch (type)
+    {
     case B_DOWN:
         Serial.println("Button DOWN");
         break;
@@ -50,8 +55,10 @@ void buttonCallback(Control *sender, int type) {
     }
 }
 
-void buttonExample(Control *sender, int type) {
-  switch (type) {
+void buttonExample(Control* sender, int type)
+{
+    switch (type)
+    {
     case B_DOWN:
         Serial.println("Status: Start");
         ESPUI.updateControlValue(status, "Start");
@@ -70,8 +77,10 @@ void buttonExample(Control *sender, int type) {
     }
 }
 
-void padExample(Control *sender, int value) {
-  switch (value) {
+void padExample(Control* sender, int value)
+{
+    switch (value)
+    {
     case P_LEFT_DOWN:
         Serial.print("left down");
         break;
@@ -117,8 +126,10 @@ void padExample(Control *sender, int value) {
     Serial.println(sender->id);
 }
 
-void switchExample(Control *sender, int value) {
-  switch (value) {
+void switchExample(Control* sender, int value)
+{
+    switch (value)
+    {
     case S_ACTIVE:
         Serial.print("Active:");
         break;
@@ -132,15 +143,18 @@ void switchExample(Control *sender, int value) {
     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(", Value: ");
     Serial.println(sender->value);
 }
 
-void otherSwitchExample(Control *sender, int value) {
-  switch (value) {
+void otherSwitchExample(Control* sender, int value)
+{
+    switch (value)
+    {
     case S_ACTIVE:
         Serial.print("Active:");
         break;
@@ -154,7 +168,8 @@ void otherSwitchExample(Control *sender, int value) {
     Serial.println(sender->id);
 }
 
-void setup(void) {
+void setup(void)
+{
     ESPUI.setVerbosity(Verbosity::VerboseJSON);
     Serial.begin(115200);
 
@@ -172,23 +187,37 @@ void setup(void) {
         uint8_t timeout = 10;
 
         // Wait for connection, 5s timeout
-    do {
+        do
+        {
             delay(500);
             Serial.print(".");
             timeout--;
         } while (timeout && WiFi.status() != WL_CONNECTED);
 
         // not connected -> create hotspot
-    if (WiFi.status() != WL_CONNECTED) {
+        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));
-      WiFi.softAP(ssid);
+#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 {
+            do
+            {
                 delay(500);
                 Serial.print(".");
                 timeout--;
@@ -206,28 +235,35 @@ void setup(void) {
 
     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, "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, 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);
-  button1 = ESPUI.addControl(ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, Control::noParent, &buttonCallback);
-  ESPUI.addControl(ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, Control::noParent, &buttonExample);
-  ESPUI.addControl(ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, Control::noParent, &padExample);
+    button1 = ESPUI.addControl(
+        ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, Control::noParent, &buttonCallback);
+    ESPUI.addControl(
+        ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, Control::noParent, &buttonExample);
+    ESPUI.addControl(
+        ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, Control::noParent, &padExample);
     ESPUI.addControl(ControlType::Pad, "Pad without center", "", ControlColor::Carrot, Control::noParent, &padExample);
-  switchOne = ESPUI.addControl(ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, Control::noParent, &switchExample);
-  ESPUI.addControl(ControlType::Switcher, "Switch two", "", ControlColor::None, Control::noParent, &otherSwitchExample);
+    switchOne = ESPUI.addControl(
+        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.
-   * 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)
      */
 
@@ -242,17 +278,18 @@ void setup(void) {
      * password, for example begin("ESPUI Control", "username", "password")
      */
 
-
     ESPUI.begin("ESPUI Control");
 }
 
-void loop(void) {
+void loop(void)
+{
     dnsServer.processNextRequest();
 
     static long oldTime = 0;
     static bool testSwitchState = false;
 
-  if (millis() - oldTime > 5000) {
+    if (millis() - oldTime > 5000)
+    {
         ESPUI.updateControlValue(millisLabelId, String(millis()));
         testSwitchState = !testSwitchState;
         ESPUI.updateControlValue(switchOne, testSwitchState ? "1" : "0");

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,26 +11,31 @@ DNSServer dnsServer;
 #include <ESP8266WiFi.h>
 #endif
 
-const char *ssid = "ESPUI";
-const char *password = "espui";
+const char* ssid = "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)
+{
+    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(", 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(", Value: ");
@@ -41,8 +46,10 @@ void slider(Control *sender, int type) {
     Serial.println(sliderValueWithOffset);
 }
 
-void buttonCallback(Control *sender, int type) {
-  switch (type) {
+void buttonCallback(Control* sender, int type)
+{
+    switch (type)
+    {
     case B_DOWN:
         Serial.println("Button DOWN");
         break;
@@ -53,8 +60,10 @@ void buttonCallback(Control *sender, int type) {
     }
 }
 
-void buttonExample(Control *sender, int type) {
-  switch (type) {
+void buttonExample(Control* sender, int type)
+{
+    switch (type)
+    {
     case B_DOWN:
         Serial.println("Status: Start");
         ESPUI.print(statusLabelId, "Start");
@@ -66,8 +75,10 @@ void buttonExample(Control *sender, int type) {
         break;
     }
 }
-void padExample(Control *sender, int value) {
-  switch (value) {
+void padExample(Control* sender, int value)
+{
+    switch (value)
+    {
     case P_LEFT_DOWN:
         Serial.print("left down");
         break;
@@ -113,8 +124,10 @@ void padExample(Control *sender, int value) {
     Serial.println(sender->id);
 }
 
-void switchExample(Control *sender, int value) {
-  switch (value) {
+void switchExample(Control* sender, int value)
+{
+    switch (value)
+    {
     case S_ACTIVE:
         Serial.print("Active:");
         break;
@@ -128,8 +141,10 @@ void switchExample(Control *sender, int value) {
     Serial.println(sender->id);
 }
 
-void otherSwitchExample(Control *sender, int value) {
-  switch (value) {
+void otherSwitchExample(Control* sender, int value)
+{
+    switch (value)
+    {
     case S_ACTIVE:
         Serial.print("Active:");
         break;
@@ -143,7 +158,8 @@ void otherSwitchExample(Control *sender, int value) {
     Serial.println(sender->id);
 }
 
-void setup(void) {
+void setup(void)
+{
     ESPUI.setVerbosity(Verbosity::VerboseJSON);
     Serial.begin(115200);
 
@@ -161,23 +177,38 @@ void setup(void) {
         uint8_t timeout = 10;
 
         // Wait for connection, 5s timeout
-    do {
+        do
+        {
             delay(500);
             Serial.print(".");
             timeout--;
         } while (timeout && WiFi.status() != WL_CONNECTED);
 
         // not connected -> create hotspot
-    if (WiFi.status() != WL_CONNECTED) {
+        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));
-      WiFi.softAP(ssid);
+#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 {
+            do
+            {
                 delay(500);
                 Serial.print(".");
                 timeout--;
@@ -210,7 +241,7 @@ void setup(void) {
 
     /*
      * .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)
      */
 
@@ -225,17 +256,18 @@ void setup(void) {
      * password, for example begin("ESPUI Control", "username", "password")
      */
 
-
     ESPUI.begin("ESPUI Control");
 }
 
-void loop(void) {
+void loop(void)
+{
     dnsServer.processNextRequest();
 
     static long oldTime = 0;
     static bool testSwitchState = false;
 
-  if (millis() - oldTime > 5000) {
+    if (millis() - oldTime > 5000)
+    {
         ESPUI.print(millisLabelId, String(millis()));
 
         ESPUI.addGraphPoint(graphId, random(1, 50));

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()
+{
 }

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,216 +19,250 @@ uint16_t button1;
 uint16_t switchOne;
 uint16_t status;
 
-void numberCall( Control* sender, int type ) {
-  Serial.println( sender->value );
+void numberCall(Control* sender, int type)
+{
+    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(", Value: ");
-  Serial.println( sender->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(", Value: ");
-  Serial.println( sender->value );}
+    Serial.println(sender->value);
+}
 
-void buttonCallback( Control* sender, int type ) {
-  switch ( type ) {
+void buttonCallback(Control* sender, int type)
+{
+    switch (type)
+    {
     case B_DOWN:
-      Serial.println( "Button DOWN" );
+        Serial.println("Button DOWN");
         break;
 
     case B_UP:
-      Serial.println( "Button UP" );
+        Serial.println("Button UP");
         break;
     }
 }
 
-void buttonExample( Control* sender, int type ) {
-  switch ( type ) {
+void buttonExample(Control* sender, int type)
+{
+    switch (type)
+    {
     case B_DOWN:
-      Serial.println( "Status: Start" );
-      ESPUI.updateControlValue( status, "Start" );
+        Serial.println("Status: Start");
+        ESPUI.updateControlValue(status, "Start");
 
-      ESPUI.getControl( button1 )->color = ControlColor::Carrot;
-      ESPUI.updateControl( button1 );
+        ESPUI.getControl(button1)->color = ControlColor::Carrot;
+        ESPUI.updateControl(button1);
         break;
 
     case B_UP:
-      Serial.println( "Status: Stop" );
-      ESPUI.updateControlValue( status, "Stop" );
+        Serial.println("Status: Stop");
+        ESPUI.updateControlValue(status, "Stop");
 
-      ESPUI.getControl( button1 )->color = ControlColor::Peterriver;
-      ESPUI.updateControl( button1 );
+        ESPUI.getControl(button1)->color = ControlColor::Peterriver;
+        ESPUI.updateControl(button1);
         break;
     }
 }
 
-void padExample( Control* sender, int value ) {
-  switch ( value ) {
+void padExample(Control* sender, int value)
+{
+    switch (value)
+    {
     case P_LEFT_DOWN:
-      Serial.print( "left down" );
+        Serial.print("left down");
         break;
 
     case P_LEFT_UP:
-      Serial.print( "left up" );
+        Serial.print("left up");
         break;
 
     case P_RIGHT_DOWN:
-      Serial.print( "right down" );
+        Serial.print("right down");
         break;
 
     case P_RIGHT_UP:
-      Serial.print( "right up" );
+        Serial.print("right up");
         break;
 
     case P_FOR_DOWN:
-      Serial.print( "for down" );
+        Serial.print("for down");
         break;
 
     case P_FOR_UP:
-      Serial.print( "for up" );
+        Serial.print("for up");
         break;
 
     case P_BACK_DOWN:
-      Serial.print( "back down" );
+        Serial.print("back down");
         break;
 
     case P_BACK_UP:
-      Serial.print( "back up" );
+        Serial.print("back up");
         break;
 
     case P_CENTER_DOWN:
-      Serial.print( "center down" );
+        Serial.print("center down");
         break;
 
     case P_CENTER_UP:
-      Serial.print( "center up" );
+        Serial.print("center up");
         break;
     }
 
-  Serial.print( " " );
-  Serial.println( sender->id );
+    Serial.print(" ");
+    Serial.println(sender->id);
 }
 
-void switchExample( Control* sender, int value ) {
-  switch ( value ) {
+void switchExample(Control* sender, int value)
+{
+    switch (value)
+    {
     case S_ACTIVE:
-      Serial.print( "Active:" );
+        Serial.print("Active:");
         break;
 
     case S_INACTIVE:
-      Serial.print( "Inactive" );
+        Serial.print("Inactive");
         break;
     }
 
-  Serial.print( " " );
-  Serial.println( sender->id );
+    Serial.print(" ");
+    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(", Value: ");
-  Serial.println( sender->value );
+    Serial.println(sender->value);
 }
 
-void otherSwitchExample( Control* sender, int value ) {
-  switch ( value ) {
+void otherSwitchExample(Control* sender, int value)
+{
+    switch (value)
+    {
     case S_ACTIVE:
-      Serial.print( "Active:" );
+        Serial.print("Active:");
         break;
 
     case S_INACTIVE:
-      Serial.print( "Inactive" );
+        Serial.print("Inactive");
         break;
     }
 
-  Serial.print( " " );
-  Serial.println( sender->id );
+    Serial.print(" ");
+    Serial.println(sender->id);
 }
 
-void setup( void ) {
-  Serial.begin( 115200 );
+void setup(void)
+{
+    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
-  WiFi.begin( ssid, password );
-  Serial.print( "\n\nTry 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( "." );
+        do
+        {
+            delay(500);
+            Serial.print(".");
             timeout--;
-    } while ( timeout && WiFi.status() != WL_CONNECTED );
+        } while (timeout && WiFi.status() != WL_CONNECTED);
 
         // not connected -> create hotspot
-    if ( WiFi.status() != WL_CONNECTED ) {
-      Serial.print( "\n\nCreating hotspot" );
+        if (WiFi.status() != WL_CONNECTED)
+        {
+            Serial.print("\n\nCreating hotspot");
 
-      WiFi.mode( WIFI_AP );
-      WiFi.softAPConfig( apIP, apIP, IPAddress( 255, 255, 255, 0 ) );
-      WiFi.softAP( ssid );
+            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( "." );
+            do
+            {
+                delay(500);
+                Serial.print(".");
                 timeout--;
-      } while ( timeout );
+            } while (timeout);
         }
     }
 
-  dnsServer.start( DNS_PORT, "*", apIP );
+    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() );
+    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());
 
-  uint16_t tab1 = ESPUI.addControl( ControlType::Tab, "Settings 1", "Settings 1" );
-  uint16_t tab2 = ESPUI.addControl( ControlType::Tab, "Settings 2", "Settings 2" );
-  uint16_t tab3 = ESPUI.addControl( ControlType::Tab, "Settings 3", "Settings 3" );
+    uint16_t tab1 = ESPUI.addControl(ControlType::Tab, "Settings 1", "Settings 1");
+    uint16_t tab2 = ESPUI.addControl(ControlType::Tab, "Settings 2", "Settings 2");
+    uint16_t tab3 = ESPUI.addControl(ControlType::Tab, "Settings 3", "Settings 3");
 
     // 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 );
-  ESPUI.addControl( ControlType::Option, "Option1", "Opt1", ControlColor::Alizarin, select1 );
-  ESPUI.addControl( ControlType::Option, "Option2", "Opt2", ControlColor::Alizarin, select1 );
-  ESPUI.addControl( ControlType::Option, "Option3", "Opt3", ControlColor::Alizarin, select1 );
+    uint16_t select1
+        = ESPUI.addControl(ControlType::Select, "Select:", "", ControlColor::Alizarin, tab1, &selectExample);
+    ESPUI.addControl(ControlType::Option, "Option1", "Opt1", 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 );
+    ESPUI.addControl(ControlType::Text, "Text Test:", "a Text Field", ControlColor::Alizarin, tab1, &textCall);
 
     // tabbed controls
-  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 );
+    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);
 
     /*
      * .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)
      */
 
@@ -243,19 +277,20 @@ void setup( void ) {
      * password, for example begin("ESPUI Control", "username", "password")
      */
 
-
     ESPUI.begin("ESPUI Control");
 }
 
-void loop( void ) {
+void loop(void)
+{
     dnsServer.processNextRequest();
 
     static long oldTime = 0;
     static bool switchi = false;
 
-  if ( millis() - oldTime > 5000 ) {
+    if (millis() - oldTime > 5000)
+    {
         switchi = !switchi;
-    ESPUI.updateControlValue( switchOne, switchi ? "1" : "0" );
+        ESPUI.updateControlValue(switchOne, switchi ? "1" : "0");
 
         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",
       "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.h

@@ -6,15 +6,14 @@
 
 #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 <LITTLEFS.h>
+
+#include "WiFi.h"
 
 #else
 
@@ -23,9 +22,8 @@
 #include <ESP8266mDNS.h>
 #include <ESPAsyncTCP.h>
 #include <ESPAsyncWebServer.h>
-#include <LittleFS.h>
 #include <Hash.h>
-#include <SPIFFSEditor.h>
+#include <LittleFS.h>
 
 #define FILE_WRITE "w"
 
@@ -78,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
@@ -131,25 +131,43 @@ class Control
 public:
     ControlType type;
     uint16_t id; // just mirroring the id here for practical reasons
-  const char *label;
-  void (*callback)(Control *, int);
+    const char* label;
+    void (*callback)(Control*, int);
     String value;
     ControlColor color;
+    bool visible;
     uint16_t parentControl;
-  Control *next;
+    String panelStyle;
+    String elementStyle;
+    Control* next;
 
     static constexpr uint16_t noParent = 0xffff;
 
-  Control(ControlType type, const char *label, void (*callback)(Control *, int), String value, ControlColor color,
-          uint16_t parentControl = Control::noParent)
-      : type(type), label(label), callback(callback), value(value), color(color), parentControl(parentControl), next(nullptr)
+    Control(ControlType type, const char* label, void (*callback)(Control*, int), const String& value,
+        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)
     {
         id = idCounter++;
     }
 
-  Control(const Control &control)
-      : type(control.type), id(control.id), label(control.label), callback(control.callback), value(control.value), color(control.color),
-        parentControl(control.parentControl), next(control.next) {}
+    Control(const Control& control)
+        : type(control.type),
+          id(control.id),
+          label(control.label),
+          callback(control.callback),
+          value(control.value),
+          color(control.color),
+          visible(control.visible),
+          parentControl(control.parentControl),
+          next(control.next)
+    { }
 
 private:
     static uint16_t idCounter;
@@ -200,73 +218,92 @@ 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 beginSPIFFS(const char *_title, const char *username = nullptr, const char *password = nullptr); // Setup server and page in SPIFFSmode
+    void begin(const char* _title, const char* username = nullptr, const char* password = nullptr,
+        uint16_t port = 80); // Setup server and page in Memorymode
+    void beginSPIFFS(const char* _title, const char* username = nullptr, const char* password = nullptr,
+        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
-  void list();              // Lists SPIFFS directory
+    void prepareFileSystem(); // Initially preps the filesystem and loads a lot of
+                              // stuff into LITTLEFS
+    void list(); // Lists LITTLEFS 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 switcher(const char *label, void (*callback)(Control *, int), ControlColor color, 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 button(const char* label, void (*callback)(Control*, int), ControlColor color,
+        const String& value = ""); // Create Event Button
+    uint16_t switcher(const char* label, void (*callback)(Control*, int), ControlColor color,
+        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,
+    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,
+    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 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 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
 
     // Input only
-  uint16_t accelerometer(const char *label, void (*callback)(Control *, int), ControlColor color);
+    uint16_t accelerometer(const char* label, void (*callback)(Control*, int), ControlColor color);
 
     // Update Elements
 
-  Control *getControl(uint16_t id);
+    Control* getControl(uint16_t id);
 
     // Update Elements
-  void updateControlValue(uint16_t id, String value, int clientId = -1);
-  void updateControlValue(Control *control, String value, int clientId = -1);
+    void updateControlValue(uint16_t id, const 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 updateControl(Control* control, int clientId = -1);
 
-  void print(uint16_t id, String value);
-  void updateLabel(uint16_t id, String value);
+    void print(uint16_t id, const 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 updateSelect(uint16_t id, String nValue, int clientId = -1);
+    void updateText(uint16_t id, const 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);
     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;
+    const char* ui_title = "ESPUI"; // Store UI Title and Header Name
+    Control* controls = nullptr;
     void jsonReload();
-  void jsonDom(AsyncWebSocketClient *client = nullptr);
+    void jsonDom(AsyncWebSocketClient* client = nullptr);
 
     Verbosity verbosity;
 
-  AsyncWebServer *server;
-  AsyncWebSocket *ws;
+    AsyncWebServer* server;
+    AsyncWebSocket* ws;
 
 private:
-  const char *basicAuthUsername = nullptr;
-  const char *basicAuthPassword = nullptr;
+    const char* basicAuthUsername = nullptr;
+    const char* basicAuthPassword = nullptr;
     bool basicAuth = true;
+
+    Control* prepareJSONChunk(AsyncWebSocketClient* client, Control* control, JsonArray* items);
 };
 
 extern ESPUIClass ESPUI;