From a8ce83df64e19fd11476cbaa116860f9426a2cc6 Mon Sep 17 00:00:00 2001
From: Lukas Bachschwell <lukas@lbsfilm.at>
Date: Thu, 19 Oct 2017 17:30:32 +0200
Subject: [PATCH] Adding Switches

---
 examples/softAP_UI_Test/data/css/style.css  | 126 ++++++++++++++++----
 examples/softAP_UI_Test/data/js/controls.js |  75 +++++++++---
 src/EasyUI.cpp                              |  46 +++++--
 src/EasyUI.h                                |  12 +-
 4 files changed, 198 insertions(+), 61 deletions(-)

diff --git a/examples/softAP_UI_Test/data/css/style.css b/examples/softAP_UI_Test/data/css/style.css
index 9c35725..6157ca3 100644
--- a/examples/softAP_UI_Test/data/css/style.css
+++ b/examples/softAP_UI_Test/data/css/style.css
@@ -1,4 +1,3 @@
-
   body{
     background-color: #F4F3EF;
   }
@@ -29,17 +28,16 @@
     padding: 0.12em 0.4em 0.14em;
     text-align: center;
     color: #ffffff;
-    font-size: 0.75em;
     font-weight: 700;
     line-height: 1;
-    display: inline;
+    margin-bottom: 5px;
+    display: inline-block;
     white-space: nowrap;
     vertical-align: baseline;
     position: relative;
     top: -0.15em;
-    background-color: #999999; }
-
-    .label { ... }
+    background-color: #999999;
+    margin-bottom: 10px;}
 
     .label.color-blue { background-color: #6f9ad1; }
     .label.color-red { background-color: #d37c7c; }
@@ -292,26 +290,13 @@
     margin-left: .5rem;
     font-weight: normal; }
 
-
-  /* Lists
-  –––––––––––––––––––––––––––––––––––––––––––––––––– */
-/*
-  ul {
-    list-style: circle inside; }
-  ol {
-    list-style: decimal inside; }
-  ol, ul {
-    padding-left: 0;
-    margin-top: 0; }
-  ul ul,
-  ul ol,
-  ol ol,
-  ol ul {
-    margin: 1.5rem 0 1.5rem 3rem;
-    font-size: 90%; }
-  li {
-    margin-bottom: 1rem; }
-*/
+  #mainHeader{
+    display:inline-block;
+  }
+  #conStatus{
+    position:inherit;
+    font-size: 0.75em;
+  }
 
   /* Code
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -481,3 +466,92 @@
 .control .confirm:focus {
   background-color: #eee;
 }
+
+
+
+/* Switch
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+
+.switch {
+  background-color: #bebebe;
+	border-radius: 4px;
+	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	color: #fff;
+  cursor: pointer;
+	display: block;
+	font-size: 14px;
+	height: 26px;
+	margin-bottom: 12px;
+	position: relative;
+	width: 60px;
+	-webkit-transition: background-color 0.2s ease-in-out;
+	-moz-transition: background-color 0.2s ease-in-out;
+	-o-transition: background-color 0.2s ease-in-out;
+	-ms-transition: background-color 0.2s ease-in-out;
+	transition: background-color 0.2s ease-in-out;
+}
+.switch.checked {
+	background-color: #76d21d;
+}
+.switch input[type="checkbox"] {
+  cursor: pointer;
+	height: 10px;
+	left: 12px;
+	position: absolute;
+	top: 8px;
+	-webkit-transition: left 0.05s ease-in-out;
+	-moz-transition: left 0.05s ease-in-out;
+	-o-transition: left 0.05s ease-in-out;
+	-ms-transition: left 0.05s ease-in-out;
+	transition: left 0.05s ease-in-out;
+	width: 10px;
+}
+.switch.checked input[type="checkbox"] {
+	left: 38px;
+}
+.switch input:before {
+	background: #fff;
+	background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f0f0f0));
+	background: -webkit-linear-gradient(top, #fff 0%,#f0f0f0 100%);
+	background: -o-linear-gradient(top, #fff 0%,#f0f0f0 100%);
+	background: -ms-linear-gradient(top, #fff 0%,#f0f0f0 100%);
+	background: linear-gradient(to bottom, #fff 0%,#f0f0f0 100%);
+	border: 1px solid #fff;
+	border-radius: 2px;
+	box-shadow: 0 0 4px rgba(0,0,0,0.3);
+	content: '';
+	height: 18px;
+	position: absolute;
+	top: -5px;
+	left: -9px;
+	width: 26px;
+}
+.switch input:after {
+	background: #f0f0f0;
+	background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#fff));
+	background: -webkit-linear-gradient(top, #f0f0f0 0%,#fff 100%);
+	background: -o-linear-gradient(top, #f0f0f0 0%,#fff 100%);
+	background: -ms-linear-gradient(top, #f0f0f0 0%,#fff 100%);
+	background: linear-gradient(to bottom, #f0f0f0 0%,#fff 100%);
+	border-radius: 10px;
+	content: '';
+	height: 12px;
+	margin: -1px 0 0 -1px;
+	position: absolute;
+	width: 12px;
+}
+.switch .icon-ok,
+.switch .icon-remove {
+	line-height: 28px;
+	text-shadow: 0 -2px 0 rgba(0,0,0,0.2);
+	margin: 0 9px;
+}
+.switch .icon-ok {
+	float: left;
+}
+.switch .icon-remove {
+	float: right;
+}
diff --git a/examples/softAP_UI_Test/data/js/controls.js b/examples/softAP_UI_Test/data/js/controls.js
index 8711475..e820a92 100644
--- a/examples/softAP_UI_Test/data/js/controls.js
+++ b/examples/softAP_UI_Test/data/js/controls.js
@@ -1,6 +1,3 @@
-// Roadmap:
-// Build a serial Console?
-
 const UI_TITEL = 0;
 const UI_LABEL = 1;
 const UI_BUTTON = 2;
@@ -8,6 +5,7 @@ const UI_SWITCHER = 3;
 const UI_PAD = 4;
 const UI_CPAD = 5;
 const UPDATE_LABEL = 6;
+const UPDATE_SWITCHER = 7;
 
 const FOR = 0;
 const BACK = 1;
@@ -16,6 +14,7 @@ const RIGHT = 3;
 const CENTER = 4;
 
 var websock;
+
 function start() {
   websock = new WebSocket('ws://' + window.location.hostname + '/ws');
   websock.onopen = function(evt) {
@@ -46,13 +45,27 @@ function start() {
         $('#mainHeader').html(data.label);
       break;
       case UI_LABEL:
-        $('#row').append("<div class='two columns card'><h5 id='"+data.id+"'>"+data.label+"</h5></div>");
+        $('#row').append("<div class='two columns card'><h5 id='"+data.id+"'>"+data.label+"</h5><hr /><span id='l"+data.id+"' class='label'>"+data.value+"</span></div>");
       break;
       case UI_BUTTON:
         $('#row').append("<div class='two columns card'><h5>"+data.label+"</h5><hr/><button onmousedown='buttonclick("+data.id+", true)' onmouseup='buttonclick("+data.id+", false)' id='"+data.id+"'></button></div>");
         $('#'+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 = "<label id='sl"+data.id+"' class='switch checked'>";
+      var input = "<input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' checked>";
+      if(data.value == "0"){
+        label = "<label id='sl"+data.id+"' class='switch'>";
+        input = "<input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' >";
+      }
+      $('#row').append(
+      "<div id='"+data.id+"' class='two columns card'><h5>"+data.label+"</h5><hr/>" +
+      label + "<i class='icon-ok'></i>" +
+      "<i class='icon-remove'></i>" + input +
+      "</label>" +
+      "</div>");
+      break;
       case UI_CPAD:
       center = "<a class='confirm' onmousedown='padclick(CENTER, "+data.id+", true)' onmouseup='padclick(CENTER, "+data.id+", false)' href='#' id='c"+data.id+"'>OK</a>";
       //NO BREAK
@@ -61,29 +74,35 @@ function start() {
       "<div class='two columns card'><h5>"+data.label+"</h5><hr/>"+
       "<nav class='control'>"+
       "<ul>"+
-      "<li><a onmousedown='padclick(FOR, "+data.id+", true)' onmouseup='padclick(FOR, "+data.id+", false)' href='#' id='f"+data.id+"'>▲</a></li>" +
-      "<li><a onmousedown='padclick(RIGHT, "+data.id+", true)' onmouseup='padclick(RIGHT, "+data.id+", false)' href='#' id='r"+data.id+"'>▲</a></li>" +
-      "<li><a onmousedown='padclick(LEFT, "+data.id+", true)' onmouseup='padclick(LEFT, "+data.id+", false)' href='#' id='l"+data.id+"'>▲</a></li>" +
-      "<li><a onmousedown='padclick(BACK, "+data.id+", true)' onmouseup='padclick(BACK, "+data.id+", false)' href='#' id='b"+data.id+"'>▲</a></li>" +
+      "<li><a onmousedown='padclick(FOR, "+data.id+", true)' onmouseup='padclick(FOR, "+data.id+", false)' href='#' id='pf"+data.id+"'>▲</a></li>" +
+      "<li><a onmousedown='padclick(RIGHT, "+data.id+", true)' onmouseup='padclick(RIGHT, "+data.id+", false)' href='#' id='pr"+data.id+"'>▲</a></li>" +
+      "<li><a onmousedown='padclick(LEFT, "+data.id+", true)' onmouseup='padclick(LEFT, "+data.id+", false)' href='#' id='pl"+data.id+"'>▲</a></li>" +
+      "<li><a onmousedown='padclick(BACK, "+data.id+", true)' onmouseup='padclick(BACK, "+data.id+", false)' href='#' id='pb"+data.id+"'>▲</a></li>" +
       "</ul>"+
       center +
       "</nav>"+
       "</div>");
 
-      $('#f'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(FOR, data.id, true) } });
-      $('#f'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(FOR, data.id, false) } });
-      $('#l'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(LEFT, data.id, true) } });
-      $('#l'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(LEFT, data.id, false) } });
-      $('#r'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(RIGHT, data.id, true) } });
-      $('#r'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(RIGHT, data.id, false) } });
-      $('#b'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(BACK, data.id, true) } });
-      $('#b'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(BACK,data.id, false) } });
-      $('#c'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(CENTER, data.id, true) } });
-      $('#c'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(CENTER,data.id, false) } });
+      $('#pf'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(FOR, data.id, true) } });
+      $('#pf'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(FOR, data.id, false) } });
+      $('#pl'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(LEFT, data.id, true) } });
+      $('#pl'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(LEFT, data.id, false) } });
+      $('#pr'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(RIGHT, data.id, true) } });
+      $('#pr'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(RIGHT, data.id, false) } });
+      $('#pb'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(BACK, data.id, true) } });
+      $('#pb'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(BACK,data.id, false) } });
+      $('#pc'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(CENTER, data.id, true) } });
+      $('#pc'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(CENTER,data.id, false) } });
 
       break;
       case UPDATE_LABEL:
-      $('#'+data.id).html(data.label);
+      $('#l'+data.id).html(data.value);
+      break;
+      case UPDATE_SWITCHER:
+      if(data.value == "0")
+        switcher(data.id, 0);
+      else
+        switcher(data.id, 1);
       break;
       default:
         console.error('Unknown type or event');
@@ -123,3 +142,21 @@ function padclick(type, number, isdown) {
 
   }
 }
+
+function switcher(number, state){
+  if(state == null){
+    if($('#s'+number).is(':checked')){
+      websock.send("sactive:"+number);
+      $('#sl'+number).addClass('checked');
+    }else {
+      websock.send("sinactive:"+number);
+      $('#sl'+number).removeClass('checked');
+    }
+  }else if(state == 1){
+    $('#sl'+number).addClass('checked');
+    $('#sl'+number).prop( "checked", true );
+  }else if(state == 0){
+    $('#sl'+number).removeClass('checked');
+    $('#sl'+number).prop( "checked", false );
+  }
+}
diff --git a/src/EasyUI.cpp b/src/EasyUI.cpp
index 56dbfd5..7f1353b 100644
--- a/src/EasyUI.cpp
+++ b/src/EasyUI.cpp
@@ -44,16 +44,23 @@ void onWsEvent(AsyncWebSocket * server, AsyncWebSocketClient * client, AwsEventT
             EasyUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_CENTER_DOWN);
           }else if(msg.startsWith("pcup:")){
             EasyUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_CENTER_UP);
+          }else if(msg.startsWith("sactive:")){
+            EasyUI.updateSwitcher(msg.substring(8).toInt(), true);
+            EasyUI.controls[msg.substring(8).toInt()]->callback(msg.substring(8).toInt(), S_ACTIVE);
+          }else if(msg.startsWith("sinactive:")){
+            EasyUI.updateSwitcher(msg.substring(10).toInt(), false);
+            EasyUI.controls[msg.substring(10).toInt()]->callback(msg.substring(10).toInt(), S_INACTIVE);
           }
           break;
     }
 }
 
-void EasyUIClass::label(const char* label){
+void EasyUIClass::label(const char* label, String value){
   Control* newL = new Control();
   newL->type = UI_LABEL;
   newL->label = label;
-  newL->oldValue = label;
+  if(value != "") newL->value = value; // Init with labeltext
+  else newL->value = String(label);
   newL->callback = NULL;
   controls[cIndex] = newL;
   cIndex++;
@@ -68,15 +75,14 @@ void EasyUIClass::button(const char* label, void(* callBack)(int, int)){
   cIndex++;
 }
 
-void EasyUIClass::switcher(const char* label, int start_state, void(* callBack)(int, int)){
+void EasyUIClass::switcher(const char* label, bool startState, void(* callBack)(int, int)){
   Control* newS = new Control();
   newS->type = UI_SWITCHER;
   newS->label = label;
+  newS->value = String(startState);
   newS->callback = callBack;
   controls[cIndex] = newS;
   cIndex++;
-  //TODO: implement switch state buffer
-  //tbutton_swap[tb_index] = swap_state;
 }
 
 void EasyUIClass::pad(const char* label, bool center, void(* callBack)(int, int)){
@@ -89,19 +95,35 @@ void EasyUIClass::pad(const char* label, bool center, void(* callBack)(int, int)
   cIndex++;
 }
 
-void EasyUIClass::print(int labelid, String value){
-  if(labelid<cIndex && controls[labelid]->type == UI_LABEL){
-    controls[labelid]->oldValue = value;
+void EasyUIClass::print(int id, String value){
+  if(id<cIndex && controls[id]->type == UI_LABEL){
+    controls[id]->value = value;
     String json;
     StaticJsonBuffer<200> jsonBuffer;
     JsonObject& root = jsonBuffer.createObject();
     root["type"] = UPDATE_LABEL;
-    root["label"] = value;
-    root["id"] = String(labelid);
+    root["value"] = value;
+    root["id"] = String(id);
     root.printTo(json);
     this->ws->textAll(json);
   }else{
-    Serial.println(String("Error: ")+ String(labelid) +String(" is no label"));
+    Serial.println(String("Error: ")+ String(id) +String(" is no label"));
+  }
+}
+
+void EasyUIClass::updateSwitcher(int id, bool nValue){
+  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["value"] = nValue?1:0;
+    root["id"] = String(id);
+    root.printTo(json);
+    this->ws->textAll(json);
+  }else{
+    Serial.println(String("Error: ")+ String(id) +String(" is no switcher"));
   }
 }
 
@@ -118,8 +140,8 @@ void EasyUIClass::jsonDom(AsyncWebSocketClient * client){
     }else{
       root["type"] = controls[i]->type;
       root["label"] = String(controls[i]->label);
+      root["value"] = String(controls[i]->value);
       root["id"] = String(i);
-      if(controls[i]->type == UI_LABEL)root["label"] = controls[i]->oldValue;
     }
     root.printTo(json);
     client->text(json);
diff --git a/src/EasyUI.h b/src/EasyUI.h
index d902273..41c6bc5 100644
--- a/src/EasyUI.h
+++ b/src/EasyUI.h
@@ -21,7 +21,7 @@ typedef struct Control
     unsigned int type;
     const char *label;
     void (*callback)(int, int);
-    String oldValue;
+    String value;
 } Control;
 
 // Types
@@ -32,6 +32,7 @@ typedef struct Control
 #define UI_PAD 4
 #define UI_CPAD 5
 #define UPDATE_LABEL 6
+#define UPDATE_SWITCH 7
 
 // Values
 #define B_DOWN -1
@@ -47,6 +48,8 @@ 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
 
 
 
@@ -56,13 +59,14 @@ public:
   void begin(const char* _title);   // Setup servers and page
 
   // Creating Elements
-  void label(const char* label); // Create Label
+  void label(const char* label, String value = ""); // Create Label
   void button(const char* label, void(* callBack)(int, int));   // Create Event Button
-  void switcher(const char* label, int start_state, void(* callBack)(int, int));   // Create Toggle Button
+  void switcher(const char* label, bool startState, void(* callBack)(int, int));   // Create Toggle Button
   void pad(const char* label, bool centerButton, void(* callBack)(int, int));   // Create Pad Control
 
   // Update Elements
-  void print(int labelid, String value);
+  void print(int id, String value);
+  void updateSwitcher(int id, bool nValue);
 
   // Variables ---
   const char* ui_title = "ESPUI"; // Store UI Title and Header Name