From 7d46a4de969697056fce6539e77bbfcbabf14566 Mon Sep 17 00:00:00 2001 From: Lukas Bachschwell Date: Mon, 26 Nov 2018 18:25:10 +0100 Subject: [PATCH] #9 #21 Adds Text input / Number input Support also loads of reformating --- examples/gui/data/css/normalize.min.css | 2 +- examples/gui/data/js/controls.js | 682 ++++++++++++++---------- examples/gui/data/js/controls.min.js | 163 ++++-- examples/gui/gui.ino | 7 + src/ESPUI.cpp | 328 +++++++----- src/ESPUI.h | 104 ++-- src/dataControlsJS.h | 165 ++++-- src/dataIndexHTML.h | 28 +- src/dataNormalizeCSS.h | 4 +- src/dataSliderJS.h | 2 +- src/dataStyleCSS.h | 2 +- src/dataZeptoJS.h | 8 +- 12 files changed, 935 insertions(+), 560 deletions(-) diff --git a/examples/gui/data/css/normalize.min.css b/examples/gui/data/css/normalize.min.css index 7172bb1..bb2f742 100644 --- a/examples/gui/data/css/normalize.min.css +++ b/examples/gui/data/css/normalize.min.css @@ -1 +1 @@ -html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} \ No newline at end of file +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} \ No newline at end of file diff --git a/examples/gui/data/js/controls.js b/examples/gui/data/js/controls.js index 7eeb196..01a30e4 100644 --- a/examples/gui/data/js/controls.js +++ b/examples/gui/data/js/controls.js @@ -14,8 +14,6 @@ const UI_CPAD = 5; const UI_SLIDER = 8; const UPDATE_SLIDER = 9; - - const UI_NUMBER = 10; const UPDATE_NUMBER = 11; @@ -43,323 +41,441 @@ const C_ALIZARIN = 6; const C_NONE = 7; function colorClass(colorId) { - colorId = Number(colorId); - switch (colorId) { - case C_TURQUOISE: - return "turquoise"; - break; + colorId = Number(colorId); + switch (colorId) { + case C_TURQUOISE: + return "turquoise"; + break; - case C_EMERALD: - return "emerald"; - break; + case C_EMERALD: + return "emerald"; + break; - case C_PETERRIVER: - return "peterriver"; - break; + case C_PETERRIVER: + return "peterriver"; + break; - case C_WETASPHALT: - return "wetasphalt"; - break; + case C_WETASPHALT: + return "wetasphalt"; + break; - case C_SUNFLOWER: - return "sunflower"; - break; + case C_SUNFLOWER: + return "sunflower"; + break; - case C_CARROT: - return "carrot" - break; + case C_CARROT: + return "carrot"; + break; - case C_ALIZARIN: - return "alizarin" - break; + case C_ALIZARIN: + return "alizarin"; + break; - case C_NONE: - return "" - break; + case C_NONE: + return ""; + break; - default: - return ""; - } + default: + return ""; + } } var websock; var websockConnected = false; function restart() { - $(document).add('*').off(); - $("#row").html(""); - websock.close(); - start(); + $(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 - }); + 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(); - } + 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(); - }; - websock.onmessage = function(evt) { - console.log(evt); - var data = JSON.parse(evt.data); - var e = document.body; - var center = ""; - switch (data.type) { - case UI_TITEL: - document.title = data.label; - $('#mainHeader').html(data.label); - break; - case UI_LABEL: - $('#row').append("
" + data.label + "

" + data.value + "
"); - break; - case UI_BUTTON: - $('#row').append("
" + data.label + "

"); - $('#' + data.id).on({ - 'touchstart': function(e) { - e.preventDefault(); - buttonclick(data.id, true) - } - }); - $('#' + data.id).on({ - 'touchend': function(e) { - e.preventDefault(); - buttonclick(data.id, false) - } - }); - break; - case UI_SWITCHER: - var label = "