Version 2.0.2

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

.clang-format

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

README.md

@@ -1,4 +1,4 @@
-# ESPUI (v2.X)
+# ESPUI
 
 ![ESPUI](https://github.com/s00500/ESPUI/blob/master/docs/ui_complete.png)
 

data/css/style.css

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

data/js/controls.js

@@ -1,4 +1,5 @@
 const UI_INITIAL_GUI = 200;
+const UI_RELOAD = 201;
 const UPDATE_OFFSET = 100;
 
 const UI_TITEL = 0;
@@ -47,7 +48,7 @@ const UI_STEP = 16;
 const UPDATE_STEP = 116;
 
 const UI_GAUGE = 17;
-const UPTDATE_GAUGE = 117;
+const UPDATE_GAUGE = 117;
 const UI_ACCEL = 18;
 const UPTDATE_ACCEL = 117;
 
@@ -171,9 +172,7 @@ function restoreGraphData(id) {
 }
 
 function restart() {
-  $(document)
+  $(document).add("*").off();
-    .add("*")
-    .off();
   $("#row").html("");
   websock.close();
   start();
@@ -186,7 +185,7 @@ function conStatusError() {
   $("#conStatus").html("Error / No Connection ↻");
   $("#conStatus").off();
   $("#conStatus").on({
-    click: restart
+    click: restart,
   });
 }
 
@@ -198,41 +197,59 @@ function handleVisibilityChange() {
 
 function start() {
   document.addEventListener("visibilitychange", handleVisibilityChange, false);
-  websock = new WebSocket("ws://" + window.location.hostname + "/ws");
+  if (
-  websock.onopen = function(evt) {
+    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) {
+  websock.onclose = function (evt) {
     console.log("websock close");
     conStatusError();
   };
 
-  websock.onerror = function(evt) {
+  websock.onerror = function (evt) {
     console.log(evt);
     conStatusError();
   };
 
-  var handleEvent = function(evt) {
+  var handleEvent = function (evt) {
-    //console.log(evt);
+    console.log(evt);
     var data = JSON.parse(evt.data);
     var e = document.body;
     var center = "";
     switch (data.type) {
       case UI_INITIAL_GUI:
+        // Clear current elements
+        $("#row").html("");
+        $("#tabsnav").html("");
+        $("#tabscontent").html("");
+
         if (data.sliderContinuous) {
           sliderContinuous = data.sliderContinuous;
         }
         data.controls.forEach(element => {
           var fauxEvent = {
-            data: JSON.stringify(element)
+            data: JSON.stringify(element),
           };
           handleEvent(fauxEvent);
         });
         break;
+      case UI_RELOAD:
+        window.location.reload();
+        break;
 
       case UI_TITEL:
         document.title = data.label;
@@ -293,14 +310,14 @@ function start() {
             "</button></div>"
         );
         $("#btn" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
             e.preventDefault();
             buttonclick(data.id, true);
           },
-          touchend: function(e) {
+          touchend: function (e) {
             e.preventDefault();
             buttonclick(data.id, false);
-          }
+          },
         });
         break;
 
@@ -400,54 +417,54 @@ function start() {
         );
 
         $("#pf" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
             e.preventDefault();
             padclick(UP, data.id, true);
           },
-          touchend: function(e) {
+          touchend: function (e) {
             e.preventDefault();
             padclick(UP, data.id, false);
-          }
+          },
         });
         $("#pl" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
             e.preventDefault();
             padclick(LEFT, data.id, true);
           },
-          touchend: function(e) {
+          touchend: function (e) {
             e.preventDefault();
             padclick(LEFT, data.id, false);
-          }
+          },
         });
         $("#pr" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
             e.preventDefault();
             padclick(RIGHT, data.id, true);
           },
-          touchend: function(e) {
+          touchend: function (e) {
             e.preventDefault();
             padclick(RIGHT, data.id, false);
-          }
+          },
         });
         $("#pb" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
             e.preventDefault();
             padclick(DOWN, data.id, true);
           },
-          touchend: function(e) {
+          touchend: function (e) {
             e.preventDefault();
             padclick(DOWN, data.id, false);
-          }
+          },
         });
         $("#pc" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
             e.preventDefault();
             padclick(CENTER, data.id, true);
           },
-          touchend: function(e) {
+          touchend: function (e) {
             e.preventDefault();
             padclick(CENTER, data.id, false);
-          }
+          },
         });
 
         break;
@@ -540,19 +557,17 @@ function start() {
 
       case UI_TAB:
         $("#tabsnav").append(
-          "<li><a href='#tab" + data.id + "'>" + data.value + "</a></li>"
+          "<li><a onmouseup='tabclick(" + data.id + ")' href='#tab" + data.id + "'>" + data.value + "</a></li>"
         );
         $("#tabscontent").append("<div id='tab" + data.id + "'></div>");
 
-        tabs = $(".tabscontent")
+        tabs = $(".tabscontent").tabbedContent({ loop: true }).data("api");
-          .tabbedContent({ loop: true })
-          .data("api");
         // switch to tab...
         $("a")
-          .filter(function() {
+          .filter(function () {
             return $(this).attr("href") === "#click-to-switch";
           })
-          .on("click", function(e) {
+          .on("click", function (e) {
             var tab = prompt("Tab to switch to (number or id)?");
             if (!tabs.switchTab(tab)) {
               alert("That tab does not exist :\\");
@@ -735,7 +750,7 @@ function start() {
         break;
 
       case UPDATE_SLIDER:
-        slider_move($("#sl" + data.id), data.value, "100", false);
+        slider_move($("#id" + data.id), data.value, "100", false);
         break;
 
       case UPDATE_NUMBER:
@@ -799,6 +814,11 @@ function textchange(number) {
   websock.send("tvalue:" + val + ":" + number);
 }
 
+function tabclick(number) {
+  var val = $("#tab" + number).val();
+  websock.send("tabvalue:" + val + ":" + number);
+}
+
 function selectchange(number) {
   var val = $("#select" + number).val();
   websock.send("svalue:" + val + ":" + number);
@@ -852,43 +872,31 @@ function switcher(number, state) {
   }
 }
 
-var rangeSlider = function(isDiscrete) {
+var rangeSlider = function (isDiscrete) {
   var slider = $(".range-slider"),
     range = $(".range-slider__range"),
     value = $(".range-slider__value");
 
-  slider.each(function() {
+  slider.each(function () {
-    value.each(function() {
+    value.each(function () {
-      var value = $(this)
+      var value = $(this).prev().attr("value");
-        .prev()
-        .attr("value");
       $(this).html(value);
     });
 
     if (!isDiscrete) {
       range.on({
-        input: function() {
+        input: function () {
-          sliderchange(
+          sliderchange($(this).attr("id").replace(/^\D+/g, ""));
-            $(this)
+        },
-              .attr("id")
-              .replace(/^\D+/g, "")
-          );
-        }
       });
     } else {
       range.on({
-        input: function() {
+        input: function () {
-          $(this)
+          $(this).next().html(this.value);
-            .next()
+        },
-            .html(this.value);
+        change: function () {
+          sliderchange($(this).attr("id").replace(/^\D+/g, ""));
         },
-        change: function() {
-          sliderchange(
-            $(this)
-              .attr("id")
-              .replace(/^\D+/g, "")
-          );
-        }
       });
     }
   });

data/js/slider.js

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

data/js/slider.min.js

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

examples/prepareFilesystem/prepareFilesystem.ino

@@ -1,11 +1,11 @@
 #include <ESPUI.h>
 
-ESPUIClass ESPUI( Verbosity::VerboseJSON );
+void setup(void)
-
+{
-void setup(void) {
   Serial.begin(115200);
   ESPUI.prepareFileSystem();
 }
 
-void loop() {
+void loop()
+{
 }

lang/ESPUI.json

@@ -1,10 +1,7 @@
 {
-	"langs": 
+	"langs": {
-	{
+		"en-GB": {
-		"en-GB": 
+			"keys": {
-		{
-			"keys": 
-			{
 				"LANG_SUBCATERGORY_ESPUI": "User Interface",
 				"LANG_ESPUI_ESPUI_TITLE": "Title",
 				"LANG_ESPUI_ESPUI_HOTSPOT": "Enable Wifi Hotspot Code",
@@ -22,6 +19,26 @@
 				"LANG_ESPUI_PAD_PAD": "UI Pad",
 				"LANG_ESPUI_PAD_CENTER": "Center button?"
 			}
+		},
+		"zh-CN": {
+			"keys": {
+				"LANG_SUBCATERGORY_ESPUI": "用户接口",
+				"LANG_ESPUI_ESPUI_TITLE": "标题",
+				"LANG_ESPUI_ESPUI_HOTSPOT": "启用无线热点代码",
+				"LANG_ESPUI_ESPUI_TOOLTIP": "在ESP32/ESP8266创建一网络接口",
+				"LANG_ESPUI_BUTTON_BUTTON": "UI 按钮",
+				"LANG_ESPUI_NAME": "名称",
+				"LANG_ESPUI_COLOR": "颜色",
+				"LANG_ESPUI_TEXT": "文本",
+				"LANG_ESPUI_BUTTON_TOOLTIP": "一个网页接口的按钮",
+				"LANG_ESPUI_LABEL_LABEL": "UI 标签",
+				"LANG_ESPUI_LABEL": "标签",
+				"LANG_ESPUI_LABEL_TOOLTIP": "一个网页接口的标签，你可通过修改代码去更新它",
+				"LANG_ESPUI_STATE": "状态",
+				"LANG_ESPUI_SWITCH_SWITCH": "UI 开关",
+				"LANG_ESPUI_PAD_PAD": "UI 面板",
+				"LANG_ESPUI_PAD_CENTER": "中间按钮?"
+			}
 		}
 	}
 }

library.json

@@ -6,28 +6,24 @@
     "type": "git",
     "url": "https://github.com/s00500/ESPUI.git"
   },
-  "authors": [
+  "authors": [{
-    {
+    "name": "Lukas Bachschwell",
-      "name": "Lukas Bachschwell",
+    "email": "lukas@lbsfilm.at",
-      "email": "lukas@lbsfilm.at",
+    "url": "https://lbsfilm.at",
-      "url": "https://lbsfilm.at",
+    "maintainer": true
-      "maintainer": true
+  }],
-    }
+  "dependencies": [{
-  ],
-  "dependencies": [
-    {
       "name": "ESP Async WebServer",
       "authors": "Hristo Gochkov",
       "frameworks": "arduino"
     },
     {
       "name": "ArduinoJson",
-      "version": "5.13.4",
       "authors": "Benoit Blanchon",
       "frameworks": "arduino"
     }
   ],
-  "version": "2.0.0",
+  "version": "2.0.2",
   "frameworks": "arduino",
   "platforms": "*"
 }

library.properties

@@ -1,5 +1,5 @@
 name=ESPUI
-version=2.0.0
+version=2.0.2
 author=Lukas Bachschwell
 maintainer=Lukas Bachschwell <lukas@lbsfilm.at>
 sentence=ESP32 and ESP8266 Web Interface Library
@@ -7,3 +7,4 @@ paragraph=A simple library that implements a web graphical user interface for ES
 category=Communication
 url=https://github.com/s00500/ESPUI
 architectures=*
+depends=ArduinoJson

src/ESPUI.h

@@ -6,15 +6,14 @@
 
 #include "Arduino.h"
 #include "ArduinoJson.h"
-#include "FS.h"
 #include "stdlib_noniso.h"
 
 #if defined(ESP32)
+#include <AsyncTCP.h>
+#include <ESPAsyncWebServer.h>
 
 #include "SPIFFS.h"
 #include "WiFi.h"
-#include <AsyncTCP.h>
-#include <ESPAsyncWebServer.h>
 
 #else
 
@@ -23,8 +22,8 @@
 #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"
@@ -33,53 +32,56 @@
 
 // Message Types (and control types)
 
-enum ControlType : uint8_t {
+enum ControlType : uint8_t
-  // fixed controls
+{
-  Title = 0,
+    // fixed controls
+    Title = 0,
 
-  // updatable controls
+    // updatable controls
-  Pad,
+    Pad,
-  PadWithCenter,
+    PadWithCenter,
-  Button,
+    Button,
-  Label,
+    Label,
-  Switcher,
+    Switcher,
-  Slider,
+    Slider,
-  Number,
+    Number,
-  Text,
+    Text,
-  Graph,
+    Graph,
-  GraphPoint,
+    GraphPoint,
-  Tab,
+    Tab,
-  Select,
+    Select,
-  Option,
+    Option,
-  Min,
+    Min,
-  Max,
+    Max,
-  Step,
+    Step,
-  Gauge,
+    Gauge,
-  Accel,
+    Accel,
 
-  UpdateOffset = 100,
+    UpdateOffset = 100,
-  UpdatePad = 101,
+    UpdatePad = 101,
-  UpdatePadWithCenter,
+    UpdatePadWithCenter,
-  ButtonButton,
+    ButtonButton,
-  UpdateLabel,
+    UpdateLabel,
-  UpdateSwitcher,
+    UpdateSwitcher,
-  UpdateSlider,
+    UpdateSlider,
-  UpdateNumber,
+    UpdateNumber,
-  UpdateText,
+    UpdateText,
-  ClearGraph,
+    ClearGraph,
-  UpdateTab,
+    UpdateTab,
-  UpdateSelection,
+    UpdateSelection,
-  UpdateOption,
+    UpdateOption,
-  UpdateMin,
+    UpdateMin,
-  UpdateMax,
+    UpdateMax,
-  UpdateStep,
+    UpdateStep,
-  UpdateGauge,
+    UpdateGauge,
-  UpdateAccel,
+    UpdateAccel,
 
-  InitialGui = 200
+    InitialGui = 200,
+    Reload = 201
 };
 
 #define UI_INITIAL_GUI ControlType::InitialGui
+#define UI_RELOAD ControlType::Reload
 
 #define UI_TITLE ControlType::Title
 #define UI_LABEL ControlType::Label
@@ -101,7 +103,18 @@ enum ControlType : uint8_t {
 #define CLEAR_GRAPH ControlType::ClearGraph
 
 // Colors
-enum ControlColor : uint8_t { Turquoise, Emerald, Peterriver, Wetasphalt, Sunflower, Carrot, Alizarin, Dark, None = 0xFF };
+enum ControlColor : uint8_t
+{
+    Turquoise,
+    Emerald,
+    Peterriver,
+    Wetasphalt,
+    Sunflower,
+    Carrot,
+    Alizarin,
+    Dark,
+    None = 0xFF
+};
 #define COLOR_TURQUOISE ControlColor::Turquoise
 #define COLOR_EMERALD ControlColor::Emerald
 #define COLOR_PETERRIVER ControlColor::Peterriver
@@ -112,31 +125,46 @@ enum ControlColor : uint8_t { Turquoise, Emerald, Peterriver, Wetasphalt, Sunflo
 #define COLOR_DARK ControlColor::Dark
 #define COLOR_NONE ControlColor::None
 
-class Control {
+class Control
+{
 public:
-  ControlType type;
+    ControlType type;
-  uint16_t id; // just mirroring the id here for practical reasons
+    uint16_t id; // just mirroring the id here for practical reasons
-  const char *label;
+    const char* label;
-  void (*callback)(Control *, int);
+    void (*callback)(Control*, int);
-  String value;
+    String value;
-  ControlColor color;
+    ControlColor color;
-  uint16_t parentControl;
+    uint16_t parentControl;
-  Control *next;
+    Control* next;
 
-  static constexpr uint16_t noParent = 0xffff;
+    static constexpr uint16_t noParent = 0xffff;
 
-  Control(ControlType type, const char *label, void (*callback)(Control *, int), String value, ControlColor color,
+    Control(ControlType type, const char* label, void (*callback)(Control*, int), const String& value,
-          uint16_t parentControl = Control::noParent)
+        ControlColor color, uint16_t parentControl = Control::noParent)
-      : type(type), label(label), callback(callback), value(value), color(color), parentControl(parentControl), next(nullptr) {
+        : type(type),
-    id = idCounter++;
+          label(label),
-  }
+          callback(callback),
+          value(value),
+          color(color),
+          parentControl(parentControl),
+          next(nullptr)
+    {
+        id = idCounter++;
+    }
 
-  Control(const Control &control)
+    Control(const Control& control)
-      : type(control.type), id(control.id), label(control.label), callback(control.callback), value(control.value), color(control.color),
+        : type(control.type),
-        parentControl(control.parentControl), next(control.next) {}
+          id(control.id),
+          label(control.label),
+          callback(control.callback),
+          value(control.value),
+          color(control.color),
+          parentControl(control.parentControl),
+          next(control.next)
+    { }
 
 private:
-  static uint16_t idCounter;
+    static uint16_t idCounter;
 };
 
 // Values
@@ -162,88 +190,107 @@ private:
 #define T_VALUE 10
 #define S_VALUE 11
 
-enum Verbosity : uint8_t { Quiet = 0, Verbose, VerboseJSON };
+enum Verbosity : uint8_t
+{
+    Quiet = 0,
+    Verbose,
+    VerboseJSON
+};
 
-class ESPUIClass {
+class ESPUIClass
+{
 public:
-  ESPUIClass() {
+    ESPUIClass()
-    verbosity = Verbosity::Quiet;
+    {
-    jsonUpdateDocumentSize = 2000;
+        verbosity = Verbosity::Quiet;
-    jsonInitialDocumentSize = 8000;
+        jsonUpdateDocumentSize = 2000;
-    sliderContinuous = false;
+        jsonInitialDocumentSize = 8000;
-  }
+        sliderContinuous = false;
-  unsigned int jsonUpdateDocumentSize;
+    }
-  unsigned int jsonInitialDocumentSize;
+    unsigned int jsonUpdateDocumentSize;
-  bool sliderContinuous;
+    unsigned int jsonInitialDocumentSize;
+    bool sliderContinuous;
 
-  void setVerbosity(Verbosity verbosity);
+    void setVerbosity(Verbosity verbosity);
-  void begin(const char *_title, const char *username = nullptr, const char *password = nullptr);       // Setup server and page in Memorymode
+    void begin(const char* _title, const char* username = nullptr,
-  void beginSPIFFS(const char *_title, const char *username = nullptr, const char *password = nullptr); // Setup server and page in SPIFFSmode
+        const char* password = nullptr); // Setup server and page in Memorymode
+    void beginSPIFFS(const char* _title, const char* username = nullptr,
+        const char* password = nullptr); // Setup server and page in SPIFFSmode
 
-  void prepareFileSystem(); // Initially preps the filesystem and loads a lot of stuff into SPIFFS
+    void prepareFileSystem(); // Initially preps the filesystem and loads a lot of
-  void list();              // Lists SPIFFS directory
+                              // stuff into SPIFFS
+    void list(); // Lists SPIFFS directory
 
-  uint16_t addControl(ControlType type, const char *label, String value = String(""), ControlColor color = ControlColor::Turquoise,
+    uint16_t addControl(ControlType type, const char* label, const String& value = String(""),
-                      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
+    // create Elements
-  uint16_t button(const char *label, void (*callback)(Control *, int), ControlColor color, String value = "");         // Create Event Button
+    uint16_t button(const char* label, void (*callback)(Control*, int), ControlColor color,
-  uint16_t switcher(const char *label, void (*callback)(Control *, int), ControlColor color, bool startState = false); // Create Toggle Button
+        const String& value = ""); // Create Event Button
-  uint16_t pad(const char *label, void (*callback)(Control *, int), ControlColor color);                               // Create Pad Control
+    uint16_t switcher(const char* label, void (*callback)(Control*, int), ControlColor color,
-  uint16_t padWithCenter(const char *label, void (*callback)(Control *, int), ControlColor color); // Create Pad Control with Centerbutton
+        bool startState = false); // Create Toggle Button
+    uint16_t pad(const char* label, void (*callback)(Control*, int),
+        ControlColor color); // Create Pad Control
+    uint16_t padWithCenter(const char* label, void (*callback)(Control*, int),
+        ControlColor color); // Create Pad Control with Centerbutton
 
-  uint16_t slider(const char *label, void (*callback)(Control *, int), ControlColor color, int value, int min = 0,
+    uint16_t slider(const char* label, void (*callback)(Control*, int), ControlColor color, int value, int min = 0,
-                  int max = 100); // Create Slider Control
+        int max = 100); // Create Slider Control
-  uint16_t number(const char *label, void (*callback)(Control *, int), ControlColor color, int value, int min = 0,
+    uint16_t number(const char* label, void (*callback)(Control*, int), ControlColor color, int value, int min = 0,
-                  int max = 100);                                                                            // Create a Number Input Control
+        int max = 100); // Create a Number Input Control
-  uint16_t text(const char *label, void (*callback)(Control *, int), ControlColor color, String value = ""); // Create a Text Input Control
+    uint16_t text(const char* label, void (*callback)(Control*, int), ControlColor color,
+        const String& value = ""); // Create a Text Input Control
 
-  // Output only
+    // Output only
-  uint16_t label(const char *label, ControlColor color, String value = ""); // Create Label
+    uint16_t label(const char* label, ControlColor color,
-  uint16_t graph(const char *label, ControlColor color);                    // Create Graph display
+        const String& value = ""); // Create Label
-  uint16_t gauge(const char *label, ControlColor color, int value, int min = 0,
+    uint16_t graph(const char* label, ControlColor color); // Create Graph display
-                 int max = 100); // Create Gauge display
+    uint16_t gauge(const char* label, ControlColor color, int value, int min = 0,
+        int max = 100); // Create Gauge display
 
-  // Input only
+    // Input only
-  uint16_t accelerometer(const char *label, void (*callback)(Control *, int), ControlColor color);
+    uint16_t accelerometer(const char* label, void (*callback)(Control*, int), ControlColor color);
 
-  // Update Elements
+    // Update Elements
 
-  Control *getControl(uint16_t id);
+    Control* getControl(uint16_t id);
 
-  // Update Elements
+    // Update Elements
-  void updateControlValue(uint16_t id, String value, int clientId = -1);
+    void updateControlValue(uint16_t id, const String& value, int clientId = -1);
-  void updateControlValue(Control *control, String value, int clientId = -1);
+    void updateControlValue(Control* control, const String& value, int clientId = -1);
 
-  void updateControl(uint16_t id, int clientId = -1);
+    void updateControl(uint16_t id, int clientId = -1);
-  void updateControl(Control *control, int clientId = -1);
+    void updateControl(Control* control, int clientId = -1);
 
-  void print(uint16_t id, String value);
+    void print(uint16_t id, const String& value);
-  void updateLabel(uint16_t id, String value);
+    void updateLabel(uint16_t id, const String& value);
-  void updateSwitcher(uint16_t id, bool nValue, int clientId = -1);
+    void updateSwitcher(uint16_t id, bool nValue, int clientId = -1);
-  void updateSlider(uint16_t id, int nValue, int clientId = -1);
+    void updateSlider(uint16_t id, int nValue, int clientId = -1);
-  void updateNumber(uint16_t id, int nValue, int clientId = -1);
+    void updateNumber(uint16_t id, int nValue, int clientId = -1);
-  void updateText(uint16_t id, String nValue, int clientId = -1);
+    void updateText(uint16_t id, const String& nValue, int clientId = -1);
-  void updateSelect(uint16_t id, String nValue, int clientId = -1);
+    void updateSelect(uint16_t id, const String& nValue, int clientId = -1);
-  void updateGauge(uint16_t id, int number, int clientId);
+    void updateGauge(uint16_t id, int number, int clientId);
 
-  void clearGraph(uint16_t id, int clientId = -1);
+    void clearGraph(uint16_t id, int clientId = -1);
-  void addGraphPoint(uint16_t id, int nValue, int clientId = -1);
+    void addGraphPoint(uint16_t id, int nValue, int clientId = -1);
 
-  // Variables
+    // Variables
-  const char *ui_title = "ESPUI"; // Store UI Title and Header Name
+    const char* ui_title = "ESPUI"; // Store UI Title and Header Name
-  Control *controls = nullptr;
+    Control* controls = nullptr;
-  void jsonDom(AsyncWebSocketClient *client);
+    void jsonReload();
+    void jsonDom(AsyncWebSocketClient* client = nullptr);
 
-  Verbosity verbosity;
+    Verbosity verbosity;
 
-  AsyncWebServer *server;
+    AsyncWebServer* server;
-  AsyncWebSocket *ws;
+    AsyncWebSocket* ws;
 
 private:
-  const char *basicAuthUsername = nullptr;
+    const char* basicAuthUsername = nullptr;
-  const char *basicAuthPassword = nullptr;
+    const char* basicAuthPassword = nullptr;
-  bool basicAuth = true;
+    bool basicAuth = true;
 };
 
 extern ESPUIClass ESPUI;

src/dataGraphJS.h

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

src/dataIndexHTML.h

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

src/dataNormalizeCSS.h

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

src/dataSliderJS.h

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