Merge pull request #299 from sunlord2k/sunlord2k-patch-2

Update ESPUI.cpp
Merge pull request #298 from sunlord2k/sunlord2k-patch-1
2024-04-06 11:16:35 +02:00 · 2024-04-06 11:16:15 +02:00 · 2024-04-05 12:10:10 +02:00 · 2024-04-05 12:09:01 +02:00 · 2024-02-26 13:00:48 +01:00 · 2024-02-22 08:08:21 -05:00
35 changed files with 1667 additions and 649 deletions
--- a/README.md
+++ b/README.md
@ -28,6 +28,7 @@ The Library runs on any kind of **ESP8266** and **ESP32** (NodeMCU, AI Thinker,
  * [Slider](#slider)
  * [Number Input](#number-input)
  * [Text Input](#text-input)
+  * [File Display](#filedisplay)
  * [Date, Time, Colour and Password Input](#date-time-colour-and-password-input)
  * [Select control](#select-control)
  * [Getting the Time](#getting-the-time)
@ -62,6 +63,10 @@ The Library runs on any kind of **ESP8266** and **ESP32** (NodeMCU, AI Thinker,
 - Time control by @iangray001
 - Vertical controls by @iangray001
 - Time/date/password/color input types by @pcbbc
+- Delayed response support @MartinMueller2003
+- Fragmented control transfer @MartinMueller2003
+- Extended Callback @MartinMueller2003
+- Added a file display element @MartinMueller2003

 ## Roadmap

@ -143,6 +148,7 @@ more program memory to work with.
 - Separator
 - Time
 - Graph (partial implementation)
+- File Display


 ## Documentation
@ -153,7 +159,9 @@ This section will explain in detail how the Library is to be used from the Ardui
 <br><br>
 Alternativly you may use the extended callback funtion which provides three parameters to the callback function `myCallback(Control *sender, int eventname, void * UserParameter)`. The `UserParameter` is provided as part of the `ESPUI.addControl` method set and allows the user to define contextual information that is to be presented to the callback function in an unmodified form. 
 <br><br>
-The below example creates a button and defines a lambda function to implicitly create an `ExtendedCallback` which then invokes a more specialized button callback handler. The example uses the `UserParameter` to hold the `this` pointer to an object instance, providing a mechanism for sending the event to a specific object without the need for a switch / map / lookup translation of the Sender Id to an object reference. 
+It also possible to use a lambda function in the callback parameter. It also allows the user to define, in a more C++ way, contextual information in any form. This is shown by the [completeLambda](examples/completeLambda/completeLambda.ino) example.
+<br><br>
+The below example creates a button and defines a lambda function to invoke a more specialized button callback handler:
 ```
 void YourClassName::setup()
 {
@ -163,26 +171,18 @@ void YourClassName::setup()
  " Button Face Text ",
  ControlColor::None,
  ParentElementId,
-  [](Control *sender, int eventname, void* param)
+  [&](Control *sender, int eventname)
  {
-    if(param)
-    {
-      reinterpret_cast<YourClassName*>(param)->myButtonCallback(sender, eventname);
-    }
-  },
-  this); // <-Third parameter for the extended callback
+    myButtonCallback(sender, eventname); // class method
+  });

  // or
  ButtonElementId = ESPUI.button(
  " Button Face Text ",
-  [](Control *sender, int eventname, void* param)
+  [&](Control *sender, int eventname)
  {
-    if(param)
-    {
-      reinterpret_cast<YourClassName*>(param)->myButtonCallback(sender, eventname);
-    }
-  },
-  this); // <-Third parameter for the extended callback
+    myButtonCallback(sender, eventname); // class method
+  });
 }
 ```
 ```
@ -357,6 +357,19 @@ However even with a type set, user input should still be validated
 because it is easy to bypass client-side checks. Never trust user input.


+#### File Display
+
+![filedisplay](docs/ui_fileDisplay.png)
+
+The File Display control is used to upload a file from the ESP file system and display the contents on the UI. The content is Auto Scrolled 
+to the last line in the file. Syntax:
+
+`fileDisplayId = ESPUI.fileDisplay("Filetest", ControlColor::Turquoise, FullyQualified FilePath);`
+
+After updating the contents of the file, trigger a display update using: 
+`ESPUI.updateControl(fileDisplayId);`
+
+
 #### Select control

 ![option1](docs/ui_select1.png)
@ -495,7 +508,7 @@ ESPUI includes a range of advanced features that can customise your UIs.

 ### Dynamic Visibility

-Cotrols can be made visible or invisible at runtime with the `updateVisibility()` function.
+Controls can be made visible or invisible at runtime with the `updateVisibility()` function.

 ```
 ESPUI.updateVisibility(controlId, false);
--- a/data/css/normalize.css
+++ b/data/css/normalize.css
@ -111,7 +111,7 @@
  }

  svg:not(:root) {
-    overflow: hidden;
+    overflow: visible;
  }

  /* Grouping content
--- a/data/css/normalize.min.css
+++ b/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:-.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}
+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:visible}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}
--- a/data/js/controls.js
+++ b/data/js/controls.js
@ -60,6 +60,11 @@ const UPDATE_SEPARATOR = 119;
 const UI_TIME = 20;
 const UPDATE_TIME = 120;

+const UI_FILEDISPLAY = 21;
+const UPDATE_FILEDISPLAY = 121;
+
+const UI_FRAGMENT = 98;
+
 const UP = 0;
 const DOWN = 1;
 const LEFT = 2;
@ -77,6 +82,8 @@ const C_ALIZARIN = 6;
 const C_DARK = 7;
 const C_NONE = 255;

+var controlAssemblyArray = new Object();
+var FragmentAssemblyTimer = new Array();
 var graphData = new Array();
 var hasAccel = false;
 var sliderContinuous = false;
@ -176,7 +183,8 @@ function restoreGraphData(id) {
    var savedData = localStorage.getItem("espuigraphs", graphData);
    if (savedData != null) {
        savedData = JSON.parse(savedData);
-        return savedData[id];
+        let idData = savedData[id];
+        return Array.isArray(idData) ? idData : [];
    }
    return [];
 }
@ -189,6 +197,12 @@ function restart() {
 }

 function conStatusError() {
+    FragmentAssemblyTimer.forEach(element => {
+        clearInterval(element);
+    });
+    FragmentAssemblyTimer = new Array();
+    controlAssemblyArray = new Array();
+
    if (true === websockConnected) {
        websockConnected = false;
        websock.close();
@ -209,17 +223,20 @@ function handleVisibilityChange() {
 }

 function start() {
+    let location = window.location.hostname;
+    let port = window.location.port;
+//    let location = "192.168.10.219";
+//    let port = "";
+
    document.addEventListener("visibilitychange", handleVisibilityChange, false);
    if (
-        window.location.port != "" ||
-        window.location.port != 80 ||
-        window.location.port != 443
+        port != "" ||
+        port != 80 ||
+        port != 443
    ) {
-        websock = new WebSocket(
-            "ws://" + window.location.hostname + ":" + window.location.port + "/ws"
-        );
+        websock = new WebSocket( "ws://" + location + ":" + port + "/ws" );
    } else {
-        websock = new WebSocket("ws://" + window.location.hostname + "/ws");
+        websock = new WebSocket("ws://" + location + "/ws");
    }

    // is the timer running?
@ -240,33 +257,54 @@ function start() {
        $("#conStatus").addClass("color-green");
        $("#conStatus").text("Connected");
        websockConnected = true;
+        FragmentAssemblyTimer.forEach(element => {
+            clearInterval(element);
+        });
+        FragmentAssemblyTimer = new Array();
+        controlAssemblyArray = new Array();
    };

    websock.onclose = function (evt) {
+        // console.log("Close evt: '" + evt + "'");
+        // console.log("Close reason: '" + evt.reason + "'");
+        // console.log("Close code: '" + evt.code + "'");
        console.log("websock close");
        conStatusError();
+        FragmentAssemblyTimer.forEach(element => {
+            clearInterval(element);
+        });
+        FragmentAssemblyTimer = new Array();
+        controlAssemblyArray = new Array();
    };

    websock.onerror = function (evt) {
        console.log("websock Error");
-        console.log(evt);
+        // console.log("Error evt: '" + evt + "'");
+        // console.log("Error data: '" + evt.data + "'");

        restart();
+        FragmentAssemblyTimer.forEach(element => {
+            clearInterval(element);
+        });
+        FragmentAssemblyTimer = new Array();
+        controlAssemblyArray = new Array();
    };

    var handleEvent = function (evt) {
-        console.log(evt);
+        // console.log("handleEvent:Data evt: '" + evt + "'");
+        // console.log("handleEvent:Data data: '" + evt.data + "'");
        try {
            var data = JSON.parse(evt.data);
        }
        catch (Event) {
            console.error(Event);
-            // start the update over again
+            // console.info("start the update over again");
            websock.send("uiok:" + 0);
            return;
        }
        var e = document.body;
        var center = "";
+        // console.info("data.type: '" + data.type + "'");

        switch (data.type) {
            case UI_INITIAL_GUI:
@ -278,7 +316,9 @@ function start() {
                if (data.sliderContinuous) {
                    sliderContinuous = data.sliderContinuous;
                }
+                // console.info("UI_INITIAL_GUI:data record: '" + data + "'");
                data.controls.forEach(element => {
+                    // console.info("element: '" + JSON.stringify(element) + "'");
                    var fauxEvent = {
                        data: JSON.stringify(element),
                    };
@ -294,7 +334,9 @@ function start() {
                break;

            case UI_EXTEND_GUI:
+                // console.info("UI_EXTEND_GUI data record: '" + data + "'");
                data.controls.forEach(element => {
+                    // console.info("UI_EXTEND_GUI:element: '" + JSON.stringify(element) + "'");
                    var fauxEvent = {
                        data: JSON.stringify(element),
                    };
@ -328,7 +370,7 @@ function start() {
                if (data.visible) addToHTML(data);
                break;

-            /*
+                /*
              These elements must call additional functions after being added to the DOM
            */
            case UI_BUTTON:
@ -488,9 +530,12 @@ function start() {

            case UI_STEP:
                if (data.parentControl) {
-                    var parent = $("#id" + data.parentControl + " input");
-                    if (parent.size()) {
-                        parent.attr("step", data.value);
+                    //Is it applied to a slider?
+                    if ($('#sl' + data.parentControl).length) {
+                        $('#sl' + data.parentControl).attr("step", data.value);
+                    } else if ($('#num' + data.parentControl).length) {
+                        //Or a number
+                        $('#num' + data.parentControl).attr("step", data.value);
                    }
                }
                break;
@ -503,7 +548,7 @@ function start() {
                }
                break;
            case ADD_GRAPH_POINT:
-                var ts = Math.round(new Date().getTime() / 1000);
+                var ts = new Date().getTime();
                graphData[data.id].push({ x: ts, y: data.value });
                saveGraphData();
                renderGraphSvg(graphData[data.id], "graph" + data.id);
@ -523,6 +568,14 @@ function start() {
                }
                break;

+            case UI_FILEDISPLAY:
+                if (data.visible)
+                {
+                    addToHTML(data);
+                    FileDisplayUploadFile(data);
+                }
+                break;
+    
            /*
             * Update messages change the value/style of a component without adding new HTML
             */
@ -597,6 +650,92 @@ function start() {
                websock.send("time:" + rv + ":" + data.id);
                break;

+            case UPDATE_FILEDISPLAY:
+                FileDisplayUploadFile(data);
+                break;
+        
+            case UI_FRAGMENT:
+                let FragmentLen = data.length;
+                let FragementOffset = data.offset;
+                let NextFragmentOffset = FragementOffset + FragmentLen;
+                let Total = data.total;
+                let Arrived = (FragmentLen + FragementOffset);
+                let FragmentFinal = Total === Arrived;
+                // console.info("UI_FRAGMENT:FragmentLen        '" + FragmentLen + "'");
+                // console.info("UI_FRAGMENT:FragementOffset    '" + FragementOffset + "'");
+                // console.info("UI_FRAGMENT:NextFragmentOffset '" + NextFragmentOffset + "'");
+                // console.info("UI_FRAGMENT:Total              '" + Total + "'");
+                // console.info("UI_FRAGMENT:Arrived            '" + Arrived + "'");
+                // console.info("UI_FRAGMENT:FragmentFinal      '" + FragmentFinal + "'");
+
+                if (!data.hasOwnProperty('control')) 
+                {
+                    console.error("UI_FRAGMENT:Missing control record, skipping control");
+                    break;
+                }
+                let control = data.control;
+                StopFragmentAssemblyTimer(data.control.id);
+                
+                // is this the first fragment?
+                if(0 === FragementOffset)
+                {
+                    // console.info("Found first fragment");
+                    controlAssemblyArray[control.id] = data;
+                    // console.info("Value: " + controlAssemblyArray[control.id].control.value);
+                    controlAssemblyArray[control.id].offset = NextFragmentOffset;
+                    StartFragmentAssemblyTimer(control.id);
+                    let TotalRequest = JSON.stringify({ 'id' : control.id, 'offset' : NextFragmentOffset });
+                    websock.send("uifragmentok:" + 0 + ": " + TotalRequest + ":");
+                    // console.info("asked for fragment 2");
+                    break;
+                }
+
+                // not first fragment. are we assembling this control?
+                if("undefined" === typeof controlAssemblyArray[control.id])
+                {
+                    // it looks like we missed the first fragment. Start the control over
+                    console.error("Missing first fragment for control: " + control.id);
+                    StartFragmentAssemblyTimer(control.id);
+                    let TotalRequest = JSON.stringify({ 'id' : control.id, 'offset' : 0 });
+                    websock.send("uifragmentok:" + 0 + ": " + TotalRequest + ":");
+                    // console.info("asked for fragment 1");
+                    break;
+                }
+                
+                // is this the expected next fragment
+                if(FragementOffset !== controlAssemblyArray[control.id].offset)
+                {
+                    console.error("Wrong next fragment. Expected: " + controlAssemblyArray[control.id].offset + " Got: " + FragementOffset);
+                    StartFragmentAssemblyTimer(control.id);
+                    let TotalRequest = JSON.stringify({ 'id' : control.id, 'offset' : controlAssemblyArray[control.id].length + controlAssemblyArray[control.id].offset });
+                    websock.send("uifragmentok:" + 0 + ": " + TotalRequest + ":");
+                    // console.info("asked for the expected fragment");
+                    break;
+                }
+
+                // console.info("Add to existing fragment");
+                controlAssemblyArray[control.id].control.value += control.value;
+                controlAssemblyArray[control.id].offset = NextFragmentOffset;
+                // console.info("Value: " + controlAssemblyArray[control.id].control.value);
+
+                if(true === FragmentFinal)
+                {
+                    var fauxEvent = {
+                        data: JSON.stringify(controlAssemblyArray[control.id].control),
+                    };
+                    handleEvent(fauxEvent);
+                    controlAssemblyArray[control.id] = null;
+                    // console.info("Found last fragment");
+                }
+                else
+                {
+                    // console.info("Ask for next fragment.");
+                    StartFragmentAssemblyTimer(control.id);
+                    let TotalRequest = JSON.stringify({ 'id' : control.id, 'offset' : NextFragmentOffset});
+                    websock.send("uifragmentok:" + 0 + ": " + TotalRequest + ":");
+                }
+                break;
+
            default:
                console.error("Unknown type or event");
                break;
@ -646,6 +785,70 @@ function start() {
    websock.onmessage = handleEvent;
 }

+async function FileDisplayUploadFile(data)
+{
+    let text = await downloadFile(data.value);
+    let ItemToUpdateId = "fd" + data.id;
+    // console.info("ItemToUpdateId: " + ItemToUpdateId);
+    // console.info("          text: " + text);
+    // populate the text object
+    $("#" + ItemToUpdateId).val(text);
+    $("#" + ItemToUpdateId).css("textAlign", "left");
+    $("#" + ItemToUpdateId).css("white-space", "nowrap");
+    $("#" + ItemToUpdateId).css("overflow", "scroll");
+    $("#" + ItemToUpdateId).css("overflow-y", "scroll");
+    $("#" + ItemToUpdateId).css("overflow-x", "scroll");
+    $("#" + ItemToUpdateId).scrollTop($("#" + ItemToUpdateId).val().length);
+
+    // scroll the page to the updated control
+    // $("#" + ItemToUpdateId).focus();
+
+} // FileDisplayUploadFile
+
+async function downloadFile(filename)
+{
+    let response = await fetch(filename);
+		
+	if(response.status != 200) {
+		throw new Error("File Read Server Error: '" + response.status + "'");
+	}
+		
+	// read response stream as text
+	let text_data = await response.text();
+
+	return text_data;
+} // downloadFile
+
+function StartFragmentAssemblyTimer(Id)
+{
+    StopFragmentAssemblyTimer(Id);
+    FragmentAssemblyTimer[Id] = setInterval(function(_Id)
+    {
+        // does the fragment assembly still exist?
+        if("undefined" !== typeof controlAssemblyArray[_Id])
+        {
+            if(null !== controlAssemblyArray[_Id])
+            {
+                // we have a valid control that is being assembled
+                // ask for the next part
+                let TotalRequest = JSON.stringify({ 'id' : controlAssemblyArray[_Id].control.id, 'offset' : controlAssemblyArray[_Id].offset});
+                websock.send("uifragmentok:" + 0 + ": " + TotalRequest + ":");
+            }
+        }
+    }, 1000, Id);
+}
+
+function StopFragmentAssemblyTimer(Id)
+{
+    if("undefined" !== typeof FragmentAssemblyTimer[Id])
+    {
+        if(FragmentAssemblyTimer[Id])
+        {
+            clearInterval(FragmentAssemblyTimer[Id]);
+        }
+    }
+}
+
 function sliderchange(number) {
    var val = $("#sl" + number).val();
    websock.send("slvalue:" + val + ":" + number);
@ -776,11 +979,13 @@ var addToHTML = function (data) {
            case UI_GRAPH:
            case UI_GAUGE:
            case UI_ACCEL:
+            case UI_FILEDISPLAY:
                html = "<div id='id" + data.id + "' " + panelStyle + " class='two columns " + panelwide + " card tcenter " +
                    colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
                    elementHTML(data) +
                    "</div>";
                break;
+
            case UI_SEPARATOR:
                html = "<div id='id" + data.id + "' " + panelStyle + " class='sectionbreak columns'>" +
                    "<h5>" + data.label + "</h5><hr/></div>";
@ -807,6 +1012,9 @@ var elementHTML = function (data) {
        case UI_LABEL:
            return "<span id='l" + id + "' " + elementStyle +
                " class='label label-wrap'>" + data.value + "</span>";
+        case UI_FILEDISPLAY:
+            return "<textarea id='fd" + id + "' rows='4' " + elementStyle +
+                " class='label label-wrap'>" + "</textarea>";
        case UI_BUTTON:
            return "<button id='btn" + id + "' " + elementStyle +
                " onmousedown='buttonclick(" + id + ", true)'" +
@ -866,8 +1074,6 @@ var elementHTML = function (data) {
    }
 }

-
-
 var processEnabled = function (data) {
    //Handle the enabling and disabling of controls
    //Most controls can be disabled through the use of $("#<item>").prop("disabled", true) and CSS will style it accordingly
@ -913,6 +1119,8 @@ var processEnabled = function (data) {
        case UI_CPAD:
        case UPDATE_PAD:
        case UPDATE_CPAD:
+        case UI_FILEDISPLAY:
+        case UPDATE_FILEDISPLAY:
            if (data.enabled) {
                $("#id" + data.id + " nav").removeClass('disabled');
            } else {
--- a/data/js/controls.min.js
+++ b/data/js/controls.min.js
@ -1,14 +1,14 @@
-const UI_INITIAL_GUI=200;const UI_RELOAD=201;const UPDATE_OFFSET=100;const UI_EXTEND_GUI=210;const UI_TITEL=0;const UI_PAD=1;const UPDATE_PAD=101;const UI_CPAD=2;const UPDATE_CPAD=102;const UI_BUTTON=3;const UPDATE_BUTTON=103;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const UI_TAB=11;const UPDATE_TAB=111;const UI_SELECT=12;const UPDATE_SELECT=112;const UI_OPTION=13;const UPDATE_OPTION=113;const UI_MIN=14;const UPDATE_MIN=114;const UI_MAX=15;const UPDATE_MAX=115;const UI_STEP=16;const UPDATE_STEP=116;const UI_GAUGE=17;const UPDATE_GAUGE=117;const UI_ACCEL=18;const UPDATE_ACCEL=118;const UI_SEPARATOR=19;const UPDATE_SEPARATOR=119;const UI_TIME=20;const UPDATE_TIME=120;const UP=0;const DOWN=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_DARK=7;const C_NONE=255;var graphData=new Array();var hasAccel=false;var sliderContinuous=false;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_DARK:case C_NONE:return"dark";default:return"";}}
+const UI_INITIAL_GUI=200;const UI_RELOAD=201;const UPDATE_OFFSET=100;const UI_EXTEND_GUI=210;const UI_TITEL=0;const UI_PAD=1;const UPDATE_PAD=101;const UI_CPAD=2;const UPDATE_CPAD=102;const UI_BUTTON=3;const UPDATE_BUTTON=103;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const UI_TAB=11;const UPDATE_TAB=111;const UI_SELECT=12;const UPDATE_SELECT=112;const UI_OPTION=13;const UPDATE_OPTION=113;const UI_MIN=14;const UPDATE_MIN=114;const UI_MAX=15;const UPDATE_MAX=115;const UI_STEP=16;const UPDATE_STEP=116;const UI_GAUGE=17;const UPDATE_GAUGE=117;const UI_ACCEL=18;const UPDATE_ACCEL=118;const UI_SEPARATOR=19;const UPDATE_SEPARATOR=119;const UI_TIME=20;const UPDATE_TIME=120;const UI_FILEDISPLAY=21;const UPDATE_FILEDISPLAY=121;const UI_FRAGMENT=98;const UP=0;const DOWN=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_DARK=7;const C_NONE=255;var controlAssemblyArray=new Object();var FragmentAssemblyTimer=new Array();var graphData=new Array();var hasAccel=false;var sliderContinuous=false;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_DARK:case C_NONE:return"dark";default:return"";}}
 var websock;var websockConnected=false;var WebSocketTimer=null;function requestOrientationPermission(){}
 function saveGraphData(){localStorage.setItem("espuigraphs",JSON.stringify(graphData));}
-function restoreGraphData(id){var savedData=localStorage.getItem("espuigraphs",graphData);if(savedData!=null){savedData=JSON.parse(savedData);return savedData[id];}
+function restoreGraphData(id){var savedData=localStorage.getItem("espuigraphs",graphData);if(savedData!=null){savedData=JSON.parse(savedData);let idData=savedData[id];return Array.isArray(idData)?idData:[];}
 return[];}
 function restart(){$(document).add("*").off();$("#row").html("");conStatusError();start();}
-function conStatusError(){if(true===websockConnected){websockConnected=false;websock.close();$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection &#8635;");$("#conStatus").off();$("#conStatus").on({click:restart,});}}
+function conStatusError(){FragmentAssemblyTimer.forEach(element=>{clearInterval(element);});FragmentAssemblyTimer=new Array();controlAssemblyArray=new Array();if(true===websockConnected){websockConnected=false;websock.close();$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection &#8635;");$("#conStatus").off();$("#conStatus").on({click:restart,});}}
 function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
-function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);if(window.location.port!=""||window.location.port!=80||window.location.port!=443){websock=new WebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws");}else{websock=new WebSocket("ws://"+window.location.hostname+"/ws");}
+function start(){let location=window.location.hostname;let port=window.location.port;document.addEventListener("visibilitychange",handleVisibilityChange,false);if(port!=""||port!=80||port!=443){websock=new WebSocket("ws://"+location+":"+port+"/ws");}else{websock=new WebSocket("ws://"+location+"/ws");}
 if(null===WebSocketTimer){WebSocketTimer=setInterval(function(){if(websock.readyState===3){restart();}},5000);}
-websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log("websock Error");console.log(evt);restart();};var handleEvent=function(evt){console.log(evt);try{var data=JSON.parse(evt.data);}
+websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;FragmentAssemblyTimer.forEach(element=>{clearInterval(element);});FragmentAssemblyTimer=new Array();controlAssemblyArray=new Array();};websock.onclose=function(evt){console.log("websock close");conStatusError();FragmentAssemblyTimer.forEach(element=>{clearInterval(element);});FragmentAssemblyTimer=new Array();controlAssemblyArray=new Array();};websock.onerror=function(evt){console.log("websock Error");restart();FragmentAssemblyTimer.forEach(element=>{clearInterval(element);});FragmentAssemblyTimer=new Array();controlAssemblyArray=new Array();};var handleEvent=function(evt){try{var data=JSON.parse(evt.data);}
 catch(Event){console.error(Event);websock.send("uiok:"+0);return;}
 var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
 data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});if(data.totalcontrols>(data.controls.length-1)){websock.send("uiok:"+(data.controls.length-1));}
@ -30,9 +30,11 @@ data.label+
 "</option>");}
 break;case UI_MIN:if(data.parentControl){if($('#sl'+data.parentControl).length){$('#sl'+data.parentControl).attr("min",data.value);}else if($('#num'+data.parentControl).length){$('#num'+data.parentControl).attr("min",data.value);}}
 break;case UI_MAX:if(data.parentControl){if($('#sl'+data.parentControl).length){$('#sl'+data.parentControl).attr("max",data.value);}else if($('#text'+data.parentControl).length){$('#text'+data.parentControl).attr("maxlength",data.value);}else if($('#num'+data.parentControl).length){$('#num'+data.parentControl).attr("max",data.value);}}
-break;case UI_STEP:if(data.parentControl){var parent=$("#id"+data.parentControl+" input");if(parent.size()){parent.attr("step",data.value);}}
+break;case UI_STEP:if(data.parentControl){if($('#sl'+data.parentControl).length){$('#sl'+data.parentControl).attr("step",data.value);}else if($('#num'+data.parentControl).length){$('#num'+data.parentControl).attr("step",data.value);}}
 break;case UI_GRAPH:if(data.visible){addToHTML(data);graphData[data.id]=restoreGraphData(data.id);renderGraphSvg(graphData[data.id],"graph"+data.id);}
-break;case ADD_GRAPH_POINT:var ts=Math.round(new Date().getTime()/1000);graphData[data.id].push({x:ts,y:data.value});saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case CLEAR_GRAPH:graphData[data.id]=[];saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case UI_ACCEL:if(hasAccel)break;hasAccel=true;if(data.visible){addToHTML(data);requestOrientationPermission();}
+break;case ADD_GRAPH_POINT:var ts=new Date().getTime();graphData[data.id].push({x:ts,y:data.value});saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case CLEAR_GRAPH:graphData[data.id]=[];saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case UI_ACCEL:if(hasAccel)break;hasAccel=true;if(data.visible){addToHTML(data);requestOrientationPermission();}
+break;case UI_FILEDISPLAY:if(data.visible)
+{addToHTML(data);FileDisplayUploadFile(data);}
 break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);if(data.hasOwnProperty('elementStyle')){$("#l"+data.id).attr("style",data.elementStyle);}
 break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
 break;case UPDATE_SLIDER:$("#sl"+data.id).attr("value",data.value)
@ -43,7 +45,19 @@ if(data.hasOwnProperty('inputType')){$("#text"+data.id).attr("type",data.inputTy
 break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#select"+data.id).attr("style",data.elementStyle);}
 break;case UPDATE_BUTTON:$("#btn"+data.id).val(data.value);$("#btn"+data.id).text(data.value);if(data.hasOwnProperty('elementStyle')){$("#btn"+data.id).attr("style",data.elementStyle);}
 break;case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#gauge"+data.id).attr("style",data.elementStyle);}
-break;case UPDATE_ACCEL:break;case UPDATE_TIME:var rv=new Date().toISOString();websock.send("time:"+rv+":"+data.id);break;default:console.error("Unknown type or event");break;}
+break;case UPDATE_ACCEL:break;case UPDATE_TIME:var rv=new Date().toISOString();websock.send("time:"+rv+":"+data.id);break;case UPDATE_FILEDISPLAY:FileDisplayUploadFile(data);break;case UI_FRAGMENT:let FragmentLen=data.length;let FragementOffset=data.offset;let NextFragmentOffset=FragementOffset+FragmentLen;let Total=data.total;let Arrived=(FragmentLen+FragementOffset);let FragmentFinal=Total===Arrived;if(!data.hasOwnProperty('control'))
+{console.error("UI_FRAGMENT:Missing control record, skipping control");break;}
+let control=data.control;StopFragmentAssemblyTimer(data.control.id);if(0===FragementOffset)
+{controlAssemblyArray[control.id]=data;controlAssemblyArray[control.id].offset=NextFragmentOffset;StartFragmentAssemblyTimer(control.id);let TotalRequest=JSON.stringify({'id':control.id,'offset':NextFragmentOffset});websock.send("uifragmentok:"+0+": "+TotalRequest+":");break;}
+if("undefined"===typeof controlAssemblyArray[control.id])
+{console.error("Missing first fragment for control: "+control.id);StartFragmentAssemblyTimer(control.id);let TotalRequest=JSON.stringify({'id':control.id,'offset':0});websock.send("uifragmentok:"+0+": "+TotalRequest+":");break;}
+if(FragementOffset!==controlAssemblyArray[control.id].offset)
+{console.error("Wrong next fragment. Expected: "+controlAssemblyArray[control.id].offset+" Got: "+FragementOffset);StartFragmentAssemblyTimer(control.id);let TotalRequest=JSON.stringify({'id':control.id,'offset':controlAssemblyArray[control.id].length+controlAssemblyArray[control.id].offset});websock.send("uifragmentok:"+0+": "+TotalRequest+":");break;}
+controlAssemblyArray[control.id].control.value+=control.value;controlAssemblyArray[control.id].offset=NextFragmentOffset;if(true===FragmentFinal)
+{var fauxEvent={data:JSON.stringify(controlAssemblyArray[control.id].control),};handleEvent(fauxEvent);controlAssemblyArray[control.id]=null;}
+else
+{StartFragmentAssemblyTimer(control.id);let TotalRequest=JSON.stringify({'id':control.id,'offset':NextFragmentOffset});websock.send("uifragmentok:"+0+": "+TotalRequest+":");}
+break;default:console.error("Unknown type or event");break;}
 if(data.type>=UI_TITEL&&data.type<UPDATE_OFFSET){processEnabled(data);}
 if(data.type>=UPDATE_OFFSET&&data.type<UI_INITIAL_GUI){var element=$("#id"+data.id);if(data.hasOwnProperty('panelStyle')){$("#id"+data.id).attr("style",data.panelStyle);}
 if(data.hasOwnProperty('visible')){if(data['visible'])
@ -52,6 +66,20 @@ $("#id"+data.id).hide();}
 if(data.type==UPDATE_SLIDER){element.removeClass("slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin");element.addClass("slider-"+colorClass(data.color));}else{element.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin");element.addClass(colorClass(data.color));}
 processEnabled(data);}
 $(".range-slider__range").each(function(){$(this)[0].value=$(this).attr("value");$(this).next().html($(this).attr("value"));});};websock.onmessage=handleEvent;}
+async function FileDisplayUploadFile(data)
+{let text=await downloadFile(data.value);let ItemToUpdateId="fd"+data.id;$("#"+ItemToUpdateId).val(text);$("#"+ItemToUpdateId).css("textAlign","left");$("#"+ItemToUpdateId).css("white-space","nowrap");$("#"+ItemToUpdateId).css("overflow","scroll");$("#"+ItemToUpdateId).css("overflow-y","scroll");$("#"+ItemToUpdateId).css("overflow-x","scroll");$("#"+ItemToUpdateId).scrollTop($("#"+ItemToUpdateId).val().length);}
+async function downloadFile(filename)
+{let response=await fetch(filename);if(response.status!=200){throw new Error("File Read Server Error: '"+response.status+"'");}
+let text_data=await response.text();return text_data;}
+function StartFragmentAssemblyTimer(Id)
+{StopFragmentAssemblyTimer(Id);FragmentAssemblyTimer[Id]=setInterval(function(_Id)
+{if("undefined"!==typeof controlAssemblyArray[_Id])
+{if(null!==controlAssemblyArray[_Id])
+{let TotalRequest=JSON.stringify({'id':controlAssemblyArray[_Id].control.id,'offset':controlAssemblyArray[_Id].offset});websock.send("uifragmentok:"+0+": "+TotalRequest+":");}}},1000,Id);}
+function StopFragmentAssemblyTimer(Id)
+{if("undefined"!==typeof FragmentAssemblyTimer[Id])
+{if(FragmentAssemblyTimer[Id])
+{clearInterval(FragmentAssemblyTimer[Id]);}}}
 function sliderchange(number){var val=$("#sl"+number).val();websock.send("slvalue:"+val+":"+number);$(".range-slider__range").each(function(){$(this).attr("value",$(this)[0].value);});}
 function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);}
 function textchange(number){var val=$("#text"+number).val();websock.send("tvalue:"+val+":"+number);}
@ -62,7 +90,7 @@ function padclick(type,number,isdown){if($("#id"+number+" nav").hasClass("disabl
 switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case UP:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case DOWN:if(isdown)websock.send("pbdown:"+number);else websock.send("pbup:"+number);break;case LEFT:if(isdown)websock.send("pldown:"+number);else websock.send("plup:"+number);break;case RIGHT:if(isdown)websock.send("prdown:"+number);else websock.send("prup:"+number);break;}}
 function switcher(number,state){if(state==null){if(!$("#sl"+number).hasClass("checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}
 var rangeSlider=function(isDiscrete){var range=$(".range-slider__range");var slidercb=function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));};range.on({input:function(){$(this).next().html(this.value)}});range.each(function(){$(this).next().html(this.value);if($(this).attr("callbackSet")!="true"){if(!isDiscrete){$(this).on({input:slidercb});}else{$(this).on({change:slidercb});}
-$(this).attr("callbackSet","true");}});};var addToHTML=function(data){panelStyle=data.hasOwnProperty('panelStyle')?" style='"+data.panelStyle+"' ":"";panelwide=data.hasOwnProperty('wide')?"wide":"";if(!data.hasOwnProperty('parentControl')||$("#tab"+data.parentControl).length>0){var parent=data.hasOwnProperty('parentControl')?$("#tab"+data.parentControl):$("#row");var html="";switch(data.type){case UI_LABEL:case UI_BUTTON:case UI_SWITCHER:case UI_CPAD:case UI_PAD:case UI_SLIDER:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GRAPH:case UI_GAUGE:case UI_ACCEL:html="<div id='id"+data.id+"' "+panelStyle+" class='two columns "+panelwide+" card tcenter "+
+$(this).attr("callbackSet","true");}});};var addToHTML=function(data){panelStyle=data.hasOwnProperty('panelStyle')?" style='"+data.panelStyle+"' ":"";panelwide=data.hasOwnProperty('wide')?"wide":"";if(!data.hasOwnProperty('parentControl')||$("#tab"+data.parentControl).length>0){var parent=data.hasOwnProperty('parentControl')?$("#tab"+data.parentControl):$("#row");var html="";switch(data.type){case UI_LABEL:case UI_BUTTON:case UI_SWITCHER:case UI_CPAD:case UI_PAD:case UI_SLIDER:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GRAPH:case UI_GAUGE:case UI_ACCEL:case UI_FILEDISPLAY:html="<div id='id"+data.id+"' "+panelStyle+" class='two columns "+panelwide+" card tcenter "+
 colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>"+
 elementHTML(data)+
 "</div>";break;case UI_SEPARATOR:html="<div id='id"+data.id+"' "+panelStyle+" class='sectionbreak columns'>"+
@ -70,7 +98,8 @@ elementHTML(data)+
 parent.append(html);}else{var parent=$("#id"+data.parentControl);parent.append(elementHTML(data));}}
 var elementHTML=function(data){var id=data.id
 var elementStyle=data.hasOwnProperty('elementStyle')?" style='"+data.elementStyle+"' ":"";var inputType=data.hasOwnProperty('inputType')?" type='"+data.inputType+"' ":"";switch(data.type){case UI_LABEL:return"<span id='l"+id+"' "+elementStyle+
-" class='label label-wrap'>"+data.value+"</span>";case UI_BUTTON:return"<button id='btn"+id+"' "+elementStyle+
+" class='label label-wrap'>"+data.value+"</span>";case UI_FILEDISPLAY:return"<textarea id='fd"+id+"' rows='4' "+elementStyle+
+" class='label label-wrap'>"+"</textarea>";case UI_BUTTON:return"<button id='btn"+id+"' "+elementStyle+
 " onmousedown='buttonclick("+id+", true)'"+
 " onmouseup='buttonclick("+id+", false)'>"+
 data.value+"</button>";case UI_SWITCHER:return"<label id='sl"+id+"' "+elementStyle+
@ -103,5 +132,5 @@ data.value+"</span></div>";case UI_NUMBER:return"<input style='color:black; "+da
 "' type='number' value='"+data.value+"' onchange='numberchange("+id+")' />";case UI_ACCEL:return"ACCEL // Not implemented fully!<div class='accelerometer' id='accel"+id+
 "' ><div class='ball"+id+"'></div><pre class='accelerometeroutput"+id+"'></pre>";default:return"";}}
 var processEnabled=function(data){switch(data.type){case UI_SWITCHER:case UPDATE_SWITCHER:if(data.enabled){$("#sl"+data.id).removeClass('disabled');$("#s"+data.id).prop("disabled",false);}else{$("#sl"+data.id).addClass('disabled');$("#s"+data.id).prop("disabled",true);}
-break;case UI_SLIDER:case UPDATE_SLIDER:$("#sl"+data.id).prop("disabled",!data.enabled);break;case UI_NUMBER:case UPDATE_NUMBER:$("#num"+data.id).prop("disabled",!data.enabled);break;case UI_TEXT_INPUT:case UPDATE_TEXT_INPUT:$("#text"+data.id).prop("disabled",!data.enabled);break;case UI_SELECT:case UPDATE_SELECT:$("#select"+data.id).prop("disabled",!data.enabled);break;case UI_BUTTON:case UPDATE_BUTTON:$("#btn"+data.id).prop("disabled",!data.enabled);break;case UI_PAD:case UI_CPAD:case UPDATE_PAD:case UPDATE_CPAD:if(data.enabled){$("#id"+data.id+" nav").removeClass('disabled');}else{$("#id"+data.id+" nav").addClass('disabled');}
+break;case UI_SLIDER:case UPDATE_SLIDER:$("#sl"+data.id).prop("disabled",!data.enabled);break;case UI_NUMBER:case UPDATE_NUMBER:$("#num"+data.id).prop("disabled",!data.enabled);break;case UI_TEXT_INPUT:case UPDATE_TEXT_INPUT:$("#text"+data.id).prop("disabled",!data.enabled);break;case UI_SELECT:case UPDATE_SELECT:$("#select"+data.id).prop("disabled",!data.enabled);break;case UI_BUTTON:case UPDATE_BUTTON:$("#btn"+data.id).prop("disabled",!data.enabled);break;case UI_PAD:case UI_CPAD:case UPDATE_PAD:case UPDATE_CPAD:case UI_FILEDISPLAY:case UPDATE_FILEDISPLAY:if(data.enabled){$("#id"+data.id+" nav").removeClass('disabled');}else{$("#id"+data.id+" nav").addClass('disabled');}
 break;}}
--- a/data/js/graph.js
+++ b/data/js/graph.js
@ -55,13 +55,13 @@ function lineGraph(parent, xAccessor, yAccessor) {

      // generate labels
      for (var i = xMin; i <= xMax; i++) {
-        if ((i - xMin) % pixelsPerTick === 0 && i !== xMin) {
+        if ((i - xMin) % (pixelsPerTick*3) === 0 && i !== xMin) {
          var text = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "text"
          );
          // primitive formatting
-          text.innerHTML = Math.floor(transform(i));
+          text.innerHTML = new Date(Math.floor(transform(i))).toLocaleTimeString();
          text.setAttribute("x", i);
          text.setAttribute("y", yMin);
          // offset the text by 1 em
--- a/data/js/graph.min.js
+++ b/data/js/graph.min.js
@ -1,5 +1,5 @@
 function lineGraph(parent,xAccessor,yAccessor){const width=620;const height=420;const gutter=40;const pixelsPerTick=30;function numericTransformer(dataMin,dataMax,pxMin,pxMax){var dataDiff=dataMax-dataMin,pxDiff=pxMax-pxMin,dataRatio=pxDiff/dataDiff,coordRatio=dataDiff/pxDiff;return{toCoord:function(data){return(data-dataMin)*dataRatio+pxMin;},toData:function(coord){return(coord-pxMin)*coordRatio+dataMin;}};}
-function axisRenderer(orientation,transform){var axisGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var axisPath=document.createElementNS("http://www.w3.org/2000/svg","path");axisGroup.setAttribute("class",orientation+"-axis");var xMin=gutter;var xMax=width-gutter;var yMin=height-gutter;var yMax=gutter;if(orientation==="x"){axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMax+" "+yMin);for(var i=xMin;i<=xMax;i++){if((i-xMin)%pixelsPerTick===0&&i!==xMin){var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(transform(i));text.setAttribute("x",i);text.setAttribute("y",yMin);text.setAttribute("dy","1em");axisGroup.appendChild(text);}}}else{axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMin+" "+yMax);for(var i=yMax;i<=yMin;i++){if((i-yMin)%pixelsPerTick===0&&i!==yMin){var tickGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var gridLine=document.createElementNS("http://www.w3.org/2000/svg","path");text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(transform(i));text.setAttribute("x",xMin);text.setAttribute("y",i);text.setAttribute("dx","-.5em");text.setAttribute("dy",".3em");gridLine.setAttribute("d","M "+xMin+" "+i+" L "+xMax+" "+i);tickGroup.appendChild(gridLine);tickGroup.appendChild(text);axisGroup.appendChild(tickGroup);}}}
+function axisRenderer(orientation,transform){var axisGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var axisPath=document.createElementNS("http://www.w3.org/2000/svg","path");axisGroup.setAttribute("class",orientation+"-axis");var xMin=gutter;var xMax=width-gutter;var yMin=height-gutter;var yMax=gutter;if(orientation==="x"){axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMax+" "+yMin);for(var i=xMin;i<=xMax;i++){if((i-xMin)%(pixelsPerTick*3)===0&&i!==xMin){var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=new Date(Math.floor(transform(i))).toLocaleTimeString();text.setAttribute("x",i);text.setAttribute("y",yMin);text.setAttribute("dy","1em");axisGroup.appendChild(text);}}}else{axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMin+" "+yMax);for(var i=yMax;i<=yMin;i++){if((i-yMin)%pixelsPerTick===0&&i!==yMin){var tickGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var gridLine=document.createElementNS("http://www.w3.org/2000/svg","path");text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(transform(i));text.setAttribute("x",xMin);text.setAttribute("y",i);text.setAttribute("dx","-.5em");text.setAttribute("dy",".3em");gridLine.setAttribute("d","M "+xMin+" "+i+" L "+xMax+" "+i);tickGroup.appendChild(gridLine);tickGroup.appendChild(text);axisGroup.appendChild(tickGroup);}}}
 axisGroup.appendChild(axisPath);parent.appendChild(axisGroup);}
 function lineRenderer(xAccessor,yAccessor,xTransform,yTransform){var line=document.createElementNS("http://www.w3.org/2000/svg","path");xAccessor.reset();yAccessor.reset();if(!xAccessor.hasNext()||!yAccessor.hasNext()){return;}
 var pathString="M "+xTransform(xAccessor.next())+" "+yTransform(yAccessor.next());while(xAccessor.hasNext()&&yAccessor.hasNext()){pathString+=" L "+
--- a/docs/ui_fileDisplay.png
+++ b/docs/ui_fileDisplay.png
--- a/examples/completeExample/completeExample.cpp
+++ b/examples/completeExample/completeExample.cpp
@ -26,8 +26,20 @@
 #include <WiFi.h>
 #include <ESPmDNS.h>
 #else
+// esp8266
 #include <ESP8266WiFi.h>
 #include <ESP8266mDNS.h>
+#include <umm_malloc/umm_heap_select.h>
+#ifndef CORE_MOCK
+#ifndef MMU_IRAM_HEAP
+#warning Try MMU option '2nd heap shared' in 'tools' IDE menu (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#option-summary)
+#warning use decorators: { HeapSelectIram doAllocationsInIRAM; ESPUI.addControl(...) ... } (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#how-to-select-heap)
+#warning then check http://<ip>/heap
+#endif // MMU_IRAM_HEAP
+#ifndef DEBUG_ESP_OOM
+#error on ESP8266 and ESPUI, you must define OOM debug option when developping
+#endif
+#endif
 #endif

 //Settings
@ -62,6 +74,11 @@ volatile bool updates = false;

 // This is the main function which builds our GUI
 void setUpUI() {
+
+#ifdef ESP8266
+    { HeapSelectIram doAllocationsInIRAM;
+#endif
+
 	//Turn off verbose debugging
 	ESPUI.setVerbosity(Verbosity::Quiet);

@ -274,6 +291,11 @@ void setUpUI() {
 	//Finally, start up the UI. 
 	//This should only be called once we are connected to WiFi.
 	ESPUI.begin(HOSTNAME);
+
+#ifdef ESP8266
+    } // HeapSelectIram
+#endif
+
 }

 //This callback generates and applies inline styles to a bunch of controls to change their colour.
@ -376,7 +398,8 @@ void extendedCallback(Control* sender, int type, void* param)
    Serial.print(sender->label);
    Serial.print("' = ");
    Serial.println(sender->value);
-    Serial.println(String("param = ") + String((int)param));
+    Serial.print("param = ");
+    Serial.println((long)param);
 }

 void setup() {
@ -423,6 +446,7 @@ void loop() {
 				#if !defined(ESP32)
 					((void (*)())0xf00fdead)();
 				#endif
+				break;
 			default:
 				Serial.print('#');
 				break;
--- a/examples/completeExample/completeExample.ino
+++ b/examples/completeExample/completeExample.ino
@ -0,0 +1,4 @@
+// placeholder
+#if CORE_MOCK
+#include "completeExample.cpp"
+#endif
--- a/examples/completeLambda/completeLambda.ino
+++ b/examples/completeLambda/completeLambda.ino
@ -0,0 +1,544 @@
+/**
+ * @file completeExample.cpp
+ * @author Ian Gray @iangray1000
+ *
+ * This is an example GUI to show off all of the features of ESPUI.
+ * This can be built using the Arduino IDE, or PlatformIO.
+ *
+ * ---------------------------------------------------------------------------------------
+ * If you just want to see examples of the ESPUI code, jump down to the setUpUI() function
+ * ---------------------------------------------------------------------------------------
+ *
+ * When this program boots, it will load an SSID and password from the EEPROM.
+ * The SSID is a null-terminated C string stored at EEPROM addresses 0-31
+ * The password is a null-terminated C string stored at EEPROM addresses 32-95.
+ * If these credentials do not work for some reason, the ESP will create an Access
+ * Point wifi with the SSID HOSTNAME (defined below). You can then connect and use
+ * the controls on the "Wifi Credentials" tab to store credentials into the EEPROM.
+ *
+ * Version with lambdas. Comparing to version with only callbacks:
+ * diff -u ../completeExample/completeExample.cpp completeLambda.ino|less
+ *
+ */
+
+#include <Arduino.h>
+#include <EEPROM.h>
+#include <ESPUI.h>
+
+#if defined(ESP32)
+#include <WiFi.h>
+#include <ESPmDNS.h>
+#else
+// esp8266
+#include <ESP8266WiFi.h>
+#include <ESP8266mDNS.h>
+#include <umm_malloc/umm_heap_select.h>
+#ifndef CORE_MOCK
+#ifndef MMU_IRAM_HEAP
+#warning Try MMU option '2nd heap shared' in 'tools' IDE menu (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#option-summary)
+#warning use decorators: { HeapSelectIram doAllocationsInIRAM; ESPUI.addControl(...) ... } (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#how-to-select-heap)
+#warning then check http://<ip>/heap
+#endif // MMU_IRAM_HEAP
+#ifndef DEBUG_ESP_OOM
+#error on ESP8266 and ESPUI, you must define OOM debug option when developping
+#endif
+#endif
+#endif
+
+//Settings
+#define SLOW_BOOT 0
+#define HOSTNAME "ESPUITest"
+#define FORCE_USE_HOTSPOT 0
+
+
+//Function Prototypes
+void connectWifi();
+void setUpUI();
+void textCallback(Control *sender, int type);
+void generalCallback(Control *sender, int type);
+void randomString(char *buf, int len);
+void paramCallback(Control* sender, int type, int param);
+
+//UI handles
+uint16_t wifi_ssid_text, wifi_pass_text;
+uint16_t mainLabel, mainSwitcher, mainSlider, mainText, mainNumber, mainScrambleButton, mainTime;
+uint16_t styleButton, styleLabel, styleSwitcher, styleSlider, styleButton2, styleLabel2, styleSlider2;
+uint16_t graph;
+volatile bool updates = false;
+
+
+
+// This is the main function which builds our GUI
+void setUpUI() {
+
+#ifdef ESP8266
+    { HeapSelectIram doAllocationsInIRAM;
+#endif
+
+	//Turn off verbose debugging
+	ESPUI.setVerbosity(Verbosity::Quiet);
+
+	//Make sliders continually report their position as they are being dragged.
+	ESPUI.sliderContinuous = true;
+
+	//This GUI is going to be a tabbed GUI, so we are adding most controls using ESPUI.addControl
+	//which allows us to set a parent control. If we didn't need tabs we could use the simpler add
+	//functions like:
+	//    ESPUI.button()
+	//    ESPUI.label()
+
+
+	/*
+	 * Tab: Basic Controls
+	 * This tab contains all the basic ESPUI controls, and shows how to read and update them at runtime.
+	 *-----------------------------------------------------------------------------------------------------------*/
+	auto maintab = ESPUI.addControl(Tab, "", "Basic controls");
+
+	ESPUI.addControl(Separator, "General controls", "", None, maintab);
+	ESPUI.addControl(Button, "Button", "Button 1", Alizarin, maintab, [](Control *sender, int type){ paramCallback(sender, type, 19); });
+	mainLabel = ESPUI.addControl(Label, "Label", "Label text", Emerald, maintab, generalCallback);
+	mainSwitcher = ESPUI.addControl(Switcher, "Switcher", "", Sunflower, maintab, generalCallback);
+
+	//Sliders default to being 0 to 100, but if you want different limits you can add a Min and Max control
+	mainSlider = ESPUI.addControl(Slider, "Slider", "200", Turquoise, maintab, generalCallback);
+	ESPUI.addControl(Min, "", "10", None, mainSlider);
+	ESPUI.addControl(Max, "", "400", None, mainSlider);
+
+	//These are the values for the selector's options. (Note that they *must* be declared static
+	//so that the storage is allocated in global memory and not just on the stack of this function.)
+	static String optionValues[] {"Value 1", "Value 2", "Value 3", "Value 4", "Value 5"};
+	auto mainselector = ESPUI.addControl(Select, "Selector", "Selector", Wetasphalt, maintab, generalCallback);
+	for(auto const& v : optionValues) {
+		ESPUI.addControl(Option, v.c_str(), v, None, mainselector);
+	}
+
+	mainText = ESPUI.addControl(Text, "Text Input", "Initial value", Alizarin, maintab, generalCallback);
+
+	//Number inputs also accept Min and Max components, but you should still validate the values.
+	mainNumber = ESPUI.addControl(Number, "Number Input", "42", Emerald, maintab, generalCallback);
+	ESPUI.addControl(Min, "", "10", None, mainNumber);
+	ESPUI.addControl(Max, "", "50", None, mainNumber);
+
+	ESPUI.addControl(Separator, "Updates", "", None, maintab);
+
+	//This button will update all the updatable controls on this tab to random values
+	mainScrambleButton = ESPUI.addControl(Button, "Scramble Values", "Scramble Values", Carrot, maintab,
+        //This callback updates the "values" of a bunch of controls
+	    [](Control *sender, int type) {
+			static char rndString1[10];
+			static char rndString2[20];
+			static bool scText = false;
+
+			if(type == B_UP) { //Button callbacks generate events for both UP and DOWN.
+				//Generate some random text
+				randomString(rndString1, 10);
+				randomString(rndString2, 20);
+
+				//Set the various controls to random value to show how controls can be updated at runtime
+				ESPUI.updateLabel(mainLabel, String(rndString1));
+				ESPUI.updateSwitcher(mainSwitcher, ESPUI.getControl(mainSwitcher)->value.toInt() ? false : true);
+				ESPUI.updateSlider(mainSlider, random(10, 400));
+				ESPUI.updateText(mainText, String(rndString2));
+				ESPUI.updateNumber(mainNumber, random(100000));
+				ESPUI.updateButton(mainScrambleButton, scText ? "Scrambled!" : "Scrambled.");
+				scText = !scText;
+			}
+		});
+
+	ESPUI.addControl(Switcher, "Constant updates", "0", Carrot, maintab,
+		[](Control *sender, int type) {
+			updates = (sender->value.toInt() > 0);
+		});
+
+	mainTime = ESPUI.addControl(Time, "", "", None, 0, generalCallback);
+
+	ESPUI.addControl(Button, "Get Time", "Get Time", Carrot, maintab,
+		[](Control *sender, int type) {
+			if(type == B_UP) {
+				ESPUI.updateTime(mainTime);
+			}
+		});
+
+	ESPUI.addControl(Separator, "Control Pads", "", None, maintab);
+	ESPUI.addControl(Pad, "Normal", "", Peterriver, maintab, generalCallback);
+	ESPUI.addControl(PadWithCenter, "With center", "", Peterriver, maintab, generalCallback);
+
+
+	/*
+	 * Tab: Colours
+	 * This tab shows all the basic colours
+	 *-----------------------------------------------------------------------------------------------------------*/
+	auto colourtab = ESPUI.addControl(Tab, "", "Colours");
+	ESPUI.addControl(Button, "Alizarin", "Alizarin", Alizarin, colourtab, generalCallback);
+	ESPUI.addControl(Button, "Turquoise", "Turquoise", Turquoise, colourtab, generalCallback);
+	ESPUI.addControl(Button, "Emerald", "Emerald", Emerald, colourtab, generalCallback);
+	ESPUI.addControl(Button, "Peterriver", "Peterriver", Peterriver, colourtab, generalCallback);
+	ESPUI.addControl(Button, "Wetasphalt", "Wetasphalt", Wetasphalt, colourtab, generalCallback);
+	ESPUI.addControl(Button, "Sunflower", "Sunflower", Sunflower, colourtab, generalCallback);
+	ESPUI.addControl(Button, "Carrot", "Carrot", Carrot, colourtab, generalCallback);
+	ESPUI.addControl(Button, "Dark", "Dark", Dark, colourtab, generalCallback);
+
+
+	/*
+	 * Tab: Styled controls
+	 * This tab shows off how inline CSS styles can be applied to elements and panels in order
+	 * to customise the look of the UI.
+	 *-----------------------------------------------------------------------------------------------------------*/
+	auto styletab = ESPUI.addControl(Tab, "", "Styled controls");
+	styleButton = ESPUI.addControl(Button, "Styled Button", "Button", Alizarin, styletab, generalCallback);
+	styleLabel = ESPUI.addControl(Label, "Styled Label", "This is a label", Alizarin, styletab, generalCallback);
+	styleSwitcher = ESPUI.addControl(Switcher, "Styled Switcher", "1", Alizarin, styletab, generalCallback);
+	styleSlider = ESPUI.addControl(Slider, "Styled Slider", "0", Alizarin, styletab, generalCallback);
+
+	//This button will randomise the colours of the above controls to show updating of inline styles
+	ESPUI.addControl(Button, "Randomise Colours", "Randomise Colours", Sunflower, styletab,
+		//This callback generates and applies inline styles to a bunch of controls to change their colour.
+		//The styles created are of the form:
+		//	"border-bottom: #999 3px solid; background-color: #aabbcc;"
+		//	"background-color: #aabbcc;"
+		[](Control *sender, int type) {
+			//Declare space for style strings. These have to be static so that they are always available
+			//to the websocket layer. If we'd not made them static they'd be allocated on the heap and
+			//will be unavailable when we leave this function.
+			static char stylecol1[60], stylecol2[30];
+			if(type == B_UP) {
+				//Generate two random HTML hex colour codes, and print them into CSS style rules
+				sprintf(stylecol1, "border-bottom: #999 3px solid; background-color: #%06X;", (unsigned int) random(0x0, 0xFFFFFF));
+				sprintf(stylecol2, "background-color: #%06X;", (unsigned int) random(0x0, 0xFFFFFF));
+
+				//Apply those styles to various elements to show how controls react to styling
+				ESPUI.setPanelStyle(styleButton, stylecol1);
+				ESPUI.setElementStyle(styleButton, stylecol2);
+				ESPUI.setPanelStyle(styleLabel, stylecol1);
+				ESPUI.setElementStyle(styleLabel, stylecol2);
+				ESPUI.setPanelStyle(styleSwitcher, stylecol1);
+				ESPUI.setElementStyle(styleSwitcher, stylecol2);
+				ESPUI.setPanelStyle(styleSlider, stylecol1);
+				ESPUI.setElementStyle(styleSlider, stylecol2);
+			}
+		});
+
+	ESPUI.addControl(Separator, "Other styling examples", "", None, styletab);
+	styleButton2 = ESPUI.addControl(Button, "Styled Button", "Button", Alizarin, styletab, generalCallback);
+	ESPUI.setPanelStyle(styleButton2, "background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); border-bottom: #555;");
+	ESPUI.setElementStyle(styleButton2, "border-radius: 2em; border: 3px solid black; width: 30%; background-color: #8df;");
+
+	styleSlider2 = ESPUI.addControl(Slider, "Styled Slider", "0", Dark, styletab, generalCallback);
+	ESPUI.setElementStyle(styleSlider2, "background: linear-gradient(to right, red, orange, yellow, green, blue);");
+
+	styleLabel2 = ESPUI.addControl(Label, "Styled Label", "This is a label", Dark, styletab, generalCallback);
+	ESPUI.setElementStyle(styleLabel2, "text-shadow: 3px 3px #74b1ff, 6px 6px #c64ad7; font-size: 60px; font-variant-caps: small-caps; background-color: unset; color: #c4f0bb; -webkit-text-stroke: 1px black;");
+
+
+	/*
+	 * Tab: Grouped controls
+	 * This tab shows how multiple control can be grouped into the same panel through the use of the
+	 * parentControl value. This also shows how to add labels to grouped controls, and how to use vertical controls.
+	 *-----------------------------------------------------------------------------------------------------------*/
+	auto grouptab = ESPUI.addControl(Tab, "", "Grouped controls");
+
+	//The parent of this button is a tab, so it will create a new panel with one control.
+	auto groupbutton = ESPUI.addControl(Button, "Button Group", "Button A", Dark, grouptab, generalCallback);
+	//However the parent of this button is another control, so therefore no new panel is
+	//created and the button is added to the existing panel.
+	ESPUI.addControl(Button, "", "Button B", Alizarin, groupbutton, generalCallback);
+	ESPUI.addControl(Button, "", "Button C", Alizarin, groupbutton, generalCallback);
+
+
+	//Sliders can be grouped as well
+	//To label each slider in the group, we are going add additional labels and give them custom CSS styles
+	//We need this CSS style rule, which will remove the label's background and ensure that it takes up the entire width of the panel
+	String clearLabelStyle = "background-color: unset; width: 100%;";
+	//First we add the main slider to create a panel
+	auto groupsliders = ESPUI.addControl(Slider, "Slider Group", "10", Dark, grouptab, generalCallback);
+	//Then we add a label and set its style to the clearLabelStyle. Here we've just given it the name "A"
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "A", None, groupsliders), clearLabelStyle);
+	//We can now continue to add additional sliders and labels
+	ESPUI.addControl(Slider, "", "20", None, groupsliders, generalCallback);
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "B", None, groupsliders), clearLabelStyle);
+	ESPUI.addControl(Slider, "", "30", None, groupsliders, generalCallback);
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "C", None, groupsliders), clearLabelStyle);
+
+	//We can also usefully group switchers.
+	auto groupswitcher = ESPUI.addControl(Switcher, "Switcher Group", "0", Dark, grouptab, generalCallback);
+	ESPUI.addControl(Switcher, "", "1", Sunflower, groupswitcher, generalCallback);
+	ESPUI.addControl(Switcher, "", "0", Sunflower, groupswitcher, generalCallback);
+	ESPUI.addControl(Switcher, "", "1", Sunflower, groupswitcher, generalCallback);
+	//To label these switchers we need to first go onto a "new line" below the line of switchers
+	//To do this we add an empty label set to be clear and full width (with our clearLabelStyle)
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "", None, groupswitcher), clearLabelStyle);
+	//We will now need another label style. This one sets its width to the same as a switcher (and turns off the background)
+	String switcherLabelStyle = "width: 60px; margin-left: .3rem; margin-right: .3rem; background-color: unset;";
+	//We can now just add the styled labels.
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "A", None, groupswitcher), switcherLabelStyle);
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "B", None, groupswitcher), switcherLabelStyle);
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "C", None, groupswitcher), switcherLabelStyle);
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "D", None, groupswitcher), switcherLabelStyle);
+
+	//You can mix and match different control types, but the results might sometimes
+	//need additional styling to lay out nicely.
+	auto grouplabel = ESPUI.addControl(Label, "Mixed Group", "Main label", Dark, grouptab);
+	auto grouplabel2 = ESPUI.addControl(Label, "", "Secondary label", Emerald, grouplabel);
+	ESPUI.addControl(Button, "", "Button D", Alizarin, grouplabel, generalCallback);
+	ESPUI.addControl(Switcher, "", "1", Sunflower, grouplabel, generalCallback);
+	ESPUI.setElementStyle(grouplabel2, "font-size: x-large; font-family: serif;");
+
+	//Some controls can even support vertical orientation, currently Switchers and Sliders
+	ESPUI.addControl(Separator, "Vertical controls", "", None, grouptab);
+	auto vertgroupswitcher = ESPUI.addControl(Switcher, "Vertical Switcher Group", "0", Dark, grouptab, generalCallback);
+	ESPUI.setVertical(vertgroupswitcher);
+	//On the following lines we wrap the value returned from addControl and send it straight to setVertical
+	ESPUI.setVertical(ESPUI.addControl(Switcher, "", "0", None, vertgroupswitcher, generalCallback));
+	ESPUI.setVertical(ESPUI.addControl(Switcher, "", "0", None, vertgroupswitcher, generalCallback));
+	ESPUI.setVertical(ESPUI.addControl(Switcher, "", "0", None, vertgroupswitcher, generalCallback));
+	//The mechanism for labelling vertical switchers is the same as we used above for horizontal ones
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "", None, vertgroupswitcher), clearLabelStyle);
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "A", None, vertgroupswitcher), switcherLabelStyle);
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "B", None, vertgroupswitcher), switcherLabelStyle);
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "C", None, vertgroupswitcher), switcherLabelStyle);
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "D", None, vertgroupswitcher), switcherLabelStyle);
+
+	auto vertgroupslider = ESPUI.addControl(Slider, "Vertical Slider Group", "15", Dark, grouptab, generalCallback);
+	ESPUI.setVertical(vertgroupslider);
+	ESPUI.setVertical(ESPUI.addControl(Slider, "", "25", None, vertgroupslider, generalCallback));
+	ESPUI.setVertical(ESPUI.addControl(Slider, "", "35", None, vertgroupslider, generalCallback));
+	ESPUI.setVertical(ESPUI.addControl(Slider, "", "45", None, vertgroupslider, generalCallback));
+	//The mechanism for labelling vertical sliders is the same as we used above for switchers
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "", None, vertgroupslider), clearLabelStyle);
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "A", None, vertgroupslider), switcherLabelStyle);
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "B", None, vertgroupslider), switcherLabelStyle);
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "C", None, vertgroupslider), switcherLabelStyle);
+	ESPUI.setElementStyle(ESPUI.addControl(Label, "", "D", None, vertgroupslider), switcherLabelStyle);
+
+	//Note that combining vertical and horizontal sliders is going to result in very messy layout!
+
+	/*
+	 * Tab: Example UI
+	 * An example UI for the documentation
+	 *-----------------------------------------------------------------------------------------------------------*/
+	auto exampletab = ESPUI.addControl(Tab, "Example", "Example");
+	ESPUI.addControl(Separator, "Control and Status", "", None, exampletab);
+	ESPUI.addControl(Switcher, "Power", "1", Alizarin, exampletab, generalCallback);
+	ESPUI.addControl(Label, "Status", "System status: OK", Wetasphalt, exampletab, generalCallback);
+
+	ESPUI.addControl(Separator, "Settings", "", None, exampletab);
+	ESPUI.addControl(PadWithCenter, "Attitude Control", "", Dark, exampletab, generalCallback);
+	auto examplegroup1 = ESPUI.addControl(Button, "Activate Features", "Feature A", Carrot, exampletab, generalCallback);
+	ESPUI.addControl(Button, "Activate Features", "Feature B", Carrot, examplegroup1, generalCallback);
+	ESPUI.addControl(Button, "Activate Features", "Feature C", Carrot, examplegroup1, generalCallback);
+	ESPUI.addControl(Slider, "Value control", "45", Peterriver, exampletab, generalCallback);
+
+	/*
+	 * Tab: WiFi Credentials
+	 * You use this tab to enter the SSID and password of a wifi network to autoconnect to.
+	 *-----------------------------------------------------------------------------------------------------------*/
+	auto wifitab = ESPUI.addControl(Tab, "", "WiFi Credentials");
+	wifi_ssid_text = ESPUI.addControl(Text, "SSID", "", Alizarin, wifitab, textCallback);
+	//Note that adding a "Max" control to a text control sets the max length
+	ESPUI.addControl(Max, "", "32", None, wifi_ssid_text);
+	wifi_pass_text = ESPUI.addControl(Text, "Password", "", Alizarin, wifitab, textCallback);
+	ESPUI.addControl(Max, "", "64", None, wifi_pass_text);
+	ESPUI.addControl(Button, "Save", "Save", Peterriver, wifitab,
+	    [](Control *sender, int type) {
+			if(type == B_UP) {
+				Serial.println("Saving credentials to EPROM...");
+				Serial.println(ESPUI.getControl(wifi_ssid_text)->value);
+				Serial.println(ESPUI.getControl(wifi_pass_text)->value);
+				unsigned int i;
+				EEPROM.begin(100);
+				for(i = 0; i < ESPUI.getControl(wifi_ssid_text)->value.length(); i++) {
+					EEPROM.write(i, ESPUI.getControl(wifi_ssid_text)->value.charAt(i));
+					if(i==30) break; //Even though we provided a max length, user input should never be trusted
+				}
+				EEPROM.write(i, '\0');
+
+				for(i = 0; i < ESPUI.getControl(wifi_pass_text)->value.length(); i++) {
+					EEPROM.write(i + 32, ESPUI.getControl(wifi_pass_text)->value.charAt(i));
+					if(i==94) break; //Even though we provided a max length, user input should never be trusted
+				}
+				EEPROM.write(i + 32, '\0');
+				EEPROM.end();
+			}
+	    });
+
+
+	//Finally, start up the UI.
+	//This should only be called once we are connected to WiFi.
+	ESPUI.begin(HOSTNAME);
+
+#ifdef ESP8266
+    } // HeapSelectIram
+#endif
+
+}
+
+
+//Most elements in this test UI are assigned this generic callback which prints some
+//basic information. Event types are defined in ESPUI.h
+void generalCallback(Control *sender, int type) {
+	Serial.print("CB: id(");
+	Serial.print(sender->id);
+	Serial.print(") Type(");
+	Serial.print(type);
+	Serial.print(") '");
+	Serial.print(sender->label);
+	Serial.print("' = ");
+	Serial.println(sender->value);
+}
+
+// Most elements in this test UI are assigned this generic callback which prints some
+// basic information. Event types are defined in ESPUI.h
+// The extended param can be used to pass additional information
+void paramCallback(Control* sender, int type, int param)
+{
+    Serial.print("CB: id(");
+    Serial.print(sender->id);
+    Serial.print(") Type(");
+    Serial.print(type);
+    Serial.print(") '");
+    Serial.print(sender->label);
+    Serial.print("' = ");
+    Serial.println(sender->value);
+    Serial.print("param = ");
+    Serial.println(param);
+}
+
+void setup() {
+	randomSeed(0);
+	Serial.begin(115200);
+	while(!Serial);
+	if(SLOW_BOOT) delay(5000); //Delay booting to give time to connect a serial monitor
+	connectWifi();
+	#if defined(ESP32)
+		WiFi.setSleep(false); //For the ESP32: turn off sleeping to increase UI responsivness (at the cost of power use)
+	#endif
+	setUpUI();
+}
+
+void loop() {
+	static long unsigned lastTime = 0;
+
+	//Send periodic updates if switcher is turned on
+	if(updates && millis() > lastTime + 500) {
+		static uint16_t sliderVal = 10;
+
+		//Flick this switcher on and off
+		ESPUI.updateSwitcher(mainSwitcher, ESPUI.getControl(mainSwitcher)->value.toInt() ? false : true);
+		sliderVal += 10;
+		if(sliderVal > 400) sliderVal = 10;
+
+		//Sliders, numbers, and labels can all be updated at will
+		ESPUI.updateSlider(mainSlider, sliderVal);
+		ESPUI.updateNumber(mainNumber, random(100000));
+		ESPUI.updateLabel(mainLabel, String(sliderVal));
+		lastTime = millis();
+	}
+
+	//Simple debug UART interface
+	if(Serial.available()) {
+		switch(Serial.read()) {
+			case 'w': //Print IP details
+				Serial.println(WiFi.localIP());
+				break;
+			case 'W': //Reconnect wifi
+				connectWifi();
+				break;
+			case 'C': //Force a crash (for testing exception decoder)
+				#if !defined(ESP32)
+					((void (*)())0xf00fdead)();
+				#endif
+				break;
+			default:
+				Serial.print('#');
+				break;
+		}
+	}
+
+	#if !defined(ESP32)
+		//We don't need to call this explicitly on ESP32 but we do on 8266
+		MDNS.update();
+	#endif
+
+}
+
+
+
+
+//Utilities
+//
+//If you are here just to see examples of how to use ESPUI, you can ignore the following functions
+//------------------------------------------------------------------------------------------------
+void readStringFromEEPROM(String& buf, int baseaddress, int size) {
+	buf.reserve(size);
+	for (int i = baseaddress; i < baseaddress+size; i++) {
+		char c = EEPROM.read(i);
+		buf += c;
+		if(!c) break;
+	}
+}
+
+void connectWifi() {
+	int connect_timeout;
+
+#if defined(ESP32)
+	WiFi.setHostname(HOSTNAME);
+#else
+	WiFi.hostname(HOSTNAME);
+#endif
+	Serial.println("Begin wifi...");
+
+	//Load credentials from EEPROM
+	if(!(FORCE_USE_HOTSPOT)) {
+		yield();
+		EEPROM.begin(100);
+		String stored_ssid, stored_pass;
+		readStringFromEEPROM(stored_ssid, 0, 32);
+		readStringFromEEPROM(stored_pass, 32, 96);
+		EEPROM.end();
+
+		//Try to connect with stored credentials, fire up an access point if they don't work.
+		#if defined(ESP32)
+			WiFi.begin(stored_ssid.c_str(), stored_pass.c_str());
+		#else
+			WiFi.begin(stored_ssid, stored_pass);
+		#endif
+		connect_timeout = 28; //7 seconds
+		while (WiFi.status() != WL_CONNECTED && connect_timeout > 0) {
+			delay(250);
+			Serial.print(".");
+			connect_timeout--;
+		}
+	}
+
+	if (WiFi.status() == WL_CONNECTED) {
+		Serial.println(WiFi.localIP());
+		Serial.println("Wifi started");
+
+		if (!MDNS.begin(HOSTNAME)) {
+			Serial.println("Error setting up MDNS responder!");
+		}
+	} else {
+		Serial.println("\nCreating access point...");
+		WiFi.mode(WIFI_AP);
+		WiFi.softAPConfig(IPAddress(192, 168, 1, 1), IPAddress(192, 168, 1, 1), IPAddress(255, 255, 255, 0));
+		WiFi.softAP(HOSTNAME);
+
+		connect_timeout = 20;
+		do {
+			delay(250);
+			Serial.print(",");
+			connect_timeout--;
+		} while(connect_timeout);
+	}
+}
+
+
+void textCallback(Control *sender, int type) {
+	//This callback is needed to handle the changed values, even though it doesn't do anything itself.
+}
+
+void randomString(char *buf, int len) {
+	for(auto i = 0; i < len-1; i++)
+		buf[i] = random(0, 26) + 'A';
+	buf[len-1] = '\0';
+}
--- a/examples/gui-generic-api/gui-generic-api.ino
+++ b/examples/gui-generic-api/gui-generic-api.ino
@ -8,7 +8,19 @@ DNSServer dnsServer;
 #if defined(ESP32)
 #include <WiFi.h>
 #else
+// esp8266
 #include <ESP8266WiFi.h>
+#include <umm_malloc/umm_heap_select.h>
+#ifndef CORE_MOCK
+#ifndef MMU_IRAM_HEAP
+#warning Try MMU option '2nd heap shared' in 'tools' IDE menu (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#option-summary)
+#warning use decorators: { HeapSelectIram doAllocationsInIRAM; ESPUI.addControl(...) ... } (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#how-to-select-heap)
+#warning then check http://<ip>/heap
+#endif // MMU_IRAM_HEAP
+#if !defined(DEBUG_ESP_OOM)
+#error on ESP8266 and ESPUI, you must define OOM debug option when developping
+#endif
+#endif
 #endif

 const char* ssid = "ESPUI";
@ -57,7 +69,8 @@ void buttonCallback(Control* sender, int type)

 void buttonExample(Control* sender, int type, void* param)
 {
-    Serial.println(String("param: ") + String(int(param)));
+    Serial.print("param: ");
+    Serial.println((long)param);
    switch (type)
    {
    case B_DOWN:
@ -235,6 +248,10 @@ void setup(void)
    Serial.print("IP address: ");
    Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP());

+#ifdef ESP8266
+    { HeapSelectIram doAllocationsInIRAM;
+#endif
+
    status = ESPUI.addControl(ControlType::Label, "Status:", "Stop", ControlColor::Turquoise);

    uint16_t select1 = ESPUI.addControl(
@ -281,6 +298,10 @@ void setup(void)
     */

    ESPUI.begin("ESPUI Control");
+
+#ifdef ESP8266
+    } // HeapSelectIram
+#endif
 }

 void loop(void)
--- a/examples/gui/gui.ino
+++ b/examples/gui/gui.ino
@ -8,7 +8,19 @@ DNSServer dnsServer;
 #if defined(ESP32)
 #include <WiFi.h>
 #else
+// esp8266
 #include <ESP8266WiFi.h>
+#include <umm_malloc/umm_heap_select.h>
+#ifndef CORE_MOCK
+#ifndef MMU_IRAM_HEAP
+#warning Try MMU option '2nd heap shared' in 'tools' IDE menu (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#option-summary)
+#warning use decorators: { HeapSelectIram doAllocationsInIRAM; ESPUI.addControl(...) ... } (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#how-to-select-heap)
+#warning then check http://<ip>/heap
+#endif // MMU_IRAM_HEAP
+#ifndef DEBUG_ESP_OOM
+#error on ESP8266 and ESPUI, you must define OOM debug option when developping
+#endif
+#endif
 #endif

 const char* ssid = "ESPUI";
@ -62,7 +74,8 @@ void buttonCallback(Control* sender, int type)

 void buttonExample(Control* sender, int type, void* param)
 {
-    Serial.println(String("param: ") + String(int(param)));
+    Serial.print("param: ");
+    Serial.println((long)param);
    switch (type)
    {
    case B_DOWN:
@ -225,6 +238,10 @@ void setup(void)
    Serial.print("IP address: ");
    Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP());

+#ifdef ESP8266
+    { HeapSelectIram doAllocationsInIRAM;
+#endif
+
    statusLabelId = ESPUI.label("Status:", ControlColor::Turquoise, "Stop");
    millisLabelId = ESPUI.label("Millis:", ControlColor::Emerald, "0");
    ESPUI.button("Push Button", &buttonCallback, ControlColor::Peterriver, "Press");
@ -257,6 +274,10 @@ void setup(void)
     * password, for example begin("ESPUI Control", "username", "password")
     */
    ESPUI.begin("ESPUI Control");
+
+#ifdef ESP8266
+    } // HeapSelectIram
+#endif
 }

 void loop(void)
--- a/examples/tabbedGui/tabbedGui.ino
+++ b/examples/tabbedGui/tabbedGui.ino
@ -8,7 +8,19 @@ DNSServer dnsServer;
 #if defined(ESP32)
 #include <WiFi.h>
 #else
+// esp8266
 #include <ESP8266WiFi.h>
+#include <umm_malloc/umm_heap_select.h>
+#ifndef CORE_MOCK
+#ifndef MMU_IRAM_HEAP
+#warning Try MMU option '2nd heap shared' in 'tools' IDE menu (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#option-summary)
+#warning use decorators: { HeapSelectIram doAllocationsInIRAM; ESPUI.addControl(...) ... } (cf. https://arduino-esp8266.readthedocs.io/en/latest/mmu.html#how-to-select-heap)
+#warning then check http://<ip>/heap
+#endif // MMU_IRAM_HEAP
+#ifndef DEBUG_ESP_OOM
+#error on ESP8266 and ESPUI, you must define OOM debug option when developping
+#endif
+#endif
 #endif

 const char* ssid = "ESPUI";
@ -56,7 +68,8 @@ void buttonCallback(Control* sender, int type)

 void buttonExample(Control* sender, int type, void* param)
 {
-    Serial.println(String("param: ") + String(int(param)));
+    Serial.print("param: ");
+    Serial.println((long)param);
    switch (type)
    {
    case B_DOWN:
@ -233,6 +246,10 @@ void setup(void)
    Serial.print("IP address: ");
    Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP());

+#ifdef ESP8266
+    { HeapSelectIram doAllocationsInIRAM;
+#endif
+
    uint16_t tab1 = ESPUI.addControl(ControlType::Tab, "Settings 1", "Settings 1");
    uint16_t tab2 = ESPUI.addControl(ControlType::Tab, "Settings 2", "Settings 2");
    uint16_t tab3 = ESPUI.addControl(ControlType::Tab, "Settings 3", "Settings 3");
@ -279,6 +296,10 @@ void setup(void)
     */

    ESPUI.begin("ESPUI Control");
+
+#ifdef ESP8266
+    } // HeapSelectIram
+#endif
 }

 void loop(void)
--- a/lang/ESPUI.json
+++ b/lang/ESPUI.json
@ -38,6 +38,25 @@
 				"LANG_ESPUI_SWITCH_SWITCH": "UI 开关",
 				"LANG_ESPUI_PAD_PAD": "UI 面板",
 				"LANG_ESPUI_PAD_CENTER": "中间按钮?"
+			},
+		"tr-TR": {
+			"keys": {
+				"LANG_SUBCATERGORY_ESPUI": "Kullanıcı Arayüzü",
+				"LANG_ESPUI_ESPUI_TITLE": "Başlık",
+				"LANG_ESPUI_ESPUI_HOTSPOT": "Wifi Erişim Noktası Kodunu Etkinleştir",
+				"LANG_ESPUI_ESPUI_TOOLTIP": "ESP32/ESP8266'da bir web arayüzü oluşturur",
+				"LANG_ESPUI_BUTTON_BUTTON": "Kullanıcı Arayüzü Düğmesi",
+				"LANG_ESPUI_NAME": "ad",
+				"LANG_ESPUI_COLOR": "Renk",
+				"LANG_ESPUI_TEXT": "Metin",
+				"LANG_ESPUI_BUTTON_TOOLTIP": "Bir web arayüzü düğmesi",
+				"LANG_ESPUI_LABEL_LABEL": "Kullanıcı Arayüzü Etiketi",
+				"LANG_ESPUI_LABEL": "Etiket",
+				"LANG_ESPUI_LABEL_TOOLTIP": "Kodunuzdan güncelleyebileceğiniz bir web arayüzü etiketi",
+				"LANG_ESPUI_STATE": "Durum",
+				"LANG_ESPUI_SWITCH_SWITCH": "Kullanıcı Arayüzü Anahtarı",
+				"LANG_ESPUI_PAD_PAD": "UI Pad",
+				"LANG_ESPUI_PAD_CENTER": "Orta düğme?"
 			}
 		}
 	}
--- a/library.json
+++ b/library.json
@ -24,14 +24,9 @@
      "name": "ArduinoJson",
      "authors": "Benoit Blanchon",
      "frameworks": "arduino"
-    },
-    {
-      "name": "LittleFS_esp32",
-      "authors": "lorol",
-      "frameworks": "arduino"
    }
  ],
-  "version": "2.1.1",
+  "version": "2.2.3",
  "frameworks": "arduino",
  "platforms": "*"
 }
--- a/library.properties
+++ b/library.properties
@ -1,5 +1,5 @@
 name=ESPUI
-version=2.1.1
+version=2.2.3
 author=Lukas Bachschwell
 maintainer=Lukas Bachschwell <lukas@lbsfilm.at>
 sentence=ESP32 and ESP8266 Web Interface Library
--- a/pio_examples/gui/platformio.ini
+++ b/pio_examples/gui/platformio.ini
@ -18,7 +18,7 @@ board_build.filesystem = littlefs
 lib_extra_dirs = ../../
 lib_deps =
   bblanchon/ArduinoJson @ ^6.18.5
-   https://github.com/esphome/ESPAsyncWebServer @ 3.0.0 ; Updated lib, seems to have recent patches.
+   https://github.com/bmedici/ESPAsyncWebServer ; Use a fork of the library that has a bugfix for the compile.... https://github.com/esphome/ESPAsyncWebServer/pull/17

 lib_ignore =
 	ESP Async WebServer	; force the use of the esphome version
@ -32,12 +32,20 @@ lib_ignore =
 [env:esp8266]
 platform = espressif8266
 board = nodemcuv2
+upload_port  = COM8
+monitor_port = COM8
+monitor_speed = 115200

 [env:esp32]
 platform = espressif32
 board = esp32dev
 monitor_filters = esp32_exception_decoder
 board_build.flash_mode = dout
+;build_flags =
+;    -D DEBUG_ESPUI
 lib_deps =
    ${env.lib_deps}
-    me-no-dev/AsyncTCP@1.1.1
+    me-no-dev/AsyncTCP
+upload_port  = COM9
+monitor_port = COM9
+monitor_speed = 115200
--- a/pio_examples/gui/src/gui.ino
+++ b/pio_examples/gui/src/gui.ino
@ -16,10 +16,12 @@ const char* password = "espui";

 const char* hostname = "espui";

-int statusLabelId;
-int graphId;
-int millisLabelId;
-int testSwitchId;
+String DisplayTestFileName = "/FileName.txt";
+int statusLabelId = Control::noParent;
+int graphId = Control::noParent;
+int millisLabelId = Control::noParent;
+int testSwitchId = Control::noParent;
+int fileDisplayId = Control::noParent;

 void numberCall(Control* sender, int type)
 {
@ -62,7 +64,7 @@ void buttonCallback(Control* sender, int type)

 void buttonExample(Control* sender, int type, void* param)
 {
-    Serial.println(String("param: ") + String(int(param)));
+    Serial.println(String("param: ") + String(long(param)));
    switch (type)
    {
    case B_DOWN:
@ -238,6 +240,7 @@ void setup(void)
    ESPUI.slider("Slider two", &slider, ControlColor::None, 100);
    ESPUI.text("Text Test:", &textCall, ControlColor::Alizarin, "a Text Field");
    ESPUI.number("Numbertest", &numberCall, ControlColor::Alizarin, 5, 0, 10);
+    fileDisplayId = ESPUI.fileDisplay("Filetest", ControlColor::Turquoise, DisplayTestFileName);

    graphId = ESPUI.graph("Graph Test", ControlColor::Wetasphalt);

@ -258,7 +261,15 @@ void setup(void)
     * password, for example begin("ESPUI Control", "username", "password")
     */
    ESPUI.sliderContinuous = true;
-    ESPUI.begin("ESPUI Control");
+    ESPUI.prepareFileSystem();
+    ESPUI.beginLITTLEFS("ESPUI Control");
+
+    // create a text file
+    ESPUI.writeFile("/DisplayFile.txt", "Test Line\n");
+
+    // these files are used by browsers to auto config a connection.
+    ESPUI.writeFile("/wpad.dat", " ");
+    ESPUI.writeFile("/connecttest.txt", " ");
 }

 void loop(void)
@ -268,7 +279,6 @@ void loop(void)
    static long oldTime = 0;
    static bool testSwitchState = false;
    delay(10);
-    return;

    if (millis() - oldTime > 5000)
    {
@ -279,6 +289,21 @@ void loop(void)
        testSwitchState = !testSwitchState;
        ESPUI.updateSwitcher(testSwitchId, testSwitchState);

+        // update the file Display file.
+        File testFile = ESPUI.EspuiLittleFS.open(String("/") + DisplayTestFileName, "a");
+        uint32_t filesize = testFile.size();
+
+        String TestLine = String("Current Time = ") + String(millis()) + "\n";
+        if(filesize < 1000)
+        {
+            testFile.write((const uint8_t*)TestLine.c_str(), TestLine.length());
+            ESPUI.updateControl(fileDisplayId);
+            
+            TestLine += String("filesize: ") + String(filesize);
+            // Serial.println(TestLine);
+        }
+        testFile.close();
+
        oldTime = millis();
    }
 }
--- a/src/ESPUI.cpp
+++ b/src/ESPUI.cpp
--- a/src/ESPUI.h
+++ b/src/ESPUI.h
@ -1,7 +1,7 @@
 #pragma once

 // comment out to turn off debug output
-#define DEBUG_ESPUI true
+// #define DEBUG_ESPUI true
 #define WS_AUTHENTICATION false

 #include <Arduino.h>
@ -34,7 +34,7 @@
 #include <ESPAsyncTCP.h>
 #include <Hash.h>

-#define FILE_WRITE "w"
+#define FILE_WRITING "w"

 #endif

@ -89,18 +89,20 @@ class ESPUIClass
 public:
    ESPUIClass()
    {
-        verbosity = Verbosity::Quiet;
-        jsonUpdateDocumentSize = 2000;
-        jsonInitialDocumentSize = 8000;
-        sliderContinuous = false;
 #ifdef ESP32
        ControlsSemaphore = xSemaphoreCreateMutex();
        xSemaphoreGive(ControlsSemaphore);
 #endif // def ESP32
-    }
-    unsigned int jsonUpdateDocumentSize;
-    unsigned int jsonInitialDocumentSize;
-    bool sliderContinuous;
+	}
+    unsigned int jsonUpdateDocumentSize = 2000;
+#ifdef ESP8266
+    unsigned int jsonInitialDocumentSize = 2000;
+    unsigned int jsonChunkNumberMax = 5;
+#else
+    unsigned int jsonInitialDocumentSize = 8000;
+    unsigned int jsonChunkNumberMax = 0;
+#endif
+    bool sliderContinuous = false;
    void onWsEvent(AsyncWebSocket* server, AsyncWebSocketClient* client, AwsEventType type, void* arg, uint8_t* data, size_t len);
 	bool captivePortal = true;

@ -115,38 +117,25 @@ public:
    void prepareFileSystem(bool format = true); // Initially preps the filesystem and loads a lot of
                              // stuff into LITTLEFS
    void list(); // Lists LITTLEFS directory
+    void writeFile(const char* path, const char* data);

    uint16_t addControl(ControlType type, const char* label);
    uint16_t addControl(ControlType type, const char* label, const String& value);
    uint16_t addControl(ControlType type, const char* label, const String& value, ControlColor color);
    uint16_t addControl(ControlType type, const char* label, const String& value, ControlColor color, uint16_t parentControl);
-    uint16_t addControl(ControlType type, const char* label, const String& value, ControlColor color, uint16_t parentControl, void (*callback)(Control*, int));
-    uint16_t addControl(ControlType type, const char* label, const String& value, ControlColor color, uint16_t parentControl, void (*callback)(Control*, int, void *), void* UserData);
+    uint16_t addControl(ControlType type, const char* label, const String& value, ControlColor color, uint16_t parentControl, std::function<void(Control*, int)> callback);

    bool removeControl(uint16_t id, bool force_rebuild_ui = false);

    // create Elements
    // Create Event Button
-    uint16_t button(const char* label, void (*callback)(Control*, int), ControlColor color, const String& value = "");
-    uint16_t button(const char* label, void (*callback)(Control*, int, void*), ControlColor color, const String& value, void* UserData);
-
-    uint16_t switcher(const char* label, void (*callback)(Control*, int), ControlColor color, bool startState = false); // Create Toggle Button
-    uint16_t switcher(const char* label, void (*callback)(Control*, int, void*), ControlColor color, bool startState, void* UserData); // Create Toggle Button
-
-    uint16_t pad(const char* label, void (*callback)(Control*, int), ControlColor color); // Create Pad Control
-    uint16_t pad(const char* label, void (*callback)(Control*, int, void*), ControlColor color, void* UserData); // Create Pad Control
-
-    uint16_t padWithCenter(const char* label, void (*callback)(Control*, int), ControlColor color); // Create Pad Control with Centerbutton
-    uint16_t padWithCenter(const char* label, void (*callback)(Control*, int, void*), ControlColor color, void* UserData); // Create Pad Control with Centerbutton
-
-    uint16_t slider(const char* label, void (*callback)(Control*, int), ControlColor color, int value, int min = 0, int max = 100); // Create Slider Control
-    uint16_t slider(const char* label, void (*callback)(Control*, int, void*), ControlColor color, int value, int min, int max, void* UserData); // Create Slider Control
-
-    uint16_t number(const char* label, void (*callback)(Control*, int), ControlColor color, int value, int min = 0, int max = 100); // Create a Number Input Control
-    uint16_t number(const char* label, void (*callback)(Control*, int, void*), ControlColor color, int value, int min, int max, void* UserData); // Create a Number Input Control
-
-    uint16_t text(const char* label, void (*callback)(Control*, int), ControlColor color, const String& value = ""); // Create a Text Input Control
-    uint16_t text(const char* label, void (*callback)(Control*, int, void*), ControlColor color, const String& value, void* UserData); // Create a Text Input Control
+    uint16_t button(const char* label, std::function<void(Control*, int)> callback, ControlColor color, const String& value = "");
+    uint16_t switcher(const char* label, std::function<void(Control*, int)> callback, ControlColor color, bool startState = false); // Create Toggle Button
+    uint16_t pad(const char* label, std::function<void(Control*, int)> callback, ControlColor color); // Create Pad Control
+    uint16_t padWithCenter(const char* label, std::function<void(Control*, int)> callback, ControlColor color); // Create Pad Control with Centerbutton
+    uint16_t slider(const char* label, std::function<void(Control*, int)> callback, ControlColor color, int value, int min = 0, int max = 100); // Create Slider Control
+    uint16_t number(const char* label, std::function<void(Control*, int)> callback, ControlColor color, int value, int min = 0, int max = 100); // Create a Number Input Control
+    uint16_t text(const char* label, std::function<void(Control*, int)> callback, ControlColor color, const String& value = ""); // Create a Text Input Control

    // Output only
    uint16_t label(const char* label, ControlColor color,
@ -155,10 +144,10 @@ public:
    uint16_t gauge(const char* label, ControlColor color, int value, int min = 0,
        int max = 100); // Create Gauge display
    uint16_t separator(const char* label); //Create separator
+    uint16_t fileDisplay(const char* label, ControlColor color, String filename);

    // Input only
-    uint16_t accelerometer(const char* label, void (*callback)(Control*, int), ControlColor color);
-    uint16_t accelerometer(const char* label, void (*callback)(Control*, int, void*), ControlColor color, void* UserData);
+    uint16_t accelerometer(const char* label, std::function<void(Control*, int)> callback, ControlColor color);

    // Update Elements

@ -189,9 +178,9 @@ public:
    void clearGraph(uint16_t id, int clientId = -1);
    void addGraphPoint(uint16_t id, int nValue, int clientId = -1);

-    void setPanelStyle(uint16_t id, String style, int clientId = -1);
-    void setElementStyle(uint16_t id, String style, int clientId = -1);
-    void setInputType(uint16_t id, String type, int clientId = -1);
+    void setPanelStyle(uint16_t id, const String& style, int clientId = -1);
+    void setElementStyle(uint16_t id, const String& style, int clientId = -1);
+    void setInputType(uint16_t id, const String& type, int clientId = -1);

    void setPanelWide(uint16_t id, bool wide);
    void setVertical(uint16_t id, bool vert = true);
@ -205,7 +194,58 @@ public:
    void jsonReload();
    void jsonDom(uint16_t startidx, AsyncWebSocketClient* client = nullptr, bool Updating = false);

-    Verbosity verbosity;
+    Verbosity verbosity = Verbosity::Quiet;
+    uint32_t  GetNextControlChangeId();
+    // emulate former extended callback API by using an intermediate lambda (no deprecation)
+    uint16_t addControl(ControlType type, const char* label, const String& value, ControlColor color, uint16_t parentControl, std::function<void(Control*, int, void*)> callback, void* userData)
+    {
+        return addControl(type, label, value, color, parentControl, [callback, userData](Control* sender, int type){ callback(sender, type, userData); });
+    }
+    uint16_t button(const char* label, std::function<void(Control*, int, void*)> callback, ControlColor color, const String& value, void* userData)
+    {
+        return button(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color, value);
+    }
+    uint16_t switcher(const char* label, std::function<void(Control*, int, void*)> callback, ControlColor color, bool startState, void* userData)
+    {
+        return switcher(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color, startState);
+    }
+    uint16_t pad(const char* label, std::function<void(Control*, int, void*)> callback, ControlColor color, void* userData)
+    {
+        return pad(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color);
+    }
+    uint16_t padWithCenter(const char* label, std::function<void(Control*, int, void*)> callback, ControlColor color, void* userData)
+    {
+        return padWithCenter(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color);
+    }
+    uint16_t slider(const char* label, std::function<void(Control*, int, void*)> callback, ControlColor color, int value, int min, int max, void* userData)
+    {
+        return slider(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color, value, min, max);
+    }
+    uint16_t number(const char* label, std::function<void(Control*, int, void*)> callback, ControlColor color, int value, int min, int max, void* userData)
+    {
+        return number(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color, value, min, max);
+    }
+    uint16_t text(const char* label, std::function<void(Control*, int, void*)> callback, ControlColor color, const String& value, void* userData)
+    {
+        return text(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); } , color, value);
+    }
+    uint16_t accelerometer(const char* label, std::function<void(Control*, int, void*)> callback, ControlColor color, void* userData)
+    {
+        return accelerometer(label, [callback, userData](Control* sender, int type){ callback(sender, type, userData); }, color);
+    }
+
+    AsyncWebServer* WebServer() {return server;}
+    AsyncWebSocket* WebSocket() {return ws;}
+
+#if defined(ESP32)
+#   if (ESP_IDF_VERSION_MAJOR == 4 && ESP_IDF_VERSION_MINOR >= 4) || ESP_IDF_VERSION_MAJOR > 4
+        fs::LittleFSFS & EspuiLittleFS = LittleFS;
+    #else
+        fs::LITTLEFSFS & EspuiLittleFS = LITTLEFS;
+#   endif
+#else
+    fs::FS & EspuiLittleFS = LittleFS;
+#endif

 protected:
    friend class ESPUIclient;
@ -225,15 +265,17 @@ protected:
    bool basicAuth = true;
    uint16_t controlCount = 0;

+    uint16_t addControl(ControlType type, const char* label, const String& value, ControlColor color, uint16_t parentControl, Control* control);
+
 #define ClientUpdateType_t ESPUIclient::ClientUpdateType_t
    void NotifyClients(ClientUpdateType_t newState);
    void NotifyClient(uint32_t WsClientId, ClientUpdateType_t newState);
-    void ClearControlUpdateFlags();

    bool SendJsonDocToWebSocket(ArduinoJson::DynamicJsonDocument& document, uint16_t clientId);

    std::map<uint32_t, ESPUIclient*> MapOfClients;

+    uint32_t    ControlChangeID = 0;
 };

 extern ESPUIClass ESPUI;
--- a/src/ESPUIclient.cpp
+++ b/src/ESPUIclient.cpp
@ -2,6 +2,42 @@
 #include "ESPUIclient.h"
 #include "ESPUIcontrol.h"

+// JSONSlave:
+// helper to process exact JSON serialization size
+// it takes ~2ms on esp8266 and avoid large String reallocation which is really worth the cost
+class JSONSlave: public Print
+{
+public:
+    size_t write (uint8_t c) override { counter++; return 1; }
+    size_t write (const uint8_t* buf, size_t count) override { counter += count; return count; }
+    size_t get_counter () { return counter; }
+
+    static size_t serializedSize (JsonDocument& doc)
+    {
+        JSONSlave counter;
+        serializeJson(doc, counter);
+        return counter.get_counter();
+    }
+
+    static size_t serialize (JsonDocument& doc, String& str)
+    {
+        size_t s = serializedSize(doc) + 10; // 10 is paranoid
+        str.reserve(s);
+        serializeJson(doc, str);
+        return s;
+    }
+
+    static String toString (JsonDocument& doc)
+    {
+        String str;
+        serialize(doc, str);
+        return str;
+    }
+
+protected:
+    size_t counter = 0;
+};
+
 ESPUIclient::ESPUIclient(AsyncWebSocketClient * _client):
    client(_client)
 {
@ -64,7 +100,7 @@ bool ESPUIclient::SendClientNotification(ClientUpdateType_t value)
    {
        if(!CanSend())
        {
-            // Serial.println(F("ESPUIclient::NotifyClient"));
+            // Serial.println(F("ESPUIclient::SendClientNotification:CannotSend"));
            break;
        }

@ -88,42 +124,12 @@ void ESPUIclient::NotifyClient(ClientUpdateType_t newState)
 {
    SetState(newState);
    pCurrentFsmState->NotifyClient();
-
-#ifdef OldWay
-    do // once
-    {
-        // Serial.println(String("ESPUIclient::NotifyClient: State: ") + String(int(newState)));
-        SetState(newState);
-
-        if (HasBeenNotified)
-        {
-            // do not need to do anything
-            break;
-        }
-        
-        if(TransferIsInprogress)
-        {
-            // record that a notification was needed while we were transfering data to the client
-            DelayedNotification = true;
-            break;
-        }
-
-        DelayedNotification = false;
-
-        if (SendJsonDocToWebSocket(document))
-        {
-            HasBeenNotified = true;
-        }
-
-    } while (false);
-
-    return HasBeenNotified;
-#endif // def OldWay
 }

 // Handle Websockets Communication
-void ESPUIclient::onWsEvent(AwsEventType type, void* arg, uint8_t* data, size_t len)
+bool ESPUIclient::onWsEvent(AwsEventType type, void* arg, uint8_t* data, size_t len)
 {
+    bool Response = false;
    // Serial.println(String("ESPUIclient::OnWsEvent: type: ") + String(type));

    switch (type)
@ -192,8 +198,24 @@ void ESPUIclient::onWsEvent(AwsEventType type, void* arg, uint8_t* data, size_t

            if (cmd.equals(F("uiok")))
            {
-                // Serial.println(F("ESPUIclient::OnWsEvent:WS_EVT_DATA:uiok:ProcessAck"));
-                pCurrentFsmState->ProcessAck(id);
+                
+                // Serial.println(String(F("ESPUIclient::OnWsEvent:WS_EVT_DATA:uiok:ProcessAck:")) + pCurrentFsmState->GetStateName());
+                pCurrentFsmState->ProcessAck(id, emptyString);
+                break;
+            }
+
+            if (cmd.equals(F("uifragmentok")))
+            {
+                // Serial.println(String(F("ESPUIclient::OnWsEvent:WS_EVT_DATA:uiok:uifragmentok:")) + pCurrentFsmState->GetStateName() + ":ProcessAck");
+                if(!emptyString.equals(value))
+                {
+                    // Serial.println(String(F("ESPUIclient::OnWsEvent:WS_EVT_DATA:uiok:uifragmentok:")) + pCurrentFsmState->GetStateName() + ":ProcessAck:value:'" +  value + "'");
+                    pCurrentFsmState->ProcessAck(uint16_t(-1), value);
+                }
+                else
+                {
+                    Serial.println(F("ERROR:ESPUIclient::OnWsEvent:WS_EVT_DATA:uifragmentok:ProcessAck:Fragment Header is missing"));
+                }
                break;
            }

@ -203,6 +225,7 @@ void ESPUIclient::onWsEvent(AwsEventType type, void* arg, uint8_t* data, size_t
                break;
            }

+            // Serial.println(F("WS_EVT_DATA:Process Control"));
            Control* control = ESPUI.getControl(id);
            if (nullptr == control)
            {
@ -215,6 +238,8 @@ void ESPUIclient::onWsEvent(AwsEventType type, void* arg, uint8_t* data, size_t
                break;
            }
            control->onWsEvent(cmd, value);
+            // notify other clients of change
+            Response = true;
            break;
        }

@ -224,6 +249,8 @@ void ESPUIclient::onWsEvent(AwsEventType type, void* arg, uint8_t* data, size_t
            break;
        }
    } // end switch
+
+    return Response;
 }

 /*
@ -233,7 +260,8 @@ client will acknowledge receipt by requesting the next chunk.
 */
 uint32_t ESPUIclient::prepareJSONChunk(uint16_t startindex,
                                      DynamicJsonDocument & rootDoc,
-                                      bool InUpdateMode)
+                                      bool InUpdateMode,
+                                      String FragmentRequestString)
 {
 #ifdef ESP32
    xSemaphoreTake(ESPUI.ControlsSemaphore, portMAX_DELAY);
@ -247,8 +275,61 @@ uint32_t ESPUIclient::prepareJSONChunk(uint16_t startindex,
        // Follow the list until control points to the startindex'th node
        Control* control = ESPUI.controls;
        uint32_t currentIndex = 0;
+        uint32_t DataOffset = 0;
        JsonArray items = rootDoc[F("controls")];
+        bool SingleControl = false;

+        if(!emptyString.equals(FragmentRequestString))
+        {
+            // Serial.println(F("prepareJSONChunk:Fragmentation:Got Header (1)"));
+            // Serial.println(String("prepareJSONChunk:startindex:                  ") + String(startindex));
+            // Serial.println(String("prepareJSONChunk:currentIndex:                ") + String(currentIndex));
+            // Serial.println(String("prepareJSONChunk:FragmentRequestString:      '") + FragmentRequestString + "'");
+
+            // this is actually a fragment or directed update request
+            // parse the string we got from the UI and try to update that specific 
+            // control.
+            DynamicJsonDocument FragmentRequest(FragmentRequestString.length() * 3);
+            if(0 >= FragmentRequest.capacity())
+            {
+                Serial.println(F("ERROR:prepareJSONChunk:Fragmentation:Could not allocate memory for a fragmentation request. Skipping Response"));
+                break;
+            }
+            size_t FragmentRequestStartOffset = FragmentRequestString.indexOf("{");
+            DeserializationError error = deserializeJson(FragmentRequest, FragmentRequestString.substring(FragmentRequestStartOffset));
+            if(DeserializationError::Ok != error)
+            {
+                Serial.println(F("ERROR:prepareJSONChunk:Fragmentation:Could not extract json from the fragment request"));
+                break;
+            }
+
+            if(!FragmentRequest.containsKey(F("id")))
+            {
+                Serial.println(F("ERROR:prepareJSONChunk:Fragmentation:Request does not contain a control ID"));
+                break;
+            }
+            uint16_t ControlId = uint16_t(FragmentRequest[F("id")]);
+
+            if(!FragmentRequest.containsKey(F("offset")))
+            {
+                Serial.println(F("ERROR:prepareJSONChunk:Fragmentation:Request does not contain a starting offset"));
+                break;
+            }
+            DataOffset = uint16_t(FragmentRequest[F("offset")]);
+            control = ESPUI.getControlNoLock(ControlId);
+            if(nullptr == control)
+            {
+                Serial.println(String(F("ERROR:prepareJSONChunk:Fragmentation:Requested control: ")) + String(ControlId) + F(" does not exist"));
+                break;
+            }
+
+            // Serial.println(F("prepareJSONChunk:Fragmentation:disable the control search operation"));
+            currentIndex = 1;
+            startindex = 0;
+            SingleControl = true;
+        }
+
+        // find a control to send
        while ((startindex > currentIndex) && (nullptr != control))
        {
            // only count active controls
@ -257,7 +338,7 @@ uint32_t ESPUIclient::prepareJSONChunk(uint16_t startindex,
                if(InUpdateMode)
                {
                    // In update mode we only count the controls that have been updated.
-                    if(control->IsUpdated())
+                    if(control->NeedsSync(CurrentSyncID))
                    {
                        ++currentIndex;
                    }
@ -284,16 +365,16 @@ uint32_t ESPUIclient::prepareJSONChunk(uint16_t startindex,
        while (nullptr != control)
        {
            // skip deleted controls or controls that have not been updated
-            if (control->ToBeDeleted())
+            if (control->ToBeDeleted() && !SingleControl)
            {
                // Serial.println(String("prepareJSONChunk: Ignoring Deleted control: ") + String(control->id));
                control = control->next;
                continue;
            }

-            if(InUpdateMode)
+            if(InUpdateMode && !SingleControl)
            {
-                if(control->IsUpdated())
+                if(control->NeedsSync(CurrentSyncID))
                {
                    // dont skip this control
                }
@ -307,14 +388,15 @@ uint32_t ESPUIclient::prepareJSONChunk(uint16_t startindex,

            JsonObject item = items.createNestedObject();
            elementcount++;
-            control->MarshalControl(item, InUpdateMode);
+            control->MarshalControl(item, InUpdateMode, DataOffset);
            
-            if (rootDoc.overflowed())
+            if (rootDoc.overflowed() || (ESPUI.jsonChunkNumberMax > 0 && (elementcount % ESPUI.jsonChunkNumberMax) == 0))
            {
                // String("prepareJSONChunk: too much data in the message. Remove the last entry");
                if (1 == elementcount)
                {
                    Serial.println(String(F("ERROR: prepareJSONChunk: Control ")) + String(control->id) + F(" is too large to be sent to the browser."));
+                    // Serial.println(String(F("ERROR: prepareJSONChunk: value: ")) + control->value);
                    rootDoc.clear();
                    item = items.createNestedObject();
                    control->MarshalErrorMessage(item);
@ -330,7 +412,11 @@ uint32_t ESPUIclient::prepareJSONChunk(uint16_t startindex,
                }
                // exit the loop
                control = nullptr;
-
+            }
+            else if (SingleControl)
+            {
+                // Serial.println("prepareJSONChunk: exit loop");
+                control = nullptr;
            }
            else
            {
@ -368,8 +454,7 @@ CLIENT: controls.js:handleEvent()
 etc.
    Returns true if all controls have been sent (aka: Done)
 */
-bool ESPUIclient::SendControlsToClient(uint16_t startidx,
-                                       ClientUpdateType_t TransferMode)
+bool ESPUIclient::SendControlsToClient(uint16_t startidx, ClientUpdateType_t TransferMode, String FragmentRequest)
 {
    bool Response = false;
    // Serial.println(String("ESPUIclient:SendControlsToClient:startidx: ") + String(startidx));
@ -381,9 +466,9 @@ bool ESPUIclient::SendControlsToClient(uint16_t startidx,
            break;
        }

-        if (startidx >= ESPUI.controlCount)
+        else if ((startidx >= ESPUI.controlCount) && (emptyString.equals(FragmentRequest)))
        {
-            // Serial.println("ESPUIclient:SendControlsToClient: No more controls to send.");
+            // Serial.println(F("ERROR:ESPUIclient:SendControlsToClient: No more controls to send."));
            Response = true;
            break;
        }
@ -391,25 +476,26 @@ bool ESPUIclient::SendControlsToClient(uint16_t startidx,
        DynamicJsonDocument document(ESPUI.jsonInitialDocumentSize);
        FillInHeader(document);
        document[F("startindex")] = startidx;
-        document[F("totalcontrols")] = 65534; // ESPUI.controlCount;
+        document[F("totalcontrols")] = uint16_t(-1); // ESPUI.controlCount;

        if(0 == startidx)
        {
            // Serial.println("ESPUIclient:SendControlsToClient: Tell client we are starting a transfer of controls.");
            document["type"] = (ClientUpdateType_t::RebuildNeeded == TransferMode) ? UI_INITIAL_GUI : UI_EXTEND_GUI;
+            CurrentSyncID = NextSyncID;
+            NextSyncID = ESPUI.GetNextControlChangeId();
        }
        // Serial.println(String("ESPUIclient:SendControlsToClient:type: ") + String((uint32_t)document["type"]));

        // Serial.println("ESPUIclient:SendControlsToClient: Build Controls.");
-        if(prepareJSONChunk(startidx, document, ClientUpdateType_t::UpdateNeeded == TransferMode))
+        if(prepareJSONChunk(startidx, document, ClientUpdateType_t::UpdateNeeded == TransferMode, FragmentRequest))
        {
            #if defined(DEBUG_ESPUI)
                if (ESPUI.verbosity >= Verbosity::VerboseJSON)
                {
                    Serial.println(F("ESPUIclient:SendControlsToClient: Sending elements --------->"));
-                    String json;
-                    serializeJson(document, json);
-                    Serial.println(json);
+                    serializeJson(document, Serial);
+                    Serial.println();
                }
            #endif

@ -454,10 +540,7 @@ bool ESPUIclient::SendJsonDocToWebSocket(DynamicJsonDocument& document)
            break;
        }

-        String json;
-        json.reserve(document.size() / 2);
-        json.clear();
-        serializeJson(document, json);
+        String json = JSONSlave::toString(document);

        #if defined(DEBUG_ESPUI)
            if (ESPUI.verbosity >= Verbosity::VerboseJSON)
--- a/src/ESPUIclient.h
+++ b/src/ESPUIclient.h
@ -44,19 +44,24 @@ protected:

    bool        CanSend();
    void        FillInHeader(ArduinoJson::DynamicJsonDocument& document);
-    uint32_t    prepareJSONChunk(uint16_t startindex, DynamicJsonDocument& rootDoc, bool InUpdateMode);
-    bool        SendControlsToClient(uint16_t startidx, ClientUpdateType_t TransferMode);
+    uint32_t    prepareJSONChunk(uint16_t startindex, DynamicJsonDocument& rootDoc, bool InUpdateMode, String value);
+    bool        SendControlsToClient(uint16_t startidx, ClientUpdateType_t TransferMode, String FragmentRequest);

    bool        SendClientNotification(ClientUpdateType_t value);

+private:
+    uint32_t    CurrentSyncID = 0;
+    uint32_t    NextSyncID = 0;
+
 public:
                ESPUIclient(AsyncWebSocketClient * _client);
                ESPUIclient(const ESPUIclient & source);
    virtual     ~ESPUIclient();
    void        NotifyClient(ClientUpdateType_t value);
-    void        onWsEvent(AwsEventType type, void* arg, uint8_t* data, size_t len);
+    bool        onWsEvent(AwsEventType type, void* arg, uint8_t* data, size_t len);
    bool        IsSyncronized();
    uint32_t    id() { return client->id(); }
    void        SetState(ClientUpdateType_t value);
    bool        SendJsonDocToWebSocket(ArduinoJson::DynamicJsonDocument& document);
+
 };
--- a/src/ESPUIclientFsm.cpp
+++ b/src/ESPUIclientFsm.cpp
@ -58,12 +58,20 @@ bool fsm_EspuiClient_state_Idle::NotifyClient()
    return Response;
 }

-void fsm_EspuiClient_state_Idle::ProcessAck(uint16_t)
+void fsm_EspuiClient_state_Idle::ProcessAck(uint16_t ControlIndex, String FragmentRequestString)
 {
-    // This is an unexpected request for control data from the browser
-    // treat it as if it was a rebuild operation
-    // Serial.println(F("fsm_EspuiClient_state_Idle: ProcessAck"));
-    Parent->NotifyClient(ClientUpdateType_t::RebuildNeeded);
+    if(!emptyString.equals(FragmentRequestString))
+    {
+        // Serial.println(F("fsm_EspuiClient_state_Idle::ProcessAck:Fragmentation:Got fragment Header"));
+        Parent->SendControlsToClient(ControlIndex, ClientUpdateType_t::UpdateNeeded, FragmentRequestString);
+    }
+    else
+    {
+        // This is an unexpected request for control data from the browser
+        // treat it as if it was a rebuild operation
+        // Serial.println(F("fsm_EspuiClient_state_Idle: ProcessAck:Error: Rebuild"));
+        Parent->NotifyClient(ClientUpdateType_t::RebuildNeeded);
+    }
 }

 //----------------------------------------------
@ -75,10 +83,10 @@ bool fsm_EspuiClient_state_SendingUpdate::NotifyClient()
    return true; /* Ignore request */
 }

-void fsm_EspuiClient_state_SendingUpdate::ProcessAck(uint16_t ControlIndex)
+void fsm_EspuiClient_state_SendingUpdate::ProcessAck(uint16_t ControlIndex, String FragmentRequest)
 {
    // Serial.println(F("fsm_EspuiClient_state_SendingUpdate: ProcessAck"));
-    if(Parent->SendControlsToClient(ControlIndex, ClientUpdateType_t::UpdateNeeded))
+    if(Parent->SendControlsToClient(ControlIndex, ClientUpdateType_t::UpdateNeeded, FragmentRequest))
    {
        // No more data to send. Go back to idle or start next request
        Parent->fsm_EspuiClient_state_Idle_imp.Init();
@ -89,19 +97,53 @@ void fsm_EspuiClient_state_SendingUpdate::ProcessAck(uint16_t ControlIndex)
 //----------------------------------------------
 //----------------------------------------------
 //----------------------------------------------
+void fsm_EspuiClient_state_Rebuilding::Init()
+{
+    // Serial.println(String("fsm_EspuiClient_state:Init: ") + GetStateName());
+    Parent->CurrentSyncID = 0;
+    Parent->NextSyncID = 0;
+    Parent->pCurrentFsmState = this;
+}
+
 bool fsm_EspuiClient_state_Rebuilding::NotifyClient()
 {
    // Serial.println(F("fsm_EspuiClient_state_Rebuilding: NotifyClient"));
    return true; /* Ignore request */
 }

-void fsm_EspuiClient_state_Rebuilding::ProcessAck(uint16_t ControlIndex)
+void fsm_EspuiClient_state_Rebuilding::ProcessAck(uint16_t ControlIndex, String FragmentRequest)
 {
    // Serial.println(F("fsm_EspuiClient_state_Rebuilding: ProcessAck"));
-    if(Parent->SendControlsToClient(ControlIndex, ClientUpdateType_t::RebuildNeeded))
+    if(Parent->SendControlsToClient(ControlIndex, ClientUpdateType_t::RebuildNeeded, FragmentRequest))
    {
        // No more data to send. Go back to idle or start next request
        Parent->fsm_EspuiClient_state_Idle_imp.Init();
        Parent->fsm_EspuiClient_state_Idle_imp.NotifyClient();
    }
 }
+
+//----------------------------------------------
+//----------------------------------------------
+//----------------------------------------------
+void fsm_EspuiClient_state_Reloading::Init()
+{
+    // Serial.println(String("fsm_EspuiClient_state:Init: ") + GetStateName());
+    Parent->CurrentSyncID = 0;
+    Parent->NextSyncID = 0;
+    Parent->pCurrentFsmState = this;
+}
+
+void fsm_EspuiClient_state_Reloading::ProcessAck(uint16_t ControlIndex, String FragmentRequestString)
+{
+    if(!emptyString.equals(FragmentRequestString))
+    {
+        // Serial.println(F("fsm_EspuiClient_state_Reloading::ProcessAck:Fragmentation:Got fragment Header"));
+        Parent->SendControlsToClient(ControlIndex, ClientUpdateType_t::UpdateNeeded, FragmentRequestString);
+    }
+}
+
+bool fsm_EspuiClient_state_Reloading::NotifyClient()
+{
+    // Serial.println(F("fsm_EspuiClient_state_Reloading: NotifyClient"));
+    return true; /* Ignore request */
+}
--- a/src/ESPUIclientFsm.h
+++ b/src/ESPUIclientFsm.h
@ -20,7 +20,7 @@ public:

            void Init();
    virtual bool NotifyClient() = 0;
-    virtual void ProcessAck(uint16_t id) = 0;
+    virtual void ProcessAck(uint16_t id, String FragmentRequest) = 0;
    virtual String GetStateName () = 0;
            void SetParent(ESPUIclient * value) { Parent = value; }

@ -36,7 +36,7 @@ public:
    virtual     ~fsm_EspuiClient_state_Idle() {}

    virtual bool NotifyClient();
-    virtual void ProcessAck(uint16_t id);
+    virtual void ProcessAck(uint16_t id, String FragmentRequest);
            String GetStateName() { return String(F("Idle")); }

 }; // fsm_EspuiClient_state_Idle
@ -48,7 +48,7 @@ public:
    virtual     ~fsm_EspuiClient_state_SendingUpdate() {}

    virtual bool NotifyClient();
-    virtual void ProcessAck(uint16_t id);
+    virtual void ProcessAck(uint16_t id, String FragmentRequest);
            String GetStateName() { return String(F("Sending Update")); }

 }; // fsm_EspuiClient_state_SendingUpdate
@ -59,8 +59,9 @@ public:
                 fsm_EspuiClient_state_Rebuilding() {}
    virtual     ~fsm_EspuiClient_state_Rebuilding() {}

+            void Init();
    virtual bool NotifyClient();
-    virtual void ProcessAck(uint16_t id);
+    virtual void ProcessAck(uint16_t id, String FragmentRequest);
            String GetStateName() { return String(F("Sending Rebuild")); }

 }; // fsm_EspuiClient_state_Rebuilding
@ -71,8 +72,9 @@ public:
                 fsm_EspuiClient_state_Reloading() {}
    virtual     ~fsm_EspuiClient_state_Reloading() {}

-    virtual bool NotifyClient() { return false; }
-    virtual void ProcessAck(uint16_t) {}
+            void Init();
+    virtual bool NotifyClient();
+    virtual void ProcessAck(uint16_t id, String FragmentRequest);
            String GetStateName() { return String(F("Reloading")); }

 }; // fsm_EspuiClient_state_Reloading
--- a/src/ESPUIcontrol.cpp
+++ b/src/ESPUIcontrol.cpp
@ -3,13 +3,11 @@
 static uint16_t idCounter = 0;
 static const String ControlError = "*** ESPUI ERROR: Could not transfer control ***";

-Control::Control(ControlType type, const char* label, void (*callback)(Control*, int, void*), void* UserData,
+Control::Control(ControlType type, const char* label, std::function<void(Control*, int)> callback,
    const String& value, ControlColor color, bool visible, uint16_t parentControl)
    : type(type),
      label(label),
-      callback(nullptr),
-      extendedCallback(callback),
-      user(UserData),
+      callback(callback),
      value(value),
      color(color),
      visible(visible),
@ -20,6 +18,7 @@ Control::Control(ControlType type, const char* label, void (*callback)(Control*,
      next(nullptr)
 {
    id = ++idCounter;
+    ControlChangeID = 1;
 }

 Control::Control(const Control& Control)
@ -27,13 +26,12 @@ Control::Control(const Control& Control)
        id(Control.id),
        label(Control.label),
        callback(Control.callback),
-        extendedCallback(Control.extendedCallback),
-        user(Control.user),
        value(Control.value),
        color(Control.color),
        visible(Control.visible),
        parentControl(Control.parentControl),
-        next(Control.next)
+        next(Control.next),
+        ControlChangeID(Control.ControlChangeID)
 { }

 void Control::SendCallback(int type)
@ -42,33 +40,64 @@ void Control::SendCallback(int type)
    {
        callback(this, type);
    }
-
-    if (extendedCallback)
-    {
-        extendedCallback(this, type, user);
-    }
 }

 void Control::DeleteControl() 
 {
-    ControlSyncState = ControlSyncState_t::deleted;
-    extendedCallback = nullptr;
+    _ToBeDeleted = true;
    callback = nullptr;
 }

-void Control::MarshalControl(JsonObject & item, bool refresh)
+void Control::MarshalControl(JsonObject & _item, bool refresh, uint32_t StartingOffset)
 {
+    JsonObject & item = _item;
+    uint32_t length = value.length();
+    uint32_t maxLength = uint32_t(double(ESPUI.jsonInitialDocumentSize) * 0.75);
+    if((length > maxLength) || StartingOffset)
+    {
+    	/*
+        Serial.println(String("MarshalControl:Start Fragment Processing"));
+        Serial.println(String("MarshalControl:id:                ") + String(id));
+        Serial.println(String("MarshalControl:length:            ") + String(length));
+        Serial.println(String("MarshalControl:StartingOffset:    ") + String(StartingOffset));
+        Serial.println(String("MarshalControl:maxLength:         ") + String(maxLength));
+
+        if(0 == StartingOffset)
+        {
+            Serial.println(String("MarshalControl: New control to fragement. ID: ") + String(id));
+        }
+        else
+        {
+            Serial.println(String("MarshalControl: Next fragement. ID: ") + String(id));
+        }
+		*/
+
+        // indicate that no additional controls should be sent
+        _item[F("type")] = uint32_t(ControlType::Fragment);
+        _item[F("id")]   = id;
+
+        length = min((length - StartingOffset), maxLength);
+        // Serial.println(String("MarshalControl:Final length:      ") + String(length));
+
+        _item[F("offset")] = StartingOffset;
+        _item[F("length")] = length;
+        _item[F("total")] = value.length();
+        item = _item.createNestedObject(F("control"));
+    }
+
    item[F("id")]      = id;
+    ControlType TempType = (ControlType::Password == type) ? ControlType::Text : type;
    if(refresh)
    {
-        item[F("type")] = uint32_t(type) + uint32_t(ControlType::UpdateOffset);
+        item[F("type")] = uint32_t(TempType) + uint32_t(ControlType::UpdateOffset);
    }
    else
    {
-        item[F("type")] = uint32_t(type);
+        item[F("type")] = uint32_t(TempType);
    }
+
    item[F("label")]   = label;
-    item[F("value")]   = value;
+    item[F ("value")]   = (ControlType::Password == type) ? F ("--------") : value.substring(StartingOffset, length + StartingOffset);
    item[F("visible")] = visible;
    item[F("color")]   = (int)color;
    item[F("enabled")] = enabled;
@ -123,6 +152,8 @@ void Control::onWsEvent(String & cmd, String& data)
 {
    do // once
    {
+        // Serial.println(String(F("Control::onWsEvent")));
+        SetControlChangedId(ESPUI.GetNextControlChangeId());
        if (!HasCallback())
        {
            #if defined(DEBUG_ESPUI)
@ -249,3 +280,4 @@ void Control::onWsEvent(String & cmd, String& data)
        }
    } while (false);
 }
+
--- a/src/ESPUIcontrol.h
+++ b/src/ESPUIcontrol.h
@ -2,6 +2,7 @@

 #include <Arduino.h>
 #include <ArduinoJson.h>
+#include <functional>

 enum ControlType : uint8_t
 {
@ -29,7 +30,10 @@ enum ControlType : uint8_t
    Accel,
    Separator,
    Time,
+    FileDisplay,

+    Fragment = 98,
+    Password = 99,
    UpdateOffset = 100,
 };

@ -52,9 +56,7 @@ public:
    ControlType type;
    uint16_t id; // just mirroring the id here for practical reasons
    const char* label;
-    void (*callback)(Control*, int);
-    void (*extendedCallback)(Control*, int, void*);
-    void* user;
+    std::function<void(Control*, int)> callback;
    String value;
    ControlColor color;
    bool visible;
@ -71,8 +73,7 @@ public:

    Control(ControlType type, 
            const char* label, 
-            void (*callback)(Control*, int, void*), 
-            void* UserData,
+            std::function<void(Control*, int)> callback,
            const String& value, 
            ControlColor color, 
            bool visible, 
@ -81,24 +82,19 @@ public:
    Control(const Control& Control);

    void SendCallback(int type);
-    bool HasCallback() { return ((nullptr != callback) || (nullptr != extendedCallback)); }
-    void MarshalControl(ArduinoJson::JsonObject& item, bool refresh);
+    bool HasCallback() { return (nullptr != callback); }
+    void MarshalControl(ArduinoJson::JsonObject& item, bool refresh, uint32_t DataOffset);
    void MarshalErrorMessage(ArduinoJson::JsonObject& item);
-    bool ToBeDeleted() { return (ControlSyncState_t::deleted == ControlSyncState); }
    void DeleteControl();
-    bool IsUpdated() { return ControlSyncState_t::synchronized != ControlSyncState; }
-    void HasBeenUpdated() { ControlSyncState = ControlSyncState_t::updated; }
-    void HasBeenSynchronized() {ControlSyncState = ControlSyncState_t::synchronized;}
    void onWsEvent(String& cmd, String& data);
-
+    inline bool ToBeDeleted() { return _ToBeDeleted; }
+    inline bool NeedsSync(uint32_t lastControlChangeID) {return (false == _ToBeDeleted) && (lastControlChangeID < ControlChangeID);}
+    void    SetControlChangedId(uint32_t value) {ControlChangeID = value;}
+    
 private:
-    enum ControlSyncState_t
-    {
-        synchronized = 0,
-        updated,
-        deleted,
-    };
-    ControlSyncState_t ControlSyncState = ControlSyncState_t::synchronized;
+    bool _ToBeDeleted = false;
+    uint32_t ControlChangeID = 0;
+    String OldValue = emptyString;
 };

 #define UI_TITLE            ControlType::Title
--- a/src/dataControlsJS.h
+++ b/src/dataControlsJS.h
--- a/src/dataGraphJS.h
+++ b/src/dataGraphJS.h
@ -1,6 +1,6 @@
 const char JS_GRAPH[] PROGMEM = R"=====(
 function lineGraph(parent,xAccessor,yAccessor){const width=620;const height=420;const gutter=40;const pixelsPerTick=30;function numericTransformer(dataMin,dataMax,pxMin,pxMax){var dataDiff=dataMax-dataMin,pxDiff=pxMax-pxMin,dataRatio=pxDiff/dataDiff,coordRatio=dataDiff/pxDiff;return{toCoord:function(data){return(data-dataMin)*dataRatio+pxMin;},toData:function(coord){return(coord-pxMin)*coordRatio+dataMin;}};}
-function axisRenderer(orientation,transform){var axisGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var axisPath=document.createElementNS("http://www.w3.org/2000/svg","path");axisGroup.setAttribute("class",orientation+"-axis");var xMin=gutter;var xMax=width-gutter;var yMin=height-gutter;var yMax=gutter;if(orientation==="x"){axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMax+" "+yMin);for(var i=xMin;i<=xMax;i++){if((i-xMin)%pixelsPerTick===0&&i!==xMin){var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(transform(i));text.setAttribute("x",i);text.setAttribute("y",yMin);text.setAttribute("dy","1em");axisGroup.appendChild(text);}}}else{axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMin+" "+yMax);for(var i=yMax;i<=yMin;i++){if((i-yMin)%pixelsPerTick===0&&i!==yMin){var tickGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var gridLine=document.createElementNS("http://www.w3.org/2000/svg","path");text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(transform(i));text.setAttribute("x",xMin);text.setAttribute("y",i);text.setAttribute("dx","-.5em");text.setAttribute("dy",".3em");gridLine.setAttribute("d","M "+xMin+" "+i+" L "+xMax+" "+i);tickGroup.appendChild(gridLine);tickGroup.appendChild(text);axisGroup.appendChild(tickGroup);}}}
+function axisRenderer(orientation,transform){var axisGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var axisPath=document.createElementNS("http://www.w3.org/2000/svg","path");axisGroup.setAttribute("class",orientation+"-axis");var xMin=gutter;var xMax=width-gutter;var yMin=height-gutter;var yMax=gutter;if(orientation==="x"){axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMax+" "+yMin);for(var i=xMin;i<=xMax;i++){if((i-xMin)%(pixelsPerTick*3)===0&&i!==xMin){var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=new Date(Math.floor(transform(i))).toLocaleTimeString();text.setAttribute("x",i);text.setAttribute("y",yMin);text.setAttribute("dy","1em");axisGroup.appendChild(text);}}}else{axisPath.setAttribute("d","M "+xMin+" "+yMin+" L "+xMin+" "+yMax);for(var i=yMax;i<=yMin;i++){if((i-yMin)%pixelsPerTick===0&&i!==yMin){var tickGroup=document.createElementNS("http://www.w3.org/2000/svg","g");var gridLine=document.createElementNS("http://www.w3.org/2000/svg","path");text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(transform(i));text.setAttribute("x",xMin);text.setAttribute("y",i);text.setAttribute("dx","-.5em");text.setAttribute("dy",".3em");gridLine.setAttribute("d","M "+xMin+" "+i+" L "+xMax+" "+i);tickGroup.appendChild(gridLine);tickGroup.appendChild(text);axisGroup.appendChild(tickGroup);}}}
 axisGroup.appendChild(axisPath);parent.appendChild(axisGroup);}
 function lineRenderer(xAccessor,yAccessor,xTransform,yTransform){var line=document.createElementNS("http://www.w3.org/2000/svg","path");xAccessor.reset();yAccessor.reset();if(!xAccessor.hasNext()||!yAccessor.hasNext()){return;}
 var pathString="M "+xTransform(xAccessor.next())+" "+yTransform(yAccessor.next());while(xAccessor.hasNext()&&yAccessor.hasNext()){pathString+=" L "+
@ -16,4 +16,4 @@ function renderGraphSvg(dataArray,renderId){var figure=document.getElementById(r
 var svg=document.createElementNS("http://www.w3.org/2000/svg","svg");svg.setAttribute("viewBox","0 0 640 440");svg.setAttribute("preserveAspectRatio","xMidYMid meet");lineGraph(svg,(function(data,min,max){var i=0;return{hasNext:function(){return i<data.length;},next:function(){return data[i++].x;},reset:function(){i=0;},min:function(){return min;},max:function(){return max;}};})(dataArray,Math.min.apply(Math,dataArray.map(function(o){return o.x;})),Math.max.apply(Math,dataArray.map(function(o){return o.x;}))),(function(data,min,max){var i=0;return{hasNext:function(){return i<data.length;},next:function(){return data[i++].y;},reset:function(){i=0;},min:function(){return min;},max:function(){return max;}};})(dataArray,Math.min.apply(Math,dataArray.map(function(o){return o.y;})),Math.max.apply(Math,dataArray.map(function(o){return o.y;}))));figure.appendChild(svg);}
 )=====";

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

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

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

-const uint8_t JS_SLIDER_GZIP[881] PROGMEM = { 31,139,8,0,210,8,51,99,2,255,237,86,77,143,218,48,16,189,243,43,88,107,187,196,93,240,210,61,18,204,165,85,165,30,122,106,165,86,90,173,144,73,156,141,69,112,162,216,129,182,44,255,189,227,143,132,36,192,106,219,83,15,61,37,246,60,143,223,204,60,123,156,84,50,210,34,151,195,114,189,137,151,37,147,79,252,75,38,98,94,6,138,103,60,210,121,137,247,91,86,14,97,148,140,149,181,44,119,34,214,105,61,200,147,68,113,61,142,170,82,106,63,247,65,168,168,228,154,143,173,59,63,25,26,15,244,250,232,54,108,123,163,198,74,236,111,208,88,156,107,103,114,255,1,38,25,79,116,216,221,199,34,122,115,132,179,40,13,18,31,93,32,198,91,188,183,28,129,130,78,133,194,161,29,17,86,20,92,198,65,119,241,82,111,138,12,54,195,161,141,128,58,104,34,0,56,18,178,168,244,131,254,89,112,138,172,21,61,142,106,198,109,32,34,110,14,53,225,36,34,203,168,251,239,66,38,198,114,196,165,76,198,25,63,143,116,182,35,54,99,43,126,193,169,53,1,210,84,207,18,93,110,89,70,11,86,42,254,73,234,192,78,17,152,50,97,182,24,146,72,169,0,217,74,160,113,179,238,22,189,233,19,116,64,83,142,75,56,203,192,179,82,5,147,8,19,205,127,248,173,13,26,135,7,28,186,242,202,0,109,242,74,241,56,223,201,161,206,171,40,85,154,149,224,186,31,250,184,169,41,199,123,145,4,156,172,42,173,115,73,41,189,199,123,168,30,148,96,152,176,76,241,240,48,48,177,67,196,92,106,85,215,157,248,49,36,202,72,126,210,84,201,170,188,45,73,15,108,84,217,2,120,101,214,136,174,56,13,46,74,121,180,118,199,169,65,189,160,31,34,128,207,44,22,138,173,50,30,3,25,8,172,237,130,82,93,86,252,36,188,58,36,22,199,239,51,102,202,33,212,132,65,118,182,220,7,180,201,183,252,99,69,219,57,115,57,121,226,223,41,39,246,251,252,12,181,76,205,62,241,87,147,120,174,30,166,143,206,212,142,89,242,93,147,24,48,77,58,169,48,132,251,184,57,109,167,243,230,230,234,20,129,166,8,227,189,159,54,92,3,159,172,113,31,218,189,123,108,54,194,195,193,242,171,138,94,132,117,90,128,90,224,84,83,194,121,239,148,1,145,86,166,72,201,205,222,103,82,232,54,168,125,208,189,149,168,193,206,92,98,199,86,169,237,9,139,168,138,153,33,229,172,112,189,184,209,33,188,14,226,60,170,54,64,3,27,197,31,185,189,254,24,252,215,127,47,188,19,117,122,85,255,11,250,28,252,129,60,207,74,237,111,132,116,24,212,155,13,207,119,53,123,3,216,127,58,154,199,98,59,140,140,240,41,242,74,88,140,110,7,103,230,93,147,90,204,239,192,114,9,226,175,232,197,25,147,235,70,139,185,233,3,139,233,252,206,126,157,179,198,37,114,127,40,244,101,182,28,79,227,233,22,2,42,240,205,39,31,190,144,35,255,94,57,214,167,211,246,62,51,157,146,50,175,64,138,129,89,122,231,151,226,183,239,166,83,220,17,185,237,215,189,91,163,219,176,91,96,223,180,207,195,155,174,221,244,226,215,28,10,247,248,32,210,180,76,76,82,189,201,44,227,203,221,186,27,243,165,150,189,55,135,116,118,138,5,209,50,169,132,73,244,12,201,92,66,171,69,147,29,95,173,133,158,28,77,232,104,219,228,191,206,25,14,53,113,243,182,232,110,99,207,245,75,41,26,182,159,9,248,138,246,150,239,95,189,182,191,175,73,188,172,54,43,120,163,213,62,152,214,37,220,246,112,219,16,85,173,148,46,133,124,10,238,45,69,43,35,8,93,229,209,154,152,1,188,95,50,240,83,241,25,186,237,103,14,166,156,103,211,144,126,3,128,124,107,46,79,11,0,0 };
+const uint8_t JS_SLIDER_GZIP[881] PROGMEM = { 31,139,8,0,3,199,199,101,2,255,237,86,77,143,218,48,16,189,243,43,88,107,187,196,93,240,210,61,18,204,165,85,165,30,122,106,165,86,90,173,144,73,156,141,69,112,162,216,129,182,44,255,189,227,143,132,36,192,106,219,83,15,61,37,246,60,143,223,204,60,123,156,84,50,210,34,151,195,114,189,137,151,37,147,79,252,75,38,98,94,6,138,103,60,210,121,137,247,91,86,14,97,148,140,149,181,44,119,34,214,105,61,200,147,68,113,61,142,170,82,106,63,247,65,168,168,228,154,143,173,59,63,25,26,15,244,250,232,54,108,123,163,198,74,236,111,208,88,156,107,103,114,255,1,38,25,79,116,216,221,199,34,122,115,132,179,40,13,18,31,93,32,198,91,188,183,28,129,130,78,133,194,161,29,17,86,20,92,198,65,119,241,82,111,138,12,54,195,161,141,128,58,104,34,0,56,18,178,168,244,131,254,89,112,138,172,21,61,142,106,198,109,32,34,110,14,53,225,36,34,203,168,251,239,66,38,198,114,196,165,76,198,25,63,143,116,182,35,54,99,43,126,193,169,53,1,210,84,207,18,93,110,89,70,11,86,42,254,73,234,192,78,17,152,50,97,182,24,146,72,169,0,217,74,160,113,179,238,22,189,233,19,116,64,83,142,75,56,203,192,179,82,5,147,8,19,205,127,248,173,13,26,135,7,28,186,242,202,0,109,242,74,241,56,223,201,161,206,171,40,85,154,149,224,186,31,250,184,169,41,199,123,145,4,156,172,42,173,115,73,41,189,199,123,168,30,148,96,152,176,76,241,240,48,48,177,67,196,92,106,85,215,157,248,49,36,202,72,126,210,84,201,170,188,45,73,15,108,84,217,2,120,101,214,136,174,56,13,46,74,121,180,118,199,169,65,189,160,31,34,128,207,44,22,138,173,50,30,3,25,8,172,237,130,82,93,86,252,36,188,58,36,22,199,239,51,102,202,33,212,132,65,118,182,220,7,180,201,183,252,99,69,219,57,115,57,121,226,223,41,39,246,251,252,12,181,76,205,62,241,87,147,120,174,30,166,143,206,212,142,89,242,93,147,24,48,77,58,169,48,132,251,184,57,109,167,243,230,230,234,20,129,166,8,227,189,159,54,92,3,159,172,113,31,218,189,123,108,54,194,195,193,242,171,138,94,132,117,90,128,90,224,84,83,194,121,239,148,1,145,86,166,72,201,205,222,103,82,232,54,168,125,208,189,149,168,193,206,92,98,199,86,169,237,9,139,168,138,153,33,229,172,112,189,184,209,33,188,14,226,60,170,54,64,3,27,197,31,185,189,254,24,252,215,127,47,188,19,117,122,85,255,11,250,28,252,129,60,207,74,237,111,132,116,24,212,155,13,207,119,53,123,3,216,127,58,154,199,98,59,140,140,240,41,242,74,88,140,110,7,103,230,93,147,90,204,239,192,114,9,226,175,232,197,25,147,235,70,139,185,233,3,139,233,252,206,126,157,179,198,37,114,127,40,244,101,182,28,79,227,233,22,2,42,240,205,39,31,190,144,35,255,94,57,214,167,211,246,62,51,157,146,50,175,64,138,129,89,122,231,151,226,183,239,166,83,220,17,185,237,215,189,91,163,219,176,91,96,223,180,207,195,155,174,221,244,226,215,28,10,247,248,32,210,180,76,76,82,189,201,44,227,203,221,186,27,243,165,150,189,55,135,116,118,138,5,209,50,169,132,73,244,12,201,92,66,171,69,147,29,95,173,133,158,28,77,232,104,219,228,191,206,25,14,53,113,243,182,232,110,99,207,245,75,41,26,182,159,9,248,138,246,150,239,95,189,182,191,175,73,188,172,54,43,120,163,213,62,152,214,37,220,246,112,219,16,85,173,148,46,133,124,10,238,45,69,43,35,8,93,229,209,154,152,1,188,95,50,240,83,241,25,186,237,103,14,166,156,103,211,144,126,3,128,124,107,46,79,11,0,0 };
--- a/src/dataStyleCSS.h
+++ b/src/dataStyleCSS.h
--- a/src/dataTabbedcontentJS.h
+++ b/src/dataTabbedcontentJS.h
--- a/src/dataZeptoJS.h
+++ b/src/dataZeptoJS.h
Author	SHA1	Message	Date
Lukas Bachschwell	75bbece7b5	Merge pull request #299 from sunlord2k/sunlord2k-patch-2 Update ESPUI.cpp	2024-04-06 11:16:35 +02:00
Lukas Bachschwell	efda9b7140	Merge pull request #298 from sunlord2k/sunlord2k-patch-1 Update ESPUI.h	2024-04-06 11:16:15 +02:00
sunlord2k	9ba3f5a940	Update ESPUI.cpp Changed FILE_WRITE to FILE_WRITING for compatibility with SD.h for usage with SD cards	2024-04-05 12:10:10 +02:00
sunlord2k	84ff52d8cb	Update ESPUI.h Changed FILE_WRITE to FILE_WRITING for compatibility with SD.h for usage of ESPUI with SD card	2024-04-05 12:09:01 +02:00
Lukas Bachschwell	dd234135f2	Merge pull request #295 from MartinMueller2003/master Added a File Display object that can be used to scroll through a text file on the UI	2024-02-26 13:00:48 +01:00
Martin	6724abfef3	removed temporary SSID and network name definitions.	2024-02-22 08:08:21 -05:00
Martin Mueller	a448fdd180	Update README.md	2024-02-21 15:42:11 -05:00
Martin	ba7fa33dfb	dded missing shortcut	2024-02-21 15:39:32 -05:00
Martin	624663076f	Added File Display	2024-02-21 15:32:17 -05:00
Martin	c43c2c7b72	Added File Display section	2024-02-21 15:31:46 -05:00
MartinMueller2003	e9fc63f86d	Modified to use the ESPUI unified littlefs handle	2024-02-12 09:15:00 -05:00
MartinMueller2003	1ba92a3cd6	Fixes for ESP8266 builds	2024-02-12 09:13:37 -05:00
MartinMueller2003	da20c8b0a5	Converted to normalized littlefs definition	2024-02-12 09:09:51 -05:00
MartinMueller2003	707c2aa3bf	Added write function Exposed unified littlefs type for use by our users.	2024-02-12 09:09:05 -05:00
Martin	9efd0c27aa	Auto Generated updates	2024-02-10 15:40:34 -05:00
Martin	6a18c59f31	Added code to create a file display dynamic test / demo.	2024-02-10 13:54:58 -05:00
Martin	6e281e302a	Added ability to turn on ESPUI debugging	2024-02-10 13:52:56 -05:00
Martin	d2ccf83874	Changes to support processing a file to display	2024-02-10 13:52:06 -05:00
Martin	ea8de92246	Checkpoint adding fileDisplay object	2024-02-06 22:38:17 -05:00
Lukas Bachschwell	aa9a62bbdf	Merge pull request #288 from TA1AUB/patch-1 Update Turkish Language	2024-01-24 16:38:44 +01:00
Abdullah YILMAZ	f3b105f143	Update Turkish Language Update Turkish Language	2024-01-20 22:44:38 +03:00
Martin Mueller	7508e034be	Merge pull request #285 from MartinMueller2003/master Made WebServer and WebSocket globally accusable via access functions.	2024-01-10 09:19:25 -05:00
Martin Mueller	5b36d79395	Merge branch 's00500:master' into master	2024-01-08 08:54:15 -05:00
MartinMueller2003	e4c6906723	Made the Webserver globally accessible.	2024-01-08 08:43:10 -05:00
Lukas Bachschwell	dc2d5e1205	Merge pull request #277 from MartinMueller2003/master Restored custom port support.	2023-12-16 11:04:25 +01:00
MartinMueller2003	d3c6df5cfa	Restored custom port support.	2023-12-14 08:34:17 -05:00
MartinMueller2003	46ad206a49	Restored missing port identifier for custom port support.	2023-12-14 08:32:59 -05:00
Lukas Bachschwell	8b64b185a4	Merge pull request #264 from MartinMueller2003/master Changes to support keeping multiple Browser Clients in sync	2023-11-09 18:15:04 +01:00
MartinMueller2003	00841ce32d	Changes to support keeping multiple Browser Clients in sync	2023-11-09 11:06:44 -05:00
Lukas Bachschwell	85ccff0ee0	Merge pull request #257 from d-a-v/stringref use more string references	2023-10-14 20:31:01 +02:00
Lukas Bachschwell	0571f65f6f	Merge pull request #249 from d-a-v/lambda-with-examples Proposal: use lambda functions	2023-10-14 20:30:20 +02:00
David Gauchard	542ac03656	Merge branch 'master' into lambda-with-examples	2023-10-06 16:45:17 +02:00
Lukas Bachschwell	8f7cce59bf	Merge pull request #253 from MartinMueller2003/master Added fragmentation of large control values	2023-10-06 16:04:33 +02:00
David Gauchard	ae5b6d5c0a	use more string references	2023-09-22 22:37:50 +02:00
David Gauchard	62b4b56a4d	Merge branch 'master' into lambda-with-examples	2023-09-22 22:18:34 +02:00
Lukas Bachschwell	8a3865e42e	Merge pull request #254 from croghostrider/patch-1 Remove LITTLEFS library	2023-09-22 08:06:14 +02:00
croghostrider	0d9a874ba2	Update library.json	2023-09-20 12:59:25 +02:00
Lukas Bachschwell	cf1f81bced	Merge pull request #252 from d-a-v/minorchangesagain some more minor changes	2023-09-19 12:05:47 +02:00
David Gauchard	0b22328bd8	introduce lambda	2023-09-15 00:59:10 +02:00
croghostrider	09596a4e65	fix #196 since Arduino 2.0.0 is LITTLEFS not more required for ESP32.	2023-09-13 17:24:26 +02:00
Martin	8d61abc47d	updated files to send to the esp fs	2023-09-12 17:49:38 -04:00
Martin	adf2ba369e	Added fragment assembly reset if something happens to the socket.	2023-09-12 06:56:53 -04:00
David Gauchard	93d0bf7d27	some more minor changes before #249	2023-09-11 13:29:32 +02:00
Martin	794d54dc96	updated minify and .h versions.	2023-09-11 06:53:05 -04:00
Martin	1deddad091	Added changes made to ack section	2023-09-11 06:52:35 -04:00
Martin	999d465c79	Add fragmentation support	2023-09-10 17:09:00 -04:00
Martin	83dbb49697	Removed more debug output	2023-09-09 17:01:55 -04:00
Martin	290f0c6fc6	Restored offset to marshal call.	2023-09-09 17:01:36 -04:00
Martin	7e3de1c14f	Aligned with latest main branch	2023-09-09 16:52:28 -04:00
Martin	136b182813	Removed debug messages	2023-09-09 16:50:34 -04:00
Martin	43b8cdbfb2	Merge branch 'master' of https://github.com/MartinMueller2003/ESPUI	2023-09-09 16:49:52 -04:00
Martin	488a6cb252	first working version of the fragmentation code.	2023-09-09 15:58:12 -04:00
Lukas Bachschwell	c7a9438149	Merge pull request #251 from d-a-v/minorfixes minor fixes for restoring warning-less emulation on host	2023-09-08 17:03:12 +02:00
David Gauchard	03c30fa75c	more minor changes for #249	2023-09-06 22:50:42 +02:00
David Gauchard	68c251226d	minor fixes for restoring warning-less emulation on host for debugging (using emuAsync, see main readme)	2023-09-06 22:35:41 +02:00
Martin	ec41deab01	Added ClientTransferContext_t to the marshal API	2023-09-03 09:30:31 -04:00
Martin	fae30398b2	Added a client transfer context for use by the control marshaling function	2023-09-03 09:26:36 -04:00
Martin	de09ddbe09	Turned off ESPUI_DEBUG by default	2023-09-03 09:20:12 -04:00
Lukas Bachschwell	679a3b5a8d	Version 2.2.3 Signed-off-by: Lukas Bachschwell <lukas@lbsfilm.at>	2023-08-03 16:33:27 +02:00
Lukas Bachschwell	f8fbcf887a	Fix compile issues #243 Also fix pio example Signed-off-by: Lukas Bachschwell <lukas@lbsfilm.at>	2023-08-03 16:32:54 +02:00
Lukas Bachschwell	fd1cc14e87	Bump Version Signed-off-by: Lukas Bachschwell <lukas@lbsfilm.at>	2023-08-01 13:01:49 +02:00
Lukas Bachschwell	372157b980	Merge pull request #241 from d-a-v/membreathe reduce memory footprint	2023-08-01 13:00:52 +02:00
Lukas Bachschwell	f08cd5c51a	Icon changes, thanks to Mark Kinsley Signed-off-by: Lukas Bachschwell <lukas@lbsfilm.at>	2023-07-20 11:39:20 +02:00
David Gauchard	b45f4f7356	update examples with esp8266 specifics	2023-07-19 12:07:25 +02:00
David Gauchard	c3bf9c5d00	reduce memory footprint	2023-07-18 19:49:58 +02:00
Lukas Bachschwell	678a2ccf53	Merge pull request #235 from MartinMueller2003/master Exposed WebServer, Added password support.	2023-05-13 15:55:39 +02:00
Lukas Bachschwell	270f0dd16b	Merge pull request #218 from d-a-v/ptr2long pointers can always be casted to long	2023-05-13 15:53:59 +02:00
Martin	be8cf73d55	Exposed WebServer instance	2023-05-12 15:02:32 -04:00
David Gauchard	cc69f8a469	pointers can always be be casted to long	2023-01-17 14:53:02 +01:00
Martin Mueller	48e947287a	Added variant of the text type to support hidden password fields	2022-11-27 16:59:28 -05:00
Lukas Bachschwell	5cf0ce6afa	Merge pull request #212 from leokeba/master Small fixes for graph UI element	2022-11-24 11:50:59 +01:00
leokeba	35c2f5b6b1	small fixes to graph UI element to make X-axis labels legible and meaningful	2022-11-21 16:05:29 +01:00
leokeba	b1b9fd2c79	Setting SVG overflow property to 'visible' to properly display numbers on the graph UI element	2022-11-21 15:33:56 +01:00
Lukas Bachschwell	0aaca5449b	Merge pull request #211 from leokeba/master Fixed step handler to allow using float numbers and sliders	2022-11-14 11:22:34 +01:00
leokeba	7b4ec5920a	Fixed step handler to allow using float numbers and sliders	2022-11-11 17:29:02 +01:00
Lukas Bachschwell	048f337d61	Merge pull request #208 from leokeba/master fix: initialize graph data with empty array if null	2022-11-06 14:58:18 +01:00
leokeba	8e3c12935e	fix: Use ControlType Constant	2022-11-05 14:06:13 +01:00
leokeba	f35d3a19d4	feat: implemented clearGraph function	2022-11-03 03:31:04 +01:00
leokeba	48594de29a	fix: initialize graph data with empty array if null	2022-11-03 01:37:46 +01:00
Lukas Bachschwell	d53fdb57a9	Bump version	2022-10-24 13:51:53 +02:00
Lukas Bachschwell	b8079cfb63	Bump version	2022-10-24 13:51:34 +02:00