diff --git a/README.md b/README.md index 330dcfe..4243364 100644 --- a/README.md +++ b/README.md @@ -26,14 +26,16 @@ THIS IS THE 2.0.0 DEVELOPMENT BRANCH, NOT GUARANTIED TO WORK - ArduinoJSON 6.10.0 Support ✅ - Tabs by @eringerli ISSUE #45 ✅ - remove black line without tabs ✅ -- API changes by @eringerli +- API changes by @eringerli ✅ - less updateControl functions ✅ - - proper wrappers for all create/update actions + - proper wrappers for all create/update actions ✅ - OptionList by @eringerli -- Better return values -- Min Max on slider +- Min Max on slider by @eringerli ✅ +- Public Access to ESPAsyncServer - Accelerometer Widget -- Cleanup Example +- Graph Widget +- +- Cleanup Example, DNS and autojoin - Cleanup and extend Documentation - Number field ✅ - Text field ✅ @@ -45,6 +47,12 @@ THIS IS THE 2.0.0 DEVELOPMENT BRANCH, NOT GUARANTIED TO WORK - Tab usage - Verbosity setting +## OLD Roadmap : + +- Datagraph output -> _WIP_ +- Number min and max value +- proper return value (as int and not as string) for slider + ## Changelog for functions: - split pad into pad and padWithCenter @@ -143,21 +151,6 @@ Checkout the example for the usage - COLOR_ALIZARIN - COLOR_NONE -## Roadmap : - -- ~~Setup SPIFFS using values in program memory~~ -- ~~ESP8266 support~~ -- ~~PlattformIO Integration~~ -- ~~Multiline Labels~~ -- ~~GZip Files and serve from memory~~ -- Datagraph output -> _WIP_ -- ~~Number input ~~ -- ~~Text input ~~ -- Dokumentation for Text and number widget -- Number min and max value -- proper return value (as int and not as string) for slider -- Maybe a slider range setting, meanwhile please use _map()_ - ## Documentation The heart of ESPUI is @@ -227,7 +220,8 @@ the normal `
` tag in the string you print to the label The Slider can be used to slide through a value from 1 to 100. Slides provide realtime data, are touch compatible and can be used to for example control a Servo. The current value is shown while the slider is dragged in a little bubble -over the handle. +over the handle. In the Callback the slider does not return an int but a String. +Use the .toInt #### Number Input diff --git a/data/js/controls.js b/data/js/controls.js index 3bb14de..d0f938c 100644 --- a/data/js/controls.js +++ b/data/js/controls.js @@ -46,6 +46,11 @@ const UPDATE_MAX = 115; const UI_STEP = 16; const UPDATE_STEP = 116; +const UI_GAUGE = 17; +const UPTDATE_GAUGE = 117; +const UI_ACCEL = 18; +const UPTDATE_ACCEL = 117; + const UP = 0; const DOWN = 1; const LEFT = 2; @@ -157,42 +162,64 @@ function start() { handleEvent(fauxEvent); }); break; - + case UI_TITEL: document.title = data.label; $("#mainHeader").html(data.label); break; - + case UI_LABEL: var parent; - if(data.parentControl) { - parent = $("#tab"+data.parentControl); + if (data.parentControl) { + parent = $("#tab" + data.parentControl); } else { - parent = $("#row") + parent = $("#row"); } parent.append( - "
" + - "
" + data.label + "
" + - "" + data.value + "" + - "
" + "
" + + "
" + + data.label + + "
" + + "" + + data.value + + "" + + "
" ); break; - + case UI_BUTTON: var parent; - if(data.parentControl) { - parent = $("#tab"+data.parentControl); + if (data.parentControl) { + parent = $("#tab" + data.parentControl); } else { - parent = $("#row") + parent = $("#row"); } parent.append( - "
" + - "
" + data.label + "
" + - "
" + "" ); $("#btn" + data.id).on({ touchstart: function(e) { @@ -205,44 +232,98 @@ function start() { } }); break; - + case UI_SWITCHER: var parent; - if(data.parentControl) { - parent = $("#tab"+data.parentControl); + if (data.parentControl) { + parent = $("#tab" + data.parentControl); } else { - parent = $("#row") + parent = $("#row"); } parent.append( - "
" + - "
" + data.label + "
" + - "
" ); switcher(data.id, data.value); break; - + case UI_CPAD: case UI_PAD: var parent; - if(data.parentControl) { - parent = $("#tab"+data.parentControl); + if (data.parentControl) { + parent = $("#tab" + data.parentControl); } else { - parent = $("#row") + parent = $("#row"); } parent.append( - "
" + - "
" + data.label + "
" + + "
" + + "
" + + data.label + + "
" + "" + "
" ); @@ -299,138 +380,274 @@ function start() { }); break; - - //https://codepen.io/seanstopnik/pen/CeLqA + + //https://codepen.io/seanstopnik/pen/CeLqA case UI_SLIDER: var parent; - if(data.parentControl) { - parent = $("#tab"+data.parentControl); + if (data.parentControl) { + parent = $("#tab" + data.parentControl); } else { - parent = $("#row") - } + parent = $("#row"); + } parent.append( - "
" + - "
" + data.label + "
" + + "
" + + "
" + + data.label + + "
" + "
" + - "" + - "" + data.value + "" + + "" + + "" + + data.value + + "" + "
" + - "
" + "
" ); rangeSlider(); break; case UI_NUMBER: var parent; - if(data.parentControl) { - parent = $("#tab"+data.parentControl); + if (data.parentControl) { + parent = $("#tab" + data.parentControl); } else { - parent = $("#row") + parent = $("#row"); } parent.append( - "
" + - "
" + data.label + "
" + - "" + - "
" + "
" + + "
" + + data.label + + "
" + + "" + + "
" ); break; case UI_TEXT_INPUT: var parent; - if(data.parentControl) { - parent = $("#tab"+data.parentControl); + if (data.parentControl) { + parent = $("#tab" + data.parentControl); } else { - parent = $("#row") + parent = $("#row"); } parent.append( - "
" + - "
" + data.label + "
" + - "" + - "
" + "
" + + "
" + + data.label + + "
" + + "" + + "
" ); break; - + case UI_TAB: $("#tabsnav").append( "
  • " + data.value + "
    • " ); - $("#tabscontent").append( - "
    " - ); - - tabs = $('.tabscontent').tabbedContent({loop: true}).data('api'); - // switch to tab... - $('a').filter(function() { - return $(this).attr('href') === '#click-to-switch'; - }).on('click', function(e) { - var tab = prompt('Tab to switch to (number or id)?'); - if (!tabs.switchTab(tab)) { - alert('That tab does not exist :\\'); - } - e.preventDefault(); - }); + $("#tabscontent").append("
    "); + + tabs = $(".tabscontent") + .tabbedContent({ loop: true }) + .data("api"); + // switch to tab... + $("a") + .filter(function() { + return $(this).attr("href") === "#click-to-switch"; + }) + .on("click", function(e) { + var tab = prompt("Tab to switch to (number or id)?"); + if (!tabs.switchTab(tab)) { + alert("That tab does not exist :\\"); + } + e.preventDefault(); + }); break; - + case UI_SELECT: var parent; - if(data.parentControl) { - parent = $("#tab"+data.parentControl); + if (data.parentControl) { + parent = $("#tab" + data.parentControl); } else { - parent = $("#row") + parent = $("#row"); } parent.append( - "
    " + - "
    " + data.label + "
    " + - "" + + "
    " ); break; - + case UI_OPTION: - if(data.parentControl) { - var parent = $("#select"+data.parentControl); + if (data.parentControl) { + var parent = $("#select" + data.parentControl); parent.append( - "" + "" ); } break; - + case UI_MIN: - if(data.parentControl) { - var parent = $("#id"+data.parentControl+" input"); - if(parent.size()){ + if (data.parentControl) { + var parent = $("#id" + data.parentControl + " input"); + if (parent.size()) { console.log("MIN" + data.value); parent.attr("min", data.value); } } break; - + case UI_MAX: - if(data.parentControl) { - var parent = $("#id"+data.parentControl+" input"); - if(parent.size()){ + if (data.parentControl) { + var parent = $("#id" + data.parentControl + " input"); + if (parent.size()) { console.log("MAX" + data.value); parent.attr("max", data.value); } } break; - + case UI_STEP: - if(data.parentControl) { - var parent = $("#id"+data.parentControl+" input"); - if(parent.size()){ + if (data.parentControl) { + var parent = $("#id" + data.parentControl + " input"); + if (parent.size()) { console.log("STEP" + data.value); parent.attr("step", data.value); } } break; - + case UI_GRAPH: + var parent; + if (data.parentControl) { + parent = $("#tab" + data.parentControl); + } else { + parent = $("#row"); + } + parent.append( + "
    " + + "
    " + + data.label + + "
    " + + "WILL BE A GRAPH " + + "
    " + ); + break; + + case UI_GAUGE: + var parent; + if (data.parentControl) { + parent = $("#tab" + data.parentControl); + } else { + parent = $("#row"); + } + parent.append( + "
    " + + "
    " + + data.label + + "
    " + + "WILL BE A GAUGE " + + "
    " + ); + break; + + case UI_ACCEL: + var parent; + if (data.parentControl) { + parent = $("#tab" + data.parentControl); + } else { + parent = $("#row"); + } + parent.append( + "
    " + + "
    " + + data.label + + "
    " + + "WILL BE A ACCEL
    " +
+            "
    "
+        );
+        break;
+
       case UPDATE_LABEL:
         $("#l" + data.id).html(data.value);
         break;
-        
+
       case UPDATE_SWITCHER:
-        switcher(data.id, (data.value == "0")?0:1);
+        switcher(data.id, data.value == "0" ? 0 : 1);
         break;
 
       case UPDATE_SLIDER:
@@ -444,33 +661,41 @@ function start() {
       case UPDATE_TEXT_INPUT:
         $("#text" + data.id).val(data.value);
         break;
-        
+
       case UPDATE_SELECT:
         $("#select" + data.id).val(data.value);
         break;
-        
+
       case UPDATE_BUTTON:
       case UPDATE_PAD:
       case UPDATE_CPAD:
         break;
+      case UPDATE_GAUGE:
+        $("#gauge" + data.id).val(data.value);
+        break;
+      case UPDATE_ACCEL:
+        break;
 
       default:
         console.error("Unknown type or event");
         break;
     }
-    
-    if(data.type >= UPDATE_OFFSET && data.type < UI_INITIAL_GUI) {
-      var element = $('#id' + data.id);
-//       if(data.type == UPDATE_SLIDER) {
-//         element.removeClass("slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin");
-//         element.addClass("slider-" + colorClass(data.color));
-//       } else {
-        element.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin");
-        element.addClass(colorClass(data.color));
-//       }
+
+    if (data.type >= UPDATE_OFFSET && data.type < UI_INITIAL_GUI) {
+      var element = $("#id" + data.id);
+      // FIXME: Test sliderupdate
+      //       if(data.type == UPDATE_SLIDER) {
+      //         element.removeClass("slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin");
+      //         element.addClass("slider-" + colorClass(data.color));
+      //       } else {
+      element.removeClass(
+        "turquoise emerald peterriver wetasphalt sunflower carrot alizarin"
+      );
+      element.addClass(colorClass(data.color));
+      //       }
     }
   };
-  
+
   websock.onmessage = handleEvent;
 }
 
@@ -543,24 +768,31 @@ function switcher(number, state) {
   }
 }
 
-var rangeSlider = function(){
-  var slider = $('.range-slider'),
-      range = $('.range-slider__range'),
-      value = $('.range-slider__value');
-    
-  slider.each(function(){
+var rangeSlider = function() {
+  var slider = $(".range-slider"),
+    range = $(".range-slider__range"),
+    value = $(".range-slider__value");
 
-    value.each(function(){
-      var value = $(this).prev().attr('value');
+  slider.each(function() {
+    value.each(function() {
+      var value = $(this)
+        .prev()
+        .attr("value");
       $(this).html(value);
     });
 
     range.on({
-      'input': function(){
-        $(this).next().html(this.value);
+      input: function() {
+        $(this)
+          .next()
+          .html(this.value);
       },
-      'change': function(){
-        sliderchange($(this).attr('id').replace( /^\D+/g, ''));
+      change: function() {
+        sliderchange(
+          $(this)
+            .attr("id")
+            .replace(/^\D+/g, "")
+        );
       }
     });
   });
diff --git a/data/js/controls.min.js b/data/js/controls.min.js
index f5030cc..1e231f2 100644
--- a/data/js/controls.min.js
+++ b/data/js/controls.min.js
@@ -1,62 +1,238 @@
-const UI_INITIAL_GUI=200;const UPDATE_OFFSET=100;const UI_TITEL=0;const UI_PAD=1;const UPDATE_PAD=101;const UI_CPAD=2;const UPDATE_CPAD=102;const UI_BUTTON=3;const UPDATE_BUTTON=103;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const UI_TAB=11;const UPDATE_TAB=111;const UI_SELECT=12;const UPDATE_SELECT=112;const UI_OPTION=13;const UPDATE_OPTION=113;const UI_MIN=14;const UPDATE_MIN=114;const UI_MAX=15;const UPDATE_MAX=115;const UI_STEP=16;const UPDATE_STEP=116;const 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;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";default:return"";}}
+const UI_INITIAL_GUI=200;const UPDATE_OFFSET=100;const UI_TITEL=0;const UI_PAD=1;const UPDATE_PAD=101;const UI_CPAD=2;const UPDATE_CPAD=102;const UI_BUTTON=3;const UPDATE_BUTTON=103;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const UI_TAB=11;const UPDATE_TAB=111;const UI_SELECT=12;const UPDATE_SELECT=112;const UI_OPTION=13;const UPDATE_OPTION=113;const UI_MIN=14;const UPDATE_MIN=114;const UI_MAX=15;const UPDATE_MAX=115;const UI_STEP=16;const UPDATE_STEP=116;const UI_GAUGE=17;const UPTDATE_GAUGE=117;const UI_ACCEL=18;const UPTDATE_ACCEL=117;const UP=0;const DOWN=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_DARK=7;const C_NONE=255;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";default:return"";}}
 var websock;var websockConnected=false;function restart(){$(document).add("*").off();$("#row").html("");websock.close();start();}
 function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart});}
 function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
-function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);websock=new WebSocket("ws://"+window.location.hostname+"/ws");websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element)};handleEvent(fauxEvent);});break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
-parent.append("
    "+
-"
    "+data.label+"
    "+
-""+data.value+""+
-"
    ");break;case UI_BUTTON:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
-parent.append("
    "+
-"
    "+data.label+"
    "+
-"
    ");$("#btn"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);},touchend:function(e){e.preventDefault();buttonclick(data.id,false);}});break;case UI_SWITCHER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
-parent.append("
    "+
-"
    "+data.label+"
    "+
-"
    ");break;case UI_BUTTON:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+"
    ");$("#btn"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);},touchend:function(e){e.preventDefault();buttonclick(data.id,false);}});break;case UI_SWITCHER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+""+
-"
    ");switcher(data.id,data.value);break;case UI_CPAD:case UI_PAD:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
-parent.append("
    "+
-"
    "+data.label+"
    "+
+"
    ");switcher(data.id,data.value);break;case UI_CPAD:case UI_PAD:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
 ""+
-"
    ");$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(UP,data.id,true);},touchend:function(e){e.preventDefault();padclick(UP,data.id,false);}});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);},touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);}});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);},touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);}});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(DOWN,data.id,true);},touchend:function(e){e.preventDefault();padclick(DOWN,data.id,false);}});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);},touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);}});break;case UI_SLIDER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
-parent.append("
    "+
-"
    "+data.label+"
    "+
+"
    ");$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(UP,data.id,true);},touchend:function(e){e.preventDefault();padclick(UP,data.id,false);}});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);},touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);}});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);},touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);}});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(DOWN,data.id,true);},touchend:function(e){e.preventDefault();padclick(DOWN,data.id,false);}});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);},touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);}});break;case UI_SLIDER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
 "
    "+
-""+
-""+data.value+""+
+""+
+""+
+data.value+
+""+
 "
    "+
-"
    ");rangeSlider();break;case UI_NUMBER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
-parent.append("
    "+
-"
    "+data.label+"
    "+
-""+
-"
    ");break;case UI_TEXT_INPUT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
-parent.append("
    "+
-"
    "+data.label+"
    "+
-""+
-"
    ");break;case UI_TAB:$("#tabsnav").append("
  • "+data.value+"
    • ");$("#tabscontent").append("
    ");tabs=$('.tabscontent').tabbedContent({loop:true}).data('api');$('a').filter(function(){return $(this).attr('href')==='#click-to-switch';}).on('click',function(e){var tab=prompt('Tab to switch to (number or id)?');if(!tabs.switchTab(tab)){alert('That tab does not exist :\\');}
-e.preventDefault();});break;case UI_SELECT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row")}
-parent.append("
    "+
-"
    "+data.label+"
    "+
-""+
+"
    ");break;case UI_TEXT_INPUT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+""+
+"
    ");break;case UI_TAB:$("#tabsnav").append("
  • "+data.value+"
    • ");$("#tabscontent").append("
    ");tabs=$(".tabscontent").tabbedContent({loop:true}).data("api");$("a").filter(function(){return $(this).attr("href")==="#click-to-switch";}).on("click",function(e){var tab=prompt("Tab to switch to (number or id)?");if(!tabs.switchTab(tab)){alert("That tab does not exist :\\");}
+e.preventDefault();});break;case UI_SELECT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+""+
+"
    ");break;case UI_GAUGE:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+"WILL BE A GAUGE "+
+"
    ");break;case UI_ACCEL:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
+parent.append("
    "+
+"
    "+
+data.label+
+"
    "+
+"WILL BE A ACCEL
    "+
+"
    ");break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);break;case UPDATE_SLIDER:slider_move($("#sl"+data.id),data.value,"100",false);break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);break;case UPDATE_BUTTON:case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);break;case UPDATE_ACCEL:break;default:console.error("Unknown type or event");break;}
+if(data.type>=UPDATE_OFFSET&&data.type 5000) {
-    ESPUI.updateControl("Millis:", String(millis()));
+    ESPUI.updateControlValue(millisLabelId, String(millis()));
     testSwitchState = !testSwitchState;
     ESPUI.updateControlValue("Switch one", testSwitchState ? "1" : "0");
     oldTime = millis();
diff --git a/examples/gui/gui.ino b/examples/gui/gui.ino
index d630942..14c59ac 100644
--- a/examples/gui/gui.ino
+++ b/examples/gui/gui.ino
@@ -16,7 +16,10 @@ const char *password = "espui";
 const char *hostname = "EspuiTest";
 
 long oldTime = 0;
+
 bool testSwitchState = false;
+int statusLabelId;
+int graphId;
 int millisLabelId;
 int testSwitchId;
 
@@ -34,6 +37,21 @@ void slider(Control *sender, int type) {
   Serial.print(sender->id);
   Serial.print(", Value: ");
   Serial.println(sender->value);
+  // Like all Control Values in ESPUI slider values are Strings. To use them as int simply do this:
+  int sliderValueWithOffset = sender->value.toInt() + 100;
+  Serial.print("SliderValue with offset");
+  Serial.println(sliderValueWithOffset);
+}
+
+void accelCall(Control *sender, int type) {
+  Serial.print("Accel: ID: ");
+  Serial.print(sender->id);
+  Serial.print(", Value: ");
+  Serial.println(sender->value);
+  // Like all Control Values in ESPUI accel values are Strings. To use them as int simply do this:
+  int sliderValueWithOffset = sender->value.toInt() + 100;
+  Serial.print("Accel with offset");
+  Serial.println(sliderValueWithOffset);
 }
 
 void buttonCallback(Control *sender, int type) {
@@ -52,12 +70,12 @@ void buttonExample(Control *sender, int type) {
   switch (type) {
   case B_DOWN:
     Serial.println("Status: Start");
-    // ESPUI.updateControl( "Status:", "Start" );
+    ESPUI.print(statusLabelId, "Start");
     break;
 
   case B_UP:
     Serial.println("Status: Stop");
-    // ESPUI.updateControl( "Status:", "Stop" );
+    ESPUI.print(statusLabelId, "Stop");
     break;
   }
 }
@@ -188,7 +206,7 @@ void setup(void) {
   Serial.print("IP address: ");
   Serial.println(WiFi.getMode() == WIFI_AP ? WiFi.softAPIP() : WiFi.localIP());
 
-  ESPUI.label("Status:", COLOR_TURQUOISE, "Stop");
+  statusLabelId = ESPUI.label("Status:", COLOR_TURQUOISE, "Stop");
   millisLabelId = ESPUI.label("Millis:", COLOR_EMERALD, "0");
   ESPUI.button("Push Button", &buttonCallback, COLOR_PETERRIVER, "Press");
   ESPUI.button("Other Button", &buttonExample, COLOR_WETASPHALT, "Press");
@@ -201,6 +219,11 @@ void setup(void) {
   ESPUI.text("Text Test:", &textCall, COLOR_ALIZARIN, "a Text Field");
   ESPUI.number("Numbertest", &numberCall, COLOR_ALIZARIN, 5, 0, 10);
 
+  graphId = ESPUI.graph("Graph Test", COLOR_WETASPHALT);
+  ESPUI.gauge("Gauge Test", COLOR_WETASPHALT, 58, 0, 100); // Gauge has
+
+  ESPUI.accelerometer("Accel Test", &accelCall, COLOR_WETASPHALT);
+
   /*
    * .begin loads and serves all files from PROGMEM directly.
    * If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
@@ -222,8 +245,12 @@ void loop(void) {
 
   if (millis() - oldTime > 5000) {
     ESPUI.print(millisLabelId, String(millis()));
+
+    ESPUI.addGraphPoint(graphId, random(1, 50));
+
     testSwitchState = !testSwitchState;
     ESPUI.updateSwitcher(testSwitchId, testSwitchState);
+
     oldTime = millis();
   }
 }
\ No newline at end of file
diff --git a/src/ESPUI.cpp b/src/ESPUI.cpp
index 4c9bb1c..87d5c77 100644
--- a/src/ESPUI.cpp
+++ b/src/ESPUI.cpp
@@ -441,6 +441,17 @@ uint16_t ESPUIClass::number(const char *label, void (*callback)(Control *, int),
   return numberId;
 }
 
+uint16_t ESPUIClass::gauge(const char *label, ControlColor color, int number, int min, int max) {
+  uint16_t numberId = addControl(ControlType::Gauge, label, String(number), color, Control::noParent);
+  addControl(ControlType::Min, label, String(min), ControlColor::None, numberId);
+  addControl(ControlType::Max, label, String(max), ControlColor::None, numberId);
+  return numberId;
+}
+
+uint16_t ESPUIClass::accelerometer(const char *label, void (*callback)(Control *, int), ControlColor color) {
+  return addControl(ControlType::Accel, label, "", color, Control::noParent, callback);
+}
+
 uint16_t ESPUIClass::text(const char *label, void (*callback)(Control *, int), ControlColor color, String value) {
   return addControl(ControlType::Text, label, value, color, Control::noParent, callback);
 }
@@ -506,13 +517,14 @@ void ESPUIClass::updateControl(Control *control, int clientId) {
 void ESPUIClass::updateControl(uint16_t id, int clientId) {
   Control *control = getControl(id);
 
-  if (control) {
-    updateControl(control, clientId);
-  } else {
+  if (!control) {
     if (this->verbosity) {
       Serial.println(String("Error: There is no control with ID ") + String(id));
     }
+    return;
   }
+
+  updateControl(control, clientId);
 }
 
 void ESPUIClass::updateControlValue(Control *control, String value, int clientId) {
@@ -527,13 +539,14 @@ void ESPUIClass::updateControlValue(Control *control, String value, int clientId
 void ESPUIClass::updateControlValue(uint16_t id, String value, int clientId) {
   Control *control = getControl(id);
 
-  if (control) {
-    updateControlValue(control, value, clientId);
-  } else {
+  if (!control) {
     if (this->verbosity) {
       Serial.println(String("Error: There is no control with ID ") + String(id));
     }
+    return;
   }
+
+  updateControlValue(control, value, clientId);
 }
 
 void ESPUIClass::print(uint16_t id, String value) { updateControlValue(id, value); }
@@ -550,6 +563,10 @@ void ESPUIClass::updateText(uint16_t id, String text, int clientId) { updateCont
 
 void ESPUIClass::updateSelect(uint16_t id, String text, int clientId) { updateControlValue(id, text, clientId); }
 
+void ESPUIClass::updateGauge(uint16_t id, int number, int clientId) { updateControlValue(id, String(number), clientId); }
+
+void ESPUIClass::clearGraph(uint16_t id, int clientId) {}
+void ESPUIClass::addGraphPoint(uint16_t id, int nValue, int clientId) {}
 /*
 Convert & Transfer Arduino elements to JSON elements
 Initially this function used to send the control element data individually.
diff --git a/src/ESPUI.h b/src/ESPUI.h
index 33a4c27..3f7f0d9 100644
--- a/src/ESPUI.h
+++ b/src/ESPUI.h
@@ -54,6 +54,8 @@ enum ControlType : uint8_t {
   Min,
   Max,
   Step,
+  Gauge,
+  Accel,
 
   UpdateOffset = 100,
   UpdatePad = 101,
@@ -71,6 +73,8 @@ enum ControlType : uint8_t {
   UpdateMin,
   UpdateMax,
   UpdateStep,
+  UpdateGauge,
+  UpdateAccel,
 
   InitialGui = 200
 };
@@ -188,6 +192,11 @@ public:
   // Output only
   uint16_t label(const char *label, ControlColor color, String value = ""); // Create Label
   uint16_t graph(const char *label, ControlColor color);                    // Create Graph display
+  uint16_t gauge(const char *label, ControlColor color, int value, int min = 0,
+                 int max = 100); // Create Gauge display
+
+  // Input only
+  uint16_t accelerometer(const char *label, void (*callback)(Control *, int), ControlColor color);
 
   // Update Elements
 
@@ -207,6 +216,8 @@ public:
   void updateNumber(uint16_t id, int nValue, int clientId = -1);
   void updateText(uint16_t id, String nValue, int clientId = -1);
   void updateSelect(uint16_t id, String nValue, int clientId = -1);
+  void updateGauge(uint16_t id, int number, int clientId);
+
   void clearGraph(uint16_t id, int clientId = -1);
   void addGraphPoint(uint16_t id, int nValue, int clientId = -1);