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 {
+.card-slider {}
-  padding-bottom: 10px;
-}
 
 .turquoise {
   background: #1abc9c;
@@ -80,7 +79,7 @@
   text-align: center;
   color: #ffffff;
   font-weight: 700;
-  line-height: 1;
+  line-height: 1.3;
   margin-bottom: 5px;
   display: inline-block;
   white-space: nowrap;
@@ -135,114 +134,145 @@
   .container {
     width: 98%;
   }
+
   .column,
   .columns {
     margin-right: 2%;
   }
+
   .column:first-child,
   .columns:first-child {
     margin-left: 0;
   }
+
   .one.column,
   .one.columns {
     width: 4.66666666667%;
   }
+
   .two.columns {
     width: 13.3333333333%;
   }
+
   .three.columns {
     width: 22%;
   }
+
   .four.columns {
     width: 30.6666666667%;
   }
+
   .five.columns {
     width: 39.3333333333%;
   }
+
   .six.columns {
     width: 48%;
   }
+
   .seven.columns {
     width: 56.6666666667%;
   }
+
   .eight.columns {
     width: 65.3333333333%;
   }
+
   .nine.columns {
     width: 74%;
   }
+
   .ten.columns {
     width: 82.6666666667%;
   }
+
   .eleven.columns {
     width: 91.3333333333%;
   }
+
   .twelve.columns {
     width: 100%;
     margin-left: 0;
   }
+
   .one-third.column {
     width: 30.6666666667%;
   }
+
   .two-thirds.column {
     width: 65.3333333333%;
   }
+
   .one-half.column {
     width: 48%;
   }
+
   /* Offsets */
   .offset-by-one.column,
   .offset-by-one.columns {
     margin-left: 8.66666666667%;
   }
+
   .offset-by-two.column,
   .offset-by-two.columns {
     margin-left: 17.3333333333%;
   }
+
   .offset-by-three.column,
   .offset-by-three.columns {
     margin-left: 26%;
   }
+
   .offset-by-four.column,
   .offset-by-four.columns {
     margin-left: 34.6666666667%;
   }
+
   .offset-by-five.column,
   .offset-by-five.columns {
     margin-left: 43.3333333333%;
   }
+
   .offset-by-six.column,
   .offset-by-six.columns {
     margin-left: 52%;
   }
+
   .offset-by-seven.column,
   .offset-by-seven.columns {
     margin-left: 60.6666666667%;
   }
+
   .offset-by-eight.column,
   .offset-by-eight.columns {
     margin-left: 69.3333333333%;
   }
+
   .offset-by-nine.column,
   .offset-by-nine.columns {
     margin-left: 78%;
   }
+
   .offset-by-ten.column,
   .offset-by-ten.columns {
     margin-left: 86.6666666667%;
   }
+
   .offset-by-eleven.column,
   .offset-by-eleven.columns {
     margin-left: 95.3333333333%;
   }
+
   .offset-by-one-third.column,
   .offset-by-one-third.columns {
     margin-left: 34.6666666667%;
   }
+
   .offset-by-two-thirds.column,
   .offset-by-two-thirds.columns {
     margin-left: 69.3333333333%;
   }
+
   .offset-by-one-half.column,
   .offset-by-one-half.columns {
     margin-left: 52%;
@@ -322,18 +352,23 @@ h6 {
   h1 {
     font-size: 5rem;
   }
+
   h2 {
     font-size: 4.2rem;
   }
+
   h3 {
     font-size: 3.6rem;
   }
+
   h4 {
     font-size: 3rem;
   }
+
   h5 {
     font-size: 2rem;
   }
+
   h6 {
     font-size: 1.5rem;
   }
@@ -365,6 +400,11 @@ button {
   background-color: #999999;
 }
 
+button:active {
+  background-color: #666666;
+  transform: translateX(4px) translateY(4px);
+}
+
 /* Main Head Part
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
 
@@ -438,10 +478,8 @@ hr {
 
 .control {
   background-color: #ddd;
-  background-image: linear-gradient(
+  background-image: linear-gradient(hsla(0, 0%, 0%, 0.1),
-    hsla(0, 0%, 0%, 0.1),
+      hsla(0, 0%, 100%, 0.1));
-    hsla(0, 0%, 100%, 0.1)
-  );
   border-radius: 50%;
   box-shadow: inset 0 1px 1px 1px hsla(0, 0%, 100%, 0.5),
     0 0 1px 1px hsla(0, 0%, 100%, 0.75), 0 0 1px 2px hsla(0, 0%, 100%, 0.25),
@@ -506,10 +544,8 @@ hr {
 
 .control .confirm {
   background-color: #ddd;
-  background-image: linear-gradient(
+  background-image: linear-gradient(hsla(0, 0%, 0%, 0.15),
-    hsla(0, 0%, 0%, 0.15),
+      hsla(0, 0%, 100%, 0.25));
-    hsla(0, 0%, 100%, 0.25)
-  );
   box-shadow: inset 0 1px 1px 1px hsla(0, 0%, 100%, 0.5),
     0 0 1px 1px hsla(0, 0%, 100%, 0.25), 0 0 1px 2px hsla(0, 0%, 100%, 0.25),
     0 0 1px 3px hsla(0, 0%, 100%, 0.25), 0 0 1px 4px hsla(0, 0%, 100%, 0.25),
@@ -582,13 +618,11 @@ hr {
 .switch .in:before {
   background: #fff;
   background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
-  background: -webkit-gradient(
+  background: -webkit-gradient(linear,
-    linear,
+      left top,
-    left top,
+      left bottom,
-    left bottom,
+      color-stop(0%, #fff),
-    color-stop(0%, #fff),
+      color-stop(100%, #f0f0f0));
-    color-stop(100%, #f0f0f0)
-  );
   background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
   background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
   background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
@@ -607,13 +641,11 @@ hr {
 .switch .in:after {
   background: #f0f0f0;
   background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 100%);
-  background: -webkit-gradient(
+  background: -webkit-gradient(linear,
-    linear,
+      left top,
-    left top,
+      left bottom,
-    left bottom,
+      color-stop(0%, #f0f0f0),
-    color-stop(0%, #f0f0f0),
+      color-stop(100%, #fff));
-    color-stop(100%, #fff)
-  );
   background: -webkit-linear-gradient(top, #f0f0f0 0%, #fff 100%);
   background: -o-linear-gradient(top, #f0f0f0 0%, #fff 100%);
   background: -ms-linear-gradient(top, #f0f0f0 0%, #fff 100%);
@@ -635,6 +667,7 @@ hr {
   font-size: 16px;
   font-family: "Roboto", sans-serif;
 }
+
 .rkmd-slider input[type="range"] {
   overflow: hidden;
   position: absolute;
@@ -642,7 +675,8 @@ hr {
   height: 1px;
   opacity: 0;
 }
-.rkmd-slider input[type="range"] + .slider {
+
+.rkmd-slider input[type="range"]+.slider {
   display: block;
   position: relative;
   width: 100%;
@@ -650,13 +684,15 @@ hr {
   border-radius: 13px;
   background-color: #bebebe;
 }
+
 @media (pointer: fine) {
-  .rkmd-slider input[type="range"] + .slider {
+  .rkmd-slider input[type="range"]+.slider {
     height: 4px;
     border-radius: 0px;
   }
 }
-.rkmd-slider input[type="range"] + .slider .slider-fill {
+
+.rkmd-slider input[type="range"]+.slider .slider-fill {
   display: block;
   position: absolute;
   width: 0%;
@@ -664,7 +700,8 @@ hr {
   user-select: none;
   z-index: 1;
 }
-.rkmd-slider input[type="range"] + .slider .slider-handle {
+
+.rkmd-slider input[type="range"]+.slider .slider-handle {
   cursor: pointer;
   position: absolute;
   top: 12px;
@@ -677,50 +714,45 @@ hr {
   user-select: none;
   z-index: 2;
 }
+
 @media (pointer: fine) {
-  .rkmd-slider input[type="range"] + .slider .slider-handle {
+  .rkmd-slider input[type="range"]+.slider .slider-handle {
     top: -5.5px;
   }
 }
-.rkmd-slider input[type="range"]:disabled + .slider {
+
+.rkmd-slider input[type="range"]:disabled+.slider {
   background-color: #b0b0b0 !important;
 }
-.rkmd-slider input[type="range"]:disabled + .slider .slider-fill,
+
-.rkmd-slider input[type="range"]:disabled + .slider .slider-handle {
+.rkmd-slider input[type="range"]:disabled+.slider .slider-fill,
+.rkmd-slider input[type="range"]:disabled+.slider .slider-handle {
   cursor: default !important;
   background-color: #b0b0b0 !important;
 }
-.rkmd-slider input[type="range"]:disabled + .slider .slider-fill .slider-label,
+
-.rkmd-slider
+.rkmd-slider input[type="range"]:disabled+.slider .slider-fill .slider-label,
-  input[type="range"]:disabled
+.rkmd-slider input[type="range"]:disabled+.slider .slider-handle .slider-label {
-  + .slider
-  .slider-handle
-  .slider-label {
   display: none;
   background-color: #b0b0b0 !important;
 }
-.rkmd-slider input[type="range"]:disabled + .slider .slider-fill.is-active,
+
-.rkmd-slider input[type="range"]:disabled + .slider .slider-handle.is-active {
+.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active,
+.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active {
   top: -5.5px;
   width: 15px;
   height: 15px;
   margin-left: -8px;
 }
-.rkmd-slider
+
-  input[type="range"]:disabled
+.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active .slider-label,
-  + .slider
+.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active .slider-label {
-  .slider-fill.is-active
-  .slider-label,
-.rkmd-slider
-  input[type="range"]:disabled
-  + .slider
-  .slider-handle.is-active
-  .slider-label {
   display: none;
   border-radius: 50%;
   transform: none;
 }
-.rkmd-slider input[type="range"]:disabled + .slider .slider-handle:active {
+
+.rkmd-slider input[type="range"]:disabled+.slider .slider-handle:active {
   box-shadow: none !important;
   transform: scale(1) !important;
 }
@@ -747,6 +779,7 @@ hr {
   -webkit-transition: all 0.2s ease;
   transition: all 0.2s ease;
 }
+
 @media (pointer: fine) {
   .rkmd-slider.slider-discrete .slider .slider-handle .slider-label {
     left: -2px;
@@ -771,17 +804,20 @@ hr {
   -ms-user-select: none;
   user-select: none;
 }
+
 @media (pointer: fine) {
   .rkmd-slider.slider-discrete .slider .slider-handle .slider-label span {
     font-size: 12px;
   }
 }
+
 .rkmd-slider.slider-discrete .slider .slider-handle.is-active {
   top: 0px;
   margin-left: -2px;
   width: 4px;
   height: 4px;
 }
+
 .rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label {
   top: -15px;
   left: -2px;
@@ -789,11 +825,8 @@ hr {
   -webkit-transform: rotate(-45deg) translate(23px, -25px);
   transform: rotate(-45deg) translate(23px, -25px);
 }
-.rkmd-slider.slider-discrete
+
-  .slider
+.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label span {
-  .slider-handle.is-active
-  .slider-label
-  span {
   opacity: 1;
 }
 
@@ -898,20 +931,23 @@ input[id^="num"] {
   font-size: 115%;
 }
 
-body div > ul.navigation {
+body div>ul.navigation {
   margin: 0;
   padding: 0;
   border-bottom: 3px solid #666;
   overflow: hidden;
 }
+
 ul.navigation li {
   list-style: none;
   float: left;
   margin-right: 4px;
 }
+
 ul.navigation li.controls {
   float: right;
 }
+
 ul.navigation li a {
   font-weight: bold;
   display: inline-block;
@@ -936,7 +972,7 @@ ul.navigation li.active a {
   -pie-background: linear-gradient(#888, #666);
 }
 
-div.tabscontent > div {
+div.tabscontent>div {
   padding: 0 15px;
 }
 
@@ -947,9 +983,11 @@ div.tabscontent > div {
 .range-slider {
   margin: 0 0 0 0;
 }
+
 .range-slider {
   width: 100%;
 }
+
 .range-slider__range {
   -webkit-appearance: none;
   width: calc(100% - (45px));
@@ -959,6 +997,8 @@ div.tabscontent > div {
   padding: 0;
   margin: 0;
 }
+
+/*
 .range-slider__range::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
@@ -985,6 +1025,7 @@ div.tabscontent > div {
 .range-slider__range:focus::-webkit-slider-thumb {
   box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
 }
+*/
 .range-slider__value {
   display: inline-block;
   position: relative;
@@ -996,6 +1037,7 @@ div.tabscontent > div {
   padding: 5px 5px;
   margin-left: 2px;
 }
+
 .range-slider__value:after {
   position: absolute;
   top: 8px;
@@ -1007,9 +1049,11 @@ div.tabscontent > div {
  border-bottom:1px solid transparent;*/
   content: "";
 }
+
 ::-moz-range-track {
   border: 0;
 }
+
 input::-moz-focus-inner,
 input::-moz-focus-outer {
   border: 0;
@@ -1051,7 +1095,7 @@ svg {
   stroke-width: 6;
 }
 
-.data-points circle:hover + text {
+.data-points circle:hover+text {
   display: inline-block;
 }
 

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;
@@ -226,10 +228,14 @@ function start() {
   };
 
   var handleEvent = function (evt) {
-    //console.log(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:
         // 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($("#sl" + data.id), data.value, "100", false);
+        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"),
+  var range = $(".range-slider__range");
-    range = $(".range-slider__range"),
+  var slidercb = function() {
-    value = $(".range-slider__value");
+    sliderchange($(this).attr("id").replace(/^\D+/g, ""));
+  };
 
-  slider.each(function () {
+  range.on({input: function() {
-    value.each(function () {
+    $(this).next().html(this.value)}
-      var value = $(this).prev().attr("value");
+  });
-      $(this).html(value);
-    });
 
-    if (!isDiscrete) {
+  range.each(function() {
-      range.on({
+    $(this).next().html(this.value);
-        input: function () {
+    if($(this).attr("callbackSet") != "true") {
-          sliderchange($(this).attr("id").replace(/^\D+/g, ""));
+      if (!isDiscrete) {
-        },
+        $(this).on({input: slidercb}); //input fires when dragging
-      });
+      } else {
-    } else {
+        $(this).on({change: slidercb}); //change fires only once released
-      range.on({
+      }
-        input: function () {
+      $(this).attr("callbackSet", "true");
-          $(this).next().html(this.value);
-        },
-        change: function () {
-          sliderchange($(this).attr("id").replace(/^\D+/g, ""));
-        },
-      });
     }
   });
 };

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){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;}
+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_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_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");}
-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>"+
@@ -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");}
+"</div>");}
-parent.append("<div id='id"+
+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");}
+"</button></div>");$("#btn"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);},touchend:function(e){e.preventDefault();buttonclick(data.id,false);},});}
-parent.append("<div id='id"+
+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");}
+"</div>");switcher(data.id,data.value);}
-parent.append("<div id='id"+
+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");}
+"</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);},});}
-parent.append("<div id='id"+
+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");}
+"</div>");rangeSlider(!sliderContinuous);}
-parent.append("<div id='id"+
+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");}
+"</div>");}
-parent.append("<div id='id"+
+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 :\\");}
+"</div>");}
-e.preventDefault();});break;case UI_SELECT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+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 :\\");}
-parent.append("<div id='id"+
+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");}
+"</div>");graphData[data.id]=restoreGraphData(data.id);renderGraphSvg(graphData[data.id],"graph"+data.id);}
-parent.append("<div id='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");}
+"</div>");}
-hasAccel=true;parent.append("<div id='id"+
+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($("#sl"+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;}
+"</div>");requestOrientationPermission();}
-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_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");}});};

data/js/slider.js

@@ -10,7 +10,7 @@ function rkmd_rangeSlider(selector) {
   slider_offset = self.offset().left;
   sliderDiscrete = self;
 
-  sliderDiscrete.each(function(i, v) {
+  sliderDiscrete.each(function (i, v) {
     curnt = $(this);
     curnt.append(sliderDiscrete_tmplt());
     range = curnt.find('input[type="range"]');
@@ -25,7 +25,7 @@ function rkmd_rangeSlider(selector) {
     slider_label.find("span").text(range_val);
   });
 
-  self.on("mousedown touchstart", ".slider-handle", function(e) {
+  self.on("mousedown touchstart", ".slider-handle", function (e) {
     if (e.button === 2) {
       return false;
     }
@@ -37,14 +37,14 @@ function rkmd_rangeSlider(selector) {
       return false;
     }
     $(this).addClass("is-active");
-    var moveFu = function(e) {
+    var moveFu = function (e) {
       var pageX = e.pageX || e.changedTouches[0].pageX;
       var slider_new_width = pageX - slider_offset;
       if (slider_new_width <= slider_width && !(slider_new_width < "0")) {
         slider_move(parents, slider_new_width, slider_width, true);
       }
     };
-    var upFu = function(e) {
+    var upFu = function (e) {
       $(this).off(handlers);
       parents.find(".is-active").removeClass("is-active");
     };
@@ -53,12 +53,12 @@ function rkmd_rangeSlider(selector) {
       mousemove: moveFu,
       touchmove: moveFu,
       mouseup: upFu,
-      touchend: upFu
+      touchend: upFu,
     };
     $(document).on(handlers);
   });
 
-  self.on("mousedown touchstart", ".slider", function(e) {
+  self.on("mousedown touchstart", ".slider", function (e) {
     if (e.button === 2) {
       return false;
     }
@@ -76,13 +76,13 @@ function rkmd_rangeSlider(selector) {
     if (slider_new_width <= slider_width && !(slider_new_width < "0")) {
       slider_move(parents, slider_new_width, slider_width, true);
     }
-    var upFu = function(e) {
+    var upFu = function (e) {
       $(this).off(handlers);
     };
 
     var handlers = {
       mouseup: upFu,
-      touchend: upFu
+      touchend: upFu,
     };
     $(document).on(handlers);
   });
@@ -104,13 +104,14 @@ function slider_move(parents, newW, sliderW, send) {
   var slider_fill = parents.find(".slider-fill");
   var slider_handle = parents.find(".slider-handle");
   var range = parents.find('input[type="range"]');
+  range.next().html(newW); // update value
 
   slider_fill.css("width", slider_new_val + "%");
   slider_handle.css({
     left: slider_new_val + "%",
     transition: "none",
     "-webkit-transition": "none",
-    "-moz-transition": "none"
+    "-moz-transition": "none",
   });
 
   range.val(slider_new_val);

data/js/slider.min.js

@@ -1,11 +1,11 @@
 function rkmd_rangeSlider(selector){var self,slider_width,slider_offset,curnt,sliderDiscrete,range,slider;self=$(selector);slider_width=self.width();slider_offset=self.offset().left;sliderDiscrete=self;sliderDiscrete.each(function(i,v){curnt=$(this);curnt.append(sliderDiscrete_tmplt());range=curnt.find('input[type="range"]');slider=curnt.find(".slider");slider_fill=slider.find(".slider-fill");slider_handle=slider.find(".slider-handle");slider_label=slider.find(".slider-label");var range_val=parseInt(range.val());slider_fill.css("width",range_val+"%");slider_handle.css("left",range_val+"%");slider_label.find("span").text(range_val);});self.on("mousedown touchstart",".slider-handle",function(e){if(e.button===2){return false;}
 var parents=$(this).parents(".rkmd-slider");var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(":disabled");if(check_range===true){return false;}
-$(this).addClass("is-active");var moveFu=function(e){var pageX=e.pageX||e.changedTouches[0].pageX;var slider_new_width=pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<"0")){slider_move(parents,slider_new_width,slider_width,true);}};var upFu=function(e){$(this).off(handlers);parents.find(".is-active").removeClass("is-active");};var handlers={mousemove:moveFu,touchmove:moveFu,mouseup:upFu,touchend:upFu};$(document).on(handlers);});self.on("mousedown touchstart",".slider",function(e){if(e.button===2){return false;}
+$(this).addClass("is-active");var moveFu=function(e){var pageX=e.pageX||e.changedTouches[0].pageX;var slider_new_width=pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<"0")){slider_move(parents,slider_new_width,slider_width,true);}};var upFu=function(e){$(this).off(handlers);parents.find(".is-active").removeClass("is-active");};var handlers={mousemove:moveFu,touchmove:moveFu,mouseup:upFu,touchend:upFu,};$(document).on(handlers);});self.on("mousedown touchstart",".slider",function(e){if(e.button===2){return false;}
 var parents=$(this).parents(".rkmd-slider");var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(":disabled");if(check_range===true){return false;}
 var slider_new_width=e.pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<"0")){slider_move(parents,slider_new_width,slider_width,true);}
-var upFu=function(e){$(this).off(handlers);};var handlers={mouseup:upFu,touchend:upFu};$(document).on(handlers);});}
+var upFu=function(e){$(this).off(handlers);};var handlers={mouseup:upFu,touchend:upFu,};$(document).on(handlers);});}
 function sliderDiscrete_tmplt(){var tmplt='<div class="slider">'+
 '<div class="slider-fill"></div>'+
 '<div class="slider-handle"><div class="slider-label"><span>0</span></div></div>'+
 "</div>";return tmplt;}
-function slider_move(parents,newW,sliderW,send){var slider_new_val=parseInt(Math.round((newW/sliderW)*100));var slider_fill=parents.find(".slider-fill");var slider_handle=parents.find(".slider-handle");var range=parents.find('input[type="range"]');slider_fill.css("width",slider_new_val+"%");slider_handle.css({left:slider_new_val+"%",transition:"none","-webkit-transition":"none","-moz-transition":"none"});range.val(slider_new_val);if(parents.find(".slider-handle span").text()!=slider_new_val){parents.find(".slider-handle span").text(slider_new_val);var number=parents.attr("id").substring(2);if(send)websock.send("slvalue:"+slider_new_val+":"+number);}}
+function slider_move(parents,newW,sliderW,send){var slider_new_val=parseInt(Math.round((newW/sliderW)*100));var slider_fill=parents.find(".slider-fill");var slider_handle=parents.find(".slider-handle");var range=parents.find('input[type="range"]');range.next().html(newW);slider_fill.css("width",slider_new_val+"%");slider_handle.css({left:slider_new_val+"%",transition:"none","-webkit-transition":"none","-moz-transition":"none",});range.val(slider_new_val);if(parents.find(".slider-handle span").text()!=slider_new_val){parents.find(".slider-handle span").text(slider_new_val);var number=parents.attr("id").substring(2);if(send)websock.send("slvalue:"+slider_new_val+":"+number);}}

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

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

examples/gui/gui.ino

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

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

keywords.txt

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

library.json

@@ -24,9 +24,14 @@
       "name": "ArduinoJson",
       "authors": "Benoit Blanchon",
       "frameworks": "arduino"
+    },
+    {
+      "name": "LittleFS_esp32",
+      "authors": "lorol",
+      "frameworks": "arduino"
     }
   ],
-  "version": "2.0.0",
+  "version": "2.1.0",
   "frameworks": "arduino",
   "platforms": "*"
 }

library.properties

@@ -1,5 +1,5 @@
 name=ESPUI
-version=2.0.0
+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 "SPIFFS.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 <FS.h>
 #include <Hash.h>
-#include <SPIFFSEditor.h>
+#include <LittleFS.h>
 
 #define FILE_WRITE "w"
 
@@ -35,54 +33,56 @@
 
 enum ControlType : uint8_t
 {
-  // fixed controls
+    // fixed controls
-  Title = 0,
+    Title = 0,
 
-  // updatable controls
+    // updatable controls
-  Pad,
+    Pad,
-  PadWithCenter,
+    PadWithCenter,
-  Button,
+    Button,
-  Label,
+    Label,
-  Switcher,
+    Switcher,
-  Slider,
+    Slider,
-  Number,
+    Number,
-  Text,
+    Text,
-  Graph,
+    Graph,
-  GraphPoint,
+    GraphPoint,
-  Tab,
+    Tab,
-  Select,
+    Select,
-  Option,
+    Option,
-  Min,
+    Min,
-  Max,
+    Max,
-  Step,
+    Step,
-  Gauge,
+    Gauge,
-  Accel,
+    Accel,
 
-  UpdateOffset = 100,
+    UpdateOffset = 100,
-  UpdatePad = 101,
+    UpdatePad = 101,
-  UpdatePadWithCenter,
+    UpdatePadWithCenter,
-  ButtonButton,
+    ButtonButton,
-  UpdateLabel,
+    UpdateLabel,
-  UpdateSwitcher,
+    UpdateSwitcher,
-  UpdateSlider,
+    UpdateSlider,
-  UpdateNumber,
+    UpdateNumber,
-  UpdateText,
+    UpdateText,
-  ClearGraph,
+    ClearGraph,
-  UpdateTab,
+    UpdateTab,
-  UpdateSelection,
+    UpdateSelection,
-  UpdateOption,
+    UpdateOption,
-  UpdateMin,
+    UpdateMin,
-  UpdateMax,
+    UpdateMax,
-  UpdateStep,
+    UpdateStep,
-  UpdateGauge,
+    UpdateGauge,
-  UpdateAccel,
+    UpdateAccel,
 
-  InitialGui = 200,
+    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
@@ -106,15 +106,15 @@ enum ControlType : uint8_t
 // Colors
 enum ControlColor : uint8_t
 {
-  Turquoise,
+    Turquoise,
-  Emerald,
+    Emerald,
-  Peterriver,
+    Peterriver,
-  Wetasphalt,
+    Wetasphalt,
-  Sunflower,
+    Sunflower,
-  Carrot,
+    Carrot,
-  Alizarin,
+    Alizarin,
-  Dark,
+    Dark,
-  None = 0xFF
+    None = 0xFF
 };
 #define COLOR_TURQUOISE ControlColor::Turquoise
 #define COLOR_EMERALD ControlColor::Emerald
@@ -129,30 +129,48 @@ enum ControlColor : uint8_t
 class Control
 {
 public:
-  ControlType type;
+    ControlType type;
-  uint16_t id; // just mirroring the id here for practical reasons
+    uint16_t id; // just mirroring the id here for practical reasons
-  const char *label;
+    const char* label;
-  void (*callback)(Control *, int);
+    void (*callback)(Control*, int);
-  String value;
+    String value;
-  ControlColor color;
+    ControlColor color;
-  uint16_t parentControl;
+    bool visible;
-  Control *next;
+    uint16_t parentControl;
+    String panelStyle;
+    String elementStyle;
+    Control* next;
 
-  static constexpr uint16_t noParent = 0xffff;
+    static constexpr uint16_t noParent = 0xffff;
 
-  Control(ControlType type, const char *label, void (*callback)(Control *, int), String value, ControlColor color,
+    Control(ControlType type, const char* label, void (*callback)(Control*, int), const String& value,
-          uint16_t parentControl = Control::noParent)
+        ControlColor color, bool visible = true, uint16_t parentControl = Control::noParent)
-      : type(type), label(label), callback(callback), value(value), color(color), parentControl(parentControl), next(nullptr)
+        : type(type),
-  {
+          label(label),
-    id = idCounter++;
+          callback(callback),
-  }
+          value(value),
+          color(color),
+          visible(visible),
+          parentControl(parentControl),
+          next(nullptr)
+    {
+        id = idCounter++;
+    }
 
-  Control(const Control &control)
+    Control(const Control& control)
-      : type(control.type), id(control.id), label(control.label), callback(control.callback), value(control.value), color(control.color),
+        : type(control.type),
-        parentControl(control.parentControl), next(control.next) {}
+          id(control.id),
+          label(control.label),
+          callback(control.callback),
+          value(control.value),
+          color(control.color),
+          visible(control.visible),
+          parentControl(control.parentControl),
+          next(control.next)
+    { }
 
 private:
-  static uint16_t idCounter;
+    static uint16_t idCounter;
 };
 
 // Values
@@ -180,93 +198,112 @@ private:
 
 enum Verbosity : uint8_t
 {
-  Quiet = 0,
+    Quiet = 0,
-  Verbose,
+    Verbose,
-  VerboseJSON
+    VerboseJSON
 };
 
 class ESPUIClass
 {
 public:
-  ESPUIClass()
+    ESPUIClass()
-  {
+    {
-    verbosity = Verbosity::Quiet;
+        verbosity = Verbosity::Quiet;
-    jsonUpdateDocumentSize = 2000;
+        jsonUpdateDocumentSize = 2000;
-    jsonInitialDocumentSize = 8000;
+        jsonInitialDocumentSize = 8000;
-    sliderContinuous = false;
+        sliderContinuous = false;
-  }
+    }
-  unsigned int jsonUpdateDocumentSize;
+    unsigned int jsonUpdateDocumentSize;
-  unsigned int jsonInitialDocumentSize;
+    unsigned int jsonInitialDocumentSize;
-  bool sliderContinuous;
+    bool sliderContinuous;
 
-  void setVerbosity(Verbosity verbosity);
+    void setVerbosity(Verbosity verbosity);
-  void begin(const char *_title, const char *username = nullptr, const char *password = nullptr);       // Setup server and page in Memorymode
+    void begin(const char* _title, const char* username = nullptr, const char* password = nullptr,
-  void beginSPIFFS(const char *_title, const char *username = nullptr, const char *password = nullptr); // Setup server and page in SPIFFSmode
+        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 prepareFileSystem(); // Initially preps the filesystem and loads a lot of
-  void list();              // Lists SPIFFS directory
+                              // 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(""),
-  bool removeControl(uint16_t id, bool force_reload_ui = false);
+        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
+    // create Elements
-  uint16_t button(const char *label, void (*callback)(Control *, int), ControlColor color, String value = "");         // Create Event Button
+    uint16_t button(const char* label, void (*callback)(Control*, int), ControlColor color,
-  uint16_t switcher(const char *label, void (*callback)(Control *, int), ControlColor color, bool startState = false); // Create Toggle Button
+        const String& value = ""); // Create Event Button
-  uint16_t pad(const char *label, void (*callback)(Control *, int), ControlColor color);                               // Create Pad Control
+    uint16_t switcher(const char* label, void (*callback)(Control*, int), ControlColor color,
-  uint16_t padWithCenter(const char *label, void (*callback)(Control *, int), ControlColor color);                     // Create Pad Control with Centerbutton
+        bool startState = false); // Create Toggle Button
+    uint16_t pad(const char* label, void (*callback)(Control*, int),
+        ControlColor color); // Create Pad Control
+    uint16_t padWithCenter(const char* label, void (*callback)(Control*, int),
+        ControlColor color); // Create Pad Control with Centerbutton
 
-  uint16_t slider(const char *label, void (*callback)(Control *, int), ControlColor color, int value, int min = 0,
+    uint16_t slider(const char* label, void (*callback)(Control*, int), ControlColor color, int value, int min = 0,
-                  int max = 100); // Create Slider Control
+        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
+        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
+    // Output only
-  uint16_t label(const char *label, ControlColor color, String value = "");                     // Create Label
+    uint16_t label(const char* label, ControlColor color,
-  uint16_t graph(const char *label, ControlColor color);                                        // Create Graph display
+        const String& value = ""); // Create Label
-  uint16_t gauge(const char *label, ControlColor color, int value, int min = 0, int max = 100); // Create Gauge display
+    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
+    // 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
+    // Update Elements
 
-  Control *getControl(uint16_t id);
+    Control* getControl(uint16_t id);
 
-  // Update Elements
+    // Update Elements
-  void updateControlValue(uint16_t id, String value, int clientId = -1);
+    void updateControlValue(uint16_t id, const String& value, int clientId = -1);
-  void updateControlValue(Control *control, String value, int clientId = -1);
+    void updateControlValue(Control* control, const String& value, int clientId = -1);
 
-  void updateControl(uint16_t id, int clientId = -1);
+    void updateControl(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 print(uint16_t id, const String& value);
-  void updateLabel(uint16_t id, String value);
+    void updateLabel(uint16_t id, const String& value);
-  void updateSwitcher(uint16_t id, bool nValue, int clientId = -1);
+    void updateSwitcher(uint16_t id, bool nValue, int clientId = -1);
-  void updateSlider(uint16_t id, int 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 updateNumber(uint16_t id, int nValue, int clientId = -1);
-  void updateText(uint16_t id, String nValue, int clientId = -1);
+    void updateText(uint16_t id, const String& nValue, int clientId = -1);
-  void updateSelect(uint16_t id, String nValue, int clientId = -1);
+    void updateSelect(uint16_t id, const String& nValue, int clientId = -1);
-  void updateGauge(uint16_t id, int number, int clientId);
+    void updateGauge(uint16_t id, int number, int clientId);
 
-  void clearGraph(uint16_t id, int clientId = -1);
+    void clearGraph(uint16_t id, int clientId = -1);
-  void addGraphPoint(uint16_t id, int nValue, int clientId = -1);
+    void addGraphPoint(uint16_t id, int nValue, int clientId = -1);
 
-  // Variables
+    void setPanelStyle(uint16_t id, String style, int clientId = -1);
-  const char *ui_title = "ESPUI"; // Store UI Title and Header Name
+    void setElementStyle(uint16_t id, String style, int clientId = -1);
-  Control *controls = nullptr;
-  void jsonReload();
-  void jsonDom(AsyncWebSocketClient *client);
 
-  Verbosity verbosity;
+    // Variables
+    const char* ui_title = "ESPUI"; // Store UI Title and Header Name
+    Control* controls = nullptr;
+    void jsonReload();
+    void jsonDom(AsyncWebSocketClient* client = nullptr);
 
-  AsyncWebServer *server;
+    Verbosity verbosity;
-  AsyncWebSocket *ws;
+
+    AsyncWebServer* server;
+    AsyncWebSocket* ws;
 
 private:
-  const char *basicAuthUsername = nullptr;
+    const char* basicAuthUsername = nullptr;
-  const char *basicAuthPassword = nullptr;
+    const char* basicAuthPassword = nullptr;
-  bool basicAuth = true;
+    bool basicAuth = true;
+
+    Control* prepareJSONChunk(AsyncWebSocketClient* client, Control* control, JsonArray* items);
 };
 
 extern ESPUIClass ESPUI;

src/dataSliderJS.h

@@ -1,15 +1,15 @@
 const char JS_SLIDER[] PROGMEM = R"=====(
 function rkmd_rangeSlider(selector){var self,slider_width,slider_offset,curnt,sliderDiscrete,range,slider;self=$(selector);slider_width=self.width();slider_offset=self.offset().left;sliderDiscrete=self;sliderDiscrete.each(function(i,v){curnt=$(this);curnt.append(sliderDiscrete_tmplt());range=curnt.find('input[type="range"]');slider=curnt.find(".slider");slider_fill=slider.find(".slider-fill");slider_handle=slider.find(".slider-handle");slider_label=slider.find(".slider-label");var range_val=parseInt(range.val());slider_fill.css("width",range_val+"%");slider_handle.css("left",range_val+"%");slider_label.find("span").text(range_val);});self.on("mousedown touchstart",".slider-handle",function(e){if(e.button===2){return false;}
 var parents=$(this).parents(".rkmd-slider");var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(":disabled");if(check_range===true){return false;}
-$(this).addClass("is-active");var moveFu=function(e){var pageX=e.pageX||e.changedTouches[0].pageX;var slider_new_width=pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<"0")){slider_move(parents,slider_new_width,slider_width,true);}};var upFu=function(e){$(this).off(handlers);parents.find(".is-active").removeClass("is-active");};var handlers={mousemove:moveFu,touchmove:moveFu,mouseup:upFu,touchend:upFu};$(document).on(handlers);});self.on("mousedown touchstart",".slider",function(e){if(e.button===2){return false;}
+$(this).addClass("is-active");var moveFu=function(e){var pageX=e.pageX||e.changedTouches[0].pageX;var slider_new_width=pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<"0")){slider_move(parents,slider_new_width,slider_width,true);}};var upFu=function(e){$(this).off(handlers);parents.find(".is-active").removeClass("is-active");};var handlers={mousemove:moveFu,touchmove:moveFu,mouseup:upFu,touchend:upFu,};$(document).on(handlers);});self.on("mousedown touchstart",".slider",function(e){if(e.button===2){return false;}
 var parents=$(this).parents(".rkmd-slider");var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(":disabled");if(check_range===true){return false;}
 var slider_new_width=e.pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<"0")){slider_move(parents,slider_new_width,slider_width,true);}
-var upFu=function(e){$(this).off(handlers);};var handlers={mouseup:upFu,touchend:upFu};$(document).on(handlers);});}
+var upFu=function(e){$(this).off(handlers);};var handlers={mouseup:upFu,touchend:upFu,};$(document).on(handlers);});}
 function sliderDiscrete_tmplt(){var tmplt='<div class="slider">'+
 '<div class="slider-fill"></div>'+
 '<div class="slider-handle"><div class="slider-label"><span>0</span></div></div>'+
 "</div>";return tmplt;}
-function slider_move(parents,newW,sliderW,send){var slider_new_val=parseInt(Math.round((newW/sliderW)*100));var slider_fill=parents.find(".slider-fill");var slider_handle=parents.find(".slider-handle");var range=parents.find('input[type="range"]');slider_fill.css("width",slider_new_val+"%");slider_handle.css({left:slider_new_val+"%",transition:"none","-webkit-transition":"none","-moz-transition":"none"});range.val(slider_new_val);if(parents.find(".slider-handle span").text()!=slider_new_val){parents.find(".slider-handle span").text(slider_new_val);var number=parents.attr("id").substring(2);if(send)websock.send("slvalue:"+slider_new_val+":"+number);}}
+function slider_move(parents,newW,sliderW,send){var slider_new_val=parseInt(Math.round((newW/sliderW)*100));var slider_fill=parents.find(".slider-fill");var slider_handle=parents.find(".slider-handle");var range=parents.find('input[type="range"]');range.next().html(newW);slider_fill.css("width",slider_new_val+"%");slider_handle.css({left:slider_new_val+"%",transition:"none","-webkit-transition":"none","-moz-transition":"none",});range.val(slider_new_val);if(parents.find(".slider-handle span").text()!=slider_new_val){parents.find(".slider-handle span").text(slider_new_val);var number=parents.attr("id").substring(2);if(send)websock.send("slvalue:"+slider_new_val+":"+number);}}
 )=====";
 
-const uint8_t JS_SLIDER_GZIP[869] PROGMEM = { 31,139,8,0,19,56,231,94,2,255,237,86,77,143,155,48,16,189,231,87,100,173,237,6,186,196,155,238,49,196,185,180,170,212,67,79,173,212,74,171,85,228,128,89,172,16,131,176,73,218,102,243,223,59,254,128,0,33,171,109,79,61,244,4,246,60,143,103,222,60,123,156,84,34,82,60,23,227,114,179,141,87,37,21,79,236,75,198,99,86,122,146,101,44,82,121,233,31,118,180,28,195,40,9,164,177,172,246,60,86,105,61,200,147,68,50,21,68,85,41,148,155,251,192,101,84,50,197,2,227,206,77,134,218,3,185,62,185,13,219,222,136,182,98,243,235,53,22,235,218,154,236,191,231,227,140,37,42,236,238,99,16,189,57,204,104,148,122,137,203,206,227,193,206,63,152,24,33,4,149,114,233,135,102,132,105,81,48,17,123,221,197,43,181,45,50,216,204,15,77,6,196,66,19,14,192,9,23,69,165,30,212,207,130,17,100,172,232,113,82,71,220,6,34,108,231,80,147,78,194,179,140,216,255,46,100,170,45,39,92,74,69,156,177,97,164,181,157,176,25,93,179,11,78,141,9,144,186,122,38,208,213,142,102,164,160,165,100,159,132,242,204,20,134,41,157,102,43,66,28,73,233,33,83,9,20,52,235,110,209,155,126,128,22,168,203,113,9,103,34,112,81,201,130,10,228,99,197,126,184,173,53,218,15,143,126,104,203,43,60,180,205,43,201,226,124,47,198,42,175,162,84,42,90,130,235,126,234,65,83,83,230,31,120,226,49,188,174,148,202,5,33,228,222,63,64,245,160,4,227,132,102,146,133,199,145,206,29,50,102,66,201,186,238,216,141,129,40,45,249,105,83,37,163,242,182,36,29,176,81,101,11,224,148,89,35,186,226,212,184,40,101,209,198,30,167,6,245,130,126,48,135,120,230,49,151,116,157,177,24,130,129,196,218,46,8,81,101,197,206,210,171,83,162,113,252,62,163,186,28,92,78,41,176,179,99,46,161,109,190,99,31,43,210,230,204,114,242,196,190,19,134,205,247,249,25,106,153,234,125,226,175,154,120,38,31,102,143,214,212,206,89,176,125,67,12,152,166,29,42,116,192,125,220,130,180,233,188,185,185,58,71,160,25,242,253,131,155,214,177,122,142,172,160,15,237,222,61,134,141,240,120,52,241,85,69,47,195,154,22,8,205,179,170,41,225,188,119,202,128,112,139,41,92,50,189,247,0,133,118,131,218,7,57,24,137,106,236,220,18,27,24,165,182,39,12,162,42,230,58,40,107,133,235,197,140,142,225,181,23,231,81,181,133,40,124,45,248,83,104,175,63,5,255,229,223,75,239,76,156,78,212,255,130,60,71,127,160,206,65,165,253,133,142,142,163,122,175,241,112,79,51,231,223,252,147,201,34,230,187,113,164,101,79,144,19,194,114,114,59,26,152,183,45,106,185,184,3,203,37,136,187,160,151,3,38,219,139,150,11,221,5,150,179,197,157,249,90,103,141,75,100,255,80,232,170,108,98,60,207,167,91,7,40,192,55,199,61,124,129,34,247,90,57,149,167,211,244,62,83,149,226,50,175,64,137,158,94,122,231,150,250,111,223,205,102,126,71,227,166,91,247,238,140,110,187,110,129,93,203,30,134,55,61,187,233,196,175,57,19,23,123,114,55,183,75,141,249,160,207,226,252,28,11,218,164,66,114,77,232,28,137,92,64,67,69,211,61,91,111,184,154,158,76,232,100,219,230,191,6,12,71,247,52,50,15,136,238,46,230,244,190,196,196,184,253,22,240,175,72,111,249,225,213,107,251,251,106,126,69,181,93,195,67,172,246,65,149,42,225,74,135,59,5,203,106,45,85,201,197,147,119,111,66,52,106,129,204,101,30,109,176,30,192,35,37,3,63,21,155,163,219,62,113,48,101,61,235,174,243,27,27,117,74,231,52,11,0,0 };
+const uint8_t JS_SLIDER_GZIP[881] PROGMEM = { 31,139,8,0,150,187,70,95,2,255,237,86,77,143,218,48,16,189,243,43,88,107,187,196,93,240,210,61,18,204,165,85,165,30,122,106,165,86,90,173,144,73,156,141,69,112,162,216,129,182,44,255,189,227,143,132,36,192,106,219,83,15,61,37,246,60,143,223,204,60,123,156,84,50,210,34,151,195,114,189,137,151,37,147,79,252,75,38,98,94,6,138,103,60,210,121,137,247,91,86,14,97,148,140,149,181,44,119,34,214,105,61,200,147,68,113,61,142,170,82,106,63,247,65,168,168,228,154,143,173,59,63,25,26,15,244,250,232,54,108,123,163,198,74,236,111,208,88,156,107,103,114,255,1,38,25,79,116,216,221,199,34,122,115,132,179,40,13,18,31,93,32,198,91,188,183,28,129,130,78,133,194,161,29,17,86,20,92,198,65,119,241,82,111,138,12,54,195,161,141,128,58,104,34,0,56,18,178,168,244,131,254,89,112,138,172,21,61,142,106,198,109,32,34,110,14,53,225,36,34,203,168,251,239,66,38,198,114,196,165,76,198,25,63,143,116,182,35,54,99,43,126,193,169,53,1,210,84,207,18,93,110,89,70,11,86,42,254,73,234,192,78,17,152,50,97,182,24,146,72,169,0,217,74,160,113,179,238,22,189,233,19,116,64,83,142,75,56,203,192,179,82,5,147,8,19,205,127,248,173,13,26,135,7,28,186,242,202,0,109,242,74,241,56,223,201,161,206,171,40,85,154,149,224,186,31,250,184,169,41,199,123,145,4,156,172,42,173,115,73,41,189,199,123,168,30,148,96,152,176,76,241,240,48,48,177,67,196,92,106,85,215,157,248,49,36,202,72,126,210,84,201,170,188,45,73,15,108,84,217,2,120,101,214,136,174,56,13,46,74,121,180,118,199,169,65,189,160,31,34,128,207,44,22,138,173,50,30,3,25,8,172,237,130,82,93,86,252,36,188,58,36,22,199,239,51,102,202,33,212,132,65,118,182,220,7,180,201,183,252,99,69,219,57,115,57,121,226,223,41,39,246,251,252,12,181,76,205,62,241,87,147,120,174,30,166,143,206,212,142,89,242,93,147,24,48,77,58,169,48,132,251,184,57,109,167,243,230,230,234,20,129,166,8,227,189,159,54,92,3,159,172,113,31,218,189,123,108,54,194,195,193,242,171,138,94,132,117,90,128,90,224,84,83,194,121,239,148,1,145,86,166,72,201,205,222,103,82,232,54,168,125,208,189,149,168,193,206,92,98,199,86,169,237,9,139,168,138,153,33,229,172,112,189,184,209,33,188,14,226,60,170,54,64,3,27,197,31,185,189,254,24,252,215,127,47,188,19,117,122,85,255,11,250,28,252,129,60,207,74,237,111,132,116,24,212,155,13,207,119,53,123,3,216,127,58,154,199,98,59,140,140,240,41,242,74,88,140,110,7,103,230,93,147,90,204,239,192,114,9,226,175,232,197,25,147,235,70,139,185,233,3,139,233,252,206,126,157,179,198,37,114,127,40,244,101,182,28,79,227,233,22,2,42,240,205,39,31,190,144,35,255,94,57,214,167,211,246,62,51,157,146,50,175,64,138,129,89,122,231,151,226,183,239,166,83,220,17,185,237,215,189,91,163,219,176,91,96,223,180,207,195,155,174,221,244,226,215,28,10,247,248,32,210,180,76,76,82,189,201,44,227,203,221,186,27,243,165,150,189,55,135,116,118,138,5,209,50,169,132,73,244,12,201,92,66,171,69,147,29,95,173,133,158,28,77,232,104,219,228,191,206,25,14,53,113,243,182,232,110,99,207,245,75,41,26,182,159,9,248,138,246,150,239,95,189,182,191,175,73,188,172,54,43,120,163,213,62,152,214,37,220,246,112,219,16,85,173,148,46,133,124,10,238,45,69,43,35,8,93,229,209,154,152,1,188,95,50,240,83,241,25,186,237,103,14,166,156,103,211,144,126,3,128,124,107,46,79,11,0,0 };