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

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

data/css/style.css

@@ -12,6 +12,7 @@
 }
 
 .card {
+  min-height: 100px;
   margin-top: 2%;
   border-radius: 6px;
   box-shadow: 0 4px 4px rgba(204, 197, 185, 0.5);
@@ -28,9 +29,7 @@
   }
 }
 
-.card-slider {
-  padding-bottom: 10px;
-}
+.card-slider {}
 
 .turquoise {
   background: #1abc9c;
@@ -80,7 +79,7 @@
   text-align: center;
   color: #ffffff;
   font-weight: 700;
-  line-height: 1;
+  line-height: 1.3;
   margin-bottom: 5px;
   display: inline-block;
   white-space: nowrap;
@@ -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(
-    hsla(0, 0%, 0%, 0.1),
-    hsla(0, 0%, 100%, 0.1)
-  );
+  background-image: linear-gradient(hsla(0, 0%, 0%, 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(
-    hsla(0, 0%, 0%, 0.15),
-    hsla(0, 0%, 100%, 0.25)
-  );
+  background-image: linear-gradient(hsla(0, 0%, 0%, 0.15),
+      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(
-    linear,
-    left top,
-    left bottom,
-    color-stop(0%, #fff),
-    color-stop(100%, #f0f0f0)
-  );
+  background: -webkit-gradient(linear,
+      left top,
+      left bottom,
+      color-stop(0%, #fff),
+      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(
-    linear,
-    left top,
-    left bottom,
-    color-stop(0%, #f0f0f0),
-    color-stop(100%, #fff)
-  );
+  background: -webkit-gradient(linear,
+      left top,
+      left bottom,
+      color-stop(0%, #f0f0f0),
+      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
-  input[type="range"]:disabled
-  + .slider
-  .slider-handle
-  .slider-label {
+
+.rkmd-slider input[type="range"]:disabled+.slider .slider-fill .slider-label,
+.rkmd-slider input[type="range"]:disabled+.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
-  + .slider
-  .slider-fill.is-active
-  .slider-label,
-.rkmd-slider
-  input[type="range"]:disabled
-  + .slider
-  .slider-handle.is-active
-  .slider-label {
+
+.rkmd-slider input[type="range"]:disabled+.slider .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
-  .slider-handle.is-active
-  .slider-label
-  span {
+
+.rkmd-slider.slider-discrete .slider .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

@@ -1,6 +1,9 @@
 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;
@@ -225,12 +228,21 @@ 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
+        $("#row").html("");
+        $("#tabsnav").html("");
+        $("#tabscontent").html("");
+
         if (data.sliderContinuous) {
           sliderContinuous = data.sliderContinuous;
         }
@@ -242,6 +254,19 @@ function start() {
         });
         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);
@@ -254,10 +279,11 @@ function start() {
         } else {
           parent = $("#row");
         }
+		if (data.visible) {
         parent.append(
-          "<div id='id" +
+          "<div id='id" + 
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -265,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:
@@ -279,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>" +
@@ -290,7 +318,7 @@ function start() {
             "</h5><hr/>" +
             "<button id='btn" +
             data.id +
-            "' " +
+            "' " + elementStyle + " " +
             "onmousedown='buttonclick(" +
             data.id +
             ", true)' " +
@@ -310,6 +338,7 @@ function start() {
             buttonclick(data.id, false);
           },
         });
+		}
         break;
 
       case UI_SWITCHER:
@@ -319,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>" +
@@ -330,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" +
@@ -344,6 +374,7 @@ function start() {
             "</div>"
         );
         switcher(data.id, data.value);
+		}
         break;
 
       case UI_CPAD:
@@ -354,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>" +
@@ -371,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," +
@@ -457,7 +489,7 @@ function start() {
             padclick(CENTER, data.id, false);
           },
         });
-
+		}
         break;
 
       //https://codepen.io/seanstopnik/pen/CeLqA
@@ -468,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>" +
@@ -482,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>" +
@@ -490,6 +523,7 @@ function start() {
             "</div>"
         );
         rangeSlider(!sliderContinuous);
+		}
         break;
 
       case UI_NUMBER:
@@ -499,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 +
@@ -517,6 +552,7 @@ function start() {
             ")' />" +
             "</div>"
         );
+		}
         break;
 
       case UI_TEXT_INPUT:
@@ -526,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 +
@@ -544,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>");
 
@@ -565,6 +604,7 @@ function start() {
             }
             e.preventDefault();
           });
+		}
         break;
 
       case UI_SELECT:
@@ -574,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:
@@ -642,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>" +
@@ -662,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);
@@ -681,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>" +
@@ -699,6 +744,7 @@ function start() {
             ")' />" +
             "</div>"
         );
+		}
         break;
 
       case UI_ACCEL:
@@ -710,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>" +
@@ -730,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:
@@ -762,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;
@@ -773,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"
@@ -785,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;
@@ -805,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);
@@ -859,31 +943,24 @@ function switcher(number, state) {
 }
 
 var rangeSlider = function (isDiscrete) {
-  var slider = $(".range-slider"),
-    range = $(".range-slider__range"),
-    value = $(".range-slider__value");
+  var range = $(".range-slider__range");
+  var slidercb = function() {
+    sliderchange($(this).attr("id").replace(/^\D+/g, ""));
+  };
 
-  slider.each(function () {
-    value.each(function () {
-      var value = $(this).prev().attr("value");
-      $(this).html(value);
-    });
+  range.on({input: function() {
+    $(this).next().html(this.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, ""));
-        },
-      });
+  range.each(function() {
+    $(this).next().html(this.value);
+    if($(this).attr("callbackSet") != "true") {
+      if (!isDiscrete) {
+        $(this).on({input: slidercb}); //input fires when dragging
+      } else {
+        $(this).on({change: slidercb}); //change fires only once released
+      }
+      $(this).attr("callbackSet", "true");
     }
   });
 };

data/js/graph.min.js

@@ -1,15 +1,15 @@
-function lineGraph(parent,xAccessor,yAccessor){const width=620;const height=420;const gutter=40;const pixelsPerTick=30;function numericTransformer(dataMin,dataMax,pxMin,pxMax){var dataDiff=dataMax-dataMin,pxDiff=pxMax-pxMin,dataRatio=pxDiff/dataDiff,coordRatio=dataDiff/pxDiff;return{toCoord:function(data){return(data-dataMin)*dataRatio+pxMin;},toData:function(coord){return(coord-pxMin)*coordRatio+dataMin;}};}
-function axisRenderer(orientation,transform){var axisGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var axisPath=document.createElementNS("http://www.w3.org/2000/svg","path");axisGroup.setAttribute("class",orientation+"-axis");var xMin=gutter;var xMax=width-gutter;var yMin=height-gutter;var yMax=gutter;if(orientation==="x"){axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMax+" "+yMin);for(var i=xMin;i<=xMax;i++){if((i-xMin)%pixelsPerTick===0&&i!==xMin){var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(transform(i));text.setAttribute("x",i);text.setAttribute("y",yMin);text.setAttribute("dy","1em");axisGroup.appendChild(text);}}}else{axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMin+" "+yMax);for(var i=yMax;i<=yMin;i++){if((i-yMin)%pixelsPerTick===0&&i!==yMin){var tickGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var gridLine=document.createElementNS("http://www.w3.org/2000/svg","path");text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(transform(i));text.setAttribute("x",xMin);text.setAttribute("y",i);text.setAttribute("dx","-.5em");text.setAttribute("dy",".3em");gridLine.setAttribute("d","M "+xMin+" "+i+" L "+xMax+" "+i);tickGroup.appendChild(gridLine);tickGroup.appendChild(text);axisGroup.appendChild(tickGroup);}}}
-axisGroup.appendChild(axisPath);parent.appendChild(axisGroup);}
-function lineRenderer(xAccessor,yAccessor,xTransform,yTransform){var line=document.createElementNS("http://www.w3.org/2000/svg","path");xAccessor.reset();yAccessor.reset();if(!xAccessor.hasNext()||!yAccessor.hasNext()){return;}
-var pathString="M "+xTransform(xAccessor.next())+" "+yTransform(yAccessor.next());while(xAccessor.hasNext()&&yAccessor.hasNext()){pathString+=" L "+
-xTransform(xAccessor.next())+
-" "+
-yTransform(yAccessor.next());}
-line.setAttribute("class","series");line.setAttribute("d",pathString);parent.appendChild(line);}
-function pointRenderer(xAccessor,yAccessor,xTransform,yTransform){var pointGroup=document.createElementNS("http://www.w3.org/2000/svg","g");pointGroup.setAttribute("class","data-points");xAccessor.reset();yAccessor.reset();if(!xAccessor.hasNext()||!yAccessor.hasNext()){return;}
-while(xAccessor.hasNext()&&yAccessor.hasNext()){var xDataValue=xAccessor.next();var x=xTransform(xDataValue);var yDataValue=yAccessor.next();var y=yTransform(yDataValue);var circle=document.createElementNS("http://www.w3.org/2000/svg","circle");circle.setAttribute("cx",x);circle.setAttribute("cy",y);circle.setAttribute("r","4");var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(xDataValue)+" / "+Math.floor(yDataValue);text.setAttribute("x",x);text.setAttribute("y",y);text.setAttribute("dx","1em");text.setAttribute("dy","-.7em");pointGroup.appendChild(circle);pointGroup.appendChild(text);}
-parent.appendChild(pointGroup);}
-xTransform=numericTransformer(xAccessor.min(),xAccessor.max(),0+gutter,width-gutter);yTransform=numericTransformer(yAccessor.min(),yAccessor.max(),height-gutter,0+gutter);axisRenderer("x",xTransform.toData);axisRenderer("y",yTransform.toData);lineRenderer(xAccessor,yAccessor,xTransform.toCoord,yTransform.toCoord);pointRenderer(xAccessor,yAccessor,xTransform.toCoord,yTransform.toCoord);}
-function renderGraphSvg(dataArray,renderId){var figure=document.getElementById(renderId);while(figure.hasChildNodes()){figure.removeChild(figure.lastChild);}
+function lineGraph(parent,xAccessor,yAccessor){const width=620;const height=420;const gutter=40;const pixelsPerTick=30;function numericTransformer(dataMin,dataMax,pxMin,pxMax){var dataDiff=dataMax-dataMin,pxDiff=pxMax-pxMin,dataRatio=pxDiff/dataDiff,coordRatio=dataDiff/pxDiff;return{toCoord:function(data){return(data-dataMin)*dataRatio+pxMin;},toData:function(coord){return(coord-pxMin)*coordRatio+dataMin;}};}
+function axisRenderer(orientation,transform){var axisGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var axisPath=document.createElementNS("http://www.w3.org/2000/svg","path");axisGroup.setAttribute("class",orientation+"-axis");var xMin=gutter;var xMax=width-gutter;var yMin=height-gutter;var yMax=gutter;if(orientation==="x"){axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMax+" "+yMin);for(var i=xMin;i<=xMax;i++){if((i-xMin)%pixelsPerTick===0&&i!==xMin){var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(transform(i));text.setAttribute("x",i);text.setAttribute("y",yMin);text.setAttribute("dy","1em");axisGroup.appendChild(text);}}}else{axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMin+" "+yMax);for(var i=yMax;i<=yMin;i++){if((i-yMin)%pixelsPerTick===0&&i!==yMin){var tickGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var gridLine=document.createElementNS("http://www.w3.org/2000/svg","path");text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(transform(i));text.setAttribute("x",xMin);text.setAttribute("y",i);text.setAttribute("dx","-.5em");text.setAttribute("dy",".3em");gridLine.setAttribute("d","M "+xMin+" "+i+" L "+xMax+" "+i);tickGroup.appendChild(gridLine);tickGroup.appendChild(text);axisGroup.appendChild(tickGroup);}}}
+axisGroup.appendChild(axisPath);parent.appendChild(axisGroup);}
+function lineRenderer(xAccessor,yAccessor,xTransform,yTransform){var line=document.createElementNS("http://www.w3.org/2000/svg","path");xAccessor.reset();yAccessor.reset();if(!xAccessor.hasNext()||!yAccessor.hasNext()){return;}
+var pathString="M "+xTransform(xAccessor.next())+" "+yTransform(yAccessor.next());while(xAccessor.hasNext()&&yAccessor.hasNext()){pathString+=" L "+
+xTransform(xAccessor.next())+
+" "+
+yTransform(yAccessor.next());}
+line.setAttribute("class","series");line.setAttribute("d",pathString);parent.appendChild(line);}
+function pointRenderer(xAccessor,yAccessor,xTransform,yTransform){var pointGroup=document.createElementNS("http://www.w3.org/2000/svg","g");pointGroup.setAttribute("class","data-points");xAccessor.reset();yAccessor.reset();if(!xAccessor.hasNext()||!yAccessor.hasNext()){return;}
+while(xAccessor.hasNext()&&yAccessor.hasNext()){var xDataValue=xAccessor.next();var x=xTransform(xDataValue);var yDataValue=yAccessor.next();var y=yTransform(yDataValue);var circle=document.createElementNS("http://www.w3.org/2000/svg","circle");circle.setAttribute("cx",x);circle.setAttribute("cy",y);circle.setAttribute("r","4");var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(xDataValue)+" / "+Math.floor(yDataValue);text.setAttribute("x",x);text.setAttribute("y",y);text.setAttribute("dx","1em");text.setAttribute("dy","-.7em");pointGroup.appendChild(circle);pointGroup.appendChild(text);}
+parent.appendChild(pointGroup);}
+xTransform=numericTransformer(xAccessor.min(),xAccessor.max(),0+gutter,width-gutter);yTransform=numericTransformer(yAccessor.min(),yAccessor.max(),height-gutter,0+gutter);axisRenderer("x",xTransform.toData);axisRenderer("y",yTransform.toData);lineRenderer(xAccessor,yAccessor,xTransform.toCoord,yTransform.toCoord);pointRenderer(xAccessor,yAccessor,xTransform.toCoord,yTransform.toCoord);}
+function renderGraphSvg(dataArray,renderId){var figure=document.getElementById(renderId);while(figure.hasChildNodes()){figure.removeChild(figure.lastChild);}
 var svg=document.createElementNS("http://www.w3.org/2000/svg","svg");svg.setAttribute("viewBox","0 0 640 440");svg.setAttribute("preserveAspectRatio","xMidYMid meet");lineGraph(svg,(function(data,min,max){var i=0;return{hasNext:function(){return i<data.length;},next:function(){return data[i++].x;},reset:function(){i=0;},min:function(){return min;},max:function(){return max;}};})(dataArray,Math.min.apply(Math,dataArray.map(function(o){return o.x;})),Math.max.apply(Math,dataArray.map(function(o){return o.x;}))),(function(data,min,max){var i=0;return{hasNext:function(){return i<data.length;},next:function(){return data[i++].y;},reset:function(){i=0;},min:function(){return min;},max:function(){return max;}};})(dataArray,Math.min.apply(Math,dataArray.map(function(o){return o.y;})),Math.max.apply(Math,dataArray.map(function(o){return o.y;}))));figure.appendChild(svg);}

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

data/js/tabbedcontent.min.js

@@ -1,35 +1,35 @@
-;(function($,document,window,undefined){"use strict";var Tabbedcontent=function(tabcontent,options){var defaults={links:tabcontent.prev().find('a').length?tabcontent.prev().find('a'):'.tabs a',errorSelector:'.error-message',speed:false,onSwitch:false,onInit:false,currentClass:'active',tabErrorClass:'has-errors',history:true,historyOnInit:true,loop:false},firstTime=false,children=tabcontent.children(),history=window.history,loc=document.location,current=null;options=$.extend(defaults,options);if(!(options.links instanceof $)){options.links=$(options.links);}
-function tabExists(tab){return Boolean(children.filter(tab).length);}
-function isFirst(){return current===0;}
-function isInt(num){return num%1===0;}
-function isLast(){return current===children.length-1;}
-function filterTab(tab){return $(this).attr('href').match(new RegExp(tab+'$'));}
-function getTab(tab){if(tab instanceof $){return{tab:tab,link:options.links.eq(tab.index())};}
-if(isInt(tab)){return{tab:children.eq(tab),link:options.links.eq(tab)};}
-if(children.filter(tab).length){return{tab:children.filter(tab),link:options.links.filter(function(){return filterTab.apply(this,[tab]);})};}
-return{tab:children.filter('#'+tab),link:options.links.filter(function(){return filterTab.apply(this,['#'+tab]);})};}
-function getCurrent(){return options.links.parent().filter('.'+options.currentClass).index();}
-function next(loop){++current;if(loop===undefined)loop=options.loop;if(current<children.length){return switchTab(current,true);}else if(loop&&current>=children.length){return switchTab(0,true);}
-return false;}
-function prev(loop){--current;if(loop===undefined)loop=options.loop;if(current>=0){return switchTab(current,true);}else if(loop&&current<0){return switchTab(children.length-1,true);}
-return false;}
-function onSwitch(tab){if(options.history&&options.historyOnInit&&firstTime&&history!==undefined&&('pushState'in history)){firstTime=false;window.setTimeout(function(){history.replaceState(null,'',tab);},100);}
-current=getCurrent();if(options.onSwitch&&typeof options.onSwitch==='function'){options.onSwitch(tab,api());}
-tabcontent.trigger('tabcontent.switch',[tab,api()]);}
-function switchTab(tab,api){if(!tab.toString().match(/^#/)){tab='#'+getTab(tab).tab.attr('id');}
-if(!tabExists(tab)){return false;}
-options.links.attr('aria-selected','false').parent().removeClass(options.currentClass);options.links.filter(function(){return filterTab.apply(this,[tab]);}).attr('aria-selected','true').parent().addClass(options.currentClass);children.hide();if(options.history&&api){if(history!==undefined&&('pushState'in history)){history.pushState(null,'',tab);}else{window.location.hash=tab;}}
-children.attr('aria-hidden','true').filter(tab).show(options.speed,function(){if(options.speed){onSwitch(tab);}}).attr('aria-hidden','false');if(!options.speed){onSwitch(tab);}
-return true;}
-function apiSwitch(tab){return switchTab(tab,true);}
-function hashSwitch(e){switchTab(loc.hash);}
-function init(){if(tabExists(loc.hash)){switchTab(loc.hash);}
-else if(options.links.parent().filter('.'+options.currentClass).length){switchTab(options.links.parent().filter('.'+options.currentClass).index());}
-else if(options.errorSelector&&children.find(options.errorSelector).length){children.each(function(){if($(this).find(options.errorSelector).length){switchTab("#"+$(this).attr("id"));return false;}});}
-else{switchTab("#"+children.filter(":first-child").attr("id"));}
-if(options.errorSelector){children.find(options.errorSelector).each(function(){var tab=getTab($(this).parent());tab.link.parent().addClass(options.tabErrorClass);});}
-if('onhashchange'in window){$(window).bind('hashchange',hashSwitch);}else{var current_href=loc.href;window.setInterval(function(){if(current_href!==loc.href){hashSwitch.call(window.event);current_href=loc.href;}},100);}
-$(options.links).on('click',function(e){switchTab($(this).attr('href').replace(/^[^#]+/,''),options.history);e.preventDefault();});if(options.onInit&&typeof options.onInit==='function'){options.onInit(api());}
-tabcontent.trigger('tabcontent.init',[api()]);}
-function api(){return{'switch':apiSwitch,'switchTab':apiSwitch,'getCurrent':getCurrent,'getTab':getTab,'next':next,'prev':prev,'isFirst':isFirst,'isLast':isLast};}
+;(function($,document,window,undefined){"use strict";var Tabbedcontent=function(tabcontent,options){var defaults={links:tabcontent.prev().find('a').length?tabcontent.prev().find('a'):'.tabs a',errorSelector:'.error-message',speed:false,onSwitch:false,onInit:false,currentClass:'active',tabErrorClass:'has-errors',history:true,historyOnInit:true,loop:false},firstTime=false,children=tabcontent.children(),history=window.history,loc=document.location,current=null;options=$.extend(defaults,options);if(!(options.links instanceof $)){options.links=$(options.links);}
+function tabExists(tab){return Boolean(children.filter(tab).length);}
+function isFirst(){return current===0;}
+function isInt(num){return num%1===0;}
+function isLast(){return current===children.length-1;}
+function filterTab(tab){return $(this).attr('href').match(new RegExp(tab+'$'));}
+function getTab(tab){if(tab instanceof $){return{tab:tab,link:options.links.eq(tab.index())};}
+if(isInt(tab)){return{tab:children.eq(tab),link:options.links.eq(tab)};}
+if(children.filter(tab).length){return{tab:children.filter(tab),link:options.links.filter(function(){return filterTab.apply(this,[tab]);})};}
+return{tab:children.filter('#'+tab),link:options.links.filter(function(){return filterTab.apply(this,['#'+tab]);})};}
+function getCurrent(){return options.links.parent().filter('.'+options.currentClass).index();}
+function next(loop){++current;if(loop===undefined)loop=options.loop;if(current<children.length){return switchTab(current,true);}else if(loop&&current>=children.length){return switchTab(0,true);}
+return false;}
+function prev(loop){--current;if(loop===undefined)loop=options.loop;if(current>=0){return switchTab(current,true);}else if(loop&&current<0){return switchTab(children.length-1,true);}
+return false;}
+function onSwitch(tab){if(options.history&&options.historyOnInit&&firstTime&&history!==undefined&&('pushState'in history)){firstTime=false;window.setTimeout(function(){history.replaceState(null,'',tab);},100);}
+current=getCurrent();if(options.onSwitch&&typeof options.onSwitch==='function'){options.onSwitch(tab,api());}
+tabcontent.trigger('tabcontent.switch',[tab,api()]);}
+function switchTab(tab,api){if(!tab.toString().match(/^#/)){tab='#'+getTab(tab).tab.attr('id');}
+if(!tabExists(tab)){return false;}
+options.links.attr('aria-selected','false').parent().removeClass(options.currentClass);options.links.filter(function(){return filterTab.apply(this,[tab]);}).attr('aria-selected','true').parent().addClass(options.currentClass);children.hide();if(options.history&&api){if(history!==undefined&&('pushState'in history)){history.pushState(null,'',tab);}else{window.location.hash=tab;}}
+children.attr('aria-hidden','true').filter(tab).show(options.speed,function(){if(options.speed){onSwitch(tab);}}).attr('aria-hidden','false');if(!options.speed){onSwitch(tab);}
+return true;}
+function apiSwitch(tab){return switchTab(tab,true);}
+function hashSwitch(e){switchTab(loc.hash);}
+function init(){if(tabExists(loc.hash)){switchTab(loc.hash);}
+else if(options.links.parent().filter('.'+options.currentClass).length){switchTab(options.links.parent().filter('.'+options.currentClass).index());}
+else if(options.errorSelector&&children.find(options.errorSelector).length){children.each(function(){if($(this).find(options.errorSelector).length){switchTab("#"+$(this).attr("id"));return false;}});}
+else{switchTab("#"+children.filter(":first-child").attr("id"));}
+if(options.errorSelector){children.find(options.errorSelector).each(function(){var tab=getTab($(this).parent());tab.link.parent().addClass(options.tabErrorClass);});}
+if('onhashchange'in window){$(window).bind('hashchange',hashSwitch);}else{var current_href=loc.href;window.setInterval(function(){if(current_href!==loc.href){hashSwitch.call(window.event);current_href=loc.href;}},100);}
+$(options.links).on('click',function(e){switchTab($(this).attr('href').replace(/^[^#]+/,''),options.history);e.preventDefault();});if(options.onInit&&typeof options.onInit==='function'){options.onInit(api());}
+tabcontent.trigger('tabcontent.init',[api()]);}
+function api(){return{'switch':apiSwitch,'switchTab':apiSwitch,'getCurrent':getCurrent,'getTab':getTab,'next':next,'prev':prev,'isFirst':isFirst,'isLast':isLast};}
 init();return api();};$.fn.tabbedContent=function(options){return this.each(function(){var tabs=new Tabbedcontent($(this),options);$(this).data('api',tabs);});};})(window.jQuery||window.Zepto||window.$,document,window);

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 *password = "espui";
-const char *hostname = "espui";
+const char* ssid = "ESPUI";
+const char* password = "espui";
+const char* hostname = "espui";
 
 uint16_t status;
 uint16_t button1;
 uint16_t millisLabelId;
 uint16_t switchOne;
 
-void numberCall( Control* sender, int type ) {
-  Serial.println( sender->value );
+void numberCall(Control* sender, int type)
+{
+    Serial.println(sender->value);
 }
 
-void textCall(Control *sender, int type) {
-  Serial.print("Text: ID: ");
-  Serial.print(sender->id);
-  Serial.print(", Value: ");
-  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);
+void slider(Control* sender, int type)
+{
+    Serial.print("Slider: ID: ");
+    Serial.print(sender->id);
+    Serial.print(", Value: ");
+    Serial.println(sender->value);
 }
 
-void buttonCallback(Control *sender, int type) {
-  switch (type) {
-  case B_DOWN:
-    Serial.println("Button DOWN");
-    break;
+void buttonCallback(Control* sender, int type)
+{
+    switch (type)
+    {
+    case B_DOWN:
+        Serial.println("Button DOWN");
+        break;
 
-  case B_UP:
-    Serial.println("Button UP");
-    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.updateControlValue(status, "Start");
+void buttonExample(Control* sender, int type)
+{
+    switch (type)
+    {
+    case B_DOWN:
+        Serial.println("Status: Start");
+        ESPUI.updateControlValue(status, "Start");
 
-    ESPUI.getControl(button1)->color = ControlColor::Carrot;
-    ESPUI.updateControl(button1);
-    break;
+        ESPUI.getControl(button1)->color = ControlColor::Carrot;
+        ESPUI.updateControl(button1);
+        break;
 
-  case B_UP:
-    Serial.println("Status: Stop");
-    ESPUI.updateControlValue(status, "Stop");
+    case B_UP:
+        Serial.println("Status: Stop");
+        ESPUI.updateControlValue(status, "Stop");
 
-    ESPUI.getControl(button1)->color = ControlColor::Peterriver;
-    ESPUI.updateControl(button1);
-    break;
-  }
+        ESPUI.getControl(button1)->color = ControlColor::Peterriver;
+        ESPUI.updateControl(button1);
+        break;
+    }
 }
 
-void padExample(Control *sender, int value) {
-  switch (value) {
-  case P_LEFT_DOWN:
-    Serial.print("left down");
-    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_LEFT_UP:
+        Serial.print("left up");
+        break;
 
-  case P_RIGHT_DOWN:
-    Serial.print("right down");
-    break;
+    case P_RIGHT_DOWN:
+        Serial.print("right down");
+        break;
 
-  case P_RIGHT_UP:
-    Serial.print("right up");
-    break;
+    case P_RIGHT_UP:
+        Serial.print("right up");
+        break;
 
-  case P_FOR_DOWN:
-    Serial.print("for down");
-    break;
+    case P_FOR_DOWN:
+        Serial.print("for down");
+        break;
 
-  case P_FOR_UP:
-    Serial.print("for up");
-    break;
+    case P_FOR_UP:
+        Serial.print("for up");
+        break;
 
-  case P_BACK_DOWN:
-    Serial.print("back down");
-    break;
+    case P_BACK_DOWN:
+        Serial.print("back down");
+        break;
 
-  case P_BACK_UP:
-    Serial.print("back up");
-    break;
+    case P_BACK_UP:
+        Serial.print("back up");
+        break;
 
-  case P_CENTER_DOWN:
-    Serial.print("center down");
-    break;
+    case P_CENTER_DOWN:
+        Serial.print("center down");
+        break;
 
-  case P_CENTER_UP:
-    Serial.print("center up");
-    break;
-  }
+    case P_CENTER_UP:
+        Serial.print("center up");
+        break;
+    }
 
-  Serial.print(" ");
-  Serial.println(sender->id);
+    Serial.print(" ");
+    Serial.println(sender->id);
 }
 
-void switchExample(Control *sender, int value) {
-  switch (value) {
-  case S_ACTIVE:
-    Serial.print("Active:");
-    break;
+void switchExample(Control* sender, int value)
+{
+    switch (value)
+    {
+    case S_ACTIVE:
+        Serial.print("Active:");
+        break;
 
-  case S_INACTIVE:
-    Serial.print("Inactive");
-    break;
-  }
+    case S_INACTIVE:
+        Serial.print("Inactive");
+        break;
+    }
 
-  Serial.print(" ");
-  Serial.println(sender->id);
+    Serial.print(" ");
+    Serial.println(sender->id);
 }
 
-void selectExample(Control *sender, int value) {
-  Serial.print("Select: ID: ");
-  Serial.print(sender->id);
-  Serial.print(", Value: ");
-  Serial.println(sender->value);
+void selectExample(Control* sender, int value)
+{
+    Serial.print("Select: ID: ");
+    Serial.print(sender->id);
+    Serial.print(", Value: ");
+    Serial.println(sender->value);
 }
 
-void otherSwitchExample(Control *sender, int value) {
-  switch (value) {
-  case S_ACTIVE:
-    Serial.print("Active:");
-    break;
+void otherSwitchExample(Control* sender, int value)
+{
+    switch (value)
+    {
+    case S_ACTIVE:
+        Serial.print("Active:");
+        break;
 
-  case S_INACTIVE:
-    Serial.print("Inactive");
-    break;
-  }
+    case S_INACTIVE:
+        Serial.print("Inactive");
+        break;
+    }
 
-  Serial.print(" ");
-  Serial.println(sender->id);
+    Serial.print(" ");
+    Serial.println(sender->id);
 }
 
-void setup(void) {
-  ESPUI.setVerbosity(Verbosity::VerboseJSON);
-  Serial.begin(115200);
+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
-  WiFi.begin(ssid, password);
-  Serial.print("\n\nTry to connect to existing network");
+    // try to connect to existing network
+    WiFi.begin(ssid, password);
+    Serial.print("\n\nTry to connect to existing network");
 
-  {
-    uint8_t timeout = 10;
+    {
+        uint8_t timeout = 10;
 
-    // Wait for connection, 5s timeout
-    do {
-      delay(500);
-      Serial.print(".");
-      timeout--;
-    } while (timeout && WiFi.status() != WL_CONNECTED);
+        // 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");
+        // not connected -> create hotspot
+        if (WiFi.status() != WL_CONNECTED)
+        {
+            Serial.print("\n\nCreating hotspot");
 
-      WiFi.mode(WIFI_AP);
-      WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
-      WiFi.softAP(ssid);
+            WiFi.mode(WIFI_AP);
+            delay(100);
+            WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
+#if defined(ESP32)
+            uint32_t chipid = 0;
+            for (int i = 0; i < 17; i = i + 8)
+            {
+                chipid |= ((ESP.getEfuseMac() >> (40 - i)) & 0xff) << i;
+            }
+#else
+            uint32_t chipid = ESP.getChipId();
+#endif char ap_ssid[25];
+            snprintf(ap_ssid, 26, "ESPUI-%08X", chipid);
+            WiFi.softAP(ap_ssid);
 
-      timeout = 5;
+            timeout = 5;
 
-      do {
-        delay(500);
-        Serial.print(".");
-        timeout--;
-      } while (timeout);
+            do
+            {
+                delay(500);
+                Serial.print(".");
+                timeout--;
+            } while (timeout);
+        }
     }
-  }
 
-  dnsServer.start(DNS_PORT, "*", apIP);
+    dnsServer.start(DNS_PORT, "*", apIP);
 
-  Serial.println("\n\nWiFi parameters:");
-  Serial.print("Mode: ");
-  Serial.println(WiFi.getMode() == WIFI_AP ? "Station" : "Client");
-  Serial.print("IP address: ");
-  Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP());
+    Serial.println("\n\nWiFi parameters:");
+    Serial.print("Mode: ");
+    Serial.println(WiFi.getMode() == WIFI_AP ? "Station" : "Client");
+    Serial.print("IP address: ");
+    Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP());
 
-  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, "Option2", "Opt2", ControlColor::Alizarin, select1);
-  ESPUI.addControl(ControlType::Option, "Option3", "Opt3", 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, "Option3", "Opt3", ControlColor::Alizarin, select1);
 
-  ESPUI.addControl(ControlType::Text, "Text Test:", "a Text Field", ControlColor::Alizarin, Control::noParent, &textCall);
+    ESPUI.addControl(
+        ControlType::Text, "Text Test:", "a Text Field", ControlColor::Alizarin, Control::noParent, &textCall);
 
-  millisLabelId = ESPUI.addControl(ControlType::Label, "Millis:", "0", ControlColor::Emerald, Control::noParent);
-  button1 = ESPUI.addControl(ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, Control::noParent, &buttonCallback);
-  ESPUI.addControl(ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, Control::noParent, &buttonExample);
-  ESPUI.addControl(ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, Control::noParent, &padExample);
-  ESPUI.addControl(ControlType::Pad, "Pad without center", "", ControlColor::Carrot, Control::noParent, &padExample);
-  switchOne = ESPUI.addControl(ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, Control::noParent, &switchExample);
-  ESPUI.addControl(ControlType::Switcher, "Switch two", "", ControlColor::None, Control::noParent, &otherSwitchExample);
-  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);
+    millisLabelId = ESPUI.addControl(ControlType::Label, "Millis:", "0", ControlColor::Emerald, Control::noParent);
+    button1 = ESPUI.addControl(
+        ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, Control::noParent, &buttonCallback);
+    ESPUI.addControl(
+        ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, Control::noParent, &buttonExample);
+    ESPUI.addControl(
+        ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, Control::noParent, &padExample);
+    ESPUI.addControl(ControlType::Pad, "Pad without center", "", ControlColor::Carrot, Control::noParent, &padExample);
+    switchOne = ESPUI.addControl(
+        ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, Control::noParent, &switchExample);
+    ESPUI.addControl(
+        ControlType::Switcher, "Switch two", "", ControlColor::None, Control::noParent, &otherSwitchExample);
+    ESPUI.addControl(ControlType::Slider, "Slider one", "30", ControlColor::Alizarin, Control::noParent, &slider);
+    ESPUI.addControl(ControlType::Slider, "Slider two", "100", ControlColor::Alizarin, Control::noParent, &slider);
+    ESPUI.addControl(ControlType::Number, "Number:", "50", ControlColor::Alizarin, Control::noParent, &numberCall);
 
-  /*
-   * .begin loads and serves all files from PROGMEM directly.
-   * If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
-   * (.prepareFileSystem has to be run in an empty sketch before)
-   */
+    /*
+     * .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;
+    // 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")
-   */
+    /*
+     * Optionally you can use HTTP BasicAuth. Keep in mind that this is NOT a
+     * SECURE way of limiting access.
+     * Anyone who is able to sniff traffic will be able to intercept your password
+     * since it is transmitted in cleartext. Just add a string as username and
+     * password, for example begin("ESPUI Control", "username", "password")
+     */
 
-
-  ESPUI.begin("ESPUI Control");
+    ESPUI.begin("ESPUI Control");
 }
 
-void loop(void) {
-  dnsServer.processNextRequest();
+void loop(void)
+{
+    dnsServer.processNextRequest();
 
-  static long oldTime = 0;
-  static bool testSwitchState = false;
+    static long oldTime = 0;
+    static bool testSwitchState = false;
 
-  if (millis() - oldTime > 5000) {
-    ESPUI.updateControlValue(millisLabelId, String(millis()));
-    testSwitchState = !testSwitchState;
-    ESPUI.updateControlValue(switchOne, testSwitchState ? "1" : "0");
+    if (millis() - oldTime > 5000)
+    {
+        ESPUI.updateControlValue(millisLabelId, String(millis()));
+        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 *password = "espui";
+const char* ssid = "ESPUI";
+const char* password = "espui";
 
-const char *hostname = "espui";
+const char* hostname = "espui";
 
 int statusLabelId;
 int graphId;
 int millisLabelId;
 int testSwitchId;
 
-void numberCall(Control *sender, int type) { Serial.println(sender->value); }
-
-void textCall(Control *sender, int type) {
-  Serial.print("Text: ID: ");
-  Serial.print(sender->id);
-  Serial.print(", Value: ");
-  Serial.println(sender->value);
+void numberCall(Control* sender, int type)
+{
+    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 textCall(Control* sender, int type)
+{
+    Serial.print("Text: ID: ");
+    Serial.print(sender->id);
+    Serial.print(", Value: ");
+    Serial.println(sender->value);
 }
 
-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 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 buttonExample(Control *sender, int type) {
-  switch (type) {
-  case B_DOWN:
-    Serial.println("Status: Start");
-    ESPUI.print(statusLabelId, "Start");
-    break;
+void buttonCallback(Control* sender, int type)
+{
+    switch (type)
+    {
+    case B_DOWN:
+        Serial.println("Button DOWN");
+        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);
+    case B_UP:
+        Serial.println("Button UP");
+        break;
+    }
 }
 
-void switchExample(Control *sender, int value) {
-  switch (value) {
-  case S_ACTIVE:
-    Serial.print("Active:");
-    break;
+void buttonExample(Control* sender, int type)
+{
+    switch (type)
+    {
+    case B_DOWN:
+        Serial.println("Status: Start");
+        ESPUI.print(statusLabelId, "Start");
+        break;
 
-  case S_INACTIVE:
-    Serial.print("Inactive");
-    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;
 
-  Serial.print(" ");
-  Serial.println(sender->id);
+    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 otherSwitchExample(Control *sender, int value) {
-  switch (value) {
-  case S_ACTIVE:
-    Serial.print("Active:");
-    break;
+void switchExample(Control* sender, int value)
+{
+    switch (value)
+    {
+    case S_ACTIVE:
+        Serial.print("Active:");
+        break;
 
-  case S_INACTIVE:
-    Serial.print("Inactive");
-    break;
-  }
+    case S_INACTIVE:
+        Serial.print("Inactive");
+        break;
+    }
 
-  Serial.print(" ");
-  Serial.println(sender->id);
+    Serial.print(" ");
+    Serial.println(sender->id);
 }
 
-void setup(void) {
-  ESPUI.setVerbosity(Verbosity::VerboseJSON);
-  Serial.begin(115200);
+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);
+    WiFi.setHostname(hostname);
 #else
-  WiFi.hostname(hostname);
+    WiFi.hostname(hostname);
 #endif
 
-  // try to connect to existing network
-  WiFi.begin(ssid, password);
-  Serial.print("\n\nTry to connect to existing network");
+    // try to connect to existing network
+    WiFi.begin(ssid, password);
+    Serial.print("\n\nTry to connect to existing network");
 
-  {
-    uint8_t timeout = 10;
+    {
+        uint8_t timeout = 10;
 
-    // Wait for connection, 5s timeout
-    do {
-      delay(500);
-      Serial.print(".");
-      timeout--;
-    } while (timeout && WiFi.status() != WL_CONNECTED);
+        // 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");
+        // not connected -> create hotspot
+        if (WiFi.status() != WL_CONNECTED)
+        {
+            Serial.print("\n\nCreating hotspot");
 
-      WiFi.mode(WIFI_AP);
-      WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
-      WiFi.softAP(ssid);
+            WiFi.mode(WIFI_AP);
+            delay(100);
+            WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
+#if defined(ESP32)
+            uint32_t chipid = 0;
+            for (int i = 0; i < 17; i = i + 8)
+            {
+                chipid |= ((ESP.getEfuseMac() >> (40 - i)) & 0xff) << i;
+            }
+#else
+            uint32_t chipid = ESP.getChipId();
+#endif
+            char ap_ssid[25];
+            snprintf(ap_ssid, 26, "ESPUI-%08X", chipid);
+            WiFi.softAP(ap_ssid);
 
-      timeout = 5;
+            timeout = 5;
 
-      do {
-        delay(500);
-        Serial.print(".");
-        timeout--;
-      } while (timeout);
+            do
+            {
+                delay(500);
+                Serial.print(".");
+                timeout--;
+            } while (timeout);
+        }
     }
-  }
 
-  dnsServer.start(DNS_PORT, "*", apIP);
+    dnsServer.start(DNS_PORT, "*", apIP);
 
-  Serial.println("\n\nWiFi parameters:");
-  Serial.print("Mode: ");
-  Serial.println(WiFi.getMode() == WIFI_AP ? "Station" : "Client");
-  Serial.print("IP address: ");
-  Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP());
+    Serial.println("\n\nWiFi parameters:");
+    Serial.print("Mode: ");
+    Serial.println(WiFi.getMode() == WIFI_AP ? "Station" : "Client");
+    Serial.print("IP address: ");
+    Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP());
 
-  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);
-  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);
+    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);
+    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);
+    graphId = ESPUI.graph("Graph Test", ControlColor::Wetasphalt);
 
-  /*
-   * .begin loads and serves all files from PROGMEM directly.
-   * If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
-   * (.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;
+    /*
+     * .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)
+     */
 
-  /*
-   * 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")
-   */
+    // 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.begin("ESPUI Control");
+    ESPUI.begin("ESPUI Control");
 }
 
-void loop(void) {
-  dnsServer.processNextRequest();
+void loop(void)
+{
+    dnsServer.processNextRequest();
 
-  static long oldTime = 0;
-  static bool testSwitchState = false;
+    static long oldTime = 0;
+    static bool testSwitchState = false;
 
-  if (millis() - oldTime > 5000) {
-    ESPUI.print(millisLabelId, String(millis()));
+    if (millis() - oldTime > 5000)
+    {
+        ESPUI.print(millisLabelId, String(millis()));
 
-    ESPUI.addGraphPoint(graphId, random(1, 50));
+        ESPUI.addGraphPoint(graphId, random(1, 50));
 
-    testSwitchState = !testSwitchState;
-    ESPUI.updateSwitcher(testSwitchId, testSwitchState);
-    
-    oldTime = millis();
-  }
-}
+        testSwitchState = !testSwitchState;
+        ESPUI.updateSwitcher(testSwitchId, testSwitchState);
+
+        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 ) {
-  Serial.println( sender->value );
+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 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 );}
+void slider(Control* sender, int type)
+{
+    Serial.print("Slider: ID: ");
+    Serial.print(sender->id);
+    Serial.print(", Value: ");
+    Serial.println(sender->value);
+}
 
-void buttonCallback( Control* sender, int type ) {
-  switch ( type ) {
+void buttonCallback(Control* sender, int type)
+{
+    switch (type)
+    {
     case B_DOWN:
-      Serial.println( "Button DOWN" );
-      break;
+        Serial.println("Button DOWN");
+        break;
 
     case B_UP:
-      Serial.println( "Button UP" );
-      break;
-  }
+        Serial.println("Button UP");
+        break;
+    }
 }
 
-void buttonExample( Control* sender, int type ) {
-  switch ( type ) {
+void buttonExample(Control* sender, int type)
+{
+    switch (type)
+    {
     case B_DOWN:
-      Serial.println( "Status: Start" );
-      ESPUI.updateControlValue( status, "Start" );
-    
-      ESPUI.getControl( button1 )->color = ControlColor::Carrot;
-      ESPUI.updateControl( button1 );
-      break;
+        Serial.println("Status: Start");
+        ESPUI.updateControlValue(status, "Start");
+
+        ESPUI.getControl(button1)->color = ControlColor::Carrot;
+        ESPUI.updateControl(button1);
+        break;
 
     case B_UP:
-      Serial.println( "Status: Stop" );
-      ESPUI.updateControlValue( status, "Stop" );
-   
-      ESPUI.getControl( button1 )->color = ControlColor::Peterriver;
-      ESPUI.updateControl( button1 );
-      break;
-  }
+        Serial.println("Status: Stop");
+        ESPUI.updateControlValue(status, "Stop");
+
+        ESPUI.getControl(button1)->color = ControlColor::Peterriver;
+        ESPUI.updateControl(button1);
+        break;
+    }
 }
 
-void padExample( Control* sender, int value ) {
-  switch ( value ) {
+void padExample(Control* sender, int value)
+{
+    switch (value)
+    {
     case P_LEFT_DOWN:
-      Serial.print( "left down" );
-      break;
+        Serial.print("left down");
+        break;
 
     case P_LEFT_UP:
-      Serial.print( "left up" );
-      break;
+        Serial.print("left up");
+        break;
 
     case P_RIGHT_DOWN:
-      Serial.print( "right down" );
-      break;
+        Serial.print("right down");
+        break;
 
     case P_RIGHT_UP:
-      Serial.print( "right up" );
-      break;
+        Serial.print("right up");
+        break;
 
     case P_FOR_DOWN:
-      Serial.print( "for down" );
-      break;
+        Serial.print("for down");
+        break;
 
     case P_FOR_UP:
-      Serial.print( "for up" );
-      break;
+        Serial.print("for up");
+        break;
 
     case P_BACK_DOWN:
-      Serial.print( "back down" );
-      break;
+        Serial.print("back down");
+        break;
 
     case P_BACK_UP:
-      Serial.print( "back up" );
-      break;
+        Serial.print("back up");
+        break;
 
     case P_CENTER_DOWN:
-      Serial.print( "center down" );
-      break;
+        Serial.print("center down");
+        break;
 
     case P_CENTER_UP:
-      Serial.print( "center up" );
-      break;
-  }
+        Serial.print("center up");
+        break;
+    }
 
-  Serial.print( " " );
-  Serial.println( sender->id );
+    Serial.print(" ");
+    Serial.println(sender->id);
 }
 
-void switchExample( Control* sender, int value ) {
-  switch ( value ) {
+void switchExample(Control* sender, int value)
+{
+    switch (value)
+    {
     case S_ACTIVE:
-      Serial.print( "Active:" );
-      break;
+        Serial.print("Active:");
+        break;
 
     case S_INACTIVE:
-      Serial.print( "Inactive" );
-      break;
-  }
+        Serial.print("Inactive");
+        break;
+    }
 
-  Serial.print( " " );
-  Serial.println( sender->id );
+    Serial.print(" ");
+    Serial.println(sender->id);
 }
 
-void selectExample( Control* sender, int value ) {
-  Serial.print("Select: ID: ");
-  Serial.print(sender->id);
-  Serial.print(", Value: ");
-  Serial.println( sender->value );
+void selectExample(Control* sender, int value)
+{
+    Serial.print("Select: ID: ");
+    Serial.print(sender->id);
+    Serial.print(", Value: ");
+    Serial.println(sender->value);
 }
 
-void otherSwitchExample( Control* sender, int value ) {
-  switch ( value ) {
+void otherSwitchExample(Control* sender, int value)
+{
+    switch (value)
+    {
     case S_ACTIVE:
-      Serial.print( "Active:" );
-      break;
+        Serial.print("Active:");
+        break;
 
     case S_INACTIVE:
-      Serial.print( "Inactive" );
-      break;
-  }
+        Serial.print("Inactive");
+        break;
+    }
 
-  Serial.print( " " );
-  Serial.println( sender->id );
+    Serial.print(" ");
+    Serial.println(sender->id);
 }
 
-void setup( void ) {
-  Serial.begin( 115200 );
+void setup(void)
+{
+    Serial.begin(115200);
 
 #if defined(ESP32)
-  WiFi.setHostname( hostname );
+    WiFi.setHostname(hostname);
 #else
-  WiFi.hostname( hostname );
+    WiFi.hostname(hostname);
 #endif
 
-  // try to connect to existing network
-  WiFi.begin( ssid, password );
-  Serial.print( "\n\nTry to connect to existing network" );
+    // try to connect to existing network
+    WiFi.begin(ssid, password);
+    Serial.print("\n\nTry to connect to existing network");
 
-  {
-    uint8_t timeout = 10;
+    {
+        uint8_t timeout = 10;
 
-    // Wait for connection, 5s timeout
-    do {
-      delay( 500 );
-      Serial.print( "." );
-      timeout--;
-    } while ( timeout && WiFi.status() != WL_CONNECTED );
+        // 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" );
+        // not connected -> create hotspot
+        if (WiFi.status() != WL_CONNECTED)
+        {
+            Serial.print("\n\nCreating hotspot");
 
-      WiFi.mode( WIFI_AP );
-      WiFi.softAPConfig( apIP, apIP, IPAddress( 255, 255, 255, 0 ) );
-      WiFi.softAP( ssid );
+            WiFi.mode(WIFI_AP);
+            delay(100);
+            WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
+#if defined(ESP32)
+            uint32_t chipid = 0;
+            for (int i = 0; i < 17; i = i + 8)
+            {
+                chipid |= ((ESP.getEfuseMac() >> (40 - i)) & 0xff) << i;
+            }
+#else
+            uint32_t chipid = ESP.getChipId();
+#endif
+            char ap_ssid[25];
+            snprintf(ap_ssid, 26, "ESPUI-%08X", chipid);
+            WiFi.softAP(ap_ssid);
 
-      timeout = 5;
+            timeout = 5;
 
-      do {
-        delay( 500 );
-        Serial.print( "." );
-        timeout--;
-      } while ( timeout );
+            do
+            {
+                delay(500);
+                Serial.print(".");
+                timeout--;
+            } while (timeout);
+        }
     }
-  }
 
-  dnsServer.start( DNS_PORT, "*", apIP );
+    dnsServer.start(DNS_PORT, "*", apIP);
 
-  Serial.println( "\n\nWiFi parameters:" );
-  Serial.print( "Mode: " );
-  Serial.println( WiFi.getMode() == WIFI_AP ? "Station" : "Client" );
-  Serial.print( "IP address: " );
-  Serial.println( WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP() );
+    Serial.println("\n\nWiFi parameters:");
+    Serial.print("Mode: ");
+    Serial.println(WiFi.getMode() == WIFI_AP ? "Station" : "Client");
+    Serial.print("IP address: ");
+    Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP());
 
-  uint16_t tab1 = ESPUI.addControl( ControlType::Tab, "Settings 1", "Settings 1" );
-  uint16_t tab2 = ESPUI.addControl( ControlType::Tab, "Settings 2", "Settings 2" );
-  uint16_t tab3 = ESPUI.addControl( ControlType::Tab, "Settings 3", "Settings 3" );
+    uint16_t tab1 = ESPUI.addControl(ControlType::Tab, "Settings 1", "Settings 1");
+    uint16_t tab2 = ESPUI.addControl(ControlType::Tab, "Settings 2", "Settings 2");
+    uint16_t tab3 = ESPUI.addControl(ControlType::Tab, "Settings 3", "Settings 3");
 
-  // shown above all tabs
-  status = ESPUI.addControl( ControlType::Label, "Status:", "Stop", ControlColor::Turquoise );
+    // shown above all tabs
+    status = ESPUI.addControl(ControlType::Label, "Status:", "Stop", ControlColor::Turquoise);
 
-  uint16_t select1 = ESPUI.addControl( ControlType::Select, "Select:", "", ControlColor::Alizarin, tab1, &selectExample );
-  ESPUI.addControl( ControlType::Option, "Option1", "Opt1", ControlColor::Alizarin, select1 );
-  ESPUI.addControl( ControlType::Option, "Option2", "Opt2", ControlColor::Alizarin, select1 );
-  ESPUI.addControl( ControlType::Option, "Option3", "Opt3", ControlColor::Alizarin, select1 );
-  
-  ESPUI.addControl( ControlType::Text, "Text Test:", "a Text Field", ControlColor::Alizarin, tab1, &textCall );
+    uint16_t select1
+        = ESPUI.addControl(ControlType::Select, "Select:", "", ControlColor::Alizarin, tab1, &selectExample);
+    ESPUI.addControl(ControlType::Option, "Option1", "Opt1", ControlColor::Alizarin, select1);
+    ESPUI.addControl(ControlType::Option, "Option2", "Opt2", ControlColor::Alizarin, select1);
+    ESPUI.addControl(ControlType::Option, "Option3", "Opt3", ControlColor::Alizarin, select1);
 
-  // tabbed controls
-  ESPUI.addControl( ControlType::Label, "Millis:", "0", ControlColor::Emerald, tab1 );
-  button1 = ESPUI.addControl( ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, tab1, &buttonCallback );
-  ESPUI.addControl( ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, tab1, &buttonExample );
-  ESPUI.addControl( ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, tab2, &padExample );
-  ESPUI.addControl( ControlType::Pad, "Pad without center", "", ControlColor::Carrot, tab3, &padExample );
-  switchOne = ESPUI.addControl( ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, tab3, &switchExample );
-  ESPUI.addControl( ControlType::Switcher, "Switch two", "", ControlColor::None, tab3, &otherSwitchExample );
-  ESPUI.addControl( ControlType::Slider, "Slider one", "30", ControlColor::Alizarin, tab1, &slider );
-  ESPUI.addControl( ControlType::Slider, "Slider two", "100", ControlColor::Alizarin, tab3, &slider );
-  ESPUI.addControl( ControlType::Number, "Number:", "50", ControlColor::Alizarin, tab3, &numberCall );
+    ESPUI.addControl(ControlType::Text, "Text Test:", "a Text Field", ControlColor::Alizarin, tab1, &textCall);
 
-  /*
-   * .begin loads and serves all files from PROGMEM directly.
-   * If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
-   * (.prepareFileSystem has to be run in an empty sketch before)
-   */
+    // tabbed controls
+    ESPUI.addControl(ControlType::Label, "Millis:", "0", ControlColor::Emerald, tab1);
+    button1 = ESPUI.addControl(
+        ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, tab1, &buttonCallback);
+    ESPUI.addControl(ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, tab1, &buttonExample);
+    ESPUI.addControl(ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, tab2, &padExample);
+    ESPUI.addControl(ControlType::Pad, "Pad without center", "", ControlColor::Carrot, tab3, &padExample);
+    switchOne = ESPUI.addControl(ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, tab3, &switchExample);
+    ESPUI.addControl(ControlType::Switcher, "Switch two", "", ControlColor::None, tab3, &otherSwitchExample);
+    ESPUI.addControl(ControlType::Slider, "Slider one", "30", ControlColor::Alizarin, tab1, &slider);
+    ESPUI.addControl(ControlType::Slider, "Slider two", "100", ControlColor::Alizarin, tab3, &slider);
+    ESPUI.addControl(ControlType::Number, "Number:", "50", ControlColor::Alizarin, tab3, &numberCall);
 
-  // Enable this option if you want sliders to be continuous (update during move) and not discrete (update on stop)
-  // ESPUI.sliderContinuous = true;
+    /*
+     * .begin loads and serves all files from PROGMEM directly.
+     * If you want to serve the files from LITTLEFS use ESPUI.beginLITTLEFS
+     * (.prepareFileSystem has to be run in an empty sketch before)
+     */
 
-  /*
-   * 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")
-   */
+    // 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.begin("ESPUI Control");
+    ESPUI.begin("ESPUI Control");
 }
 
-void loop( void ) {
-  dnsServer.processNextRequest();
+void loop(void)
+{
+    dnsServer.processNextRequest();
 
-  static long oldTime = 0;
-  static bool switchi = false;
+    static long oldTime = 0;
+    static bool switchi = false;
 
-  if ( millis() - oldTime > 5000 ) {
-    switchi = !switchi;
-    ESPUI.updateControlValue( switchOne, switchi ? "1" : "0" );
+    if (millis() - oldTime > 5000)
+    {
+        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"
 
@@ -33,53 +31,58 @@
 
 // Message Types (and control types)
 
-enum ControlType : uint8_t {
-  // fixed controls
-  Title = 0,
+enum ControlType : uint8_t
+{
+    // fixed controls
+    Title = 0,
 
-  // updatable controls
-  Pad,
-  PadWithCenter,
-  Button,
-  Label,
-  Switcher,
-  Slider,
-  Number,
-  Text,
-  Graph,
-  GraphPoint,
-  Tab,
-  Select,
-  Option,
-  Min,
-  Max,
-  Step,
-  Gauge,
-  Accel,
+    // updatable controls
+    Pad,
+    PadWithCenter,
+    Button,
+    Label,
+    Switcher,
+    Slider,
+    Number,
+    Text,
+    Graph,
+    GraphPoint,
+    Tab,
+    Select,
+    Option,
+    Min,
+    Max,
+    Step,
+    Gauge,
+    Accel,
 
-  UpdateOffset = 100,
-  UpdatePad = 101,
-  UpdatePadWithCenter,
-  ButtonButton,
-  UpdateLabel,
-  UpdateSwitcher,
-  UpdateSlider,
-  UpdateNumber,
-  UpdateText,
-  ClearGraph,
-  UpdateTab,
-  UpdateSelection,
-  UpdateOption,
-  UpdateMin,
-  UpdateMax,
-  UpdateStep,
-  UpdateGauge,
-  UpdateAccel,
+    UpdateOffset = 100,
+    UpdatePad = 101,
+    UpdatePadWithCenter,
+    ButtonButton,
+    UpdateLabel,
+    UpdateSwitcher,
+    UpdateSlider,
+    UpdateNumber,
+    UpdateText,
+    ClearGraph,
+    UpdateTab,
+    UpdateSelection,
+    UpdateOption,
+    UpdateMin,
+    UpdateMax,
+    UpdateStep,
+    UpdateGauge,
+    UpdateAccel,
 
-  InitialGui = 200
+    InitialGui = 200,
+    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
@@ -101,7 +104,18 @@ enum ControlType : uint8_t {
 #define CLEAR_GRAPH ControlType::ClearGraph
 
 // Colors
-enum ControlColor : uint8_t { Turquoise, Emerald, Peterriver, Wetasphalt, Sunflower, Carrot, Alizarin, Dark, None = 0xFF };
+enum ControlColor : uint8_t
+{
+    Turquoise,
+    Emerald,
+    Peterriver,
+    Wetasphalt,
+    Sunflower,
+    Carrot,
+    Alizarin,
+    Dark,
+    None = 0xFF
+};
 #define COLOR_TURQUOISE ControlColor::Turquoise
 #define COLOR_EMERALD ControlColor::Emerald
 #define COLOR_PETERRIVER ControlColor::Peterriver
@@ -112,31 +126,51 @@ enum ControlColor : uint8_t { Turquoise, Emerald, Peterriver, Wetasphalt, Sunflo
 #define COLOR_DARK ControlColor::Dark
 #define COLOR_NONE ControlColor::None
 
-class Control {
+class Control
+{
 public:
-  ControlType type;
-  uint16_t id; // just mirroring the id here for practical reasons
-  const char *label;
-  void (*callback)(Control *, int);
-  String value;
-  ControlColor color;
-  uint16_t parentControl;
-  Control *next;
+    ControlType type;
+    uint16_t id; // just mirroring the id here for practical reasons
+    const char* label;
+    void (*callback)(Control*, int);
+    String value;
+    ControlColor color;
+    bool visible;
+    uint16_t parentControl;
+    String panelStyle;
+    String elementStyle;
+    Control* next;
 
-  static constexpr uint16_t noParent = 0xffff;
+    static constexpr uint16_t noParent = 0xffff;
 
-  Control(ControlType type, const char *label, void (*callback)(Control *, int), String value, ControlColor color,
-          uint16_t parentControl = Control::noParent)
-      : type(type), label(label), callback(callback), value(value), color(color), parentControl(parentControl), next(nullptr) {
-    id = idCounter++;
-  }
+    Control(ControlType type, const char* label, void (*callback)(Control*, int), const String& value,
+        ControlColor color, bool visible = true, uint16_t parentControl = Control::noParent)
+        : type(type),
+          label(label),
+          callback(callback),
+          value(value),
+          color(color),
+          visible(visible),
+          parentControl(parentControl),
+          next(nullptr)
+    {
+        id = idCounter++;
+    }
 
-  Control(const Control &control)
-      : type(control.type), id(control.id), label(control.label), callback(control.callback), value(control.value), color(control.color),
-        parentControl(control.parentControl), next(control.next) {}
+    Control(const Control& control)
+        : type(control.type),
+          id(control.id),
+          label(control.label),
+          callback(control.callback),
+          value(control.value),
+          color(control.color),
+          visible(control.visible),
+          parentControl(control.parentControl),
+          next(control.next)
+    { }
 
 private:
-  static uint16_t idCounter;
+    static uint16_t idCounter;
 };
 
 // Values
@@ -162,88 +196,114 @@ private:
 #define T_VALUE 10
 #define S_VALUE 11
 
-enum Verbosity : uint8_t { Quiet = 0, Verbose, VerboseJSON };
+enum Verbosity : uint8_t
+{
+    Quiet = 0,
+    Verbose,
+    VerboseJSON
+};
 
-class ESPUIClass {
+class ESPUIClass
+{
 public:
-  ESPUIClass() {
-    verbosity = Verbosity::Quiet;
-    jsonUpdateDocumentSize = 2000;
-    jsonInitialDocumentSize = 8000;
-    sliderContinuous = false;
-  }
-  unsigned int jsonUpdateDocumentSize;
-  unsigned int jsonInitialDocumentSize;
-  bool sliderContinuous;
+    ESPUIClass()
+    {
+        verbosity = Verbosity::Quiet;
+        jsonUpdateDocumentSize = 2000;
+        jsonInitialDocumentSize = 8000;
+        sliderContinuous = false;
+    }
+    unsigned int jsonUpdateDocumentSize;
+    unsigned int jsonInitialDocumentSize;
+    bool sliderContinuous;
 
-  void setVerbosity(Verbosity verbosity);
-  void begin(const char *_title, const char *username = nullptr, const char *password = nullptr);       // Setup server and page in Memorymode
-  void beginSPIFFS(const char *_title, const char *username = nullptr, const char *password = nullptr); // Setup server and page in SPIFFSmode
+    void setVerbosity(Verbosity verbosity);
+    void begin(const char* _title, const char* username = nullptr, const char* password = nullptr,
+        uint16_t port = 80); // Setup server and page in Memorymode
+    void beginSPIFFS(const char* _title, const char* username = nullptr, const char* password = nullptr,
+        uint16_t port = 80); // Setup server and page in LITTLEFS mode (DEPRECATED, use beginLITTLEFS)
+    void beginLITTLEFS(const char* _title, const char* username = nullptr, const char* password = nullptr,
+        uint16_t port = 80); // Setup server and page in LITTLEFS mode
 
-  void prepareFileSystem(); // Initially preps the filesystem and loads a lot of stuff into SPIFFS
-  void list();              // Lists SPIFFS directory
+    void prepareFileSystem(); // Initially preps the filesystem and loads a lot of
+                              // stuff into LITTLEFS
+    void list(); // Lists LITTLEFS directory
 
-  uint16_t addControl(ControlType type, const char *label, String value = String(""), ControlColor color = ControlColor::Turquoise,
-                      uint16_t parentControl = Control::noParent, void (*callback)(Control *, int) = nullptr);
+    uint16_t addControl(ControlType type, const char* label, const String& value = String(""),
+        ControlColor color = ControlColor::Turquoise, uint16_t parentControl = Control::noParent,
+        void (*callback)(Control*, int) = nullptr);
+    bool removeControl(uint16_t id, bool force_reload_ui = false);
 
-  // create Elements
-  uint16_t button(const char *label, void (*callback)(Control *, int), ControlColor color, String value = "");         // Create Event Button
-  uint16_t switcher(const char *label, void (*callback)(Control *, int), ControlColor color, bool startState = false); // Create Toggle Button
-  uint16_t pad(const char *label, void (*callback)(Control *, int), ControlColor color);                               // Create Pad Control
-  uint16_t padWithCenter(const char *label, void (*callback)(Control *, int), ControlColor color); // Create Pad Control with Centerbutton
+    // create Elements
+    uint16_t button(const char* label, void (*callback)(Control*, int), ControlColor color,
+        const String& value = ""); // Create Event Button
+    uint16_t switcher(const char* label, void (*callback)(Control*, int), ControlColor color,
+        bool startState = false); // Create Toggle Button
+    uint16_t pad(const char* label, void (*callback)(Control*, int),
+        ControlColor color); // Create Pad Control
+    uint16_t padWithCenter(const char* label, void (*callback)(Control*, int),
+        ControlColor color); // Create Pad Control with Centerbutton
 
-  uint16_t slider(const char *label, void (*callback)(Control *, int), ControlColor color, int value, int min = 0,
-                  int max = 100); // Create Slider Control
-  uint16_t number(const char *label, void (*callback)(Control *, int), ControlColor color, int value, int min = 0,
-                  int max = 100);                                                                            // Create a Number Input Control
-  uint16_t text(const char *label, void (*callback)(Control *, int), ControlColor color, String value = ""); // Create a Text Input Control
+    uint16_t slider(const char* label, void (*callback)(Control*, int), ControlColor color, int value, int min = 0,
+        int max = 100); // Create Slider Control
+    uint16_t number(const char* label, void (*callback)(Control*, int), ControlColor color, int value, int min = 0,
+        int max = 100); // Create a Number Input Control
+    uint16_t text(const char* label, void (*callback)(Control*, int), ControlColor color,
+        const String& value = ""); // Create a Text Input Control
 
-  // Output only
-  uint16_t label(const char *label, ControlColor color, String value = ""); // Create Label
-  uint16_t graph(const char *label, ControlColor color);                    // Create Graph display
-  uint16_t gauge(const char *label, ControlColor color, int value, int min = 0,
-                 int max = 100); // Create Gauge display
+    // Output only
+    uint16_t label(const char* label, ControlColor color,
+        const String& value = ""); // Create Label
+    uint16_t graph(const char* label, ControlColor color); // Create Graph display
+    uint16_t gauge(const char* label, ControlColor color, int value, int min = 0,
+        int max = 100); // Create Gauge display
 
-  // Input only
-  uint16_t accelerometer(const char *label, void (*callback)(Control *, int), ControlColor color);
+    // Input only
+    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
-  void updateControlValue(uint16_t id, String value, int clientId = -1);
-  void updateControlValue(Control *control, String value, int clientId = -1);
+    // Update Elements
+    void updateControlValue(uint16_t id, const String& value, int clientId = -1);
+    void updateControlValue(Control* control, const String& value, int clientId = -1);
 
-  void updateControl(uint16_t id, int clientId = -1);
-  void updateControl(Control *control, int clientId = -1);
+    void updateControl(uint16_t id, int clientId = -1);
+    void updateControl(Control* control, int clientId = -1);
 
-  void print(uint16_t id, String value);
-  void updateLabel(uint16_t id, String value);
-  void updateSwitcher(uint16_t id, bool nValue, int clientId = -1);
-  void updateSlider(uint16_t id, int nValue, int clientId = -1);
-  void updateNumber(uint16_t id, int nValue, int clientId = -1);
-  void updateText(uint16_t id, String nValue, int clientId = -1);
-  void updateSelect(uint16_t id, String nValue, int clientId = -1);
-  void updateGauge(uint16_t id, int number, int clientId);
+    void print(uint16_t id, const String& value);
+    void updateLabel(uint16_t id, const String& value);
+    void updateSwitcher(uint16_t id, bool nValue, int clientId = -1);
+    void updateSlider(uint16_t id, int nValue, int clientId = -1);
+    void updateNumber(uint16_t id, int nValue, int clientId = -1);
+    void updateText(uint16_t id, const String& nValue, int clientId = -1);
+    void updateSelect(uint16_t id, const String& nValue, int clientId = -1);
+    void updateGauge(uint16_t id, int number, int clientId);
 
-  void clearGraph(uint16_t id, int clientId = -1);
-  void addGraphPoint(uint16_t id, int nValue, int clientId = -1);
+    void clearGraph(uint16_t id, int clientId = -1);
+    void addGraphPoint(uint16_t id, int nValue, int clientId = -1);
 
-  // Variables
-  const char *ui_title = "ESPUI"; // Store UI Title and Header Name
-  Control *controls = nullptr;
-  void jsonDom(AsyncWebSocketClient *client);
+    void setPanelStyle(uint16_t id, String style, int clientId = -1);
+    void setElementStyle(uint16_t id, String style, int clientId = -1);
 
-  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;
-  AsyncWebSocket *ws;
+    Verbosity verbosity;
+
+    AsyncWebServer* server;
+    AsyncWebSocket* ws;
 
 private:
-  const char *basicAuthUsername = nullptr;
-  const char *basicAuthPassword = nullptr;
-  bool basicAuth = true;
+    const char* basicAuthUsername = nullptr;
+    const char* basicAuthPassword = nullptr;
+    bool basicAuth = true;
+
+    Control* prepareJSONChunk(AsyncWebSocketClient* client, Control* control, JsonArray* items);
 };
 
 extern ESPUIClass ESPUI;

src/dataGraphJS.h

@@ -1,19 +1,19 @@
-const char JS_GRAPH[] PROGMEM = R"=====(
-function lineGraph(parent,xAccessor,yAccessor){const width=620;const height=420;const gutter=40;const pixelsPerTick=30;function numericTransformer(dataMin,dataMax,pxMin,pxMax){var dataDiff=dataMax-dataMin,pxDiff=pxMax-pxMin,dataRatio=pxDiff/dataDiff,coordRatio=dataDiff/pxDiff;return{toCoord:function(data){return(data-dataMin)*dataRatio+pxMin;},toData:function(coord){return(coord-pxMin)*coordRatio+dataMin;}};}
-function axisRenderer(orientation,transform){var axisGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var axisPath=document.createElementNS("http://www.w3.org/2000/svg","path");axisGroup.setAttribute("class",orientation+"-axis");var xMin=gutter;var xMax=width-gutter;var yMin=height-gutter;var yMax=gutter;if(orientation==="x"){axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMax+" "+yMin);for(var i=xMin;i<=xMax;i++){if((i-xMin)%pixelsPerTick===0&&i!==xMin){var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(transform(i));text.setAttribute("x",i);text.setAttribute("y",yMin);text.setAttribute("dy","1em");axisGroup.appendChild(text);}}}else{axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMin+" "+yMax);for(var i=yMax;i<=yMin;i++){if((i-yMin)%pixelsPerTick===0&&i!==yMin){var tickGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var gridLine=document.createElementNS("http://www.w3.org/2000/svg","path");text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(transform(i));text.setAttribute("x",xMin);text.setAttribute("y",i);text.setAttribute("dx","-.5em");text.setAttribute("dy",".3em");gridLine.setAttribute("d","M "+xMin+" "+i+" L "+xMax+" "+i);tickGroup.appendChild(gridLine);tickGroup.appendChild(text);axisGroup.appendChild(tickGroup);}}}
-axisGroup.appendChild(axisPath);parent.appendChild(axisGroup);}
-function lineRenderer(xAccessor,yAccessor,xTransform,yTransform){var line=document.createElementNS("http://www.w3.org/2000/svg","path");xAccessor.reset();yAccessor.reset();if(!xAccessor.hasNext()||!yAccessor.hasNext()){return;}
-var pathString="M "+xTransform(xAccessor.next())+" "+yTransform(yAccessor.next());while(xAccessor.hasNext()&&yAccessor.hasNext()){pathString+=" L "+
-xTransform(xAccessor.next())+
-" "+
-yTransform(yAccessor.next());}
-line.setAttribute("class","series");line.setAttribute("d",pathString);parent.appendChild(line);}
-function pointRenderer(xAccessor,yAccessor,xTransform,yTransform){var pointGroup=document.createElementNS("http://www.w3.org/2000/svg","g");pointGroup.setAttribute("class","data-points");xAccessor.reset();yAccessor.reset();if(!xAccessor.hasNext()||!yAccessor.hasNext()){return;}
-while(xAccessor.hasNext()&&yAccessor.hasNext()){var xDataValue=xAccessor.next();var x=xTransform(xDataValue);var yDataValue=yAccessor.next();var y=yTransform(yDataValue);var circle=document.createElementNS("http://www.w3.org/2000/svg","circle");circle.setAttribute("cx",x);circle.setAttribute("cy",y);circle.setAttribute("r","4");var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(xDataValue)+" / "+Math.floor(yDataValue);text.setAttribute("x",x);text.setAttribute("y",y);text.setAttribute("dx","1em");text.setAttribute("dy","-.7em");pointGroup.appendChild(circle);pointGroup.appendChild(text);}
-parent.appendChild(pointGroup);}
-xTransform=numericTransformer(xAccessor.min(),xAccessor.max(),0+gutter,width-gutter);yTransform=numericTransformer(yAccessor.min(),yAccessor.max(),height-gutter,0+gutter);axisRenderer("x",xTransform.toData);axisRenderer("y",yTransform.toData);lineRenderer(xAccessor,yAccessor,xTransform.toCoord,yTransform.toCoord);pointRenderer(xAccessor,yAccessor,xTransform.toCoord,yTransform.toCoord);}
-function renderGraphSvg(dataArray,renderId){var figure=document.getElementById(renderId);while(figure.hasChildNodes()){figure.removeChild(figure.lastChild);}
-var svg=document.createElementNS("http://www.w3.org/2000/svg","svg");svg.setAttribute("viewBox","0 0 640 440");svg.setAttribute("preserveAspectRatio","xMidYMid meet");lineGraph(svg,(function(data,min,max){var i=0;return{hasNext:function(){return i<data.length;},next:function(){return data[i++].x;},reset:function(){i=0;},min:function(){return min;},max:function(){return max;}};})(dataArray,Math.min.apply(Math,dataArray.map(function(o){return o.x;})),Math.max.apply(Math,dataArray.map(function(o){return o.x;}))),(function(data,min,max){var i=0;return{hasNext:function(){return i<data.length;},next:function(){return data[i++].y;},reset:function(){i=0;},min:function(){return min;},max:function(){return max;}};})(dataArray,Math.min.apply(Math,dataArray.map(function(o){return o.y;})),Math.max.apply(Math,dataArray.map(function(o){return o.y;}))));figure.appendChild(svg);}
-)=====";
-
-const uint8_t JS_GRAPH_GZIP[1245] PROGMEM = { 31,139,8,0,243,90,6,94,2,255,205,87,95,111,219,54,16,127,247,167,112,4,44,16,107,89,86,27,175,3,170,240,33,109,135,174,64,18,20,77,48,96,24,246,192,73,180,76,76,150,4,138,182,69,184,254,238,59,146,162,36,219,82,134,58,45,186,135,56,226,253,231,241,119,119,228,98,157,69,130,229,217,56,101,25,253,192,73,177,116,11,194,105,38,188,234,38,138,104,89,230,220,147,246,11,237,162,60,43,197,120,203,98,177,196,175,95,5,161,89,47,41,75,150,2,207,27,66,178,22,130,114,60,183,235,130,85,52,45,63,81,254,200,162,127,240,85,16,46,172,219,108,189,162,156,69,143,156,100,229,34,231,176,112,99,34,200,29,203,60,253,159,84,94,81,169,21,252,146,10,237,54,132,143,21,227,61,91,44,112,45,49,181,26,69,165,201,90,116,106,212,20,235,51,1,87,216,48,103,86,217,139,242,156,199,134,101,105,51,35,19,114,42,214,60,219,137,252,157,146,121,99,131,213,145,161,157,225,234,133,245,140,94,52,126,38,218,111,184,247,68,254,30,104,173,178,246,215,104,235,149,137,17,189,104,67,153,212,6,195,253,62,220,143,154,44,145,138,149,159,105,22,83,14,249,201,57,131,243,81,210,153,39,108,222,76,102,148,220,7,158,175,11,28,231,17,100,54,19,126,196,41,17,244,215,148,170,213,253,131,235,44,133,40,222,204,102,219,237,214,223,94,249,57,79,102,175,130,32,152,149,155,196,241,156,196,65,161,53,244,137,192,33,159,105,167,0,93,48,213,196,227,151,84,220,8,193,217,223,107,65,93,39,74,73,89,58,94,103,39,19,103,170,132,107,247,42,45,216,128,168,94,147,10,107,212,77,59,84,169,164,12,246,14,201,32,92,175,217,162,155,46,140,177,83,57,104,103,119,119,20,85,12,129,223,141,157,137,242,62,113,224,67,154,143,91,77,35,85,67,67,33,164,220,85,190,24,214,167,205,174,177,18,8,217,100,130,118,224,211,101,83,125,178,63,29,2,31,227,224,242,146,93,96,173,100,78,76,208,74,156,155,100,165,11,9,83,255,124,150,101,148,255,246,120,119,139,239,212,198,22,41,64,202,109,208,225,50,84,203,29,238,184,114,60,214,203,144,142,103,54,218,195,139,129,233,188,164,171,131,243,37,69,1,248,124,183,100,105,236,42,29,4,8,222,195,214,233,121,201,110,104,80,243,157,100,75,157,228,107,44,117,210,219,100,203,167,146,45,219,100,3,253,155,148,71,194,89,124,11,13,243,153,229,241,195,15,191,26,58,99,57,4,140,24,180,156,169,255,179,62,254,33,112,248,87,154,109,179,244,95,39,207,142,107,76,185,182,71,117,128,44,107,113,136,111,144,55,128,74,171,161,161,57,234,23,178,96,69,161,153,130,39,76,107,161,237,205,106,112,54,189,185,103,104,122,85,51,220,60,249,120,216,175,211,231,99,168,241,232,115,10,121,118,81,40,79,40,80,36,23,173,220,146,148,247,144,39,23,125,249,114,33,79,169,118,68,193,30,85,136,202,205,3,156,93,150,96,115,106,205,22,218,205,250,153,209,52,53,219,10,200,99,129,112,11,137,164,110,79,44,151,151,189,161,180,222,39,216,128,100,244,100,0,35,21,193,232,201,16,246,163,244,20,147,245,64,114,74,184,140,80,53,133,210,94,220,182,225,244,2,36,213,208,236,96,163,200,89,38,206,5,135,86,126,118,187,106,173,12,108,89,223,99,180,84,249,157,225,244,181,135,175,39,191,186,68,253,78,210,53,197,199,167,109,110,6,184,139,135,70,216,48,101,171,44,251,148,37,238,34,229,72,57,98,60,74,207,174,78,163,13,9,53,31,199,185,87,189,119,136,167,102,239,0,143,131,229,121,61,131,190,235,240,232,100,18,138,122,6,69,213,97,118,51,53,48,87,6,47,21,195,67,229,229,147,35,101,234,255,162,249,29,56,119,43,207,100,107,144,93,223,72,70,61,53,219,106,40,129,22,76,184,231,101,210,34,112,197,50,23,121,157,53,169,96,29,76,204,181,211,235,94,85,161,130,158,52,42,143,140,202,35,163,7,23,220,198,133,153,114,77,107,209,73,111,172,250,230,237,113,44,163,242,127,42,243,21,243,203,175,95,68,135,102,52,169,78,253,183,48,212,233,159,92,155,211,207,210,135,77,162,159,92,55,156,19,233,25,198,199,216,52,137,5,75,214,188,83,170,9,21,117,37,188,149,31,99,183,17,174,199,143,17,87,157,70,67,224,62,143,105,169,250,77,77,231,116,149,111,168,65,71,77,130,86,41,52,1,213,83,17,202,232,220,218,83,191,40,132,223,35,152,111,24,221,190,205,85,37,4,227,96,252,122,30,140,231,243,160,87,178,80,141,152,111,232,77,89,208,72,232,119,35,104,193,117,42,254,3,254,198,43,74,69,61,193,204,131,30,44,120,238,193,35,214,3,168,121,43,251,158,102,56,176,79,222,186,251,182,175,86,219,190,199,236,90,41,250,41,205,18,177,132,231,109,214,47,166,132,254,132,155,249,95,126,5,66,122,98,116,165,148,171,189,242,222,163,186,210,207,102,136,170,143,7,247,126,245,36,70,29,12,232,142,4,74,170,156,83,233,170,165,215,112,161,120,138,118,207,121,99,40,87,113,33,84,43,147,234,28,101,244,3,178,41,255,167,217,148,207,201,166,86,134,43,89,93,101,221,182,12,152,133,90,251,23,198,24,146,161,158,18,0,0 };
+const char JS_GRAPH[] PROGMEM = R"=====(
+function lineGraph(parent,xAccessor,yAccessor){const width=620;const height=420;const gutter=40;const pixelsPerTick=30;function numericTransformer(dataMin,dataMax,pxMin,pxMax){var dataDiff=dataMax-dataMin,pxDiff=pxMax-pxMin,dataRatio=pxDiff/dataDiff,coordRatio=dataDiff/pxDiff;return{toCoord:function(data){return(data-dataMin)*dataRatio+pxMin;},toData:function(coord){return(coord-pxMin)*coordRatio+dataMin;}};}
+function axisRenderer(orientation,transform){var axisGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var axisPath=document.createElementNS("http://www.w3.org/2000/svg","path");axisGroup.setAttribute("class",orientation+"-axis");var xMin=gutter;var xMax=width-gutter;var yMin=height-gutter;var yMax=gutter;if(orientation==="x"){axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMax+" "+yMin);for(var i=xMin;i<=xMax;i++){if((i-xMin)%pixelsPerTick===0&&i!==xMin){var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(transform(i));text.setAttribute("x",i);text.setAttribute("y",yMin);text.setAttribute("dy","1em");axisGroup.appendChild(text);}}}else{axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMin+" "+yMax);for(var i=yMax;i<=yMin;i++){if((i-yMin)%pixelsPerTick===0&&i!==yMin){var tickGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var gridLine=document.createElementNS("http://www.w3.org/2000/svg","path");text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(transform(i));text.setAttribute("x",xMin);text.setAttribute("y",i);text.setAttribute("dx","-.5em");text.setAttribute("dy",".3em");gridLine.setAttribute("d","M "+xMin+" "+i+" L "+xMax+" "+i);tickGroup.appendChild(gridLine);tickGroup.appendChild(text);axisGroup.appendChild(tickGroup);}}}
+axisGroup.appendChild(axisPath);parent.appendChild(axisGroup);}
+function lineRenderer(xAccessor,yAccessor,xTransform,yTransform){var line=document.createElementNS("http://www.w3.org/2000/svg","path");xAccessor.reset();yAccessor.reset();if(!xAccessor.hasNext()||!yAccessor.hasNext()){return;}
+var pathString="M "+xTransform(xAccessor.next())+" "+yTransform(yAccessor.next());while(xAccessor.hasNext()&&yAccessor.hasNext()){pathString+=" L "+
+xTransform(xAccessor.next())+
+" "+
+yTransform(yAccessor.next());}
+line.setAttribute("class","series");line.setAttribute("d",pathString);parent.appendChild(line);}
+function pointRenderer(xAccessor,yAccessor,xTransform,yTransform){var pointGroup=document.createElementNS("http://www.w3.org/2000/svg","g");pointGroup.setAttribute("class","data-points");xAccessor.reset();yAccessor.reset();if(!xAccessor.hasNext()||!yAccessor.hasNext()){return;}
+while(xAccessor.hasNext()&&yAccessor.hasNext()){var xDataValue=xAccessor.next();var x=xTransform(xDataValue);var yDataValue=yAccessor.next();var y=yTransform(yDataValue);var circle=document.createElementNS("http://www.w3.org/2000/svg","circle");circle.setAttribute("cx",x);circle.setAttribute("cy",y);circle.setAttribute("r","4");var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(xDataValue)+" / "+Math.floor(yDataValue);text.setAttribute("x",x);text.setAttribute("y",y);text.setAttribute("dx","1em");text.setAttribute("dy","-.7em");pointGroup.appendChild(circle);pointGroup.appendChild(text);}
+parent.appendChild(pointGroup);}
+xTransform=numericTransformer(xAccessor.min(),xAccessor.max(),0+gutter,width-gutter);yTransform=numericTransformer(yAccessor.min(),yAccessor.max(),height-gutter,0+gutter);axisRenderer("x",xTransform.toData);axisRenderer("y",yTransform.toData);lineRenderer(xAccessor,yAccessor,xTransform.toCoord,yTransform.toCoord);pointRenderer(xAccessor,yAccessor,xTransform.toCoord,yTransform.toCoord);}
+function renderGraphSvg(dataArray,renderId){var figure=document.getElementById(renderId);while(figure.hasChildNodes()){figure.removeChild(figure.lastChild);}
+var svg=document.createElementNS("http://www.w3.org/2000/svg","svg");svg.setAttribute("viewBox","0 0 640 440");svg.setAttribute("preserveAspectRatio","xMidYMid meet");lineGraph(svg,(function(data,min,max){var i=0;return{hasNext:function(){return i<data.length;},next:function(){return data[i++].x;},reset:function(){i=0;},min:function(){return min;},max:function(){return max;}};})(dataArray,Math.min.apply(Math,dataArray.map(function(o){return o.x;})),Math.max.apply(Math,dataArray.map(function(o){return o.x;}))),(function(data,min,max){var i=0;return{hasNext:function(){return i<data.length;},next:function(){return data[i++].y;},reset:function(){i=0;},min:function(){return min;},max:function(){return max;}};})(dataArray,Math.min.apply(Math,dataArray.map(function(o){return o.y;})),Math.max.apply(Math,dataArray.map(function(o){return o.y;}))));figure.appendChild(svg);}
+)=====";
+
+const uint8_t JS_GRAPH_GZIP[1245] PROGMEM = { 31,139,8,0,19,56,231,94,2,255,205,87,95,111,219,54,16,127,247,167,112,4,44,16,107,89,86,27,175,3,170,240,33,109,135,174,64,18,20,77,48,96,24,246,192,73,180,76,76,150,4,138,182,69,184,254,238,59,146,162,36,219,82,134,58,45,186,135,56,226,253,231,241,119,119,228,98,157,69,130,229,217,56,101,25,253,192,73,177,116,11,194,105,38,188,234,38,138,104,89,230,220,147,246,11,237,162,60,43,197,120,203,98,177,196,175,95,5,161,89,47,41,75,150,2,207,27,66,178,22,130,114,60,183,235,130,85,52,45,63,81,254,200,162,127,240,85,16,46,172,219,108,189,162,156,69,143,156,100,229,34,231,176,112,99,34,200,29,203,60,253,159,84,94,81,169,21,252,146,10,237,54,132,143,21,227,61,91,44,112,45,49,181,26,69,165,201,90,116,106,212,20,235,51,1,87,216,48,103,86,217,139,242,156,199,134,101,105,51,35,19,114,42,214,60,219,137,252,157,146,121,99,131,213,145,161,157,225,234,133,245,140,94,52,126,38,218,111,184,247,68,254,30,104,173,178,246,215,104,235,149,137,17,189,104,67,153,212,6,195,253,62,220,143,154,44,145,138,149,159,105,22,83,14,249,201,57,131,243,81,210,153,39,108,222,76,102,148,220,7,158,175,11,28,231,17,100,54,19,126,196,41,17,244,215,148,170,213,253,131,235,44,133,40,222,204,102,219,237,214,223,94,249,57,79,102,175,130,32,152,149,155,196,241,156,196,65,161,53,244,137,192,33,159,105,167,0,93,48,213,196,227,151,84,220,8,193,217,223,107,65,93,39,74,73,89,58,94,103,39,19,103,170,132,107,247,42,45,216,128,168,94,147,10,107,212,77,59,84,169,164,12,246,14,201,32,92,175,217,162,155,46,140,177,83,57,104,103,119,119,20,85,12,129,223,141,157,137,242,62,113,224,67,154,143,91,77,35,85,67,67,33,164,220,85,190,24,214,167,205,174,177,18,8,217,100,130,118,224,211,101,83,125,178,63,29,2,31,227,224,242,146,93,96,173,100,78,76,208,74,156,155,100,165,11,9,83,255,124,150,101,148,255,246,120,119,139,239,212,198,22,41,64,202,109,208,225,50,84,203,29,238,184,114,60,214,203,144,142,103,54,218,195,139,129,233,188,164,171,131,243,37,69,1,248,124,183,100,105,236,42,29,4,8,222,195,214,233,121,201,110,104,80,243,157,100,75,157,228,107,44,117,210,219,100,203,167,146,45,219,100,3,253,155,148,71,194,89,124,11,13,243,153,229,241,195,15,191,26,58,99,57,4,140,24,180,156,169,255,179,62,254,33,112,248,87,154,109,179,244,95,39,207,142,107,76,185,182,71,117,128,44,107,113,136,111,144,55,128,74,171,161,161,57,234,23,178,96,69,161,153,130,39,76,107,161,237,205,106,112,54,189,185,103,104,122,85,51,220,60,249,120,216,175,211,231,99,168,241,232,115,10,121,118,81,40,79,40,80,36,23,173,220,146,148,247,144,39,23,125,249,114,33,79,169,118,68,193,30,85,136,202,205,3,156,93,150,96,115,106,205,22,218,205,250,153,209,52,53,219,10,200,99,129,112,11,137,164,110,79,44,151,151,189,161,180,222,39,216,128,100,244,100,0,35,21,193,232,201,16,246,163,244,20,147,245,64,114,74,184,140,80,53,133,210,94,220,182,225,244,2,36,213,208,236,96,163,200,89,38,206,5,135,86,126,118,187,106,173,12,108,89,223,99,180,84,249,157,225,244,181,135,175,39,191,186,68,253,78,210,53,197,199,167,109,110,6,184,139,135,70,216,48,101,171,44,251,148,37,238,34,229,72,57,98,60,74,207,174,78,163,13,9,53,31,199,185,87,189,119,136,167,102,239,0,143,131,229,121,61,131,190,235,240,232,100,18,138,122,6,69,213,97,118,51,53,48,87,6,47,21,195,67,229,229,147,35,101,234,255,162,249,29,56,119,43,207,100,107,144,93,223,72,70,61,53,219,106,40,129,22,76,184,231,101,210,34,112,197,50,23,121,157,53,169,96,29,76,204,181,211,235,94,85,161,130,158,52,42,143,140,202,35,163,7,23,220,198,133,153,114,77,107,209,73,111,172,250,230,237,113,44,163,242,127,42,243,21,243,203,175,95,68,135,102,52,169,78,253,183,48,212,233,159,92,155,211,207,210,135,77,162,159,92,55,156,19,233,25,198,199,216,52,137,5,75,214,188,83,170,9,21,117,37,188,149,31,99,183,17,174,199,143,17,87,157,70,67,224,62,143,105,169,250,77,77,231,116,149,111,168,65,71,77,130,86,41,52,1,213,83,17,202,232,220,218,83,191,40,132,223,35,152,111,24,221,190,205,85,37,4,227,96,252,122,30,140,231,243,160,87,178,80,141,152,111,232,77,89,208,72,232,119,35,104,193,117,42,254,3,254,198,43,74,69,61,193,204,131,30,44,120,238,193,35,214,3,168,121,43,251,158,102,56,176,79,222,186,251,182,175,86,219,190,199,236,90,41,250,41,205,18,177,132,231,109,214,47,166,132,254,132,155,249,95,126,5,66,122,98,116,165,148,171,189,242,222,163,186,210,207,102,136,170,143,7,247,126,245,36,70,29,12,232,142,4,74,170,156,83,233,170,165,215,112,161,120,138,118,207,121,99,40,87,113,33,84,43,147,234,28,101,244,3,178,41,255,167,217,148,207,201,166,86,134,43,89,93,101,221,182,12,152,133,90,251,23,198,24,146,161,158,18,0,0 };

src/dataIndexHTML.h

@@ -1,5 +1,5 @@
-const char HTML_INDEX[] PROGMEM = R"=====(
-<!DOCTYPE html><html> <head><meta charset=utf-8><title>Control</title><meta name=viewport content="width=device-width, initial-scale=1"><link rel="shortcut icon" href=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAACA1VWR21qQ2liR3FqR3FqS3VuR3VqR3VuR3VqO21mS21uS3FqS3FqS21uJ2GKQ21qR3FuR3FoAAAB/3Gu7AAAAEnRSTlMABoA3kPBwz8i5Kzioxg4NVcU3uEJHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EFEhcEM+HpYwQAAABYSURBVBjThY/JDsAgCESt4lpX/v9jLQZJ6qF9t3khAyj1xXUKbQ4BVowDwqOYgExkkW4iY6lPaF06RqM8YItOuRbMaz6xjbsusDAW/drplBg47jP696cXE8bPA1eUDeK2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA1LTE4VDIzOjA0OjUxKzAyOjAwxE59ewAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNS0xOFQyMzowNDo1MSswMjowMLUTxccAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC><link rel=stylesheet href=/css/normalize.css><link rel=stylesheet href=/css/style.css><script src=/js/zepto.min.js></script><script src=/js/slider.js></script><script src=/js/graph.js></script><script src=/js/controls.js></script><script src=/js/tabbedcontent.js></script></head> <body onload=javascript:start();> <div> <h4> <div id=mainHeader>Control</div> <span id=conStatus class=label>Offline</span> </h4> </div> <hr> <div class=container> <div id=row class="row u-full-width"></div> <ul id=tabsnav class="navigation navigation-tabs u-full-width"></ul> <div id=tabscontent class="tabscontent u-full-width"></div> </div> </body> </html> 
-)=====";
-
-const uint8_t HTML_INDEX_GZIP[916] PROGMEM = { 31,139,8,0,193,22,6,94,2,255,133,148,235,115,162,58,20,192,255,21,174,159,238,157,221,22,95,181,237,174,56,19,20,108,85,68,64,240,241,45,64,42,193,240,40,9,162,254,245,155,128,157,238,157,189,211,235,12,201,201,57,191,243,200,17,206,240,175,137,57,94,239,86,154,20,177,132,140,134,245,42,13,35,4,195,209,48,65,12,74,65,4,11,138,152,82,178,183,187,167,209,144,97,70,208,104,156,165,172,200,200,80,110,142,13,153,194,4,41,39,140,170,60,43,152,20,112,4,165,76,105,85,56,100,145,18,162,19,14,208,93,125,248,46,225,20,51,12,201,29,13,32,65,74,167,53,26,18,156,30,165,2,17,165,69,35,238,30,148,76,194,60,68,75,138,10,244,166,132,144,193,31,56,129,7,36,231,233,225,167,15,41,26,244,191,99,79,53,237,170,61,159,30,50,192,127,75,199,141,52,247,192,37,85,28,129,53,6,134,216,179,133,245,188,22,130,58,13,213,181,171,1,176,152,174,198,242,57,82,45,174,28,171,177,163,207,150,220,58,152,113,223,195,43,87,174,68,188,49,24,240,53,20,158,102,46,162,14,18,190,232,189,113,80,18,237,73,196,91,233,170,225,105,110,205,118,188,141,221,237,188,91,93,130,237,158,254,46,30,167,231,149,118,207,227,114,179,155,221,78,226,116,59,165,83,219,248,195,229,89,119,58,183,184,31,231,57,163,139,188,170,220,155,150,143,34,190,150,218,206,154,24,64,205,64,239,184,82,171,235,19,126,152,95,113,118,62,244,151,94,224,246,74,109,246,82,223,116,51,91,216,109,11,96,224,134,78,173,32,149,163,147,171,232,73,167,2,96,18,6,170,133,177,143,106,91,216,118,220,142,174,126,211,116,45,10,52,227,219,75,190,171,68,35,212,157,227,218,170,167,198,235,104,39,207,38,20,28,198,154,195,250,36,223,202,167,231,120,97,237,103,131,119,253,153,245,142,17,184,196,157,243,214,157,251,86,95,245,178,106,82,189,155,187,131,118,62,30,55,125,188,27,144,21,212,219,3,251,221,120,218,189,50,179,180,125,3,94,7,231,216,167,37,157,128,141,28,22,57,81,15,253,199,120,53,120,30,4,91,237,201,95,129,14,114,39,104,222,21,213,205,182,182,190,121,177,143,187,173,77,204,100,121,217,111,244,246,222,2,23,99,162,245,22,107,208,89,172,181,190,55,121,189,154,49,104,155,177,123,158,95,193,133,203,213,89,123,120,70,149,248,43,188,182,237,69,237,253,148,251,173,115,230,119,237,124,159,30,129,17,131,243,242,210,174,150,78,251,108,234,214,197,184,102,213,114,146,117,12,135,86,70,156,85,198,194,93,159,131,64,148,176,15,53,111,23,234,203,211,62,181,123,187,237,140,128,151,176,23,94,30,114,63,97,215,93,87,175,246,206,195,41,72,144,255,24,87,176,110,169,70,244,245,209,41,173,100,60,254,237,77,166,236,66,16,141,16,98,205,75,44,7,148,202,105,86,36,144,224,43,186,231,167,255,131,107,101,3,210,160,192,57,147,104,17,40,114,76,229,43,202,89,118,159,224,244,62,230,70,185,177,254,65,81,130,67,84,124,137,28,10,152,71,95,18,65,243,173,211,47,33,6,125,31,133,183,111,254,223,164,92,15,19,105,232,103,225,69,202,82,146,193,80,137,225,9,54,246,31,148,193,130,253,253,207,79,78,132,248,36,102,79,191,17,37,28,42,9,196,233,11,119,71,197,231,200,105,40,154,195,84,16,60,165,195,32,43,169,20,16,72,169,66,160,143,200,200,124,123,227,157,69,188,8,142,113,90,174,131,222,92,163,226,150,160,241,16,69,243,52,168,248,76,91,100,213,205,216,18,98,121,247,86,18,210,204,46,62,170,110,97,74,34,80,126,113,154,194,143,88,45,46,226,3,100,56,75,165,79,241,78,64,127,68,41,201,103,66,1,220,154,247,17,233,119,213,127,23,240,177,137,198,214,119,172,103,247,47,103,53,186,226,210,5,0,0 };
+const char HTML_INDEX[] PROGMEM = R"=====(
+<!DOCTYPE html><html> <head><meta charset=utf-8><title>Control</title><meta name=viewport content="width=device-width, initial-scale=1"><link rel="shortcut icon" href=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAACA1VWR21qQ2liR3FqR3FqS3VuR3VqR3VuR3VqO21mS21uS3FqS3FqS21uJ2GKQ21qR3FuR3FoAAAB/3Gu7AAAAEnRSTlMABoA3kPBwz8i5Kzioxg4NVcU3uEJHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EFEhcEM+HpYwQAAABYSURBVBjThY/JDsAgCESt4lpX/v9jLQZJ6qF9t3khAyj1xXUKbQ4BVowDwqOYgExkkW4iY6lPaF06RqM8YItOuRbMaz6xjbsusDAW/drplBg47jP696cXE8bPA1eUDeK2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA1LTE4VDIzOjA0OjUxKzAyOjAwxE59ewAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNS0xOFQyMzowNDo1MSswMjowMLUTxccAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC><link rel=stylesheet href=/css/normalize.css><link rel=stylesheet href=/css/style.css><script src=/js/zepto.min.js></script><script src=/js/slider.js></script><script src=/js/graph.js></script><script src=/js/controls.js></script><script src=/js/tabbedcontent.js></script></head> <body onload=javascript:start();> <div> <h4> <div id=mainHeader>Control</div> <span id=conStatus class=label>Offline</span> </h4> </div> <hr> <div class=container> <div id=row class="row u-full-width"></div> <ul id=tabsnav class="navigation navigation-tabs u-full-width"></ul> <div id=tabscontent class="tabscontent u-full-width"></div> </div> </body> </html> 
+)=====";
+
+const uint8_t HTML_INDEX_GZIP[916] PROGMEM = { 31,139,8,0,19,56,231,94,2,255,133,148,235,115,162,58,20,192,255,21,174,159,238,157,221,22,95,181,237,174,56,19,20,108,85,68,64,240,241,45,64,42,193,240,40,9,162,254,245,155,128,157,238,157,189,211,235,12,201,201,57,191,243,200,17,206,240,175,137,57,94,239,86,154,20,177,132,140,134,245,42,13,35,4,195,209,48,65,12,74,65,4,11,138,152,82,178,183,187,167,209,144,97,70,208,104,156,165,172,200,200,80,110,142,13,153,194,4,41,39,140,170,60,43,152,20,112,4,165,76,105,85,56,100,145,18,162,19,14,208,93,125,248,46,225,20,51,12,201,29,13,32,65,74,167,53,26,18,156,30,165,2,17,165,69,35,238,30,148,76,194,60,68,75,138,10,244,166,132,144,193,31,56,129,7,36,231,233,225,167,15,41,26,244,191,99,79,53,237,170,61,159,30,50,192,127,75,199,141,52,247,192,37,85,28,129,53,6,134,216,179,133,245,188,22,130,58,13,213,181,171,1,176,152,174,198,242,57,82,45,174,28,171,177,163,207,150,220,58,152,113,223,195,43,87,174,68,188,49,24,240,53,20,158,102,46,162,14,18,190,232,189,113,80,18,237,73,196,91,233,170,225,105,110,205,118,188,141,221,237,188,91,93,130,237,158,254,46,30,167,231,149,118,207,227,114,179,155,221,78,226,116,59,165,83,219,248,195,229,89,119,58,183,184,31,231,57,163,139,188,170,220,155,150,143,34,190,150,218,206,154,24,64,205,64,239,184,82,171,235,19,126,152,95,113,118,62,244,151,94,224,246,74,109,246,82,223,116,51,91,216,109,11,96,224,134,78,173,32,149,163,147,171,232,73,167,2,96,18,6,170,133,177,143,106,91,216,118,220,142,174,126,211,116,45,10,52,227,219,75,190,171,68,35,212,157,227,218,170,167,198,235,104,39,207,38,20,28,198,154,195,250,36,223,202,167,231,120,97,237,103,131,119,253,153,245,142,17,184,196,157,243,214,157,251,86,95,245,178,106,82,189,155,187,131,118,62,30,55,125,188,27,144,21,212,219,3,251,221,120,218,189,50,179,180,125,3,94,7,231,216,167,37,157,128,141,28,22,57,81,15,253,199,120,53,120,30,4,91,237,201,95,129,14,114,39,104,222,21,213,205,182,182,190,121,177,143,187,173,77,204,100,121,217,111,244,246,222,2,23,99,162,245,22,107,208,89,172,181,190,55,121,189,154,49,104,155,177,123,158,95,193,133,203,213,89,123,120,70,149,248,43,188,182,237,69,237,253,148,251,173,115,230,119,237,124,159,30,129,17,131,243,242,210,174,150,78,251,108,234,214,197,184,102,213,114,146,117,12,135,86,70,156,85,198,194,93,159,131,64,148,176,15,53,111,23,234,203,211,62,181,123,187,237,140,128,151,176,23,94,30,114,63,97,215,93,87,175,246,206,195,41,72,144,255,24,87,176,110,169,70,244,245,209,41,173,100,60,254,237,77,166,236,66,16,141,16,98,205,75,44,7,148,202,105,86,36,144,224,43,186,231,167,255,131,107,101,3,210,160,192,57,147,104,17,40,114,76,229,43,202,89,118,159,224,244,62,230,70,185,177,254,65,81,130,67,84,124,137,28,10,152,71,95,18,65,243,173,211,47,33,6,125,31,133,183,111,254,223,164,92,15,19,105,232,103,225,69,202,82,146,193,80,137,225,9,54,246,31,148,193,130,253,253,207,79,78,132,248,36,102,79,191,17,37,28,42,9,196,233,11,119,71,197,231,200,105,40,154,195,84,16,60,165,195,32,43,169,20,16,72,169,66,160,143,200,200,124,123,227,157,69,188,8,142,113,90,174,131,222,92,163,226,150,160,241,16,69,243,52,168,248,76,91,100,213,205,216,18,98,121,247,86,18,210,204,46,62,170,110,97,74,34,80,126,113,154,194,143,88,45,46,226,3,100,56,75,165,79,241,78,64,127,68,41,201,103,66,1,220,154,247,17,233,119,213,127,23,240,177,137,198,214,119,172,103,247,47,103,53,186,226,210,5,0,0 };

src/dataNormalizeCSS.h

@@ -1,5 +1,5 @@
-const char CSS_NORMALIZE[] PROGMEM = R"=====(
-html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
-)=====";
-
-const uint8_t CSS_NORMALIZE_GZIP[861] PROGMEM = { 31,139,8,0,193,22,6,94,2,255,149,84,237,142,155,58,16,125,149,104,171,74,183,146,137,216,237,199,94,25,221,39,137,242,99,176,7,112,227,47,217,38,155,20,241,238,119,12,132,36,219,108,165,254,2,6,123,230,204,57,103,166,75,70,15,141,179,169,104,192,40,125,230,17,108,44,34,6,213,84,133,137,69,194,83,42,162,250,133,5,200,159,125,76,252,185,44,63,87,197,27,214,7,149,30,255,29,107,39,207,131,129,208,42,203,203,17,66,82,66,35,131,168,36,50,137,9,148,142,172,81,173,0,159,148,179,249,181,15,200,26,231,18,6,214,33,200,252,104,131,235,61,51,160,44,51,104,123,102,225,200,34,138,233,70,236,13,165,63,15,82,69,175,225,204,107,237,196,97,132,94,42,199,4,216,35,68,230,131,107,3,198,200,142,84,213,173,39,149,213,202,98,49,93,168,142,152,161,129,46,64,171,214,242,26,34,230,191,115,34,110,93,250,103,39,136,153,224,116,220,127,89,83,88,103,177,234,80,181,93,162,238,118,157,146,18,237,158,37,52,244,59,225,221,185,17,134,26,196,33,247,98,101,33,156,118,129,167,64,12,123,8,104,211,8,28,168,163,35,145,195,59,71,112,6,215,167,12,33,211,86,215,97,151,84,210,184,31,106,23,136,147,162,118,41,57,195,159,253,105,35,233,21,229,88,179,72,240,108,59,43,248,54,131,170,157,150,163,108,236,28,140,233,172,145,171,68,61,138,177,123,94,130,36,25,127,65,83,45,42,109,127,188,162,217,148,35,125,30,110,16,243,79,77,83,86,51,236,79,101,89,142,209,128,214,55,41,254,37,181,99,79,40,122,127,19,125,253,254,185,154,104,190,176,84,121,23,85,86,142,7,36,142,168,225,15,185,207,153,146,243,188,216,126,71,147,115,15,75,215,197,246,37,71,148,105,23,58,136,163,120,108,39,153,120,32,239,124,25,50,131,141,118,111,124,214,100,156,141,117,113,226,51,117,248,173,244,167,177,11,67,97,220,47,162,243,148,241,42,219,242,44,51,233,145,67,213,7,225,85,113,79,41,215,74,208,39,55,10,71,198,62,212,146,76,135,44,130,241,119,3,101,156,117,164,183,64,182,190,85,87,174,8,213,88,247,212,161,101,202,250,62,49,231,211,108,125,34,132,236,206,242,136,145,89,96,152,101,80,182,163,217,76,83,134,245,99,157,181,57,211,21,222,81,69,85,107,188,84,152,83,14,211,212,78,54,108,92,48,179,81,151,19,29,173,131,205,4,100,151,206,30,255,123,154,227,79,123,118,27,164,193,194,244,46,70,82,25,69,193,225,178,27,192,123,4,42,34,144,207,73,42,209,135,72,45,120,167,136,214,176,148,220,209,188,0,97,148,251,219,226,107,112,88,46,73,108,160,215,105,185,196,249,164,96,227,68,31,11,101,45,45,140,233,222,239,241,213,44,149,7,41,179,168,229,56,29,29,110,29,106,137,7,208,227,109,63,162,67,113,32,225,223,183,14,180,27,158,242,72,174,46,89,167,243,244,190,198,114,199,246,166,198,240,180,39,116,11,55,19,180,34,122,101,139,91,241,63,60,79,107,225,254,252,176,0,159,252,119,39,3,113,46,186,199,50,100,221,27,133,90,86,127,242,255,229,226,95,141,199,67,12,87,252,115,164,16,25,134,126,212,242,135,87,36,10,23,32,239,142,71,29,77,214,157,90,34,67,94,164,206,251,49,58,173,228,38,42,77,147,176,142,199,230,197,95,37,218,126,165,117,178,217,254,120,153,30,175,121,183,104,108,209,202,71,142,89,135,240,126,240,47,179,250,251,250,77,217,189,151,189,77,147,171,193,71,228,151,151,106,249,145,151,193,82,64,178,212,13,215,130,255,3,4,241,118,208,151,7,0,0 };
+const char CSS_NORMALIZE[] PROGMEM = R"=====(
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
+)=====";
+
+const uint8_t CSS_NORMALIZE_GZIP[861] PROGMEM = { 31,139,8,0,19,56,231,94,2,255,149,84,237,142,155,58,16,125,149,104,171,74,183,146,137,216,237,199,94,25,221,39,137,242,99,176,7,112,227,47,217,38,155,20,241,238,119,12,132,36,219,108,165,254,2,6,123,230,204,57,103,166,75,70,15,141,179,169,104,192,40,125,230,17,108,44,34,6,213,84,133,137,69,194,83,42,162,250,133,5,200,159,125,76,252,185,44,63,87,197,27,214,7,149,30,255,29,107,39,207,131,129,208,42,203,203,17,66,82,66,35,131,168,36,50,137,9,148,142,172,81,173,0,159,148,179,249,181,15,200,26,231,18,6,214,33,200,252,104,131,235,61,51,160,44,51,104,123,102,225,200,34,138,233,70,236,13,165,63,15,82,69,175,225,204,107,237,196,97,132,94,42,199,4,216,35,68,230,131,107,3,198,200,142,84,213,173,39,149,213,202,98,49,93,168,142,152,161,129,46,64,171,214,242,26,34,230,191,115,34,110,93,250,103,39,136,153,224,116,220,127,89,83,88,103,177,234,80,181,93,162,238,118,157,146,18,237,158,37,52,244,59,225,221,185,17,134,26,196,33,247,98,101,33,156,118,129,167,64,12,123,8,104,211,8,28,168,163,35,145,195,59,71,112,6,215,167,12,33,211,86,215,97,151,84,210,184,31,106,23,136,147,162,118,41,57,195,159,253,105,35,233,21,229,88,179,72,240,108,59,43,248,54,131,170,157,150,163,108,236,28,140,233,172,145,171,68,61,138,177,123,94,130,36,25,127,65,83,45,42,109,127,188,162,217,148,35,125,30,110,16,243,79,77,83,86,51,236,79,101,89,142,209,128,214,55,41,254,37,181,99,79,40,122,127,19,125,253,254,185,154,104,190,176,84,121,23,85,86,142,7,36,142,168,225,15,185,207,153,146,243,188,216,126,71,147,115,15,75,215,197,246,37,71,148,105,23,58,136,163,120,108,39,153,120,32,239,124,25,50,131,141,118,111,124,214,100,156,141,117,113,226,51,117,248,173,244,167,177,11,67,97,220,47,162,243,148,241,42,219,242,44,51,233,145,67,213,7,225,85,113,79,41,215,74,208,39,55,10,71,198,62,212,146,76,135,44,130,241,119,3,101,156,117,164,183,64,182,190,85,87,174,8,213,88,247,212,161,101,202,250,62,49,231,211,108,125,34,132,236,206,242,136,145,89,96,152,101,80,182,163,217,76,83,134,245,99,157,181,57,211,21,222,81,69,85,107,188,84,152,83,14,211,212,78,54,108,92,48,179,81,151,19,29,173,131,205,4,100,151,206,30,255,123,154,227,79,123,118,27,164,193,194,244,46,70,82,25,69,193,225,178,27,192,123,4,42,34,144,207,73,42,209,135,72,45,120,167,136,214,176,148,220,209,188,0,97,148,251,219,226,107,112,88,46,73,108,160,215,105,185,196,249,164,96,227,68,31,11,101,45,45,140,233,222,239,241,213,44,149,7,41,179,168,229,56,29,29,110,29,106,137,7,208,227,109,63,162,67,113,32,225,223,183,14,180,27,158,242,72,174,46,89,167,243,244,190,198,114,199,246,166,198,240,180,39,116,11,55,19,180,34,122,101,139,91,241,63,60,79,107,225,254,252,176,0,159,252,119,39,3,113,46,186,199,50,100,221,27,133,90,86,127,242,255,229,226,95,141,199,67,12,87,252,115,164,16,25,134,126,212,242,135,87,36,10,23,32,239,142,71,29,77,214,157,90,34,67,94,164,206,251,49,58,173,228,38,42,77,147,176,142,199,230,197,95,37,218,126,165,117,178,217,254,120,153,30,175,121,183,104,108,209,202,71,142,89,135,240,126,240,47,179,250,251,250,77,217,189,151,189,77,147,171,193,71,228,151,151,106,249,145,151,193,82,64,178,212,13,215,130,255,3,4,241,118,208,151,7,0,0 };

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,226,85,7,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 };