lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2024-11-24 07:20:53 +00:00
Code Issues Releases Activity

Adding Switches

Browse Source
This commit is contained in:
Lukas Bachschwell 2017-10-19 17:30:32 +02:00
parent a258eab72b
commit a8ce83df64
4 changed files with 198 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
examples/softAP_UI_Test/data/css/style.css
View File

@ -1,4 +1,3 @@
body{ body{
background-color: #F4F3EF; background-color: #F4F3EF;
} }
@ -29,17 +28,16 @@
padding: 0.12em 0.4em 0.14em; padding: 0.12em 0.4em 0.14em;
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
font-size: 0.75em;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
display: inline; margin-bottom: 5px;
display: inline-block;
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
position: relative; position: relative;
top: -0.15em; top: -0.15em;
background-color: #999999; } background-color: #999999;
margin-bottom: 10px;}
.label { ... }
.label.color-blue { background-color: #6f9ad1; } .label.color-blue { background-color: #6f9ad1; }
.label.color-red { background-color: #d37c7c; } .label.color-red { background-color: #d37c7c; }
@ -292,26 +290,13 @@
margin-left: .5rem; margin-left: .5rem;
font-weight: normal; } font-weight: normal; }
#mainHeader{
/* Lists display:inline-block;
–––––––––––––––––––––––––––––––––––––––––––––––––– */ }
/* #conStatus{
ul { position:inherit;
list-style: circle inside; } font-size: 0.75em;
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; }
*/
/* Code /* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
@ -481,3 +466,92 @@
.control .confirm:focus { .control .confirm:focus {
background-color: #eee; 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;
}

75
examples/softAP_UI_Test/data/js/controls.js vendored
View File

@ -1,6 +1,3 @@
// Roadmap:
// Build a serial Console?
const UI_TITEL = 0; const UI_TITEL = 0;
const UI_LABEL = 1; const UI_LABEL = 1;
const UI_BUTTON = 2; const UI_BUTTON = 2;
@ -8,6 +5,7 @@ const UI_SWITCHER = 3;
const UI_PAD = 4; const UI_PAD = 4;
const UI_CPAD = 5; const UI_CPAD = 5;
const UPDATE_LABEL = 6; const UPDATE_LABEL = 6;
const UPDATE_SWITCHER = 7;
const FOR = 0; const FOR = 0;
const BACK = 1; const BACK = 1;
@ -16,6 +14,7 @@ const RIGHT = 3;
const CENTER = 4; const CENTER = 4;
var websock; var websock;
function start() { function start() {
websock = new WebSocket('ws://' + window.location.hostname + '/ws'); websock = new WebSocket('ws://' + window.location.hostname + '/ws');
websock.onopen = function(evt) { websock.onopen = function(evt) {
@ -46,13 +45,27 @@ function start() {
$('#mainHeader').html(data.label); $('#mainHeader').html(data.label);
break; break;
case UI_LABEL: 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; break;
case UI_BUTTON: 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>"); $('#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({ 'touchstart' : function(e){e.preventDefault(); buttonclick(data.id, true) } });
$('#'+data.id).on({ 'touchend' : function(e){e.preventDefault(); buttonclick(data.id, false) } }); $('#'+data.id).on({ 'touchend' : function(e){e.preventDefault(); buttonclick(data.id, false) } });
break; 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: 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>"; 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 //NO BREAK
@ -61,29 +74,35 @@ function start() {
"<div class='two columns card'><h5>"+data.label+"</h5><hr/>"+ "<div class='two columns card'><h5>"+data.label+"</h5><hr/>"+
"<nav class='control'>"+ "<nav class='control'>"+
"<ul>"+ "<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(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='r"+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='l"+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='b"+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>"+ "</ul>"+
center + center +
"</nav>"+ "</nav>"+
"</div>"); "</div>");
$('#f'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(FOR, data.id, true) } }); $('#pf'+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) } }); $('#pf'+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) } }); $('#pl'+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) } }); $('#pl'+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) } }); $('#pr'+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) } }); $('#pr'+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) } }); $('#pb'+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) } }); $('#pb'+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) } }); $('#pc'+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) } }); $('#pc'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(CENTER,data.id, false) } });
break; break;
case UPDATE_LABEL: 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; break;
default: default:
console.error('Unknown type or event'); 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 );
}
}

46
src/EasyUI.cpp
View File

@ -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); EasyUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_CENTER_DOWN);
}else if(msg.startsWith("pcup:")){ }else if(msg.startsWith("pcup:")){
EasyUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_CENTER_UP); 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; break;
} }
} }
void EasyUIClass::label(const char* label){ void EasyUIClass::label(const char* label, String value){
Control* newL = new Control(); Control* newL = new Control();
newL->type = UI_LABEL; newL->type = UI_LABEL;
newL->label = label; newL->label = label;
newL->oldValue = label; if(value != "") newL->value = value; // Init with labeltext
else newL->value = String(label);
newL->callback = NULL; newL->callback = NULL;
controls[cIndex] = newL; controls[cIndex] = newL;
cIndex++; cIndex++;
@ -68,15 +75,14 @@ void EasyUIClass::button(const char* label, void(* callBack)(int, int)){
cIndex++; 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(); Control* newS = new Control();
newS->type = UI_SWITCHER; newS->type = UI_SWITCHER;
newS->label = label; newS->label = label;
newS->value = String(startState);
newS->callback = callBack; newS->callback = callBack;
controls[cIndex] = newS; controls[cIndex] = newS;
cIndex++; cIndex++;
//TODO: implement switch state buffer
//tbutton_swap[tb_index] = swap_state;
} }
void EasyUIClass::pad(const char* label, bool center, void(* callBack)(int, int)){ 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++; cIndex++;
} }
void EasyUIClass::print(int labelid, String value){ void EasyUIClass::print(int id, String value){
if(labelid<cIndex && controls[labelid]->type == UI_LABEL){ if(id<cIndex && controls[id]->type == UI_LABEL){
controls[labelid]->oldValue = value; controls[id]->value = value;
String json; String json;
StaticJsonBuffer<200> jsonBuffer; StaticJsonBuffer<200> jsonBuffer;
JsonObject& root = jsonBuffer.createObject(); JsonObject& root = jsonBuffer.createObject();
root["type"] = UPDATE_LABEL; root["type"] = UPDATE_LABEL;
root["label"] = value; root["value"] = value;
root["id"] = String(labelid); root["id"] = String(id);
root.printTo(json); root.printTo(json);
this->ws->textAll(json); this->ws->textAll(json);
}else{ }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{ }else{
root["type"] = controls[i]->type; root["type"] = controls[i]->type;
root["label"] = String(controls[i]->label); root["label"] = String(controls[i]->label);
root["value"] = String(controls[i]->value);
root["id"] = String(i); root["id"] = String(i);
if(controls[i]->type == UI_LABEL)root["label"] = controls[i]->oldValue;
} }
root.printTo(json); root.printTo(json);
client->text(json); client->text(json);

12
src/EasyUI.h
View File

@ -21,7 +21,7 @@ typedef struct Control
unsigned int type; unsigned int type;
const char *label; const char *label;
void (*callback)(int, int); void (*callback)(int, int);
String oldValue; String value;
} Control; } Control;
// Types // Types
@ -32,6 +32,7 @@ typedef struct Control
#define UI_PAD 4 #define UI_PAD 4
#define UI_CPAD 5 #define UI_CPAD 5
#define UPDATE_LABEL 6 #define UPDATE_LABEL 6
#define UPDATE_SWITCH 7
// Values // Values
#define B_DOWN -1 #define B_DOWN -1
@ -47,6 +48,8 @@ typedef struct Control
#define P_BACK_UP 5 #define P_BACK_UP 5
#define P_CENTER_DOWN -6 #define P_CENTER_DOWN -6
#define P_CENTER_UP 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 void begin(const char* _title); // Setup servers and page
// Creating Elements // 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 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 void pad(const char* label, bool centerButton, void(* callBack)(int, int)); // Create Pad Control
// Update Elements // Update Elements
void print(int labelid, String value); void print(int id, String value);
void updateSwitcher(int id, bool nValue);
// Variables --- // Variables ---
const char* ui_title = "ESPUI"; // Store UI Title and Header Name const char* ui_title = "ESPUI"; // Store UI Title and Header Name