diff --git a/examples/gui/data/css/normalize.min.css b/examples/gui/data/css/normalize.min.css new file mode 100644 index 0000000..7172bb1 --- /dev/null +++ b/examples/gui/data/css/normalize.min.css @@ -0,0 +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 diff --git a/examples/gui/data/css/style.css b/examples/gui/data/css/style.css index fce80c8..d1989b5 100644 --- a/examples/gui/data/css/style.css +++ b/examples/gui/data/css/style.css @@ -21,6 +21,10 @@ color: #fff; } + .card-slider { + padding-bottom: 10px + } + .turquoise { background: #1abc9c; border-bottom: #16a085 3px solid; diff --git a/examples/gui/data/js/controls.js b/examples/gui/data/js/controls.js index 869e575..37beaaa 100644 --- a/examples/gui/data/js/controls.js +++ b/examples/gui/data/js/controls.js @@ -218,7 +218,7 @@ function start() { break; case UI_SLIDER: $('#row').append( - "
" + + "
" + "
" + data.label + "

" + "
" + "" + @@ -233,7 +233,7 @@ function start() { break; case UPDATE_SLIDER: - slider(data.id, data.value); + slider_move($('#sl'+data.id), data.value ,'100', false); break; default: console.error('Unknown type or event'); @@ -274,10 +274,6 @@ function padclick(type, number, isdown) { } } -function slider(number, value) { - console.log('Should update slider: ' + value); -} - function switcher(number, state) { if (state == null) { if ($('#s' + number).is(':checked')) { diff --git a/src/ESPUI.cpp b/src/ESPUI.cpp index 8852a4b..3460327 100644 --- a/src/ESPUI.cpp +++ b/src/ESPUI.cpp @@ -22,12 +22,27 @@ stye/normalize.css js/controls.js js/zepto.js -*/ + if(!SPIFFS.begin()){ if(debug) Serial.println("SPIFFS Mount Failed"); return; } +SPIFFS.remove(path); + +File file = SPIFFS.open(path, FILE_WRITE); + + if(!file){ + Serial.println("Failed to open file for writing"); + return; + } + + if(file.print(message)){ + Serial.println("File written"); + } else { + Serial.println("Write failed"); + } +*/ /* listDir(SPIFFS, "/", 0); writeFile(SPIFFS, "/hello.txt", "Hello "); @@ -62,7 +77,11 @@ void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, for (size_t i = 0; i < len; i++) { msg += (char)data[i]; } - + int id = msg.substring(msg.lastIndexOf(':') + 1).toInt(); + if (id >= ESPUI.cIndex){ + if(debug) Serial.println("Maleformated id in websocket message"); + return; + } Control *c = ESPUI.controls[msg.substring(msg.lastIndexOf(':') + 1).toInt()]; if (msg.startsWith("bdown:")) { @@ -95,6 +114,10 @@ void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, } else if (msg.startsWith("sinactive:")) { ESPUI.updateSwitcher(c->id, false); c->callback(*c, S_INACTIVE); + } else if (msg.startsWith("slvalue:")) { + int value = msg.substring(msg.indexOf(':') + 1, msg.lastIndexOf(':')).toInt(); + ESPUI.updateSlider(c->id, value, client->id()); + c->callback(*c, SL_VALUE); } break; } @@ -239,17 +262,17 @@ void ESPUIClass::print(String label, String value) { print(getIdByLabel(label), value); } -void ESPUIClass::updateSwitcher(int id, bool nValue) { +void ESPUIClass::updateSwitcher(int id, bool nValue, int clientId ) { if (id < cIndex && controls[id]->type == UI_SWITCHER) { controls[id]->value = nValue ? 1 : 0; String json; StaticJsonBuffer<200> jsonBuffer; JsonObject &root = jsonBuffer.createObject(); - root["type"] = UPDATE_SWITCH; + root["type"] = UPDATE_SWITCHER; root["value"] = nValue ? 1 : 0; root["id"] = String(id); root.printTo(json); - this->ws->textAll(json); + textThem(json, clientId); } else { if (debug) Serial.println(String("Error: ") + String(id) + @@ -257,14 +280,40 @@ void ESPUIClass::updateSwitcher(int id, bool nValue) { } } -void ESPUIClass::updateSwitcher(String label, bool nValue) { +void ESPUIClass::updateSlider(int id, int nValue, int clientId ) { + if (id < cIndex && controls[id]->type == UI_SLIDER) { + controls[id]->value = nValue; + String json; + StaticJsonBuffer<200> jsonBuffer; + JsonObject &root = jsonBuffer.createObject(); + root["type"] = UPDATE_SLIDER; + root["value"] = nValue; + root["id"] = String(id); + root.printTo(json); + textThem(json, clientId); + } else { + if (debug) + Serial.println(String("Error: ") + String(id) + + String(" is no slider")); + } +} + +void ESPUIClass::updateSwitcher(String label, bool nValue, int clientId) { if (!labelExists(label)) { if (debug) Serial.println("UI ERROR: Element does not " + String(label) + " exist, cannot update!"); return; } - updateSwitcher(getIdByLabel(label), nValue); + updateSwitcher(getIdByLabel(label), nValue, clientId); +} + +void ESPUIClass::textThem(String text, int clientId){ + for(int i = 1; i <= this->ws->count(); i++){ + if(clientId!=i){ + this->ws->client(i)->text(text); + } + } } int ESPUIClass::getIdByLabel(String label) { diff --git a/src/ESPUI.h b/src/ESPUI.h index 0fb8be8..22b1b10 100644 --- a/src/ESPUI.h +++ b/src/ESPUI.h @@ -35,7 +35,7 @@ typedef struct Control { #define UI_PAD 4 #define UI_CPAD 5 #define UPDATE_LABEL 6 -#define UPDATE_SWITCH 7 +#define UPDATE_SWITCHER 7 #define UI_SLIDER 8 #define UPDATE_SLIDER 9 @@ -53,9 +53,12 @@ typedef struct Control { #define P_BACK_UP 5 #define P_CENTER_DOWN -6 #define P_CENTER_UP 6 + #define S_ACTIVE -7 #define S_INACTIVE 7 +#define SL_VALUE 8 + // Colors #define COLOR_TURQUOISE 0 @@ -90,11 +93,13 @@ public: void print(int id, String value); void print(String label, String value); - void updateSwitcher(int id, bool nValue); - void updateSwitcher(String label, bool nValue); + void updateSwitcher(int id, bool nValue, int clientId = -1); + void updateSwitcher(String label, bool nValue, int clientId = -1); - void updateSlider(int id, int nValue); - void updateSlider(String label, int nValue); + void updateSlider(int id, int nValue, int clientId = -1); + void updateSlider(String label, int nValue, int clientId = -1); + + void textThem(String text, int clientId); // Variables --- const char *ui_title = "ESPUI"; // Store UI Title and Header Name