1.6.1

- Also authing websockets
- Implemented on begin and beginSpiffs
- Added notes to Gui example

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,35 @@
+---
+name: Bug report
+about: Create a report to help us improve
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.gitignore

@@ -26,3 +26,13 @@
 Network Trash Folder
 Temporary Items
 .apdisk
+
+# Linux
+# =========================
+
+# Backup files produced by some editors
+*~
+*.bak
+
+
+.vscode/

README.md

@@ -48,7 +48,7 @@ Download the [Repository](https://github.com/s00500/ESPUI/archive/master.zip), G
 
 ## Getting started
 
-ESPUI serves several Files to the browser to build up its webinterface. This can be achieved in 2 wasy: 
+ESPUI serves several files to the browser to build up its webinterface. This 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!*
@@ -78,6 +78,8 @@ Now you are set to go and use any code you want to with this library
   - Control pad
   - Control pad with center button
   - Slider
+  - Text Input (updateable)
+  - Numberinput (updateable)
 
   Checkout the example for the usage
   
@@ -100,11 +102,12 @@ Now you are set to go and use any code you want to with this library
 - ~~Multiline Labels~~
 - ~~GZip Files and serve from memory~~
 - Datagraph output -> *WIP*
-- Number input -> *WIP*
-- Text input -> *WIP*
+- ~~Number input ~~
+- ~~Text input ~~
+- Dokumentation for Text and number widget
+- Number min and max value
 - proper return value (as int and not as string) for slider
 - Maybe a slider range setting, meanwhile please use *map()*
-- Improve slider stability
 
 ## Documentation
 
@@ -159,7 +162,14 @@ The library is designed to be easy to use and can still be extended with a lot o
 
 
 # Notes for Development
-All changes to the client side files can be made in the examples/gui/data directory. Using the file uploader thin can be used for development. After this you have to compress them and then you can gzip them. I wrote a little useful jsfiddle for this, [CHECK IT OUT](https://jsfiddle.net/s00500/yvLbhuuv/)
+If you want to work on the HTML/CSS/JS files, do make changes in the `examples/gui/data` directory. When you need to transfer that code to the ESP, run `tools/prepare_static_ui_sources.py -a` (this script needs python3 with the modules htmlmin, jsmin and csscompressor).
+This will generate a) minified files next to the original files to be uploaded with the ESP32 sketch data uploader mentioned above and b) the C header files in `src` that contain the minified and gzipped HTML/CSS/JS data (which are used by the **prepareFileSystem** example sketch or when they are served from PROGMEM; see above in the section "Getting started").
+Alternatively, you can duplicate the `examples/gui` directory and work on the copy. Then specify the `--source` and `--target` arguments to the `prepare_static_ui_sources.py` script (run the script without arguments for help).
+
+If you don't have a python environment, you need to minify and gzip the HTML/CSS/JS files manually. I wrote a little useful jsfiddle for this, [see here](https://jsfiddle.net/s00500/yvLbhuuv/).
+
+If you change something in HTML/CSS/JS and want to create a pull request, please do include the minified versions and corresponding C header files in your commits.
+
 
 # Contribute
 Liked this Library? You can **support** me by sending me a :coffee: [Coffee](https://paypal.me/lukasbachschwell/3).

examples/gui/data/css/normalize.min.css

@@ -1 +1 @@
-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:-0.5em}sub{bottom:-0.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 #c0c0c0;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}
+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}

examples/gui/data/css/style.css

@@ -582,9 +582,16 @@
     display: block;
     position: relative;
     width: 100%;
-    height: 4px;
+    height: 27px;
+    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;
@@ -596,7 +603,7 @@
   .rkmd-slider input[type="range"] + .slider .slider-handle {
     cursor: pointer;
     position: absolute;
-    top: -5.5px;
+    top: 12px;
     left: 0%;
     width: 15px;
     height: 15px;
@@ -606,6 +613,11 @@
     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;
   }
@@ -648,17 +660,24 @@
   .rkmd-slider.slider-discrete .slider .slider-handle .slider-label {
     position: absolute;
     top: -17.5px;
-    left: -2px;
+    left: 4px;
     width: 30px;
     height: 30px;
     -webkit-transform-origin: 50% 100%;
             transform-origin: 50% 100%;
     border-radius: 50%;
-    -webkit-transform: scale(0.5) rotate(-45deg);
-            transform: scale(0.5) rotate(-45deg);
+    -webkit-transform: scale(1.0) rotate(-45deg);
+            transform: scale(1.0) rotate(-45deg);
     -webkit-transition: all .2s ease;
     transition: all .2s ease;
   }
+  @media (pointer: fine) {
+    .rkmd-slider.slider-discrete .slider .slider-handle .slider-label {
+      left: -2px;
+      -webkit-transform: scale(0.5) rotate(-45deg);
+              transform: scale(0.5) rotate(-45deg);
+    }
+  }
 
   .rkmd-slider.slider-discrete .slider .slider-handle .slider-label span {
     position: absolute;
@@ -666,7 +685,7 @@
     left: 0px;
     width: 100%;
     color: #fff;
-    font-size: 12px;
+    font-size: 16px;
     text-align: center;
     -webkit-transform: rotate(45deg);
             transform: rotate(45deg);
@@ -676,7 +695,11 @@
         -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;
@@ -763,3 +786,26 @@
   }
 
 */
+
+/* --------------------------------------------------------------
+ * Text and number inputs
+ *--------------------------------------------------------------- */
+ 
+input {
+    margin: 0 auto 1.2rem auto;
+    padding: 2px 5px;
+    width: 100%;
+    box-sizing: border-box;
+    border: none;
+    border-radius: 4px;
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    background: rgba(255, 255, 255, 0.8);
+}
+
+input[id^="num"] {
+    max-width: 6em;
+    width:auto;
+    text-align: right;
+    font-weight: bold;
+    font-size: 115%;
+}

examples/gui/data/index.min.htm

@@ -0,0 +1 @@
+<!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/controls.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> </div> </body> </html> 

examples/gui/data/js/controls.js

@@ -1,3 +1,4 @@
+const UI_INITIAL_GUI = 100;
 const UI_TITEL = 0;
 
 const UI_LABEL = 1;
@@ -14,8 +15,6 @@ const UI_CPAD = 5;
 const UI_SLIDER = 8;
 const UPDATE_SLIDER = 9;
 
-
-
 const UI_NUMBER = 10;
 const UPDATE_NUMBER = 11;
 
@@ -43,300 +42,454 @@ const C_ALIZARIN = 6;
 const C_NONE = 7;
 
 function colorClass(colorId) {
-    colorId = Number(colorId);
-    switch (colorId) {
-        case C_TURQUOISE:
-            return "turquoise";
-            break;
+  colorId = Number(colorId);
+  switch (colorId) {
+    case C_TURQUOISE:
+      return "turquoise";
+      break;
 
-        case C_EMERALD:
-            return "emerald";
-            break;
+    case C_EMERALD:
+      return "emerald";
+      break;
 
-        case C_PETERRIVER:
-            return "peterriver";
-            break;
+    case C_PETERRIVER:
+      return "peterriver";
+      break;
 
-        case C_WETASPHALT:
-            return "wetasphalt";
-            break;
+    case C_WETASPHALT:
+      return "wetasphalt";
+      break;
 
-        case C_SUNFLOWER:
-            return "sunflower";
-            break;
+    case C_SUNFLOWER:
+      return "sunflower";
+      break;
 
-        case C_CARROT:
-            return "carrot"
-            break;
+    case C_CARROT:
+      return "carrot";
+      break;
 
-        case C_ALIZARIN:
-            return "alizarin"
-            break;
+    case C_ALIZARIN:
+      return "alizarin";
+      break;
 
-        case C_NONE:
-            return ""
-            break;
+    case C_NONE:
+      return "";
+      break;
 
-        default:
-            return "";
-    }
+    default:
+      return "";
+  }
 }
 
 var websock;
+var websockConnected = false;
+
+function restart() {
+  $(document)
+    .add("*")
+    .off();
+  $("#row").html("");
+  websock.close();
+  start();
+}
+
+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() {
-    websock = new WebSocket('ws://' + window.location.hostname + '/ws');
-    websock.onopen = function(evt) {
-        console.log('websock open');
-        $("#conStatus").addClass("color-green");
-        $("#conStatus").text("Connected");
-    };
-    websock.onclose = function(evt) {
-        console.log('websock close');
-        $("#conStatus").removeClass("color-green");
-        $("#conStatus").addClass("color-red");
-        $("#conStatus").text("Error / No Connection");
-    };
-    websock.onerror = function(evt) {
-        console.log(evt);
-        $("#conStatus").removeClass("color-green");
-        $("#conStatus").addClass("color-red");
-        $("#conStatus").text("Error / No Connection");
-    };
-    websock.onmessage = function(evt) {
-        console.log(evt);
-        var data = JSON.parse(evt.data);
-        var e = document.body;
-        var center = "";
-        switch (data.type) {
-            case UI_TITEL:
-                document.title = data.label;
-                $('#mainHeader').html(data.label);
-                break;
-            case UI_LABEL:
-                $('#row').append("<div class='two columns card tcenter " + colorClass(data.color) + "'><h5 id='" + data.id + "'>" + data.label + "</h5><hr /><span id='l" + data.id + "' class='label label-wrap'>" + data.value + "</span></div>");
-                break;
-            case UI_BUTTON:
-                $('#row').append("<div class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/><button onmousedown='buttonclick(" + data.id + ", true)' onmouseup='buttonclick(" + data.id + ", false)' id='" + data.id + "'>" + data.value + "</button></div>");
-                $('#' + data.id).on({
-                    'touchstart': function(e) {
-                        e.preventDefault();
-                        buttonclick(data.id, true)
-                    }
-                });
-                $('#' + data.id).on({
-                    'touchend': function(e) {
-                        e.preventDefault();
-                        buttonclick(data.id, false)
-                    }
-                });
-                break;
-            case UI_SWITCHER:
-                var label = "<label id='sl" + data.id + "' class='switch checked'>";
-                var input = "<div class='in'><input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' checked></div>";
-                if (data.value == "0") {
-                    label = "<label id='sl" + data.id + "' class='switch'>";
-                    input = "<div class='in'><input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' ></div>";
-                }
-                $('#row').append(
-                    "<div id='" + data.id + "' class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
-                    label + input +
-                    "</label>" +
-                    "</div>");
-                break;
-            case UI_CPAD:
-                center = "<a class='confirm' onmousedown='padclick(CENTER, " + data.id + ", true)' onmouseup='padclick(CENTER, " + data.id + ", false)' href='#' id='pc" + data.id + "'>OK</a>";
-                //NO BREAK
-            case UI_PAD:
-                $('#row').append(
-                    "<div class='two columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
-                    "<nav class='control'>" +
-                    "<ul>" +
-                    "<li><a onmousedown='padclick(FOR, " + data.id + ", true)' onmouseup='padclick(FOR, " + data.id + ", false)' href='#' id='pf" + data.id + "'>▲</a></li>" +
-                    "<li><a onmousedown='padclick(RIGHT, " + data.id + ", true)' onmouseup='padclick(RIGHT, " + data.id + ", false)' href='#' id='pr" + data.id + "'>▲</a></li>" +
-                    "<li><a onmousedown='padclick(LEFT, " + data.id + ", true)' onmouseup='padclick(LEFT, " + data.id + ", false)' href='#' id='pl" + data.id + "'>▲</a></li>" +
-                    "<li><a onmousedown='padclick(BACK, " + data.id + ", true)' onmouseup='padclick(BACK, " + data.id + ", false)' href='#' id='pb" + data.id + "'>▲</a></li>" +
-                    "</ul>" +
-                    center +
-                    "</nav>" +
-                    "</div>");
+  document.addEventListener("visibilitychange", handleVisibilityChange, false);
+  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;
+  };
 
-                $('#pf' + data.id).on({
-                    'touchstart': function(e) {
-                        e.preventDefault();
-                        padclick(FOR, data.id, true)
-                    }
-                });
-                $('#pf' + data.id).on({
-                    'touchend': function(e) {
-                        e.preventDefault();
-                        padclick(FOR, data.id, false)
-                    }
-                });
-                $('#pl' + data.id).on({
-                    'touchstart': function(e) {
-                        e.preventDefault();
-                        padclick(LEFT, data.id, true)
-                    }
-                });
-                $('#pl' + data.id).on({
-                    'touchend': function(e) {
-                        e.preventDefault();
-                        padclick(LEFT, data.id, false)
-                    }
-                });
-                $('#pr' + data.id).on({
-                    'touchstart': function(e) {
-                        e.preventDefault();
-                        padclick(RIGHT, data.id, true)
-                    }
-                });
-                $('#pr' + data.id).on({
-                    'touchend': function(e) {
-                        e.preventDefault();
-                        padclick(RIGHT, data.id, false)
-                    }
-                });
-                $('#pb' + data.id).on({
-                    'touchstart': function(e) {
-                        e.preventDefault();
-                        padclick(BACK, data.id, true)
-                    }
-                });
-                $('#pb' + data.id).on({
-                    'touchend': function(e) {
-                        e.preventDefault();
-                        padclick(BACK, data.id, false)
-                    }
-                });
-                $('#pc' + data.id).on({
-                    'touchstart': function(e) {
-                        e.preventDefault();
-                        padclick(CENTER, data.id, true)
-                    }
-                });
-                $('#pc' + data.id).on({
-                    'touchend': function(e) {
-                        e.preventDefault();
-                        padclick(CENTER, data.id, false)
-                    }
-                });
+  websock.onclose = function (evt) {
+    console.log("websock close");
+    conStatusError();
+  };
 
-                break;
-            case UPDATE_LABEL:
-                $('#l' + data.id).html(data.value);
-                break;
-            case UPDATE_SWITCHER:
-                if (data.value == "0")
-                    switcher(data.id, 0);
-                else
-                    switcher(data.id, 1);
-                break;
-            case UI_SLIDER:
-                $('#row').append(
-                    "<div class='two columns card tcenter card-slider " + colorClass(data.color) + "'>" +
-                    "<h5 id='" + data.id + "'>" + data.label + "</h5><hr />" +
-                    "<div id='sl" + data.id + "' class='rkmd-slider slider-discrete slider-" + colorClass(data.color) + "'>" +
-                    "<input type='range' min='0' max='100' value='" + data.value + "'>" +
-                    "</div>" +
-                    "</div>"
-                );
-                $('#row').append(
-                    "<script>" +
-                    "rkmd_rangeSlider('#sl" + data.id + "');" +
-                    "</script>"
-                );
-                break;
+  websock.onerror = function (evt) {
+    console.log(evt);
+    conStatusError();
+  };
 
-            case UPDATE_SLIDER:
-                slider_move($('#sl' + data.id), data.value, '100', false);
-                break;
-
-            case UI_NUMBER:
-                $('#row').append(
-                    "<div class='two columns card tcenter" + colorClass(data.color) + "'>" +
-                    "<h5 id='" + data.id + "'>" + data.label + "</h5><hr />" +
-                    "<input id='num" + data.id + "' type='number' value='" + data.value + "' onchange='numberchange(" + data.id + ")' />" +
-                    "</div>"
-                );
-                break;
-
-            case UPDATE_NUMBER:
-                $('#num' + data.id).val(data.value);
-                break;
-
-            case UI_TEXT_INPUT:
-                $('#row').append(
-                    "<div class='two columns card tcenter" + colorClass(data.color) + "'>" +
-                    "<h5 id='" + data.id + "'>" + data.label + "</h5><hr />" +
-                    "<input id='num" + data.id + "' type='number' value='" + data.value + "' onchange='numberchange(" + data.id + ")' />" +
-                    "</div>"
-                );
-                break;
-
-            case UPDATE_TEXT_INPUT:
-                $('#num' + data.id).val(data.value);
-                break;
-
-            default:
-                console.error('Unknown type or event');
-                break;
+  var handleEvent = function (evt) {
+    //console.log(evt);
+    var data = JSON.parse(evt.data);
+    var e = document.body;
+    var center = "";
+    switch (data.type) {
+      case UI_INITIAL_GUI:
+        data.controls.forEach(element => {
+          var fauxEvent = {
+            data: JSON.stringify(element)
+          };
+          handleEvent(fauxEvent);
+        });
+        break;
+      case UI_TITEL:
+        document.title = data.label;
+        $("#mainHeader").html(data.label);
+        break;
+      case UI_LABEL:
+        $("#row").append(
+          "<div class='two columns card tcenter " +
+          colorClass(data.color) +
+          "'><h5 id='" +
+          data.id +
+          "'>" +
+          data.label +
+          "</h5><hr /><span id='l" +
+          data.id +
+          "' class='label label-wrap'>" +
+          data.value +
+          "</span></div>"
+        );
+        break;
+      case UI_BUTTON:
+        $("#row").append(
+          "<div class='one columns card tcenter " +
+          colorClass(data.color) +
+          "'><h5>" +
+          data.label +
+          "</h5><hr/><button onmousedown='buttonclick(" +
+          data.id +
+          ", true)' onmouseup='buttonclick(" +
+          data.id +
+          ", false)' id='" +
+          data.id +
+          "'>" +
+          data.value +
+          "</button></div>"
+        );
+        $("#" + data.id).on({
+          touchstart: function (e) {
+            e.preventDefault();
+            buttonclick(data.id, true);
+          }
+        });
+        $("#" + data.id).on({
+          touchend: function (e) {
+            e.preventDefault();
+            buttonclick(data.id, false);
+          }
+        });
+        break;
+      case UI_SWITCHER:
+        var label = "<label id='sl" + data.id + "' class='switch checked'>";
+        var input =
+          "<div class='in'><input type='checkbox' id='s" +
+          data.id +
+          "' onClick='switcher(" +
+          data.id +
+          ",null)' checked></div>";
+        if (data.value == "0") {
+          label = "<label id='sl" + data.id + "' class='switch'>";
+          input =
+            "<div class='in'><input type='checkbox' id='s" +
+            data.id +
+            "' onClick='switcher(" +
+            data.id +
+            ",null)' ></div>";
         }
-    };
+        $("#row").append(
+          "<div id='" +
+          data.id +
+          "' class='one columns card tcenter " +
+          colorClass(data.color) +
+          "'><h5>" +
+          data.label +
+          "</h5><hr/>" +
+          label +
+          input +
+          "</label>" +
+          "</div>"
+        );
+        break;
+      case UI_CPAD:
+        center =
+          "<a class='confirm' onmousedown='padclick(CENTER, " +
+          data.id +
+          ", true)' onmouseup='padclick(CENTER, " +
+          data.id +
+          ", false)' href='#' id='pc" +
+          data.id +
+          "'>OK</a>";
+        //NO BREAK
+      case UI_PAD:
+        $("#row").append(
+          "<div class='two columns card tcenter " +
+          colorClass(data.color) +
+          "'><h5>" +
+          data.label +
+          "</h5><hr/>" +
+          "<nav class='control'>" +
+          "<ul>" +
+          "<li><a onmousedown='padclick(FOR, " +
+          data.id +
+          ", true)' onmouseup='padclick(FOR, " +
+          data.id +
+          ", false)' href='#' id='pf" +
+          data.id +
+          "'>▲</a></li>" +
+          "<li><a onmousedown='padclick(RIGHT, " +
+          data.id +
+          ", true)' onmouseup='padclick(RIGHT, " +
+          data.id +
+          ", false)' href='#' id='pr" +
+          data.id +
+          "'>▲</a></li>" +
+          "<li><a onmousedown='padclick(LEFT, " +
+          data.id +
+          ", true)' onmouseup='padclick(LEFT, " +
+          data.id +
+          ", false)' href='#' id='pl" +
+          data.id +
+          "'>▲</a></li>" +
+          "<li><a onmousedown='padclick(BACK, " +
+          data.id +
+          ", true)' onmouseup='padclick(BACK, " +
+          data.id +
+          ", false)' href='#' id='pb" +
+          data.id +
+          "'>▲</a></li>" +
+          "</ul>" +
+          center +
+          "</nav>" +
+          "</div>"
+        );
+
+        $("#pf" + data.id).on({
+          touchstart: function (e) {
+            e.preventDefault();
+            padclick(FOR, data.id, true);
+          }
+        });
+        $("#pf" + data.id).on({
+          touchend: function (e) {
+            e.preventDefault();
+            padclick(FOR, data.id, false);
+          }
+        });
+        $("#pl" + data.id).on({
+          touchstart: function (e) {
+            e.preventDefault();
+            padclick(LEFT, data.id, true);
+          }
+        });
+        $("#pl" + data.id).on({
+          touchend: function (e) {
+            e.preventDefault();
+            padclick(LEFT, data.id, false);
+          }
+        });
+        $("#pr" + data.id).on({
+          touchstart: function (e) {
+            e.preventDefault();
+            padclick(RIGHT, data.id, true);
+          }
+        });
+        $("#pr" + data.id).on({
+          touchend: function (e) {
+            e.preventDefault();
+            padclick(RIGHT, data.id, false);
+          }
+        });
+        $("#pb" + data.id).on({
+          touchstart: function (e) {
+            e.preventDefault();
+            padclick(BACK, data.id, true);
+          }
+        });
+        $("#pb" + data.id).on({
+          touchend: function (e) {
+            e.preventDefault();
+            padclick(BACK, data.id, false);
+          }
+        });
+        $("#pc" + data.id).on({
+          touchstart: function (e) {
+            e.preventDefault();
+            padclick(CENTER, data.id, true);
+          }
+        });
+        $("#pc" + data.id).on({
+          touchend: function (e) {
+            e.preventDefault();
+            padclick(CENTER, data.id, false);
+          }
+        });
+
+        break;
+      case UPDATE_LABEL:
+        $("#l" + data.id).html(data.value);
+        break;
+      case UPDATE_SWITCHER:
+        if (data.value == "0") switcher(data.id, 0);
+        else switcher(data.id, 1);
+        break;
+      case UI_SLIDER:
+        $("#row").append(
+          "<div class='two columns card tcenter card-slider " +
+          colorClass(data.color) +
+          "'>" +
+          "<h5 id='" +
+          data.id +
+          "'>" +
+          data.label +
+          "</h5><hr />" +
+          "<div id='sl" +
+          data.id +
+          "' class='rkmd-slider slider-discrete slider-" +
+          colorClass(data.color) +
+          "'>" +
+          "<input type='range' min='0' max='100' value='" +
+          data.value +
+          "'>" +
+          "</div>" +
+          "</div>"
+        );
+        $("#row").append(
+          "<script>" + "rkmd_rangeSlider('#sl" + data.id + "');" + "</script>"
+        );
+        break;
+
+      case UPDATE_SLIDER:
+        slider_move($("#sl" + data.id), data.value, "100", false);
+        break;
+
+      case UI_NUMBER:
+        $("#row").append(
+          "<div class='two columns card tcenter " +
+          colorClass(data.color) +
+          "'>" +
+          "<h5 id='" +
+          data.id +
+          "'>" +
+          data.label +
+          "</h5><hr />" +
+          "<input style='color:black;' id='num" +
+          data.id +
+          "' type='number' value='" +
+          data.value +
+          "' onchange='numberchange(" +
+          data.id +
+          ")' />" +
+          "</div>"
+        );
+        break;
+
+      case UPDATE_NUMBER:
+        $("#num" + data.id).val(data.value);
+        break;
+
+      case UI_TEXT_INPUT:
+        $("#row").append(
+          "<div class='two columns card tcenter " +
+          colorClass(data.color) +
+          "'>" +
+          "<h5 id='" +
+          data.id +
+          "'>" +
+          data.label +
+          "</h5><hr />" +
+          "<input style='color:black;' id='text" +
+          data.id +
+          "' value='" +
+          data.value +
+          "' onchange='textchange(" +
+          data.id +
+          ")' />" +
+          "</div>"
+        );
+        break;
+
+      case UPDATE_TEXT_INPUT:
+        $("#text" + data.id).val(data.value);
+        break;
+
+      default:
+        console.error("Unknown type or event");
+        break;
+    }
+  };
+
+  websock.onmessage = handleEvent;
 }
 
 function numberchange(number) {
-    var val = $('#num' + data.id).val();
-    websock.send("nchange:" + number + ":" + val);
-    console.log(val);
+  var val = $("#num" + number).val();
+  websock.send("nvalue:" + val + ":" + number);
+  console.log(val);
 }
 
+function textchange(number) {
+  var val = $("#text" + number).val();
+  websock.send("tvalue:" + val + ":" + number);
+  console.log(val);
+}
 
 function buttonclick(number, isdown) {
-    if (isdown) websock.send("bdown:" + number);
-    else websock.send("bup:" + number);
+  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 FOR:
-            if (isdown) websock.send("pfdown:" + number);
-            else websock.send("pfup:" + number);
-            break;
-        case BACK:
-            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;
-
-    }
+  switch (type) {
+    case CENTER:
+      if (isdown) websock.send("pcdown:" + number);
+      else websock.send("pcup:" + number);
+      break;
+    case FOR:
+      if (isdown) websock.send("pfdown:" + number);
+      else websock.send("pfup:" + number);
+      break;
+    case BACK:
+      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);
+  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);
+  }
+}

examples/gui/data/js/slider.js

@@ -39,8 +39,8 @@ function rkmd_rangeSlider(selector) {
         $(this).addClass('is-active');
         var moveFu =
             function(e) {
-                var slider_new_width = e.pageX - slider_offset;
-
+                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);
                 }

examples/gui/data/js/slider.min.js

@@ -1 +1,10 @@
-function rkmd_rangeSlider(b){var f,e,c,a,g,d,h;f=$(b);e=f.width();c=f.offset().left;g=f;g.each(function(k,j){a=$(this);a.append(sliderDiscrete_tmplt());d=a.find('input[type="range"]');h=a.find(".slider");slider_fill=h.find(".slider-fill");slider_handle=h.find(".slider-handle");slider_label=h.find(".slider-label");var l=parseInt(d.val());slider_fill.css("width",l+"%");slider_handle.css("left",l+"%");slider_label.find("span").text(l)});f.on("mousedown touchstart",".slider-handle",function(o){if(o.button===2){return false}var m=$(this).parents(".rkmd-slider");var l=m.width();var i=m.offset().left;var k=m.find('input[type="range"]').is(":disabled");if(k===true){return false}$(this).addClass("is-active");var p=function(r){var q=r.pageX-i;if(q<=l&&!(q<"0")){slider_move(m,q,l,true)}};var n=function(q){$(this).off(j);m.find(".is-active").removeClass("is-active")};var j={mousemove:p,touchmove:p,mouseup:n,touchend:n};$(document).on(j)});f.on("mousedown touchstart",".slider",function(p){if(p.button===2){return false}var m=$(this).parents(".rkmd-slider");var l=m.width();var i=m.offset().left;var k=m.find('input[type="range"]').is(":disabled");if(k===true){return false}var o=p.pageX-i;if(o<=l&&!(o<"0")){slider_move(m,o,l,true)}var n=function(q){$(this).off(j)};var j={mouseup:n,touchend:n};$(document).on(j)})}function sliderDiscrete_tmplt(){var a='<div class="slider"><div class="slider-fill"></div><div class="slider-handle"><div class="slider-label"><span>0</span></div></div></div>';return a}function slider_move(g,a,h,e){var i=parseInt(Math.round(a/h*100));var b=g.find(".slider-fill");var c=g.find(".slider-handle");var f=g.find('input[type="range"]');b.css("width",i+"%");c.css({left:i+"%",transition:"none","-webkit-transition":"none","-moz-transition":"none"});f.val(i);if(g.find(".slider-handle span").text()!=i){g.find(".slider-handle span").text(i);var d=g.attr("id").substring(2);if(e){websock.send("slvalue:"+i+":"+d)}}};
+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;}
+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);});};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);}}

examples/gui/gui.ino

@@ -1,9 +1,14 @@
+#include <DNSServer.h>
 #include <ESPUI.h>
 
+const byte DNS_PORT = 53;
+IPAddress apIP(192, 168, 1, 1);
+DNSServer dnsServer;
+
 #if defined(ESP32)
-  #include <WiFi.h>
+#include <WiFi.h>
 #else
-  #include <ESP8266WiFi.h>
+#include <ESP8266WiFi.h>
 #endif
 
 const char *ssid = "ESPUI";
@@ -12,65 +17,67 @@ const char *password = "";
 long oldTime = 0;
 bool switchi = false;
 
-void slider(Control sender, int type) {
-  Serial.println(sender.value);
-}
+void numberCall(Control sender, int type) { Serial.println(sender.value); }
+
+void textCall(Control sender, int type) { Serial.println(sender.value); }
+
+void slider(Control sender, int type) { Serial.println(sender.value); }
 
 void buttonCallback(Control sender, int type) {
   switch (type) {
-  case B_DOWN:
-    Serial.println("Button DOWN");
-    break;
-  case B_UP:
-    Serial.println("Button UP");
-    break;
+    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(0, "Status: Start");
-    break;
-  case B_UP:
-    Serial.println("Status: Stop");
-    ESPUI.print(0, "Status: Stop");
-    break;
+    case B_DOWN:
+      Serial.println("Status: Start");
+      ESPUI.print(0, "Status: Start");
+      break;
+    case B_UP:
+      Serial.println("Status: Stop");
+      ESPUI.print(0, "Status: 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;
+    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);
@@ -78,12 +85,12 @@ void padExample(Control sender, int value) {
 
 void switchExample(Control sender, int value) {
   switch (value) {
-  case S_ACTIVE:
-    Serial.print("Active:");
-    break;
-  case S_INACTIVE:
-    Serial.print("Inactive");
-    break;
+    case S_ACTIVE:
+      Serial.print("Active:");
+      break;
+    case S_INACTIVE:
+      Serial.print("Inactive");
+      break;
   }
   Serial.print(" ");
   Serial.println(sender.id);
@@ -91,12 +98,12 @@ void switchExample(Control sender, int value) {
 
 void otherSwitchExample(Control sender, int value) {
   switch (value) {
-  case S_ACTIVE:
-    Serial.print("Active:");
-    break;
-  case S_INACTIVE:
-    Serial.print("Inactive");
-    break;
+    case S_ACTIVE:
+      Serial.print("Active:");
+      break;
+    case S_INACTIVE:
+      Serial.print("Inactive");
+      break;
   }
   Serial.print(" ");
   Serial.println(sender.id);
@@ -105,12 +112,14 @@ void otherSwitchExample(Control sender, int value) {
 void setup(void) {
   Serial.begin(115200);
   WiFi.mode(WIFI_AP);
-
+  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
+  /*
   #if defined(ESP32)
-  WiFi.setHostname(ssid);
+    WiFi.setHostname(ssid);
   #else
-  WiFi.hostname(ssid);
+    WiFi.hostname(ssid);
   #endif
+  */
 
   WiFi.softAP(ssid);
   // WiFi.softAP(ssid, password);
@@ -143,19 +152,34 @@ void setup(void) {
   ESPUI.switcher("Switch two", true, &otherSwitchExample, COLOR_NONE);
   ESPUI.slider("Slider one", &slider, COLOR_ALIZARIN, "30");
   ESPUI.slider("Slider two", &slider, COLOR_NONE, "100");
+  ESPUI.text("Text Test:", &textCall, COLOR_ALIZARIN, "a Text Field");
+  ESPUI.number("Numbertest", &numberCall, COLOR_ALIZARIN, 5, 0, 10);
 
   /*
      .begin loads and serves all files from PROGMEM directly.
-     If you want to serve the files from SPIFFS use .beginSPIFFS (.prepareFileSystem has to be run in an empty sketch before)
+     If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
+     (.prepareFileSystem has to be run in an empty sketch before)
    */
+
+  dnsServer.start(DNS_PORT, "*", apIP);
+
+  /*
+   * 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 ESPUI.begin("ESPUI Control", "myuser",
+   "mypassword");
+  */
   ESPUI.begin("ESPUI Control");
 }
 
 void loop(void) {
+  dnsServer.processNextRequest();
+
   if (millis() - oldTime > 5000) {
     ESPUI.print("Millis:", String(millis()));
     switchi = !switchi;
     ESPUI.updateSwitcher("Switch one", switchi);
     oldTime = millis();
   }
-}
+}

library.json

@@ -2,27 +2,28 @@
   "name": "ESPUI",
   "keywords": "espressif web interface iot control simple easy ui userinterface",
   "description": "ESP32 and ESP8266 Web Interface Library",
-  "repository":
-  {
+  "repository": {
     "type": "git",
     "url": "https://github.com/s00500/ESPUI.git"
   },
-  "authors":
-  [
+  "authors": [{
+    "name": "Lukas Bachschwell",
+    "email": "lukas@lbsfilm.at",
+    "url": "https://lbsfilm.at",
+    "maintainer": true
+  }],
+  "dependencies": [{
+      "name": "ESP Async WebServer",
+      "authors": "Hristo Gochkov",
+      "frameworks": "arduino"
+    },
     {
-      "name": "Lukas Bachschwell",
-      "email": "lukas@lbsfilm.at",
-      "url": "https://lbsfilm.at",
-      "maintainer": true
+      "name": "ArduinoJson",
+      "authors": "Benoit Blanchon",
+      "frameworks": "arduino"
     }
   ],
-  "dependencies":
-  {
-    "name": "ESP Async WebServer",
-    "authors": "Hristo Gochkov",
-    "frameworks": "arduino"
-  },
-  "version": "1.5.1å",
+  "version": "1.6.1",
   "frameworks": "arduino",
   "platforms": "*"
 }

library.properties

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

src/ESPUI.cpp

@@ -85,7 +85,7 @@ void ESPUIClass::list() {
 }
 
 void deleteFile(const char *path) {
-  if (debug) Serial.print(SPIFFS.exists(path));
+  if (DEBUG_ESPUI) Serial.print(SPIFFS.exists(path));
   if (!SPIFFS.exists(path)) {
     Serial.printf("File: %s does not exist, not deleting\n", path);
     return;
@@ -108,19 +108,19 @@ void writeFile(const char *path, const char *data) {
     Serial.println("Failed to open file for writing");
     return;
   }
-  #if defined(ESP32)
+#if defined(ESP32)
   if (file.print(data)) {
     Serial.println("File written");
   } else {
     Serial.println("Write failed");
   }
-  #else
+#else
   if (file.print(FPSTR(data))) {
     Serial.println("File written");
   } else {
     Serial.println("Write failed");
   }
-  #endif
+#endif
   file.close();
 }
 
@@ -169,7 +169,7 @@ void ESPUIClass::prepareFileSystem() {
   Serial.println("Done Initializing filesystem :-)");
 
 #if defined(ESP32)
-  if(debug) listDir("/", 1);
+  if (DEBUG_ESPUI) listDir("/", 1);
 #endif
 
   SPIFFS.end();
@@ -179,96 +179,101 @@ void ESPUIClass::prepareFileSystem() {
 void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,
                AwsEventType type, void *arg, uint8_t *data, size_t len) {
   switch (type) {
-  case WS_EVT_DISCONNECT: {
-    if (debug)
-      Serial.printf("Disconnected!\n");
-    break;
-  }
-  case WS_EVT_PONG: {
-    if (debug)
-      Serial.printf("Received PONG!\n");
-    break;
-  }
-  case WS_EVT_ERROR: {
-    if (debug)
-      Serial.printf("WebSocket Error!\n");
-    break;
-  }
-  case WS_EVT_CONNECT: {
-    if (debug) {
-      Serial.print("Connected: ");
-      Serial.println(client->id());
+    case WS_EVT_DISCONNECT: {
+      if (DEBUG_ESPUI) Serial.printf("Disconnected!\n");
+      break;
     }
+    case WS_EVT_PONG: {
+      if (DEBUG_ESPUI) Serial.printf("Received PONG!\n");
+      break;
+    }
+    case WS_EVT_ERROR: {
+      if (DEBUG_ESPUI) Serial.printf("WebSocket Error!\n");
+      break;
+    }
+    case WS_EVT_CONNECT: {
+      if (DEBUG_ESPUI) {
+        Serial.print("Connected: ");
+        Serial.println(client->id());
+      }
 
-    ESPUI.jsonDom(client);
-    if (debug) {
-      Serial.println("JSON Data Sent to Client!");
-    }
-  } break;
-  case WS_EVT_DATA: {
-    String msg = "";
-    for (size_t i = 0; i < len; i++) {
-      msg += (char)data[i];
-    }
+      ESPUI.jsonDom(client);
+      if (DEBUG_ESPUI) {
+        Serial.println("JSON Data Sent to Client!");
+      }
+    } break;
+    case WS_EVT_DATA: {
+      String msg = "";
+      for (size_t i = 0; i < len; i++) {
+        msg += (char)data[i];
+      }
 
-    int id = msg.substring(msg.lastIndexOf(':') + 1).toInt();
-    if (id >= ESPUI.cIndex) {
-      if (debug)
-        Serial.println("Maleformated id in websocket message");
-      return;
-    }
+      int id = msg.substring(msg.lastIndexOf(':') + 1).toInt();
+      if (id >= ESPUI.cIndex) {
+        if (DEBUG_ESPUI) Serial.println("Maleformated id in websocket message");
+        return;
+      }
 
-    Control *c = ESPUI.controls[msg.substring(msg.lastIndexOf(':') + 1).toInt()];
+      Control *c =
+          ESPUI.controls[msg.substring(msg.lastIndexOf(':') + 1).toInt()];
 
-    if (msg.startsWith("bdown:")) {
-      c->callback(*c, B_DOWN);
-    } else if (msg.startsWith("bup:")) {
-      c->callback(*c, B_UP);
-    } else if (msg.startsWith("pfdown:")) {
-      c->callback(*c, P_FOR_DOWN);
-    } else if (msg.startsWith("pfup:")) {
-      c->callback(*c, P_FOR_UP);
-    } else if (msg.startsWith("pldown:")) {
-      c->callback(*c, P_LEFT_DOWN);
-    } else if (msg.startsWith("plup:")) {
-      c->callback(*c, P_LEFT_UP);
-    } else if (msg.startsWith("prdown:")) {
-      c->callback(*c, P_RIGHT_DOWN);
-    } else if (msg.startsWith("prup:")) {
-      c->callback(*c, P_RIGHT_UP);
-    } else if (msg.startsWith("pbdown:")) {
-      c->callback(*c, P_BACK_DOWN);
-    } else if (msg.startsWith("pbup:")) {
-      c->callback(*c, P_BACK_UP);
-    } else if (msg.startsWith("pcdown:")) {
-      c->callback(*c, P_CENTER_DOWN);
-    } else if (msg.startsWith("pcup:")) {
-      c->callback(*c, P_CENTER_UP);
-    } else if (msg.startsWith("sactive:")) {
-      ESPUI.updateSwitcher(c->id, true);
-      c->callback(*c, S_ACTIVE);
-    } else if (msg.startsWith("sinactive:")) {
-      ESPUI.updateSwitcher(c->id, false);
-      c->callback(*c, S_INACTIVE);
-    } else if (msg.startsWith("slvalue:")) {
-      int value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':')).toInt();
-      ESPUI.updateSlider(c->id, value, client->id());
-      c->callback(*c, SL_VALUE);
-    } else if (msg.startsWith("nvalue:")) {
-      int value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':')).toInt();
-      ESPUI.updateNumber(c->id, value, client->id());
-      c->callback(*c, N_VALUE);
-    }
-  }
-  break;
-  default:
-    break;
+      if (msg.startsWith("bdown:")) {
+        c->callback(*c, B_DOWN);
+      } else if (msg.startsWith("bup:")) {
+        c->callback(*c, B_UP);
+      } else if (msg.startsWith("pfdown:")) {
+        c->callback(*c, P_FOR_DOWN);
+      } else if (msg.startsWith("pfup:")) {
+        c->callback(*c, P_FOR_UP);
+      } else if (msg.startsWith("pldown:")) {
+        c->callback(*c, P_LEFT_DOWN);
+      } else if (msg.startsWith("plup:")) {
+        c->callback(*c, P_LEFT_UP);
+      } else if (msg.startsWith("prdown:")) {
+        c->callback(*c, P_RIGHT_DOWN);
+      } else if (msg.startsWith("prup:")) {
+        c->callback(*c, P_RIGHT_UP);
+      } else if (msg.startsWith("pbdown:")) {
+        c->callback(*c, P_BACK_DOWN);
+      } else if (msg.startsWith("pbup:")) {
+        c->callback(*c, P_BACK_UP);
+      } else if (msg.startsWith("pcdown:")) {
+        c->callback(*c, P_CENTER_DOWN);
+      } else if (msg.startsWith("pcup:")) {
+        c->callback(*c, P_CENTER_UP);
+      } else if (msg.startsWith("sactive:")) {
+        ESPUI.updateSwitcher(c->id, true);
+        c->callback(*c, S_ACTIVE);
+      } else if (msg.startsWith("sinactive:")) {
+        ESPUI.updateSwitcher(c->id, false);
+        c->callback(*c, S_INACTIVE);
+      } else if (msg.startsWith("slvalue:")) {
+        int value =
+            msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':')).toInt();
+        ESPUI.updateSlider(c->id, value, client->id());
+        c->callback(*c, SL_VALUE);
+      } else if (msg.startsWith("nvalue:")) {
+        int value =
+            msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':')).toInt();
+        ESPUI.updateNumber(c->id, value, client->id());
+        c->callback(*c, N_VALUE);
+      } else if (msg.startsWith("tvalue:")) {
+        String value =
+            msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':'));
+        ESPUI.updateText(c->id, value, client->id());
+        c->callback(*c, T_VALUE);
+      }
+    } break;
+    default:
+      break;
   }
 }
 
 int ESPUIClass::label(const char *label, int color, String value) {
   if (labelExists(label)) {
-    if (debug) Serial.println("UI ERROR: Element " + String(label) + " exists, skipping creating element!");
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element " + String(label) +
+                     " exists, skipping creating element!");
     return -1;
   }
 
@@ -277,7 +282,7 @@ int ESPUIClass::label(const char *label, int color, String value) {
   newL->label = label;
   newL->color = color;
   if (value != "")
-    newL->value = value; // Init with labeltext
+    newL->value = value;  // Init with labeltext
   else
     newL->value = String(label);
   newL->callback = NULL;
@@ -289,7 +294,9 @@ int ESPUIClass::label(const char *label, int color, String value) {
 
 int ESPUIClass::graph(const char *label, int color) {
   if (labelExists(label)) {
-    if (debug) Serial.println("UI ERROR: Element " + String(label) + " exists, skipping creating element!");
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element " + String(label) +
+                     " exists, skipping creating element!");
     return -1;
   }
 
@@ -304,9 +311,10 @@ int ESPUIClass::graph(const char *label, int color) {
 }
 
 // TODO: this still needs a range setting
-int ESPUIClass::slider(const char *label, void (*callBack)(Control, int), int color, String value) {
+int ESPUIClass::slider(const char *label, void (*callBack)(Control, int),
+                       int color, String value) {
   if (labelExists(label)) {
-    if (debug)
+    if (DEBUG_ESPUI)
       Serial.println("UI ERROR: Element " + String(label) +
                      " exists, skipping creating element!");
     return -1;
@@ -319,7 +327,7 @@ int ESPUIClass::slider(const char *label, void (*callBack)(Control, int), int co
   if (value != "")
     newSL->value = value;
   else
-    newSL->value = ""; // TODO: init with half value
+    newSL->value = "";  // TODO: init with half value
   newSL->callback = callBack;
   newSL->id = cIndex;
   controls[cIndex] = newSL;
@@ -330,7 +338,7 @@ int ESPUIClass::slider(const char *label, void (*callBack)(Control, int), int co
 int ESPUIClass::button(const char *label, void (*callBack)(Control, int),
                        int color, String value) {
   if (labelExists(label)) {
-    if (debug)
+    if (DEBUG_ESPUI)
       Serial.println("UI ERROR: Element " + String(label) +
                      " exists, skipping creating element!");
     return -1;
@@ -342,7 +350,7 @@ int ESPUIClass::button(const char *label, void (*callBack)(Control, int),
   newB->color = color;
 
   if (value != "")
-    newB->value = value; // Init with labeltext
+    newB->value = value;  // Init with labeltext
   else
     newB->value = String(label);
 
@@ -353,9 +361,10 @@ int ESPUIClass::button(const char *label, void (*callBack)(Control, int),
   return cIndex - 1;
 }
 
-int ESPUIClass::switcher(const char *label, bool startState, void (*callBack)(Control, int), int color) {
+int ESPUIClass::switcher(const char *label, bool startState,
+                         void (*callBack)(Control, int), int color) {
   if (labelExists(label)) {
-    if (debug)
+    if (DEBUG_ESPUI)
       Serial.println("UI ERROR: Element " + String(label) +
                      " exists, skipping creating element!");
     return -1;
@@ -376,7 +385,7 @@ int ESPUIClass::switcher(const char *label, bool startState, void (*callBack)(Co
 int ESPUIClass::pad(const char *label, bool center,
                     void (*callBack)(Control, int), int color) {
   if (labelExists(label)) {
-    if (debug)
+    if (DEBUG_ESPUI)
       Serial.println("UI ERROR: Element " + String(label) +
                      " exists, skipping creating element!");
     return -1;
@@ -397,10 +406,12 @@ int ESPUIClass::pad(const char *label, bool center,
 }
 
 // TODO: min and max need to be saved, they also need to be sent to the frontend
-int ESPUIClass::number(const char *label, void (*callBack)(Control, int), int color, int number, int min, int max) {
+int ESPUIClass::number(const char *label, void (*callBack)(Control, int),
+                       int color, int number, int min, int max) {
   if (labelExists(label)) {
-    if (debug)
-      Serial.println("UI ERROR: Element " + String(label) + " exists, skipping creating element!");
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element " + String(label) +
+                     " exists, skipping creating element!");
     return -1;
   }
 
@@ -416,6 +427,27 @@ int ESPUIClass::number(const char *label, void (*callBack)(Control, int), int co
   return cIndex - 1;
 }
 
+int ESPUIClass::text(const char *label, void (*callBack)(Control, int),
+                     int color, String value) {
+  if (labelExists(label)) {
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element " + String(label) +
+                     " exists, skipping creating element!");
+    return -1;
+  }
+
+  Control *newT = new Control();
+  newT->type = UI_TEXT_INPUT;
+  newT->label = label;
+  newT->color = color;
+  newT->value = value;
+  newT->callback = callBack;
+  newT->id = cIndex;
+  controls[cIndex] = newT;
+  cIndex++;
+  return cIndex - 1;
+}
+
 void ESPUIClass::print(int id, String value) {
   if (id < cIndex && controls[id]->type == UI_LABEL) {
     controls[id]->value = value;
@@ -428,14 +460,14 @@ void ESPUIClass::print(int id, String value) {
     root.printTo(json);
     this->ws->textAll(json);
   } else {
-    if (debug)
+    if (DEBUG_ESPUI)
       Serial.println(String("Error: ") + String(id) + String(" is no label"));
   }
 }
 
 void ESPUIClass::print(String label, String value) {
   if (!labelExists(label)) {
-    if (debug)
+    if (DEBUG_ESPUI)
       Serial.println("UI ERROR: Element does not " + String(label) +
                      " exist, cannot update!");
     return;
@@ -455,11 +487,21 @@ void ESPUIClass::updateSlider(int id, int nValue, int clientId) {
     root.printTo(json);
     textThem(json, clientId);
   } else {
-    if (debug)
+    if (DEBUG_ESPUI)
       Serial.println(String("Error: ") + String(id) + String(" is no slider"));
   }
 }
 
+void ESPUIClass::updateSlider(String label, int nValue, int clientId) {
+  if (!labelExists(label)) {
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element does not " + String(label) +
+                     " exist, cannot update!");
+    return;
+  }
+  updateSlider(getIdByLabel(label), nValue, clientId);
+}
+
 void ESPUIClass::updateSwitcher(int id, bool nValue, int clientId) {
   if (id < cIndex && controls[id]->type == UI_SWITCHER) {
     controls[id]->value = nValue ? 1 : 0;
@@ -472,14 +514,17 @@ void ESPUIClass::updateSwitcher(int id, bool nValue, int clientId) {
     root.printTo(json);
     textThem(json, clientId);
   } else {
-    if (debug) Serial.println(String("Error: ") + String(id) + String(" is no switcher"));
+    if (DEBUG_ESPUI)
+      Serial.println(String("Error: ") + String(id) +
+                     String(" is no switcher"));
   }
 }
 
 void ESPUIClass::updateSwitcher(String label, bool nValue, int clientId) {
   if (!labelExists(label)) {
-    if (debug)
-      Serial.println("UI ERROR: Element does not " + String(label) + " exist, cannot update!");
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element does not " + String(label) +
+                     " exist, cannot update!");
     return;
   }
   updateSwitcher(getIdByLabel(label), nValue, clientId);
@@ -497,18 +542,48 @@ void ESPUIClass::updateNumber(int id, int number, int clientId) {
     root.printTo(json);
     textThem(json, clientId);
   } else {
-    if (debug) Serial.println(String("Error: ") + String(id) + String(" is no number"));
+    if (DEBUG_ESPUI)
+      Serial.println(String("Error: ") + String(id) + String(" is no number"));
   }
 }
 
 void ESPUIClass::updateNumber(String label, int number, int clientId) {
   if (!labelExists(label)) {
-    if (debug) Serial.println("UI ERROR: Element does not " + String(label) + " exist, cannot update!");
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element does not " + String(label) +
+                     " exist, cannot update!");
     return;
   }
   updateNumber(getIdByLabel(label), number, clientId);
 }
 
+void ESPUIClass::updateText(int id, String text, int clientId) {
+  if (id < cIndex && controls[id]->type == UI_TEXT_INPUT) {
+    controls[id]->value = text;
+    String json;
+    StaticJsonBuffer<200> jsonBuffer;
+    JsonObject &root = jsonBuffer.createObject();
+    root["type"] = UPDATE_TEXT_INPUT;
+    root["value"] = String(text);
+    root["id"] = String(id);
+    root.printTo(json);
+    textThem(json, clientId);
+  } else {
+    if (DEBUG_ESPUI)
+      Serial.println(String("Error: ") + String(id) + String(" is no number"));
+  }
+}
+
+void ESPUIClass::updateText(String label, String text, int clientId) {
+  if (!labelExists(label)) {
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element does not " + String(label) +
+                     " exist, cannot update!");
+    return;
+  }
+  updateText(getIdByLabel(label), text, clientId);
+}
+
 // This is a hacky workaround because ESPAsyncWebServer does not have a function
 // like this and it's clients array is private
 void ESPUIClass::textThem(String text, int clientId) {
@@ -526,115 +601,189 @@ void ESPUIClass::textThem(String text, int clientId) {
 
 int ESPUIClass::getIdByLabel(String label) {
   for (int i = 0; i < cIndex; i++) {
-    if (String(controls[i]->label) == label)
-      return i;
+    if (String(controls[i]->label) == label) return i;
   }
-  return -1; // failed, nonexistant
+  return -1;  // failed, nonexistant
 }
 
 bool ESPUIClass::labelExists(String label) {
   for (int i = 0; i < cIndex; i++) {
-    if (String(controls[i]->label) == label)
-      return true;
+    if (String(controls[i]->label) == label) return true;
   }
   return false;
 }
 
-// Convert & Transfer Arduino elements to JSON elements
+/*
+Convert & Transfer Arduino elements to JSON elements
+Initially this function used to send the control element data individually.
+Due to a change in the ESPAsyncWebserver library this had top be changed to be
+sent as one blob at the beginning. Therefore a new type is used as well
+*/
 void ESPUIClass::jsonDom(AsyncWebSocketClient *client) {
+  String json;
+  DynamicJsonBuffer jsonBuffer(2000);
+  JsonObject &root = jsonBuffer.createObject();
+  root["type"] = UI_INITIAL_GUI;
+  JsonArray &items = jsonBuffer.createArray();
+
   for (int i = -1; i < cIndex; i++) {
-    String json;
-    StaticJsonBuffer<200> jsonBuffer;
-    JsonObject &root = jsonBuffer.createObject();
+    JsonObject &item = jsonBuffer.createObject();
+
     if (i == -1) {
-      root["type"] = UI_TITEL;
-      root["label"] = String(ui_title);
+      item["type"] = UI_TITEL;
+      item["label"] = String(ui_title);
     } else {
-      root["type"] = controls[i]->type;
-      root["label"] = String(controls[i]->label);
-      root["value"] = String(controls[i]->value);
-      root["color"] = String(controls[i]->color);
-      root["id"] = String(i);
+      item["type"] = controls[i]->type;
+      item["label"] = String(controls[i]->label);
+      item["value"] = String(controls[i]->value);
+      item["color"] = String(controls[i]->color);
+      item["id"] = String(i);
     }
-    root.printTo(json);
-    client->text(json);
+    items.add(item);
   }
+
+  // Send as one big bunch
+  root["controls"] = items;
+  root.printTo(json);
+  client->text(json);
 }
 
 void ESPUIClass::beginSPIFFS(const char *_title) {
+  begin(_title, NULL, NULL);
+  basicAuth = false;
+}
 
+void ESPUIClass::beginSPIFFS(const char *_title, const char *username,
+                             const char *password) {
   ui_title = _title;
   server = new AsyncWebServer(80);
   ws = new AsyncWebSocket("/ws");
 
   if (!SPIFFS.begin()) {
-    Serial.println("SPIFFS Mount Failed, PLEASE CHECK THE README ON HOW TO "
-                   "PREPARE YOUR ESP!!!!!!!");
+    Serial.println(
+        "SPIFFS Mount Failed, PLEASE CHECK THE README ON HOW TO "
+        "PREPARE YOUR ESP!!!!!!!");
     return;
   }
   listDir("/", 1);
 
   if (!SPIFFS.exists("/index.htm")) {
-    Serial.println("Please read the README!!!!!!!, Make sure to "
-                   "ESPUI.prepareFileSystem() once in an empty sketch");
+    Serial.println(
+        "Please read the README!!!!!!!, Make sure to "
+        "ESPUI.prepareFileSystem() once in an empty sketch");
     return;
   }
 
   ws->onEvent(onWsEvent);
   server->addHandler(ws);
-  server->serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm");
+
+  if (basicAuth && username != NULL && password != NULL) {
+    basicAuthPassword = password;
+    basicAuthUsername = username;
+    basicAuth = true;
+    if (WS_AUTHENTICATION)
+      ws->setAuthentication(this->basicAuthUsername, this->basicAuthPassword);
+    server->serveStatic("/", SPIFFS, "/")
+        .setDefaultFile("index.htm")
+        .setAuthentication(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword);
+
+  } else if (basicAuth) {
+    Serial.println(
+        "Could not enable BasicAuth: Username or password are not set");
+  } else {
+    server->serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm");
+  }
 
   // Heap for general Servertest
   server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) {
-    request->send(200, "text/plain", String(ESP.getFreeHeap()) + " In SPIFFSmode");
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
+    request->send(200, "text/plain",
+                  String(ESP.getFreeHeap()) + " In SPIFFSmode");
   });
 
   server->onNotFound(
-    [](AsyncWebServerRequest *request) {
-    request->send(404);
-  });
-
-  server->on("/zepto.js", HTTP_GET, [](AsyncWebServerRequest *request) {
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
-    response->addHeader("Content-Encoding", "gzip");
-    request->send(response);
-  });
+      [](AsyncWebServerRequest *request) { request->send(404); });
 
   server->begin();
-  if (debug)
-    Serial.println("UI Initialized");
+  if (DEBUG_ESPUI) Serial.println("UI Initialized");
 }
 
 void ESPUIClass::begin(const char *_title) {
+  begin(_title, NULL, NULL);
+  basicAuth = false;
+}
+
+void ESPUIClass::begin(const char *_title, const char *username,
+                       const char *password) {
+  if (basicAuth && username != NULL && password != NULL) {
+    basicAuthPassword = password;
+    basicAuthUsername = username;
+    basicAuth = true;
+  } else if (basicAuth) {
+    Serial.println(
+        "Could not enable BasicAuth: Username or password are not set");
+  }
 
   ui_title = _title;
+
   server = new AsyncWebServer(80);
   ws = new AsyncWebSocket("/ws");
 
   ws->onEvent(onWsEvent);
   server->addHandler(ws);
 
+  if (basicAuth && username != NULL && password != NULL) {
+    basicAuthPassword = password;
+    basicAuthUsername = username;
+    basicAuth = true;
+    if (WS_AUTHENTICATION)
+      ws->setAuthentication(this->basicAuthUsername, this->basicAuthPassword);
+
+  } else if (basicAuth) {
+    Serial.println(
+        "Could not enable BasicAuth: Username or password are not set");
+  }
+
   server->on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", HTML_INDEX);
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
+    AsyncWebServerResponse *response =
+        request->beginResponse_P(200, "text/html", HTML_INDEX);
     request->send(response);
   });
 
   // Javascript files
 
   server->on("/js/zepto.min.js", HTTP_GET, [](AsyncWebServerRequest *request) {
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
+    AsyncWebServerResponse *response = request->beginResponse_P(
+        200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
     response->addHeader("Content-Encoding", "gzip");
     request->send(response);
   });
 
   server->on("/js/controls.js", HTTP_GET, [](AsyncWebServerRequest *request) {
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_CONTROLS_GZIP, sizeof(JS_CONTROLS_GZIP));
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
+    AsyncWebServerResponse *response =
+        request->beginResponse_P(200, "application/javascript",
+                                 JS_CONTROLS_GZIP, sizeof(JS_CONTROLS_GZIP));
     response->addHeader("Content-Encoding", "gzip");
     request->send(response);
   });
 
   server->on("/js/slider.js", HTTP_GET, [](AsyncWebServerRequest *request) {
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_SLIDER_GZIP, sizeof(JS_SLIDER_GZIP));
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
+    AsyncWebServerResponse *response = request->beginResponse_P(
+        200, "application/javascript", JS_SLIDER_GZIP, sizeof(JS_SLIDER_GZIP));
     response->addHeader("Content-Encoding", "gzip");
     request->send(response);
   });
@@ -642,30 +791,40 @@ void ESPUIClass::begin(const char *_title) {
   // Stylesheets
 
   server->on("/css/style.css", HTTP_GET, [](AsyncWebServerRequest *request) {
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "text/css", CSS_STYLE_GZIP, sizeof(CSS_STYLE_GZIP));
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
+    AsyncWebServerResponse *response = request->beginResponse_P(
+        200, "text/css", CSS_STYLE_GZIP, sizeof(CSS_STYLE_GZIP));
     response->addHeader("Content-Encoding", "gzip");
     request->send(response);
   });
 
-  server->on("/css/normalize.css", HTTP_GET, [](AsyncWebServerRequest *request) {
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "text/css", CSS_NORMALIZE_GZIP, sizeof(CSS_NORMALIZE_GZIP));
-    response->addHeader("Content-Encoding", "gzip");
-    request->send(response);
-  });
+  server->on(
+      "/css/normalize.css", HTTP_GET, [](AsyncWebServerRequest *request) {
+        if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                      ESPUI.basicAuthPassword))
+          return request->requestAuthentication();
+        AsyncWebServerResponse *response = request->beginResponse_P(
+            200, "text/css", CSS_NORMALIZE_GZIP, sizeof(CSS_NORMALIZE_GZIP));
+        response->addHeader("Content-Encoding", "gzip");
+        request->send(response);
+      });
 
   // Heap for general Servertest
   server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) {
-    request->send(200, "text/plain", String(ESP.getFreeHeap())+ " In Memorymode");
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
+    request->send(200, "text/plain",
+                  String(ESP.getFreeHeap()) + " In Memorymode");
   });
 
   server->onNotFound(
-    [](AsyncWebServerRequest *request) {
-    request->send(404);
-  });
+      [](AsyncWebServerRequest *request) { request->send(404); });
 
   server->begin();
-  if (debug)
-    Serial.println("UI Initialized");
+  if (DEBUG_ESPUI) Serial.println("UI Initialized");
 }
 
 ESPUIClass ESPUI;

src/ESPUI.h

@@ -1,7 +1,8 @@
 #ifndef ESPUI_h
 #define ESPUI_h
 
-#define debug true
+#define DEBUG_ESPUI true
+#define WS_AUTHENTICATION false
 
 #include "Arduino.h"
 #include "ArduinoJson.h"
@@ -10,20 +11,20 @@
 
 #if defined(ESP32)
 
-#include "SPIFFS.h"
-#include "WiFi.h"
 #include <AsyncTCP.h>
 #include <ESPAsyncWebServer.h>
+#include "SPIFFS.h"
+#include "WiFi.h"
 
 #else
 
+#include <ArduinoOTA.h>
 #include <ESP8266WiFi.h>
 #include <ESP8266mDNS.h>
-#include <ArduinoOTA.h>
-#include <FS.h>
-#include <Hash.h>
 #include <ESPAsyncTCP.h>
 #include <ESPAsyncWebServer.h>
+#include <FS.h>
+#include <Hash.h>
 #include <SPIFFSEditor.h>
 
 #define FILE_WRITE "w"
@@ -32,7 +33,7 @@
 
 typedef struct Control {
   unsigned int type;
-  unsigned int id; // just mirroring the id here for practical reasons
+  unsigned int id;  // just mirroring the id here for practical reasons
   const char *label;
   void (*callback)(Control, int);
   String value;
@@ -40,6 +41,7 @@ typedef struct Control {
 } Control;
 
 // Message Types (and control types)
+#define UI_INITIAL_GUI 100
 #define UI_TITEL 0
 
 #define UI_LABEL 1
@@ -53,7 +55,6 @@ typedef struct Control {
 #define UI_PAD 4
 #define UI_CPAD 5
 
-
 #define UI_SLIDER 8
 #define UPDATE_SLIDER 9
 
@@ -67,7 +68,6 @@ typedef struct Control {
 #define CLEAR_GRAPH 15
 #define ADD_GRAPH_POINT 16
 
-
 // Values
 #define B_DOWN -1
 #define B_UP 1
@@ -88,6 +88,7 @@ typedef struct Control {
 
 #define SL_VALUE 8
 #define N_VALUE 9
+#define T_VALUE 10
 
 // Colors
 #define COLOR_TURQUOISE 0
@@ -99,60 +100,76 @@ typedef struct Control {
 #define COLOR_ALIZARIN 6
 #define COLOR_NONE 6
 
-
 class ESPUIClass {
+ public:
+  void begin(const char *_title);  // Setup servers and page in Memorymode
+  void begin(const char *_title, const char *username, const char *password);
 
-public:
-void begin(const char *_title);   // Setup servers and page in Memorymode
-void beginSPIFFS(const char *_title); // Setup servers and page in SPIFFSmode
+  void beginSPIFFS(const char *_title);  // Setup servers and page in SPIFFSmode
+  void beginSPIFFS(const char *_title, const char *username,
+                   const char *password);
 
-void prepareFileSystem();   // Initially preps the filesystem and loads a lot of stuff into SPIFFS
-void list();
-// Creating Elements
+  void prepareFileSystem();  // Initially preps the filesystem and loads a lot
+                             // of stuff into SPIFFS
+  void list();
+  // Creating Elements
 
-int button(const char *label, void (*callBack)(Control, int), int color, String value = "");   // Create Event Button
-int switcher(const char *label, bool startState, void (*callBack)(Control, int), int color);   // Create Toggle Button
-int pad(const char *label, bool centerButton, void (*callBack)(Control, int), int color);  // Create Pad Control
-int slider(const char *label, void (*callBack)(Control, int), int color, String value);    // Create Slider Control
-int number(const char *label, void (*callBack)(Control, int), int color, int number, int min, int max);    // Create a Number Input Control
+  int button(const char *label, void (*callBack)(Control, int), int color,
+             String value = "");  // Create Event Button
+  int switcher(const char *label, bool startState,
+               void (*callBack)(Control, int),
+               int color);  // Create Toggle Button
+  int pad(const char *label, bool centerButton, void (*callBack)(Control, int),
+          int color);  // Create Pad Control
+  int slider(const char *label, void (*callBack)(Control, int), int color,
+             String value);  // Create Slider Control
+  int number(const char *label, void (*callBack)(Control, int), int color,
+             int number, int min, int max);  // Create a Number Input Control
+  int text(const char *label, void (*callBack)(Control, int), int color,
+           String value = "");  // Create a Text Input Control
 
-// Output only
-int label(const char *label, int color, String value = ""); // Create Label
-int graph(const char *label, int color); // Create Graph display
+  // Output only
+  int label(const char *label, int color, String value = "");  // Create Label
+  int graph(const char *label, int color);  // Create Graph display
 
-// Update Elements
-void print(int id, String value);
-void print(String label, String value);
+  // Update Elements
+  void print(int id, String value);
+  void print(String label, String value);
 
-void updateSwitcher(int id, bool nValue, int clientId = -1);
-void updateSwitcher(String label, bool nValue, int clientId = -1);
+  void updateSwitcher(int id, bool nValue, int clientId = -1);
+  void updateSwitcher(String label, bool nValue, int clientId = -1);
 
-void updateSlider(int id, int nValue, int clientId = -1);
-void updateSlider(String label, int nValue, int clientId = -1);
+  void updateSlider(int id, int nValue, int clientId = -1);
+  void updateSlider(String label, int nValue, int clientId = -1);
 
-void updateNumber(int id, int nValue, int clientId = -1);
-void updateNumber(String label, int nValue, int clientId = -1);
+  void updateNumber(int id, int nValue, int clientId = -1);
+  void updateNumber(String label, int nValue, int clientId = -1);
 
-void clearGraph(int id, int clientId = -1);
-void clearGraph(String label, int clientId = -1);
+  void updateText(int id, String nValue, int clientId = -1);
+  void updateText(String label, String nValue, int clientId = -1);
 
-void addGraphPoint(int id, int nValue, int clientId = -1);
-void addGraphPoint(String label, int nValue, int clientId = -1);
+  void clearGraph(int id, int clientId = -1);
+  void clearGraph(String label, int clientId = -1);
 
+  void addGraphPoint(int id, int nValue, int clientId = -1);
+  void addGraphPoint(String label, int nValue, int clientId = -1);
 
-void textThem(String text, int clientId);
+  void textThem(String text, int clientId);
 
-// Variables ---
-const char *ui_title = "ESPUI";   // Store UI Title and Header Name
-int cIndex = 0;                   // Control index
-Control *controls[25];
-void jsonDom(AsyncWebSocketClient *client);
-int getIdByLabel(String label);
-bool labelExists(String label);
+  // Variables ---
+  const char *ui_title = "ESPUI";  // Store UI Title and Header Name
+  int cIndex = 0;                  // Control index
+  Control *controls[25];
+  void jsonDom(AsyncWebSocketClient *client);
+  int getIdByLabel(String label);
+  bool labelExists(String label);
 
-private:
-AsyncWebServer *server;
-AsyncWebSocket *ws;
+ private:
+  const char *basicAuthUsername;
+  const char *basicAuthPassword;
+  bool basicAuth = true;
+  AsyncWebServer *server;
+  AsyncWebSocket *ws;
 };
 
 extern ESPUIClass ESPUI;

src/dataIndexHTML.h

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

src/dataNormalizeCSS.h

@@ -1,5 +1,5 @@
 const char CSS_NORMALIZE[] PROGMEM = R"=====(
-html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.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 #c0c0c0;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}
+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[865] PROGMEM = { 31,139,8,0,0,0,0,0,0,3,149,84,93,111,219,58,12,125,223,175,8,90,12,184,3,228,194,237,221,214,65,198,126,73,144,7,90,162,109,45,250,130,36,167,201,12,255,247,81,182,227,36,93,122,129,139,60,196,166,37,242,240,156,67,118,201,232,161,113,54,21,13,24,165,79,60,130,141,69,196,160,154,170,48,177,72,120,76,69,84,191,177,0,249,171,143,137,63,151,229,231,170,120,195,122,175,210,253,175,99,237,228,105,48,16,90,101,121,57,66,72,74,104,100,16,149,68,38,49,129,210,145,53,170,21,224,147,114,54,63,246,1,89,227,92,194,192,58,4,153,255,218,224,122,207,12,40,203,12,218,158,89,56,176,136,98,186,17,123,67,233,79,131,84,209,107,56,241,90,59,177,31,161,151,202,49,1,246,0,145,249,224,218,128,49,178,3,85,117,235,73,101,181,178,88,76,23,170,3,102,104,160,11,208,170,181,188,134,136,249,235,156,136,91,151,254,217,10,98,38,56,29,119,95,214,20,214,89,172,58,84,109,151,168,187,109,167,164,68,187,99,9,13,125,78,120,115,110,132,161,6,177,207,189,88,89,8,167,93,224,41,16,195,30,2,218,52,2,7,234,232,64,228,240,206,17,156,193,245,41,67,200,180,213,117,216,38,149,52,238,134,218,5,226,164,168,93,74,206,240,103,127,220,72,122,68,57,214,44,18,60,219,206,10,190,205,160,106,167,229,40,27,59,7,99,58,105,228,42,81,143,98,236,158,151,32,73,198,95,208,84,139,74,79,223,95,209,108,202,145,94,247,87,136,249,99,211,148,213,12,251,177,44,203,49,26,208,250,42,197,15,82,59,246,132,162,247,87,209,215,111,159,171,137,230,51,75,149,119,81,101,229,120,64,226,136,26,254,144,251,156,41,57,207,139,242,233,27,154,156,124,88,218,166,200,75,14,41,211,46,132,16,75,241,208,78,66,241,64,238,249,50,100,14,27,237,222,248,172,202,56,91,235,236,197,103,234,241,107,233,143,99,23,134,194,184,223,68,232,49,35,86,182,229,89,104,82,36,135,170,15,194,171,230,158,82,174,149,160,79,110,20,142,172,189,175,37,217,14,89,4,227,111,70,202,56,235,72,113,129,108,125,170,46,108,17,170,177,238,169,69,203,148,245,125,98,206,167,217,252,68,9,25,158,229,33,35,187,192,48,11,161,108,71,211,153,166,12,235,203,58,109,115,166,11,188,131,138,170,214,120,174,48,167,28,166,185,157,140,216,184,96,102,171,46,39,58,90,8,155,9,200,54,157,60,254,124,152,227,15,59,118,29,164,209,194,244,46,70,90,25,69,193,225,188,29,192,123,4,42,34,144,207,73,42,209,135,72,45,120,167,136,214,176,148,220,210,196,0,97,148,187,235,226,107,112,88,46,73,108,160,215,105,185,196,249,164,96,227,68,31,11,101,45,173,140,233,222,223,241,213,44,149,7,41,179,168,229,56,29,29,174,61,106,137,7,208,227,117,63,162,67,177,39,225,223,183,14,180,29,30,242,80,174,46,89,231,243,248,190,198,114,199,246,166,198,240,176,35,116,11,55,19,180,34,122,101,139,107,241,63,60,79,139,225,246,252,176,0,159,252,119,35,3,113,46,186,251,50,100,221,27,133,90,86,255,229,255,243,197,255,53,30,119,49,92,240,207,145,66,100,24,250,94,203,31,94,145,40,92,128,188,61,238,117,52,89,119,106,137,12,121,150,58,111,200,232,180,146,155,71,81,230,223,58,31,155,23,127,209,232,233,95,218,39,155,167,239,47,211,223,107,94,46,26,91,180,242,158,101,214,41,188,157,252,243,176,254,189,129,83,182,239,121,117,211,232,106,240,17,249,249,161,90,62,228,109,176,20,144,44,117,195,165,224,167,63,69,20,17,138,155,7,0,0 };
+const uint8_t CSS_NORMALIZE_GZIP[861] PROGMEM = { 31,139,8,0,56,43,252,91,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,6 +1,14 @@
 const char JS_SLIDER[] PROGMEM = R"=====(
-function rkmd_rangeSlider(b){var f,e,c,a,g,d,h;f=$(b);e=f.width();c=f.offset().left;g=f;g.each(function(k,j){a=$(this);a.append(sliderDiscrete_tmplt());d=a.find('input[type="range"]');h=a.find(".slider");slider_fill=h.find(".slider-fill");slider_handle=h.find(".slider-handle");slider_label=h.find(".slider-label");var l=parseInt(d.val());slider_fill.css("width",l+"%");slider_handle.css("left",l+"%");slider_label.find("span").text(l)});f.on("mousedown touchstart",".slider-handle",function(o){if(o.button===2){return false}var m=$(this).parents(".rkmd-slider");var l=m.width();var i=m.offset().left;var k=m.find('input[type="range"]').is(":disabled");if(k===true){return false}$(this).addClass("is-active");var p=function(r){var q=r.pageX-i;if(q<=l&&!(q<"0")){slider_move(m,q,l,true)}};var n=function(q){$(this).off(j);m.find(".is-active").removeClass("is-active")};var j={mousemove:p,touchmove:p,mouseup:n,touchend:n};$(document).on(j)});f.on("mousedown touchstart",".slider",function(p){if(p.button===2){return false}var m=$(this).parents(".rkmd-slider");var l=m.width();var i=m.offset().left;var k=m.find('input[type="range"]').is(":disabled");if(k===true){return false}var o=p.pageX-i;if(o<=l&&!(o<"0")){slider_move(m,o,l,true)}var n=function(q){$(this).off(j)};var j={mouseup:n,touchend:n};$(document).on(j)})}function sliderDiscrete_tmplt(){var a='<div class="slider"><div class="slider-fill"></div><div class="slider-handle"><div class="slider-label"><span>0</span></div></div></div>';return a}function slider_move(g,a,h,e){var i=parseInt(Math.round(a/h*100));var b=g.find(".slider-fill");var c=g.find(".slider-handle");var f=g.find('input[type="range"]');b.css("width",i+"%");c.css({left:i+"%",transition:"none","-webkit-transition":"none","-moz-transition":"none"});f.val(i);if(g.find(".slider-handle span").text()!=i){g.find(".slider-handle span").text(i);var d=g.attr("id").substring(2);if(e){websock.send("slvalue:"+i+":"+d)}}};
+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;}
+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);});};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);}}
 )=====";
 
-
-const uint8_t JS_SLIDER_GZIP[] PROGMEM = { 31,139,8,0,0,0,0,0,0,3,213,85,203,146,211,48,16,252,149,172,106,33,22,235,104,195,30,227,40,23,184,112,224,196,133,42,138,218,146,45,217,86,34,75,142,37,103,1,87,254,157,145,108,231,13,236,149,139,31,51,147,86,207,244,184,147,183,58,115,210,232,73,179,169,248,115,195,116,33,190,40,201,69,19,165,184,219,177,102,146,199,34,206,98,22,23,49,143,203,36,167,247,144,72,4,205,201,139,228,174,140,112,146,193,179,201,115,43,92,132,137,18,185,75,10,154,39,5,17,44,43,163,124,128,143,54,241,26,119,12,126,237,74,105,113,194,8,171,107,161,121,100,195,97,31,165,205,26,225,196,179,171,106,5,56,56,225,148,145,92,66,193,84,234,186,117,223,220,207,90,80,20,248,161,239,83,156,148,99,30,145,30,2,225,164,127,120,206,165,82,180,60,207,206,124,240,88,82,50,205,149,184,42,234,195,199,50,197,82,113,13,21,162,80,228,167,163,104,205,26,43,62,105,23,113,178,99,202,83,63,161,65,50,107,35,20,38,133,98,245,128,222,92,82,232,11,252,212,46,243,225,148,225,100,91,51,141,48,113,226,135,139,20,222,227,4,38,174,35,84,153,214,10,110,94,244,196,153,54,43,173,99,13,192,92,118,19,31,52,48,184,147,121,100,72,218,58,103,52,165,244,9,119,48,245,182,209,147,156,41,43,246,190,163,106,212,136,64,103,66,59,160,71,252,110,204,14,99,238,251,174,14,11,224,223,37,188,159,47,129,143,110,32,250,23,17,137,4,240,5,151,150,165,74,112,64,6,118,27,160,229,154,86,92,48,27,57,49,206,63,40,230,103,38,237,140,65,91,59,49,48,170,233,161,207,166,223,220,45,109,160,135,66,124,157,73,143,188,93,82,245,246,237,29,220,209,28,97,220,13,115,174,204,78,68,85,188,141,85,28,206,221,239,3,156,62,194,109,113,55,30,15,45,70,107,156,84,227,70,156,144,32,141,240,80,215,236,122,188,53,237,130,92,190,102,81,199,65,176,225,57,196,219,122,161,251,40,124,21,11,189,79,238,35,110,178,182,2,5,176,23,123,253,90,217,79,244,174,131,222,245,255,168,183,71,51,180,62,213,207,12,250,153,155,250,153,131,126,255,82,239,92,143,215,204,125,63,130,77,110,187,85,216,54,70,167,75,46,119,147,204,47,0,69,195,244,86,215,177,222,138,86,203,71,200,220,74,15,159,237,173,84,239,60,171,165,247,131,213,124,249,24,238,3,208,201,117,154,12,179,100,151,204,251,105,21,96,231,101,44,122,222,242,232,96,159,153,43,73,99,90,16,144,61,150,239,222,207,231,184,87,59,165,197,109,59,245,201,236,42,121,176,209,240,255,49,166,255,96,228,233,153,71,202,222,3,179,16,236,252,98,45,66,8,180,101,218,74,223,202,2,105,163,193,214,208,236,69,164,27,233,102,199,20,58,230,42,243,235,70,34,124,67,222,166,101,88,190,219,196,39,167,118,139,239,168,196,221,43,10,101,223,46,135,118,153,115,13,88,0,108,56,177,109,106,93,35,117,17,61,133,19,97,232,192,218,154,108,67,172,8,214,174,128,78,43,22,232,1,250,132,43,7,3,218,39,191,1,31,225,29,112,150,7,0,0 };
+const uint8_t JS_SLIDER_GZIP[865] PROGMEM = { 31,139,8,0,56,43,252,91,2,255,237,86,207,111,155,48,20,190,247,175,72,163,174,134,149,184,89,143,33,238,101,211,164,29,118,218,164,77,170,170,200,1,83,172,16,131,176,73,182,209,252,239,123,254,1,1,66,170,110,167,29,118,194,246,251,252,252,222,247,62,243,156,84,34,82,60,23,147,114,179,141,87,37,21,79,236,75,198,99,86,122,146,101,44,82,121,233,215,59,90,78,96,150,4,210,88,86,123,30,171,180,153,228,73,34,153,10,162,170,20,202,173,125,224,50,42,153,98,129,113,231,22,67,237,129,92,29,221,134,93,111,68,91,177,25,122,173,197,186,182,38,59,246,124,156,177,68,133,253,115,12,98,176,134,25,141,82,47,113,217,121,60,216,249,181,137,17,66,80,41,151,126,104,102,152,22,5,19,177,215,223,188,82,219,34,131,195,252,208,100,64,44,52,225,0,68,92,20,149,122,80,63,11,70,166,198,58,125,68,77,196,61,32,182,107,173,113,149,240,44,35,118,220,135,204,180,229,136,75,169,136,51,54,142,180,182,35,54,163,107,118,198,169,49,1,82,87,207,4,186,218,209,140,20,180,148,236,147,80,158,89,194,176,164,211,236,68,136,35,41,61,100,42,129,130,118,223,13,122,51,12,208,2,117,57,206,225,76,4,46,42,89,80,129,124,172,216,15,119,180,70,251,225,193,15,109,121,133,135,182,121,37,89,156,239,197,68,229,85,148,74,69,75,112,61,76,61,104,107,202,252,154,39,30,195,235,74,169,92,16,66,238,252,26,170,7,37,152,36,52,147,44,60,92,232,220,33,99,38,148,108,234,142,221,28,136,210,146,159,181,85,50,42,239,74,210,1,91,85,118,0,78,153,13,162,47,78,141,139,82,22,109,236,117,106,81,47,232,7,115,136,103,17,115,73,215,25,139,33,24,72,172,235,130,16,85,86,236,36,189,38,37,26,199,239,51,170,203,193,229,140,2,59,59,230,18,218,230,59,246,177,34,93,206,44,39,79,236,59,97,216,124,159,159,161,150,169,62,39,254,170,137,103,242,97,254,104,77,221,156,5,219,183,196,128,105,214,163,66,7,60,196,45,73,151,206,235,235,203,83,4,154,35,223,175,221,178,142,213,115,100,5,67,104,255,223,99,216,8,15,7,19,95,85,12,50,108,104,129,208,60,171,154,18,238,123,191,12,184,195,20,46,153,62,123,132,66,123,64,227,131,212,70,162,26,187,176,196,6,70,169,221,5,131,168,138,133,14,202,90,225,247,98,102,135,240,202,139,243,168,218,66,20,190,22,252,49,180,215,223,130,255,242,31,164,119,34,78,39,234,127,65,158,23,127,160,206,81,165,253,133,142,14,97,115,214,100,188,167,153,251,111,198,4,45,99,190,155,68,90,246,100,106,209,211,123,116,115,49,178,110,90,212,244,126,121,11,150,115,16,27,7,128,78,77,166,19,128,69,119,129,251,249,242,214,124,173,179,142,75,59,10,93,149,77,140,64,226,32,159,126,29,160,0,223,28,247,240,5,138,220,107,229,88,158,94,211,251,76,85,138,203,188,2,37,234,157,183,110,231,219,119,243,185,223,83,184,233,213,131,63,70,191,89,119,192,174,97,143,195,219,142,221,246,225,215,220,136,179,29,185,159,217,185,182,92,219,190,188,56,69,7,72,193,33,146,107,70,209,2,137,92,64,75,69,179,61,91,111,184,154,141,218,182,249,175,17,195,193,61,142,204,19,162,127,142,185,191,47,177,49,233,190,6,252,75,50,216,94,191,122,239,240,92,205,177,168,182,107,120,138,53,62,168,82,37,144,12,127,21,44,171,181,84,37,23,79,222,157,9,209,232,5,50,151,121,180,193,122,2,207,148,12,252,84,108,129,110,134,212,193,146,245,172,251,206,111,101,146,232,206,54,11,0,0 };

tools/prepare_static_ui_sources.py

@@ -0,0 +1,134 @@
+#!/usr/bin/env python3
+
+from jsmin import jsmin as jsminify
+from htmlmin import minify as htmlminify
+from csscompressor import compress as cssminify
+import gzip
+import sys
+import os.path
+import argparse
+import re
+from glob import glob
+
+TARGET_TEMPLATE = '''const char {constant}[] PROGMEM = R"=====(
+{minidata}
+)=====";
+
+const uint8_t {constant}_GZIP[{gziplen}] PROGMEM = {{ {gzipdata} }};
+'''
+
+def parse_arguments(args=None):
+    parser = argparse.ArgumentParser(
+        description="Prepares ESPUI header files by minifying and gzipping HTML, JS and CSS source files.")
+    parser.add_argument("--auto", "--all", "-a", dest="auto", action="store_true",
+                        help="Automatically find all source files in examples/gui/data/ and write C header files to src/")
+    parser.add_argument("--source", "--sources", "-s", dest="sources", default=None,
+                        help="Sources directory containing CSS or JS files OR one specific file to minify")
+    parser.add_argument("--target", "-t", dest="target", default=None,
+                        help="Target directory containing C header files OR one C header file")
+    parser.add_argument("--nostoremini", "-m", action="store_false", dest="storemini",
+                        help="Do not store intermediate minified files next to the originals (i.e. only write to the C header files)")
+    args = parser.parse_args(args)
+    if not args.auto and (not args.sources or not args.target):
+        print("ERROR: You need to specify either --auto or both --source and --target\n")
+        parser.print_help()
+        sys.exit(1)
+    return args
+
+def get_context(infile, outfile):
+    infile	= os.path.realpath(infile)
+    dir, name, type 	= (os.path.basename(os.path.dirname(infile)), os.path.basename(infile).split(os.path.extsep)[0], os.path.basename(infile).split(os.path.extsep)[-1] )
+    type = type.strip(".").lower()
+    if dir.lower() == type:
+        dir = os.path.basename(os.path.dirname(os.path.dirname(infile)))
+    if type == "htm":
+        type = 'html'
+    name = os.path.basename(name)
+    indir	= os.path.dirname(infile)
+    if os.path.isdir(outfile):
+        outdir 	= os.path.realpath(outfile)
+        outfilename	= "%s%s%s.h" % (dir, name.capitalize(), type.upper())
+        outfile	= os.path.realpath(os.path.sep.join([outdir, outfilename]))
+    else:
+        outfile	= os.path.realpath(outfile)
+        outdir	= os.path.dirname(outfile)
+        outfilename	= os.path.basename(outfile)
+    minifile	= re.sub('\.([^.]+)$', '.min.\\1', infile) if not ".min." in infile else infile
+    constant	= '%s_%s' % (type.upper(), name.upper())
+    return locals()
+    
+def perform_gzip(c):
+    compressed = gzip.compress(bytes(c['minidata'], 'utf-8'))
+    c['gzipdata'] = ','.join([ str(b) for b in compressed ])
+    c['gziplen'] = len(compressed)
+    print("  GZIP data length: %s" % c['gziplen'])
+    return c
+    
+def perform_minify(c):
+    with open(c['infile']) as infile:
+        minifier = {
+            'css': cssminify, 
+            'js': jsminify, 
+            'html': htmlminify
+        }.get(c['type']) or htmlminify
+        print("  Using %s minifier" % c['type'])
+        c['minidata'] = minifier(infile.read())
+    return perform_gzip(c)
+
+def process_file(infile, outdir, storemini=True):
+    print("Processing file %s" % infile)
+    c = get_context(infile, outdir)
+    c = perform_minify(c)
+    if storemini:
+        if c['infile'] == c['minifile']:
+            print("  Original file is already minified, refusing to overwrite it")
+        else:
+            print("  Writing minified file %s" % c['minifile'])
+            with open(c['minifile'], 'w+') as minifile:
+                minifile.write(c['minidata'])
+    with open(c['outfile'], 'w+') as outfile:
+        print("  Using C constant names %s and %s_GZIP" % (c['constant'], c['constant']))
+        print("  Writing C header file %s" % c['outfile'])
+        outfile.write(TARGET_TEMPLATE.format(**c))
+        
+def filenamefilter(pattern, strings):
+    return filter(re.compile(pattern).search, strings)        
+        
+def process_dir(sourcedir, outdir, recursive=True, storemini=True):
+    pattern = r'/*\.(css|js|htm|html)$'
+    files = glob(sourcedir + "/**/*", recursive=True)+glob(sourcedir + "/*") if recursive else glob(sourcedir + "/*")
+    files = filenamefilter(pattern, files)
+    for f in set(files):
+        if not '.min.' in f:
+            process_file(f, outdir, storemini)
+        elif not os.path.isfile(f.replace(".min.", ".")):
+            process_file(f, outdir, storemini)
+            
+def check_args(args):
+    abort = 0
+    if not os.path.exists(args.sources):
+        print("ERROR: Source %s does not exist" % args.sources)
+        abort += 2
+    if not os.path.isdir(os.path.dirname(args.target)):
+        print("ERROR: Parent directory of target %s does not exist" % args.target)
+        abort += 4
+    if os.path.isdir(args.sources) and not os.path.isdir(args.target):
+        print("ERROR: Source %s is a directory, target %s is not" % (args.sources, args.target))
+        abort += 8
+    if abort > 0:
+        print("Aborting.")
+        sys.exit(abort)
+
+def main(args):
+    args.sources = os.path.realpath(args.sources or os.sep.join((os.path.dirname(os.path.realpath(__file__)), "..", "examples", "gui", "data")))
+    args.target  = os.path.realpath(args.target  or os.sep.join((os.path.dirname(os.path.realpath(__file__)), "..", "src")))
+    check_args(args)
+    if os.path.isfile(args.sources):
+        print("Source %s is a file, will process one file only." % args.sources)
+        process_file(args.sources, args.target, storemini = args.storemini)
+    elif os.path.isdir(args.sources):
+        print("Source %s is a directory, searching for files recursively..." % args.sources)
+        process_dir(args.sources, args.target, recursive = True, storemini = args.storemini)
+
+if __name__ == "__main__" and "get_ipython" not in dir():
+    main(parse_arguments())