No reload per default, just send JsonDom

.clang-format

@@ -1,58 +0,0 @@
----
-# Based on Webkit style
-BasedOnStyle: Webkit
-IndentWidth: 4
-ColumnLimit: 120
----
-Language: Cpp
-Standard: Cpp11
-# Pointers aligned to the left
-DerivePointerAlignment: false
-PointerAlignment: Left
-AccessModifierOffset: -4
-AllowShortFunctionsOnASingleLine: Inline
-AlwaysBreakTemplateDeclarations: true
-BreakBeforeBraces: Custom
-BraceWrapping:
-    AfterClass: true
-    AfterControlStatement: true
-    AfterEnum: true
-    AfterFunction: true
-    AfterNamespace: true
-    AfterStruct: true
-    AfterUnion: true
-    AfterExternBlock: true
-    BeforeCatch: true
-    BeforeElse: true
-    SplitEmptyFunction: false
-    SplitEmptyRecord: false
-    SplitEmptyNamespace: false
-BreakConstructorInitializers: BeforeColon
-CompactNamespaces: false
-ConstructorInitializerAllOnOneLineOrOnePerLine: true
-ConstructorInitializerIndentWidth: 4
-Cpp11BracedListStyle: true
-FixNamespaceComments: true
-IncludeBlocks: Regroup
-IncludeCategories:
-    # C++ standard headers (no .h)
-    - Regex: '<[[:alnum:]_-]+>'
-      Priority: 1
-    # Extenal libraries (with .h)
-    - Regex: '<[[:alnum:]_./-]+>'
-      Priority: 2
-    # Headers from same folder
-    - Regex: '"[[:alnum:]_.-]+"'
-      Priority: 3
-    # Headers from other folders
-    - Regex: '"[[:alnum:]_/.-]+"'
-      Priority: 4
-IndentCaseLabels: false
-NamespaceIndentation: All
-SortIncludes: true
-SortUsingDeclarations: true
-SpaceAfterTemplateKeyword: true
-SpacesInAngles: false
-SpacesInParentheses: false
-SpacesInSquareBrackets: false
-UseTab: Never

README.md

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

data/css/style.css

@@ -12,7 +12,6 @@
 }
 
 .card {
-  min-height: 100px;
   margin-top: 2%;
   border-radius: 6px;
   box-shadow: 0 4px 4px rgba(204, 197, 185, 0.5);
@@ -29,7 +28,9 @@
   }
 }
 
-.card-slider {}
+.card-slider {
+  padding-bottom: 10px;
+}
 
 .turquoise {
   background: #1abc9c;
@@ -79,7 +80,7 @@
   text-align: center;
   color: #ffffff;
   font-weight: 700;
-  line-height: 1.3;
+  line-height: 1;
   margin-bottom: 5px;
   display: inline-block;
   white-space: nowrap;
@@ -134,145 +135,114 @@
   .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%;
@@ -352,23 +322,18 @@ 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;
   }
@@ -400,11 +365,6 @@ button {
   background-color: #999999;
 }
 
-button:active {
-  background-color: #666666;
-  transform: translateX(4px) translateY(4px);
-}
-
 /* Main Head Part
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
 
@@ -478,8 +438,10 @@ hr {
 
 .control {
   background-color: #ddd;
-  background-image: linear-gradient(hsla(0, 0%, 0%, 0.1),
+  background-image: linear-gradient(
-      hsla(0, 0%, 100%, 0.1));
+    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),
@@ -544,8 +506,10 @@ hr {
 
 .control .confirm {
   background-color: #ddd;
-  background-image: linear-gradient(hsla(0, 0%, 0%, 0.15),
+  background-image: linear-gradient(
-      hsla(0, 0%, 100%, 0.25));
+    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),
@@ -618,11 +582,13 @@ hr {
 .switch .in:before {
   background: #fff;
   background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
-  background: -webkit-gradient(linear,
+  background: -webkit-gradient(
+    linear,
     left top,
     left bottom,
     color-stop(0%, #fff),
-      color-stop(100%, #f0f0f0));
+    color-stop(100%, #f0f0f0)
+  );
   background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
   background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
   background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
@@ -641,11 +607,13 @@ hr {
 .switch .in:after {
   background: #f0f0f0;
   background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 100%);
-  background: -webkit-gradient(linear,
+  background: -webkit-gradient(
+    linear,
     left top,
     left bottom,
     color-stop(0%, #f0f0f0),
-      color-stop(100%, #fff));
+    color-stop(100%, #fff)
+  );
   background: -webkit-linear-gradient(top, #f0f0f0 0%, #fff 100%);
   background: -o-linear-gradient(top, #f0f0f0 0%, #fff 100%);
   background: -ms-linear-gradient(top, #f0f0f0 0%, #fff 100%);
@@ -667,7 +635,6 @@ hr {
   font-size: 16px;
   font-family: "Roboto", sans-serif;
 }
-
 .rkmd-slider input[type="range"] {
   overflow: hidden;
   position: absolute;
@@ -675,7 +642,6 @@ hr {
   height: 1px;
   opacity: 0;
 }
-
 .rkmd-slider input[type="range"] + .slider {
   display: block;
   position: relative;
@@ -684,14 +650,12 @@ hr {
   border-radius: 13px;
   background-color: #bebebe;
 }
-
 @media (pointer: fine) {
   .rkmd-slider input[type="range"] + .slider {
     height: 4px;
     border-radius: 0px;
   }
 }
-
 .rkmd-slider input[type="range"] + .slider .slider-fill {
   display: block;
   position: absolute;
@@ -700,7 +664,6 @@ hr {
   user-select: none;
   z-index: 1;
 }
-
 .rkmd-slider input[type="range"] + .slider .slider-handle {
   cursor: pointer;
   position: absolute;
@@ -714,29 +677,28 @@ hr {
   user-select: none;
   z-index: 2;
 }
-
 @media (pointer: fine) {
   .rkmd-slider input[type="range"] + .slider .slider-handle {
     top: -5.5px;
   }
 }
-
 .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 {
   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-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 {
   top: -5.5px;
@@ -744,14 +706,20 @@ hr {
   height: 15px;
   margin-left: -8px;
 }
-
+.rkmd-slider
-.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active .slider-label,
+  input[type="range"]:disabled
-.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active .slider-label {
+  + .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 {
   box-shadow: none !important;
   transform: scale(1) !important;
@@ -779,7 +747,6 @@ 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;
@@ -804,20 +771,17 @@ 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;
@@ -825,8 +789,11 @@ hr {
   -webkit-transform: rotate(-45deg) translate(23px, -25px);
   transform: rotate(-45deg) translate(23px, -25px);
 }
-
+.rkmd-slider.slider-discrete
-.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label span {
+  .slider
+  .slider-handle.is-active
+  .slider-label
+  span {
   opacity: 1;
 }
 
@@ -937,17 +904,14 @@ body div>ul.navigation {
   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;
@@ -983,11 +947,9 @@ div.tabscontent>div {
 .range-slider {
   margin: 0 0 0 0;
 }
-
 .range-slider {
   width: 100%;
 }
-
 .range-slider__range {
   -webkit-appearance: none;
   width: calc(100% - (45px));
@@ -997,8 +959,6 @@ div.tabscontent>div {
   padding: 0;
   margin: 0;
 }
-
-/*
 .range-slider__range::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
@@ -1025,7 +985,6 @@ 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;
@@ -1037,7 +996,6 @@ div.tabscontent>div {
   padding: 5px 5px;
   margin-left: 2px;
 }
-
 .range-slider__value:after {
   position: absolute;
   top: 8px;
@@ -1049,11 +1007,9 @@ div.tabscontent>div {
  border-bottom:1px solid transparent;*/
   content: "";
 }
-
 ::-moz-range-track {
   border: 0;
 }
-
 input::-moz-focus-inner,
 input::-moz-focus-outer {
   border: 0;

data/js/controls.js

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

data/js/controls.min.js

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

data/js/slider.js

@@ -53,7 +53,7 @@ function rkmd_rangeSlider(selector) {
       mousemove: moveFu,
       touchmove: moveFu,
       mouseup: upFu,
-      touchend: upFu,
+      touchend: upFu
     };
     $(document).on(handlers);
   });
@@ -82,7 +82,7 @@ function rkmd_rangeSlider(selector) {
 
     var handlers = {
       mouseup: upFu,
-      touchend: upFu,
+      touchend: upFu
     };
     $(document).on(handlers);
   });
@@ -104,14 +104,13 @@ 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"]');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);}}
+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);}}

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

@@ -2,7 +2,7 @@
 #include <ESPUI.h>
 
 const byte DNS_PORT = 53;
-IPAddress apIP(192, 168, 4, 1);
+IPAddress apIP(192, 168, 1, 1);
 DNSServer dnsServer;
 
 #if defined(ESP32)
@@ -20,31 +20,26 @@ uint16_t button1;
 uint16_t millisLabelId;
 uint16_t switchOne;
 
-void numberCall(Control* sender, int type)
+void numberCall( Control* sender, int type ) {
-{
   Serial.println( sender->value );
 }
 
-void textCall(Control* sender, int type)
+void textCall(Control *sender, int type) {
-{
   Serial.print("Text: ID: ");
   Serial.print(sender->id);
   Serial.print(", Value: ");
   Serial.println(sender->value);
 }
 
-void slider(Control* sender, int type)
+void slider(Control *sender, int type) {
-{
   Serial.print("Slider: ID: ");
   Serial.print(sender->id);
   Serial.print(", Value: ");
   Serial.println(sender->value);
 }
 
-void buttonCallback(Control* sender, int type)
+void buttonCallback(Control *sender, int type) {
-{
+  switch (type) {
-    switch (type)
-    {
   case B_DOWN:
     Serial.println("Button DOWN");
     break;
@@ -55,10 +50,8 @@ void buttonCallback(Control* sender, int type)
   }
 }
 
-void buttonExample(Control* sender, int type)
+void buttonExample(Control *sender, int type) {
-{
+  switch (type) {
-    switch (type)
-    {
   case B_DOWN:
     Serial.println("Status: Start");
     ESPUI.updateControlValue(status, "Start");
@@ -77,10 +70,8 @@ void buttonExample(Control* sender, int type)
   }
 }
 
-void padExample(Control* sender, int value)
+void padExample(Control *sender, int value) {
-{
+  switch (value) {
-    switch (value)
-    {
   case P_LEFT_DOWN:
     Serial.print("left down");
     break;
@@ -126,10 +117,8 @@ void padExample(Control* sender, int value)
   Serial.println(sender->id);
 }
 
-void switchExample(Control* sender, int value)
+void switchExample(Control *sender, int value) {
-{
+  switch (value) {
-    switch (value)
-    {
   case S_ACTIVE:
     Serial.print("Active:");
     break;
@@ -143,18 +132,15 @@ void switchExample(Control* sender, int value)
   Serial.println(sender->id);
 }
 
-void selectExample(Control* sender, int value)
+void selectExample(Control *sender, int value) {
-{
   Serial.print("Select: ID: ");
   Serial.print(sender->id);
   Serial.print(", Value: ");
   Serial.println(sender->value);
 }
 
-void otherSwitchExample(Control* sender, int value)
+void otherSwitchExample(Control *sender, int value) {
-{
+  switch (value) {
-    switch (value)
-    {
   case S_ACTIVE:
     Serial.print("Active:");
     break;
@@ -168,8 +154,7 @@ void otherSwitchExample(Control* sender, int value)
   Serial.println(sender->id);
 }
 
-void setup(void)
+void setup(void) {
-{
   ESPUI.setVerbosity(Verbosity::VerboseJSON);
   Serial.begin(115200);
 
@@ -187,37 +172,23 @@ void setup(void)
     uint8_t timeout = 10;
 
     // Wait for connection, 5s timeout
-        do
+    do {
-        {
       delay(500);
       Serial.print(".");
       timeout--;
     } while (timeout && WiFi.status() != WL_CONNECTED);
 
     // not connected -> create hotspot
-        if (WiFi.status() != WL_CONNECTED)
+    if (WiFi.status() != WL_CONNECTED) {
-        {
       Serial.print("\n\nCreating hotspot");
 
       WiFi.mode(WIFI_AP);
-            delay(100);
       WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
-#if defined(ESP32)
+      WiFi.softAP(ssid);
-            uint32_t chipid = 0;
-            for (int i = 0; i < 17; i = i + 8)
-            {
-                chipid |= ((ESP.getEfuseMac() >> (40 - i)) & 0xff) << i;
-            }
-#else
-            uint32_t chipid = ESP.getChipId();
-#endif char ap_ssid[25];
-            snprintf(ap_ssid, 26, "ESPUI-%08X", chipid);
-            WiFi.softAP(ap_ssid);
 
       timeout = 5;
 
-            do
+      do {
-            {
         delay(500);
         Serial.print(".");
         timeout--;
@@ -235,35 +206,28 @@ void setup(void)
 
   status = ESPUI.addControl(ControlType::Label, "Status:", "Stop", ControlColor::Turquoise);
 
-    uint16_t select1 = ESPUI.addControl(
+  uint16_t select1 = ESPUI.addControl(ControlType::Select, "Select:", "", ControlColor::Alizarin, Control::noParent, &selectExample);
-        ControlType::Select, "Select:", "", ControlColor::Alizarin, Control::noParent, &selectExample);
 
   ESPUI.addControl(ControlType::Option, "Option1", "Opt1", ControlColor::Alizarin, select1);
   ESPUI.addControl(ControlType::Option, "Option2", "Opt2", ControlColor::Alizarin, select1);
   ESPUI.addControl(ControlType::Option, "Option3", "Opt3", ControlColor::Alizarin, select1);
 
-    ESPUI.addControl(
+  ESPUI.addControl(ControlType::Text, "Text Test:", "a Text Field", ControlColor::Alizarin, Control::noParent, &textCall);
-        ControlType::Text, "Text Test:", "a Text Field", ControlColor::Alizarin, Control::noParent, &textCall);
 
   millisLabelId = ESPUI.addControl(ControlType::Label, "Millis:", "0", ControlColor::Emerald, Control::noParent);
-    button1 = ESPUI.addControl(
+  button1 = ESPUI.addControl(ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, Control::noParent, &buttonCallback);
-        ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, Control::noParent, &buttonCallback);
+  ESPUI.addControl(ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, Control::noParent, &buttonExample);
-    ESPUI.addControl(
+  ESPUI.addControl(ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, Control::noParent, &padExample);
-        ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, Control::noParent, &buttonExample);
-    ESPUI.addControl(
-        ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, Control::noParent, &padExample);
   ESPUI.addControl(ControlType::Pad, "Pad without center", "", ControlColor::Carrot, Control::noParent, &padExample);
-    switchOne = ESPUI.addControl(
+  switchOne = ESPUI.addControl(ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, Control::noParent, &switchExample);
-        ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, Control::noParent, &switchExample);
+  ESPUI.addControl(ControlType::Switcher, "Switch two", "", ControlColor::None, Control::noParent, &otherSwitchExample);
-    ESPUI.addControl(
-        ControlType::Switcher, "Switch two", "", ControlColor::None, Control::noParent, &otherSwitchExample);
   ESPUI.addControl(ControlType::Slider, "Slider one", "30", ControlColor::Alizarin, Control::noParent, &slider);
   ESPUI.addControl(ControlType::Slider, "Slider two", "100", ControlColor::Alizarin, Control::noParent, &slider);
   ESPUI.addControl(ControlType::Number, "Number:", "50", ControlColor::Alizarin, Control::noParent, &numberCall);
 
   /*
    * .begin loads and serves all files from PROGMEM directly.
-     * If you want to serve the files from LITTLEFS use ESPUI.beginLITTLEFS
+   * If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
    * (.prepareFileSystem has to be run in an empty sketch before)
    */
 
@@ -278,18 +242,17 @@ void setup(void)
    * password, for example begin("ESPUI Control", "username", "password")
    */
 
+
   ESPUI.begin("ESPUI Control");
 }
 
-void loop(void)
+void loop(void) {
-{
   dnsServer.processNextRequest();
 
   static long oldTime = 0;
   static bool testSwitchState = false;
 
-    if (millis() - oldTime > 5000)
+  if (millis() - oldTime > 5000) {
-    {
     ESPUI.updateControlValue(millisLabelId, String(millis()));
     testSwitchState = !testSwitchState;
     ESPUI.updateControlValue(switchOne, testSwitchState ? "1" : "0");

examples/gui/gui.ino

@@ -2,7 +2,7 @@
 #include <ESPUI.h>
 
 const byte DNS_PORT = 53;
-IPAddress apIP(192, 168, 4, 1);
+IPAddress apIP(192, 168, 1, 1);
 DNSServer dnsServer;
 
 #if defined(ESP32)
@@ -21,21 +21,16 @@ int graphId;
 int millisLabelId;
 int testSwitchId;
 
-void numberCall(Control* sender, int type)
+void numberCall(Control *sender, int type) { Serial.println(sender->value); }
-{
-    Serial.println(sender->value);
-}
 
-void textCall(Control* sender, int type)
+void textCall(Control *sender, int type) {
-{
   Serial.print("Text: ID: ");
   Serial.print(sender->id);
   Serial.print(", Value: ");
   Serial.println(sender->value);
 }
 
-void slider(Control* sender, int type)
+void slider(Control *sender, int type) {
-{
   Serial.print("Slider: ID: ");
   Serial.print(sender->id);
   Serial.print(", Value: ");
@@ -46,10 +41,8 @@ void slider(Control* sender, int type)
   Serial.println(sliderValueWithOffset);
 }
 
-void buttonCallback(Control* sender, int type)
+void buttonCallback(Control *sender, int type) {
-{
+  switch (type) {
-    switch (type)
-    {
   case B_DOWN:
     Serial.println("Button DOWN");
     break;
@@ -60,10 +53,8 @@ void buttonCallback(Control* sender, int type)
   }
 }
 
-void buttonExample(Control* sender, int type)
+void buttonExample(Control *sender, int type) {
-{
+  switch (type) {
-    switch (type)
-    {
   case B_DOWN:
     Serial.println("Status: Start");
     ESPUI.print(statusLabelId, "Start");
@@ -75,10 +66,8 @@ void buttonExample(Control* sender, int type)
     break;
   }
 }
-void padExample(Control* sender, int value)
+void padExample(Control *sender, int value) {
-{
+  switch (value) {
-    switch (value)
-    {
   case P_LEFT_DOWN:
     Serial.print("left down");
     break;
@@ -124,10 +113,8 @@ void padExample(Control* sender, int value)
   Serial.println(sender->id);
 }
 
-void switchExample(Control* sender, int value)
+void switchExample(Control *sender, int value) {
-{
+  switch (value) {
-    switch (value)
-    {
   case S_ACTIVE:
     Serial.print("Active:");
     break;
@@ -141,10 +128,8 @@ void switchExample(Control* sender, int value)
   Serial.println(sender->id);
 }
 
-void otherSwitchExample(Control* sender, int value)
+void otherSwitchExample(Control *sender, int value) {
-{
+  switch (value) {
-    switch (value)
-    {
   case S_ACTIVE:
     Serial.print("Active:");
     break;
@@ -158,8 +143,7 @@ void otherSwitchExample(Control* sender, int value)
   Serial.println(sender->id);
 }
 
-void setup(void)
+void setup(void) {
-{
   ESPUI.setVerbosity(Verbosity::VerboseJSON);
   Serial.begin(115200);
 
@@ -177,38 +161,23 @@ void setup(void)
     uint8_t timeout = 10;
 
     // Wait for connection, 5s timeout
-        do
+    do {
-        {
       delay(500);
       Serial.print(".");
       timeout--;
     } while (timeout && WiFi.status() != WL_CONNECTED);
 
     // not connected -> create hotspot
-        if (WiFi.status() != WL_CONNECTED)
+    if (WiFi.status() != WL_CONNECTED) {
-        {
       Serial.print("\n\nCreating hotspot");
 
       WiFi.mode(WIFI_AP);
-            delay(100);
       WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
-#if defined(ESP32)
+      WiFi.softAP(ssid);
-            uint32_t chipid = 0;
-            for (int i = 0; i < 17; i = i + 8)
-            {
-                chipid |= ((ESP.getEfuseMac() >> (40 - i)) & 0xff) << i;
-            }
-#else
-            uint32_t chipid = ESP.getChipId();
-#endif
-            char ap_ssid[25];
-            snprintf(ap_ssid, 26, "ESPUI-%08X", chipid);
-            WiFi.softAP(ap_ssid);
 
       timeout = 5;
 
-            do
+      do {
-            {
         delay(500);
         Serial.print(".");
         timeout--;
@@ -241,7 +210,7 @@ void setup(void)
 
   /*
    * .begin loads and serves all files from PROGMEM directly.
-     * If you want to serve the files from LITTLEFS use ESPUI.beginLITTLEFS
+   * If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
    * (.prepareFileSystem has to be run in an empty sketch before)
    */
  
@@ -256,18 +225,17 @@ void setup(void)
    * password, for example begin("ESPUI Control", "username", "password")
    */
 
+
   ESPUI.begin("ESPUI Control");
 }
 
-void loop(void)
+void loop(void) {
-{
   dnsServer.processNextRequest();
 
   static long oldTime = 0;
   static bool testSwitchState = false;
 
-    if (millis() - oldTime > 5000)
+  if (millis() - oldTime > 5000) {
-    {
     ESPUI.print(millisLabelId, String(millis()));
 
     ESPUI.addGraphPoint(graphId, random(1, 50));

examples/prepareFilesystem/prepareFilesystem.ino

@@ -1,11 +1,11 @@
 #include <ESPUI.h>
 
-void setup(void)
+ESPUIClass ESPUI( Verbosity::VerboseJSON );
-{
+
+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, 4, 1);
+IPAddress apIP( 192, 168, 1, 1 );
 DNSServer dnsServer;
 
 #if defined(ESP32)
@@ -19,31 +19,24 @@ uint16_t button1;
 uint16_t switchOne;
 uint16_t status;
 
-void numberCall(Control* sender, int type)
+void numberCall( Control* sender, int type ) {
-{
   Serial.println( sender->value );
 }
 
-void textCall(Control* sender, int type)
+void textCall( Control* sender, int type ) {
-{
   Serial.print("Text: ID: ");
   Serial.print(sender->id);
   Serial.print(", Value: ");
-    Serial.println(sender->value);
+  Serial.println( sender->value );}
-}
 
-void slider(Control* sender, int type)
+void slider( Control* sender, int type ) {
-{
   Serial.print("Slider: ID: ");
   Serial.print(sender->id);
   Serial.print(", Value: ");
-    Serial.println(sender->value);
+  Serial.println( sender->value );}
-}
 
-void buttonCallback(Control* sender, int type)
+void buttonCallback( Control* sender, int type ) {
-{
+  switch ( type ) {
-    switch (type)
-    {
     case B_DOWN:
       Serial.println( "Button DOWN" );
       break;
@@ -54,10 +47,8 @@ void buttonCallback(Control* sender, int type)
   }
 }
 
-void buttonExample(Control* sender, int type)
+void buttonExample( Control* sender, int type ) {
-{
+  switch ( type ) {
-    switch (type)
-    {
     case B_DOWN:
       Serial.println( "Status: Start" );
       ESPUI.updateControlValue( status, "Start" );
@@ -76,10 +67,8 @@ void buttonExample(Control* sender, int type)
   }
 }
 
-void padExample(Control* sender, int value)
+void padExample( Control* sender, int value ) {
-{
+  switch ( value ) {
-    switch (value)
-    {
     case P_LEFT_DOWN:
       Serial.print( "left down" );
       break;
@@ -125,10 +114,8 @@ void padExample(Control* sender, int value)
   Serial.println( sender->id );
 }
 
-void switchExample(Control* sender, int value)
+void switchExample( Control* sender, int value ) {
-{
+  switch ( value ) {
-    switch (value)
-    {
     case S_ACTIVE:
       Serial.print( "Active:" );
       break;
@@ -142,18 +129,15 @@ void switchExample(Control* sender, int value)
   Serial.println( sender->id );
 }
 
-void selectExample(Control* sender, int value)
+void selectExample( Control* sender, int value ) {
-{
   Serial.print("Select: ID: ");
   Serial.print(sender->id);
   Serial.print(", Value: ");
   Serial.println( sender->value );
 }
 
-void otherSwitchExample(Control* sender, int value)
+void otherSwitchExample( Control* sender, int value ) {
-{
+  switch ( value ) {
-    switch (value)
-    {
     case S_ACTIVE:
       Serial.print( "Active:" );
       break;
@@ -167,8 +151,7 @@ void otherSwitchExample(Control* sender, int value)
   Serial.println( sender->id );
 }
 
-void setup(void)
+void setup( void ) {
-{
   Serial.begin( 115200 );
 
 #if defined(ESP32)
@@ -185,38 +168,23 @@ void setup(void)
     uint8_t timeout = 10;
 
     // Wait for connection, 5s timeout
-        do
+    do {
-        {
       delay( 500 );
       Serial.print( "." );
       timeout--;
     } while ( timeout && WiFi.status() != WL_CONNECTED );
 
     // not connected -> create hotspot
-        if (WiFi.status() != WL_CONNECTED)
+    if ( WiFi.status() != WL_CONNECTED ) {
-        {
       Serial.print( "\n\nCreating hotspot" );
 
       WiFi.mode( WIFI_AP );
-            delay(100);
       WiFi.softAPConfig( apIP, apIP, IPAddress( 255, 255, 255, 0 ) );
-#if defined(ESP32)
+      WiFi.softAP( ssid );
-            uint32_t chipid = 0;
-            for (int i = 0; i < 17; i = i + 8)
-            {
-                chipid |= ((ESP.getEfuseMac() >> (40 - i)) & 0xff) << i;
-            }
-#else
-            uint32_t chipid = ESP.getChipId();
-#endif
-            char ap_ssid[25];
-            snprintf(ap_ssid, 26, "ESPUI-%08X", chipid);
-            WiFi.softAP(ap_ssid);
 
       timeout = 5;
 
-            do
+      do {
-            {
         delay( 500 );
         Serial.print( "." );
         timeout--;
@@ -239,8 +207,7 @@ void setup(void)
   // shown above all tabs
   status = ESPUI.addControl( ControlType::Label, "Status:", "Stop", ControlColor::Turquoise );
 
-    uint16_t select1
+  uint16_t select1 = ESPUI.addControl( ControlType::Select, "Select:", "", ControlColor::Alizarin, tab1, &selectExample );
-        = ESPUI.addControl(ControlType::Select, "Select:", "", ControlColor::Alizarin, tab1, &selectExample);
   ESPUI.addControl( ControlType::Option, "Option1", "Opt1", ControlColor::Alizarin, select1 );
   ESPUI.addControl( ControlType::Option, "Option2", "Opt2", ControlColor::Alizarin, select1 );
   ESPUI.addControl( ControlType::Option, "Option3", "Opt3", ControlColor::Alizarin, select1 );
@@ -249,8 +216,7 @@ void setup(void)
 
   // tabbed controls
   ESPUI.addControl( ControlType::Label, "Millis:", "0", ControlColor::Emerald, tab1 );
-    button1 = ESPUI.addControl(
+  button1 = ESPUI.addControl( ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, tab1, &buttonCallback );
-        ControlType::Button, "Push Button", "Press", ControlColor::Peterriver, tab1, &buttonCallback);
   ESPUI.addControl( ControlType::Button, "Other Button", "Press", ControlColor::Wetasphalt, tab1, &buttonExample );
   ESPUI.addControl( ControlType::PadWithCenter, "Pad with center", "", ControlColor::Sunflower, tab2, &padExample );
   ESPUI.addControl( ControlType::Pad, "Pad without center", "", ControlColor::Carrot, tab3, &padExample );
@@ -262,7 +228,7 @@ void setup(void)
 
   /*
    * .begin loads and serves all files from PROGMEM directly.
-     * If you want to serve the files from LITTLEFS use ESPUI.beginLITTLEFS
+   * If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
    * (.prepareFileSystem has to be run in an empty sketch before)
    */
 
@@ -277,18 +243,17 @@ void setup(void)
    * password, for example begin("ESPUI Control", "username", "password")
    */
 
+
   ESPUI.begin("ESPUI Control");
 }
 
-void loop(void)
+void loop( void ) {
-{
   dnsServer.processNextRequest();
 
   static long oldTime = 0;
   static bool switchi = false;
 
-    if (millis() - oldTime > 5000)
+  if ( millis() - oldTime > 5000 ) {
-    {
     switchi = !switchi;
     ESPUI.updateControlValue( switchOne, switchi ? "1" : "0" );
 

keywords.txt

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

library.json

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

library.properties

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

pio_examples/gui/.gitignore

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

pio_examples/gui/platformio.ini

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

pio_examples/gui/src/gui.ino

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

src/ESPUI.h

@@ -6,14 +6,15 @@
 
 #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
 
@@ -22,8 +23,9 @@
 #include <ESP8266mDNS.h>
 #include <ESPAsyncTCP.h>
 #include <ESPAsyncWebServer.h>
+#include <FS.h>
 #include <Hash.h>
-#include <LittleFS.h>
+#include <SPIFFSEditor.h>
 
 #define FILE_WRITE "w"
 
@@ -76,13 +78,11 @@ enum ControlType : uint8_t
   UpdateAccel,
 
   InitialGui = 200,
-    Reload = 201,
+  Reload = 201
-    ExtendGUI = 210
 };
 
 #define UI_INITIAL_GUI ControlType::InitialGui
 #define UI_RELOAD ControlType::Reload
-#define UI_EXTEND_GUI ControlType::ExtendGUI
 
 #define UI_TITLE ControlType::Title
 #define UI_LABEL ControlType::Label
@@ -135,39 +135,21 @@ public:
   void (*callback)(Control *, int);
   String value;
   ControlColor color;
-    bool visible;
   uint16_t parentControl;
-    String panelStyle;
-    String elementStyle;
   Control *next;
 
   static constexpr uint16_t noParent = 0xffff;
 
-    Control(ControlType type, const char* label, void (*callback)(Control*, int), const String& value,
+  Control(ControlType type, const char *label, void (*callback)(Control *, int), String value, ControlColor color,
-        ControlColor color, bool visible = true, uint16_t parentControl = Control::noParent)
+          uint16_t parentControl = Control::noParent)
-        : type(type),
+      : type(type), label(label), callback(callback), value(value), color(color), parentControl(parentControl), next(nullptr)
-          label(label),
-          callback(callback),
-          value(value),
-          color(color),
-          visible(visible),
-          parentControl(parentControl),
-          next(nullptr)
   {
     id = idCounter++;
   }
 
   Control(const Control &control)
-        : type(control.type),
+      : type(control.type), id(control.id), label(control.label), callback(control.callback), value(control.value), color(control.color),
-          id(control.id),
+        parentControl(control.parentControl), next(control.next) {}
-          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;
@@ -218,45 +200,31 @@ public:
   bool sliderContinuous;
 
   void setVerbosity(Verbosity verbosity);
-    void begin(const char* _title, const char* username = nullptr, const char* password = nullptr,
+  void begin(const char *_title, const char *username = nullptr, const char *password = nullptr);       // Setup server and page in Memorymode
-        uint16_t port = 80); // Setup server and page in Memorymode
+  void beginSPIFFS(const char *_title, const char *username = nullptr, const char *password = nullptr); // Setup server and page in SPIFFSmode
-    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
+  void prepareFileSystem(); // Initially preps the filesystem and loads a lot of stuff into SPIFFS
-                              // stuff into LITTLEFS
+  void list();              // Lists SPIFFS directory
-    void list(); // Lists LITTLEFS directory
 
-    uint16_t addControl(ControlType type, const char* label, const String& value = String(""),
+  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);
-        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,
+  uint16_t button(const char *label, void (*callback)(Control *, int), ControlColor color, String value = "");         // Create Event Button
-        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 switcher(const char* label, void (*callback)(Control*, int), ControlColor color,
+  uint16_t pad(const char *label, void (*callback)(Control *, int), ControlColor color);                               // Create Pad Control
-        bool startState = false); // Create Toggle Button
+  uint16_t padWithCenter(const char *label, void (*callback)(Control *, int), ControlColor color);                     // Create Pad Control with Centerbutton
-    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,
+  uint16_t text(const char *label, void (*callback)(Control *, int), ControlColor color, String value = ""); // Create a Text Input Control
-        const String& value = ""); // Create a Text Input Control
 
   // Output only
-    uint16_t label(const char* label, ControlColor color,
+  uint16_t label(const char *label, ControlColor color, String value = "");                     // Create Label
-        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,
+  uint16_t gauge(const char *label, ControlColor color, int value, int min = 0, int max = 100); // Create Gauge display
-        int max = 100); // Create Gauge display
 
   // Input only
   uint16_t accelerometer(const char *label, void (*callback)(Control *, int), ControlColor color);
@@ -266,32 +234,29 @@ public:
   Control *getControl(uint16_t id);
 
   // Update Elements
-    void updateControlValue(uint16_t id, const String& value, int clientId = -1);
+  void updateControlValue(uint16_t id, String value, int clientId = -1);
-    void updateControlValue(Control* control, const String& value, int clientId = -1);
+  void updateControlValue(Control *control, String value, int clientId = -1);
 
   void updateControl(uint16_t id, int clientId = -1);
   void updateControl(Control *control, int clientId = -1);
 
-    void print(uint16_t id, const String& value);
+  void print(uint16_t id, String value);
-    void updateLabel(uint16_t id, const 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, const String& nValue, int clientId = -1);
+  void updateText(uint16_t id, String nValue, int clientId = -1);
-    void updateSelect(uint16_t id, const 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 clearGraph(uint16_t id, int clientId = -1);
   void addGraphPoint(uint16_t id, int nValue, int clientId = -1);
 
-    void setPanelStyle(uint16_t id, String style, int clientId = -1);
-    void setElementStyle(uint16_t id, String style, int clientId = -1);
-
   // Variables
   const char *ui_title = "ESPUI"; // Store UI Title and Header Name
   Control *controls = nullptr;
   void jsonReload();
-    void jsonDom(AsyncWebSocketClient* client = nullptr);
+  void jsonDom(AsyncWebSocketClient *client);
 
   Verbosity verbosity;
 
@@ -302,8 +267,6 @@ private:
   const char *basicAuthUsername = nullptr;
   const char *basicAuthPassword = nullptr;
   bool basicAuth = true;
-
-    Control* prepareJSONChunk(AsyncWebSocketClient* client, Control* control, JsonArray* items);
 };
 
 extern ESPUIClass ESPUI;

src/dataSliderJS.h

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