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);