mirror of
https://github.com/s00500/ESPUI.git
synced 2025-11-04 09:23:23 +00:00
Adding Switches
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
75
examples/softAP_UI_Test/data/js/controls.js
vendored
75
examples/softAP_UI_Test/data/js/controls.js
vendored
@@ -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 );
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
12
src/EasyUI.h
12
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
|
||||
|
||||
Reference in New Issue
Block a user