Attempt fixing switcher inconsistent state

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

README.md

@@ -32,7 +32,6 @@ 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
 
@@ -50,7 +49,6 @@ 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
 
@@ -91,13 +89,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 _LITTLEFS_
+can be achieved in 2 ways: _PROGMEM_ or _SPIFFS_
 
 _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 LITTLEFS filesystem on the ESP. There are now two ways to
+burn the files into the SPIFFS 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()`
 
@@ -216,17 +214,7 @@ 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
 
@@ -308,7 +296,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.beginLITTLEFS("Some Title");` respectively)
+to start the UI interface. (Or `ESPUI.beginSPIFFS("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.
@@ -354,43 +342,6 @@ If you have many different widgets it might be necessary to adjust the JSON Buff
  ESPUI.begin("ESPUI Control");
 ```
 
-### Inline Styles
-
-You can add custom CSS styles to controls. This allows you to style the UI with custom colors, drop shadows, 
-or other CSS effects. Add styles with the following functions:
-
-```
- setPanelStyle(uint16_t id, String style);
- setElementStyle(uint16_t id, String style)
-```
-
-A panel style is applied to the panel on which the UI element is placed, an element style is applied to the element itself. 
-Because CSS inline styles can only style one specific DOM element, for controls made up of multiple elements (like the pad) 
-this is limited. Element styles can be applied to all controls, but will only work correctly for the Button, Label, Slider, 
-Switcher, Number, Text, and Selector. 
-
-Dynamic update of styles is supported. When either of the above functions are called, the control is updated live. This could 
-be used to refect a warning state by changing the color of a button, or for similar effects.
-
-For example, this code will set a control's panel to a random background color:
-
-```
- char stylecol[30];
- sprintf(stylecol, "background-color: #%06X;", (unsigned int) random(0x0, 0xFFFFFF));
- ESPUI.setPanelStyle(switch1, stylecol);
-```
-
-You can get quite creative with this.
-
-![Inline Styles](docs/inlinestyles.gif)
-
-Note: The images in this example are formed by setting a Label to contain an `<img>` tag:
-
-```
- ESPUI.addControl(ControlType::Label, "Label", "<img src='path/to/image'>", ControlColor::Peterriver);
-```
-
-
 # Notes for Development
 
 If you want to work on the HTML/CSS/JS files, do make changes in the _data_

data/css/style.css

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

data/js/controls.js

@@ -2,8 +2,6 @@ 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;
@@ -232,10 +230,6 @@ 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
@@ -253,16 +247,6 @@ 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;
@@ -279,11 +263,10 @@ function start() {
         } else {
           parent = $("#row");
         }
-		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' " + panelStyle + " class='two columns card tcenter " +
+            "' class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -291,12 +274,11 @@ function start() {
             "</h5><hr/>" +
             "<span id='l" +
             data.id +
-            "' " + elementStyle + " class='label label-wrap'>" +
+            "' class='label label-wrap'>" +
             data.value +
             "</span>" +
             "</div>"
         );
-		}
         break;
 
       case UI_BUTTON:
@@ -306,11 +288,10 @@ function start() {
         } else {
           parent = $("#row");
         }
-		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' " + panelStyle + " class='one columns card tcenter " +
+            "' class='one columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -318,7 +299,7 @@ function start() {
             "</h5><hr/>" +
             "<button id='btn" +
             data.id +
-            "' " + elementStyle + " " +
+            "' " +
             "onmousedown='buttonclick(" +
             data.id +
             ", true)' " +
@@ -338,7 +319,6 @@ function start() {
             buttonclick(data.id, false);
           },
         });
-		}
         break;
 
       case UI_SWITCHER:
@@ -348,11 +328,10 @@ function start() {
         } else {
           parent = $("#row");
         }
-		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' " + panelStyle + " class='one columns card tcenter " +
+            "' class='one columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -360,7 +339,7 @@ function start() {
             "</h5><hr/>" +
             "<label id='sl" +
             data.id +
-            "' " + elementStyle + " class='switch " +
+            "' class='switch " +
             (data.value == "1" ? "checked" : "") +
             "'>" +
             "<div class='in'><input type='checkbox' id='s" +
@@ -374,7 +353,6 @@ function start() {
             "</div>"
         );
         switcher(data.id, data.value);
-		}
         break;
 
       case UI_CPAD:
@@ -385,11 +363,10 @@ function start() {
         } else {
           parent = $("#row");
         }
-		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' " + panelStyle + " class='two columns card tcenter " +
+            "' class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -489,7 +466,7 @@ function start() {
             padclick(CENTER, data.id, false);
           },
         });
-		}
+
         break;
 
       //https://codepen.io/seanstopnik/pen/CeLqA
@@ -500,11 +477,10 @@ function start() {
         } else {
           parent = $("#row");
         }
-		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' " + panelStyle + " class='two columns card tcenter card-slider " +
+            "' class='two columns card tcenter card-slider " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -515,7 +491,7 @@ function start() {
             data.id +
             "' type='range' min='0' max='100' value='" +
             data.value +
-            "' " + elementStyle + " class='range-slider__range'>" +
+            "' class='range-slider__range'>" +
             "<span class='range-slider__value'>" +
             data.value +
             "</span>" +
@@ -523,7 +499,6 @@ function start() {
             "</div>"
         );
         rangeSlider(!sliderContinuous);
-		}
         break;
 
       case UI_NUMBER:
@@ -533,17 +508,16 @@ function start() {
         } else {
           parent = $("#row");
         }
-		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' " + panelStyle + " class='two columns card tcenter " +
+            "' class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
             data.label +
             "</h5><hr/>" +
-            "<input style='color:black;' " + elementStyle + " id='num" +
+            "<input style='color:black;' id='num" +
             data.id +
             "' type='number' value='" +
             data.value +
@@ -552,7 +526,6 @@ function start() {
             ")' />" +
             "</div>"
         );
-		}
         break;
 
       case UI_TEXT_INPUT:
@@ -562,17 +535,16 @@ function start() {
         } else {
           parent = $("#row");
         }
-		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' " + panelStyle + " class='two columns card tcenter " +
+            "' class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
             data.label +
             "</h5><hr/>" +
-            "<input style='color:black;' " + elementStyle + " id='text" +
+            "<input style='color:black;' id='text" +
             data.id +
             "' value='" +
             data.value +
@@ -581,11 +553,9 @@ function start() {
             ")' />" +
             "</div>"
         );
-		}
         break;
 
       case UI_TAB:
-		if (data.visible) {
         $("#tabsnav").append(
           "<li><a onmouseup='tabclick(" + data.id + ")' href='#tab" + data.id + "'>" + data.value + "</a></li>"
         );
@@ -604,7 +574,6 @@ function start() {
             }
             e.preventDefault();
           });
-		}
         break;
 
       case UI_SELECT:
@@ -614,24 +583,22 @@ function start() {
         } else {
           parent = $("#row");
         }
-		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' " + panelStyle + " class='two columns card tcenter " +
+            "' class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
             data.label +
             "</h5><hr/>" +
-            "<select style='color:black;' " + elementStyle + " id='select" +
+            "<select style='color:black;' id='select" +
             data.id +
             "' onchange='selectchange(" +
             data.id +
             ")' />" +
             "</div>"
         );
-		}
         break;
 
       case UI_OPTION:
@@ -684,11 +651,10 @@ function start() {
         } else {
           parent = $("#row");
         }
-		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' " + panelStyle + " class='two columns card tcenter " +
+            "' class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -705,7 +671,6 @@ 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);
@@ -725,11 +690,10 @@ function start() {
         } else {
           parent = $("#row");
         }
-		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' " + panelStyle + " class='two columns card tcenter " +
+            "' class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -744,7 +708,6 @@ function start() {
             ")' />" +
             "</div>"
         );
-		}
         break;
 
       case UI_ACCEL:
@@ -756,11 +719,10 @@ function start() {
           parent = $("#row");
         }
         hasAccel = true;
-		if (data.visible) {
         parent.append(
           "<div id='id" +
             data.id +
-            "' " + panelStyle + " class='two columns card tcenter " +
+            "' class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -777,49 +739,30 @@ 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:
@@ -828,9 +771,6 @@ 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;
@@ -842,11 +782,6 @@ 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"
@@ -859,19 +794,16 @@ 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;
 }
 
+var sliderCache = {};
 function sliderchange(number) {
   var val = $("#sl" + number).val();
-  websock.send("slvalue:" + val + ":" + number);
+  sliderCache[number] !== val && websock.send("slvalue:" + val + ":" + number);
+  sliderCache[number] = val;
 }
 
 function numberchange(number) {
@@ -929,9 +861,11 @@ function switcher(number, state) {
     if ($("#s" + number).is(":checked")) {
       websock.send("sactive:" + number);
       $("#sl" + number).addClass("checked");
+      $("#sl" + number).prop("checked", true);
     } else {
       websock.send("sinactive:" + number);
       $("#sl" + number).removeClass("checked");
+      $("#sl" + number).prop("checked", false);
     }
   } else if (state == 1) {
     $("#sl" + number).addClass("checked");
@@ -943,24 +877,31 @@ function switcher(number, state) {
 }
 
 var rangeSlider = function (isDiscrete) {
-  var range = $(".range-slider__range");
+  var slider = $(".range-slider"),
-  var slidercb = function() {
+    range = $(".range-slider__range"),
-    sliderchange($(this).attr("id").replace(/^\D+/g, ""));
+    value = $(".range-slider__value");
-  };
 
-  range.on({input: function() {
+  slider.each(function () {
-    $(this).next().html(this.value)}
+    value.each(function () {
+      var value = $(this).prev().attr("value");
+      $(this).html(value);
     });
 
-  range.each(function() {
-    $(this).next().html(this.value);
-    if($(this).attr("callbackSet") != "true") {
     if (!isDiscrete) {
-        $(this).on({input: slidercb}); //input fires when dragging
+      range.on({
+        input: function () {
+          sliderchange($(this).attr("id").replace(/^\D+/g, ""));
+        },
+      });
     } else {
-        $(this).on({change: slidercb}); //change fires only once released
+      range.on({
-      }
+        input: function () {
-      $(this).attr("callbackSet", "true");
+          $(this).next().html(this.value);
+        },
+        change: function () {
+          sliderchange($(this).attr("id").replace(/^\D+/g, ""));
+        },
+      });
     }
   });
 };

data/js/controls.min.js

@@ -1,4 +1,4 @@
-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"";}}
+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"";}}
 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="";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;}
+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_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");}
+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"+
+parent.append("<div id='id"+
 data.id+
-"' "+panelStyle+" class='two columns card tcenter "+
+"' class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -19,14 +19,13 @@ data.label+
 "</h5><hr/>"+
 "<span id='l"+
 data.id+
-"' "+elementStyle+" class='label label-wrap'>"+
+"' class='label label-wrap'>"+
 data.value+
 "</span>"+
-"</div>");}
+"</div>");break;case UI_BUTTON:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-break;case UI_BUTTON: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+
-"' "+panelStyle+" class='one columns card tcenter "+
+"' class='one columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -34,7 +33,7 @@ data.label+
 "</h5><hr/>"+
 "<button id='btn"+
 data.id+
-"' "+elementStyle+" "+
+"' "+
 "onmousedown='buttonclick("+
 data.id+
 ", true)' "+
@@ -42,11 +41,10 @@ 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);},});}
+"</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");}
-break;case UI_SWITCHER: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+
-"' "+panelStyle+" class='one columns card tcenter "+
+"' class='one columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -54,7 +52,7 @@ data.label+
 "</h5><hr/>"+
 "<label id='sl"+
 data.id+
-"' "+elementStyle+" class='switch "+
+"' class='switch "+
 (data.value=="1"?"checked":"")+
 "'>"+
 "<div class='in'><input type='checkbox' id='s"+
@@ -65,11 +63,10 @@ data.id+
 (data.value=="1"?"checked":"")+
 "/></div>"+
 "</label>"+
-"</div>");switcher(data.id,data.value);}
+"</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");}
-break;case UI_CPAD:case UI_PAD: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+
-"' "+panelStyle+" class='two columns card tcenter "+
+"' class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -114,11 +111,10 @@ 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);},});}
+"</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");}
-break;case UI_SLIDER: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+
-"' "+panelStyle+" class='two columns card tcenter card-slider "+
+"' class='two columns card tcenter card-slider "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -129,64 +125,59 @@ data.label+
 data.id+
 "' type='range' min='0' max='100' value='"+
 data.value+
-"' "+elementStyle+" class='range-slider__range'>"+
+"' class='range-slider__range'>"+
 "<span class='range-slider__value'>"+
 data.value+
 "</span>"+
 "</div>"+
-"</div>");rangeSlider(!sliderContinuous);}
+"</div>");rangeSlider(!sliderContinuous);break;case UI_NUMBER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-break;case UI_NUMBER: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+
-"' "+panelStyle+" class='two columns card tcenter "+
+"' class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
 data.label+
 "</h5><hr/>"+
-"<input style='color:black;' "+elementStyle+" id='num"+
+"<input style='color:black;' id='num"+
 data.id+
 "' type='number' value='"+
 data.value+
 "' onchange='numberchange("+
 data.id+
 ")' />"+
-"</div>");}
+"</div>");break;case UI_TEXT_INPUT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-break;case UI_TEXT_INPUT: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+
-"' "+panelStyle+" class='two columns card tcenter "+
+"' class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
 data.label+
 "</h5><hr/>"+
-"<input style='color:black;' "+elementStyle+" id='text"+
+"<input style='color:black;' id='text"+
 data.id+
 "' value='"+
 data.value+
 "' onchange='textchange("+
 data.id+
 ")' />"+
-"</div>");}
+"</div>");break;case UI_TAB:$("#tabsnav").append("<li><a onmouseup='tabclick("+data.id+")' href='#tab"+data.id+"'>"+data.value+"</a></li>");$("#tabscontent").append("<div id='tab"+data.id+"'></div>");tabs=$(".tabscontent").tabbedContent({loop:true}).data("api");$("a").filter(function(){return $(this).attr("href")==="#click-to-switch";}).on("click",function(e){var tab=prompt("Tab to switch to (number or id)?");if(!tabs.switchTab(tab)){alert("That tab does not exist :\\");}
-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");}
-e.preventDefault();});}
+parent.append("<div id='id"+
-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+
-"' "+panelStyle+" class='two columns card tcenter "+
+"' class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
 data.label+
 "</h5><hr/>"+
-"<select style='color:black;' "+elementStyle+" id='select"+
+"<select style='color:black;' id='select"+
 data.id+
 "' onchange='selectchange("+
 data.id+
 ")' />"+
-"</div>");}
+"</div>");break;case UI_OPTION:if(data.parentControl){var parent=$("#select"+data.parentControl);parent.append("<option id='option"+
-break;case UI_OPTION:if(data.parentControl){var parent=$("#select"+data.parentControl);parent.append("<option id='option"+
 data.id+
 "' value='"+
 data.value+
@@ -199,9 +190,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");}
-if(data.visible){parent.append("<div id='id"+
+parent.append("<div id='id"+
 data.id+
-"' "+panelStyle+" class='two columns card tcenter "+
+"' class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -214,11 +205,10 @@ data.id+
 data.label+
 "</figcaption>"+
 "</figure>"+
-"</div>");graphData[data.id]=restoreGraphData(data.id);renderGraphSvg(graphData[data.id],"graph"+data.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");}
-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"+
-if(data.visible){parent.append("<div id='id"+
 data.id+
-"' "+panelStyle+" class='two columns card tcenter "+
+"' class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -231,11 +221,10 @@ data.value+
 "' onchange='numberchange("+
 data.id+
 ")' />"+
-"</div>");}
+"</div>");break;case UI_ACCEL:if(hasAccel)break;var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
-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"+
-hasAccel=true;if(data.visible){parent.append("<div id='id"+
 data.id+
-"' "+panelStyle+" class='two columns card tcenter "+
+"' class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -248,25 +237,14 @@ data.id+
 "'></div><pre class='accelerometeroutput"+
 data.id+
 "'></pre>"+
-"</div>");requestOrientationPermission();}
+"</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;}
-break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);if(data.hasOwnProperty('elementStyle')){$("#l"+data.id).attr("style",data.elementStyle);}
+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;}
-break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
+var sliderCache={};function sliderchange(number){var val=$("#sl"+number).val();sliderCache[number]!==val&&websock.send("slvalue:"+val+":"+number);sliderCache[number]=val;}
-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);}}
+function switcher(number,state){if(state==null){if($("#s"+number).is(":checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}
-var rangeSlider=function(isDiscrete){var 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});}
+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,""));},});}});};
-$(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, 4, 1);
+IPAddress apIP(192, 168, 1, 1);
 DNSServer dnsServer;
 
 #if defined(ESP32)
@@ -20,31 +20,26 @@ uint16_t button1;
 uint16_t millisLabelId;
 uint16_t switchOne;
 
-void numberCall(Control* sender, int type)
+void numberCall( Control* sender, int type ) {
-{
   Serial.println( sender->value );
 }
 
-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)
+void buttonCallback(Control *sender, int type) {
-{
+  switch (type) {
-    switch (type)
-    {
   case B_DOWN:
     Serial.println("Button DOWN");
     break;
@@ -55,10 +50,8 @@ void buttonCallback(Control* sender, int type)
   }
 }
 
-void buttonExample(Control* sender, int type)
+void buttonExample(Control *sender, int type) {
-{
+  switch (type) {
-    switch (type)
-    {
   case B_DOWN:
     Serial.println("Status: Start");
     ESPUI.updateControlValue(status, "Start");
@@ -77,10 +70,8 @@ void buttonExample(Control* sender, int type)
   }
 }
 
-void padExample(Control* sender, int value)
+void padExample(Control *sender, int value) {
-{
+  switch (value) {
-    switch (value)
-    {
   case P_LEFT_DOWN:
     Serial.print("left down");
     break;
@@ -126,10 +117,8 @@ void padExample(Control* sender, int value)
   Serial.println(sender->id);
 }
 
-void switchExample(Control* sender, int value)
+void switchExample(Control *sender, int value) {
-{
+  switch (value) {
-    switch (value)
-    {
   case S_ACTIVE:
     Serial.print("Active:");
     break;
@@ -143,18 +132,15 @@ 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)
+void otherSwitchExample(Control *sender, int value) {
-{
+  switch (value) {
-    switch (value)
-    {
   case S_ACTIVE:
     Serial.print("Active:");
     break;
@@ -168,8 +154,7 @@ void otherSwitchExample(Control* sender, int value)
   Serial.println(sender->id);
 }
 
-void setup(void)
+void setup(void) {
-{
   ESPUI.setVerbosity(Verbosity::VerboseJSON);
   Serial.begin(115200);
 
@@ -187,37 +172,23 @@ 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));
-#if defined(ESP32)
+      WiFi.softAP(ssid);
-            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--;
@@ -235,35 +206,28 @@ void setup(void)
 
   status = ESPUI.addControl(ControlType::Label, "Status:", "Stop", ControlColor::Turquoise);
 
-    uint16_t select1 = ESPUI.addControl(
+  uint16_t select1 = ESPUI.addControl(ControlType::Select, "Select:", "", ControlColor::Alizarin, Control::noParent, &selectExample);
-        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(
+  ESPUI.addControl(ControlType::Text, "Text Test:", "a Text Field", ControlColor::Alizarin, Control::noParent, &textCall);
-        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(
+  button1 = ESPUI.addControl(ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, Control::noParent, &buttonCallback);
-        ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, Control::noParent, &buttonCallback);
+  ESPUI.addControl(ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, Control::noParent, &buttonExample);
-    ESPUI.addControl(
+  ESPUI.addControl(ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, Control::noParent, &padExample);
-        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(
+  switchOne = ESPUI.addControl(ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, Control::noParent, &switchExample);
-        ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, Control::noParent, &switchExample);
+  ESPUI.addControl(ControlType::Switcher, "Switch two", "", ControlColor::None, Control::noParent, &otherSwitchExample);
-    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 LITTLEFS use ESPUI.beginLITTLEFS
+   * If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
    * (.prepareFileSystem has to be run in an empty sketch before)
    */
 
@@ -278,18 +242,17 @@ 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, 4, 1);
+IPAddress apIP(192, 168, 1, 1);
 DNSServer dnsServer;
 
 #if defined(ESP32)
@@ -21,21 +21,16 @@ int graphId;
 int millisLabelId;
 int testSwitchId;
 
-void numberCall(Control* sender, int type)
+void numberCall(Control *sender, int type) { Serial.println(sender->value); }
-{
-    Serial.println(sender->value);
-}
 
-void textCall(Control* sender, int type)
+void textCall(Control *sender, int type) {
-{
   Serial.print("Text: ID: ");
   Serial.print(sender->id);
   Serial.print(", 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: ");
@@ -46,10 +41,8 @@ void slider(Control* sender, int type)
   Serial.println(sliderValueWithOffset);
 }
 
-void buttonCallback(Control* sender, int type)
+void buttonCallback(Control *sender, int type) {
-{
+  switch (type) {
-    switch (type)
-    {
   case B_DOWN:
     Serial.println("Button DOWN");
     break;
@@ -60,10 +53,8 @@ void buttonCallback(Control* sender, int type)
   }
 }
 
-void buttonExample(Control* sender, int type)
+void buttonExample(Control *sender, int type) {
-{
+  switch (type) {
-    switch (type)
-    {
   case B_DOWN:
     Serial.println("Status: Start");
     ESPUI.print(statusLabelId, "Start");
@@ -75,10 +66,8 @@ void buttonExample(Control* sender, int type)
     break;
   }
 }
-void padExample(Control* sender, int value)
+void padExample(Control *sender, int value) {
-{
+  switch (value) {
-    switch (value)
-    {
   case P_LEFT_DOWN:
     Serial.print("left down");
     break;
@@ -124,10 +113,8 @@ void padExample(Control* sender, int value)
   Serial.println(sender->id);
 }
 
-void switchExample(Control* sender, int value)
+void switchExample(Control *sender, int value) {
-{
+  switch (value) {
-    switch (value)
-    {
   case S_ACTIVE:
     Serial.print("Active:");
     break;
@@ -141,10 +128,8 @@ void switchExample(Control* sender, int value)
   Serial.println(sender->id);
 }
 
-void otherSwitchExample(Control* sender, int value)
+void otherSwitchExample(Control *sender, int value) {
-{
+  switch (value) {
-    switch (value)
-    {
   case S_ACTIVE:
     Serial.print("Active:");
     break;
@@ -158,8 +143,7 @@ void otherSwitchExample(Control* sender, int value)
   Serial.println(sender->id);
 }
 
-void setup(void)
+void setup(void) {
-{
   ESPUI.setVerbosity(Verbosity::VerboseJSON);
   Serial.begin(115200);
 
@@ -177,38 +161,23 @@ 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));
-#if defined(ESP32)
+      WiFi.softAP(ssid);
-            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--;
@@ -241,7 +210,7 @@ void setup(void)
 
   /*
    * .begin loads and serves all files from PROGMEM directly.
-     * If you want to serve the files from LITTLEFS use ESPUI.beginLITTLEFS
+   * If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
    * (.prepareFileSystem has to be run in an empty sketch before)
    */
  
@@ -256,18 +225,17 @@ 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/tabbedGui/tabbedGui.ino

@@ -2,7 +2,7 @@
 #include <ESPUI.h>
 
 const byte DNS_PORT = 53;
-IPAddress apIP(192, 168, 4, 1);
+IPAddress apIP( 192, 168, 1, 1 );
 DNSServer dnsServer;
 
 #if defined(ESP32)
@@ -19,31 +19,24 @@ uint16_t button1;
 uint16_t switchOne;
 uint16_t status;
 
-void numberCall(Control* sender, int type)
+void numberCall( Control* sender, int type ) {
-{
   Serial.println( sender->value );
 }
 
-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)
+void buttonCallback( Control* sender, int type ) {
-{
+  switch ( type ) {
-    switch (type)
-    {
     case B_DOWN:
       Serial.println( "Button DOWN" );
       break;
@@ -54,10 +47,8 @@ void buttonCallback(Control* sender, int type)
   }
 }
 
-void buttonExample(Control* sender, int type)
+void buttonExample( Control* sender, int type ) {
-{
+  switch ( type ) {
-    switch (type)
-    {
     case B_DOWN:
       Serial.println( "Status: Start" );
       ESPUI.updateControlValue( status, "Start" );
@@ -76,10 +67,8 @@ void buttonExample(Control* sender, int type)
   }
 }
 
-void padExample(Control* sender, int value)
+void padExample( Control* sender, int value ) {
-{
+  switch ( value ) {
-    switch (value)
-    {
     case P_LEFT_DOWN:
       Serial.print( "left down" );
       break;
@@ -125,10 +114,8 @@ void padExample(Control* sender, int value)
   Serial.println( sender->id );
 }
 
-void switchExample(Control* sender, int value)
+void switchExample( Control* sender, int value ) {
-{
+  switch ( value ) {
-    switch (value)
-    {
     case S_ACTIVE:
       Serial.print( "Active:" );
       break;
@@ -142,18 +129,15 @@ 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)
+void otherSwitchExample( Control* sender, int value ) {
-{
+  switch ( value ) {
-    switch (value)
-    {
     case S_ACTIVE:
       Serial.print( "Active:" );
       break;
@@ -167,8 +151,7 @@ void otherSwitchExample(Control* sender, int value)
   Serial.println( sender->id );
 }
 
-void setup(void)
+void setup( void ) {
-{
   Serial.begin( 115200 );
 
 #if defined(ESP32)
@@ -185,38 +168,23 @@ 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 ) );
-#if defined(ESP32)
+      WiFi.softAP( ssid );
-            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--;
@@ -239,8 +207,7 @@ void setup(void)
   // shown above all tabs
   status = ESPUI.addControl( ControlType::Label, "Status:", "Stop", ControlColor::Turquoise );
 
-    uint16_t select1
+  uint16_t select1 = ESPUI.addControl( ControlType::Select, "Select:", "", ControlColor::Alizarin, tab1, &selectExample );
-        = 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 );
@@ -249,8 +216,7 @@ void setup(void)
 
   // tabbed controls
   ESPUI.addControl( ControlType::Label, "Millis:", "0", ControlColor::Emerald, tab1 );
-    button1 = ESPUI.addControl(
+  button1 = ESPUI.addControl( ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, tab1, &buttonCallback );
-        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 );
@@ -262,7 +228,7 @@ void setup(void)
 
   /*
    * .begin loads and serves all files from PROGMEM directly.
-     * If you want to serve the files from LITTLEFS use ESPUI.beginLITTLEFS
+   * If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
    * (.prepareFileSystem has to be run in an empty sketch before)
    */
 
@@ -277,18 +243,17 @@ 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" );
 

keywords.txt

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

library.json

@@ -6,16 +6,13 @@
     "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"
@@ -24,14 +21,9 @@
       "name": "ArduinoJson",
       "authors": "Benoit Blanchon",
       "frameworks": "arduino"
-    },
-    {
-      "name": "LittleFS_esp32",
-      "authors": "lorol",
-      "frameworks": "arduino"
     }
   ],
-  "version": "2.1.0",
+  "version": "2.0.2",
   "frameworks": "arduino",
   "platforms": "*"
 }

library.properties

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

pio_examples/gui/.gitignore

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

pio_examples/gui/platformio.ini

@@ -1,37 +0,0 @@
-; 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

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

src/ESPUI.cpp

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

src/ESPUI.h

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