Adding all the rest for sliderfeature

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}

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;

examples/gui/data/js/controls.js

@@ -218,7 +218,7 @@ function start() {
                 break;
             case UI_SLIDER:
                 $('#row').append(
-                    "<div class='two columns card tcenter " + colorClass(data.color) + "'>" +
+                    "<div class='two columns card tcenter card-slider " + colorClass(data.color) + "'>" +
                     "<h5 id='" + data.id + "'>" + data.label + "</h5><hr />" +
                     "<div id='sl" + data.id + "' class='rkmd-slider slider-discrete slider-" + colorClass(data.color) + "'>" +
                     "<input type='range' min='0' max='100' value='" + data.value + "'>" +
@@ -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')) {

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

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(int id, bool nValue, int clientId = -1);
-  void updateSwitcher(String label, bool nValue);
+  void updateSwitcher(String label, bool nValue, int clientId = -1);
 
-  void updateSlider(int id, int nValue);
+  void updateSlider(int id, int nValue, int clientId = -1);
-  void updateSlider(String label, int nValue);
+  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