lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2024-11-16 14:00:58 +00:00
Code Issues Releases Activity

codeformating

Browse Source
This commit is contained in:
Lukas Bachschwell 2017-11-14 12:14:59 +01:00
parent 86132fe38d
commit 7e948c34fc
4 changed files with 285 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/gui/data/css/style.css
View File

@ -320,7 +320,6 @@
button { button {
display: inline-block; display: inline-block;
padding: 10px; padding: 10px;
border-radius: 3px; border-radius: 3px;
color: #fff; color: #fff;

384
examples/gui/data/js/controls.js vendored
View File

@ -23,190 +23,250 @@ const C_CARROT = 5;
const C_ALIZARIN = 6; const C_ALIZARIN = 6;
const C_NONE = 7; const C_NONE = 7;
function colorClass(colorId){ function colorClass(colorId) {
colorId = Number(colorId); colorId = Number(colorId);
switch(colorId){ switch (colorId) {
case C_TURQUOISE: case C_TURQUOISE:
return "turquoise"; return "turquoise";
break; break;
case C_EMERALD: case C_EMERALD:
return "emerald"; return "emerald";
break; break;
case C_PETERRIVER: case C_PETERRIVER:
return "peterriver"; return "peterriver";
break; break;
case C_WETASPHALT: case C_WETASPHALT:
return "wetasphalt"; return "wetasphalt";
break; break;
case C_SUNFLOWER: case C_SUNFLOWER:
return "sunflower"; return "sunflower";
break; break;
case C_CARROT: case C_CARROT:
return "carrot" return "carrot"
break; break;
case C_ALIZARIN: case C_ALIZARIN:
return "alizarin" return "alizarin"
break; break;
case C_NONE: case C_NONE:
return "" return ""
break; break;
default: default:
return ""; return "";
} }
} }
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) {
console.log('websock open'); console.log('websock open');
$("#conStatus").addClass("color-green"); $("#conStatus").addClass("color-green");
$("#conStatus").text("Connected"); $("#conStatus").text("Connected");
}; };
websock.onclose = function(evt) { websock.onclose = function(evt) {
console.log('websock close'); console.log('websock close');
$("#conStatus").removeClass("color-green"); $("#conStatus").removeClass("color-green");
$("#conStatus").addClass("color-red"); $("#conStatus").addClass("color-red");
$("#conStatus").text("Error / No Connection"); $("#conStatus").text("Error / No Connection");
}; };
websock.onerror = function(evt) { websock.onerror = function(evt) {
console.log(evt); console.log(evt);
$("#conStatus").removeClass("color-green"); $("#conStatus").removeClass("color-green");
$("#conStatus").addClass("color-red"); $("#conStatus").addClass("color-red");
$("#conStatus").text("Error / No Connection"); $("#conStatus").text("Error / No Connection");
}; };
websock.onmessage = function(evt) { websock.onmessage = function(evt) {
console.log(evt); console.log(evt);
var data = JSON.parse(evt.data); var data = JSON.parse(evt.data);
var e = document.body; var e = document.body;
var center = ""; var center = "";
switch(data.type){ switch (data.type) {
case UI_TITEL: case UI_TITEL:
document.title = data.label; document.title = data.label;
$('#mainHeader').html(data.label); $('#mainHeader').html(data.label);
break; break;
case UI_LABEL: case UI_LABEL:
$('#row').append("<div class='two columns card tcenter "+colorClass(data.color)+"'><h5 id='"+data.id+"'>"+data.label+"</h5><hr /><span id='l"+data.id+"' class='label'>"+data.value+"</span></div>"); $('#row').append("<div class='two columns card tcenter " + colorClass(data.color) + "'><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='one columns card tcenter "+colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/><button onmousedown='buttonclick("+data.id+", true)' onmouseup='buttonclick("+data.id+", false)' id='"+data.id+"'>"+data.value+"</button></div>"); $('#row').append("<div class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/><button onmousedown='buttonclick(" + data.id + ", true)' onmouseup='buttonclick(" + data.id + ", false)' id='" + data.id + "'>" + data.value + "</button></div>");
$('#'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); buttonclick(data.id, true) } }); $('#' + data.id).on({
$('#'+data.id).on({ 'touchend' : function(e){e.preventDefault(); buttonclick(data.id, false) } }); 'touchstart': function(e) {
break; e.preventDefault();
case UI_SWITCHER: buttonclick(data.id, true)
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"){ $('#' + data.id).on({
label = "<label id='sl"+data.id+"' class='switch'>"; 'touchend': function(e) {
input = "<input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' >"; e.preventDefault();
} buttonclick(data.id, false)
$('#row').append( }
"<div id='"+data.id+"' class='one columns card tcenter "+colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>" + });
label + "<i class='icon-ok'></i>" + break;
"<i class='icon-remove'></i>" + input + case UI_SWITCHER:
"</label>" + var label = "<label id='sl" + data.id + "' class='switch checked'>";
"</div>"); var input = "<input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' checked>";
break; if (data.value == "0") {
case UI_CPAD: label = "<label id='sl" + data.id + "' class='switch'>";
center = "<a class='confirm' onmousedown='padclick(CENTER, "+data.id+", true)' onmouseup='padclick(CENTER, "+data.id+", false)' href='#' id='pc"+data.id+"'>OK</a>"; input = "<input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' >";
//NO BREAK }
case UI_PAD: $('#row').append(
$('#row').append( "<div id='" + data.id + "' class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
"<div class='two columns card tcenter "+colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>"+ label + "<i class='icon-ok'></i>" +
"<nav class='control'>"+ "<i class='icon-remove'></i>" + input +
"<ul>"+ "</label>" +
"<li><a onmousedown='padclick(FOR, "+data.id+", true)' onmouseup='padclick(FOR, "+data.id+", false)' href='#' id='pf"+data.id+"'>▲</a></li>" + "</div>");
"<li><a onmousedown='padclick(RIGHT, "+data.id+", true)' onmouseup='padclick(RIGHT, "+data.id+", false)' href='#' id='pr"+data.id+"'>▲</a></li>" + break;
"<li><a onmousedown='padclick(LEFT, "+data.id+", true)' onmouseup='padclick(LEFT, "+data.id+", false)' href='#' id='pl"+data.id+"'>▲</a></li>" + case UI_CPAD:
"<li><a onmousedown='padclick(BACK, "+data.id+", true)' onmouseup='padclick(BACK, "+data.id+", false)' href='#' id='pb"+data.id+"'>▲</a></li>" + center = "<a class='confirm' onmousedown='padclick(CENTER, " + data.id + ", true)' onmouseup='padclick(CENTER, " + data.id + ", false)' href='#' id='pc" + data.id + "'>OK</a>";
"</ul>"+ //NO BREAK
center + case UI_PAD:
"</nav>"+ $('#row').append(
"</div>"); "<div class='two columns card tcenter " + colorClass(data.color) + "'><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='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>");
$('#pf'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(FOR, data.id, true) } }); $('#pf' + data.id).on({
$('#pf'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(FOR, data.id, false) } }); 'touchstart': function(e) {
$('#pl'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(LEFT, data.id, true) } }); e.preventDefault();
$('#pl'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(LEFT, data.id, false) } }); padclick(FOR, data.id, true)
$('#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) } }); $('#pf' + data.id).on({
$('#pb'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(BACK,data.id, false) } }); 'touchend': function(e) {
$('#pc'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(CENTER, data.id, true) } }); e.preventDefault();
$('#pc'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(CENTER,data.id, false) } }); 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; break;
case UPDATE_LABEL: case UPDATE_LABEL:
$('#l'+data.id).html(data.value); $('#l' + data.id).html(data.value);
break; break;
case UPDATE_SWITCHER: case UPDATE_SWITCHER:
if(data.value == "0") if (data.value == "0")
switcher(data.id, 0); switcher(data.id, 0);
else else
switcher(data.id, 1); switcher(data.id, 1);
break; break;
default: default:
console.error('Unknown type or event'); console.error('Unknown type or event');
break; break;
} }
}; };
} }
function buttonclick(number, isdown) { function buttonclick(number, isdown) {
if(isdown)websock.send("bdown:"+number); if (isdown) websock.send("bdown:" + number);
else websock.send("bup:"+number); else websock.send("bup:" + number);
} }
function padclick(type, number, isdown) { function padclick(type, number, isdown) {
switch(type){ switch (type) {
case CENTER: case CENTER:
if(isdown)websock.send("pcdown:"+number); if (isdown) websock.send("pcdown:" + number);
else websock.send("pcup:"+number); else websock.send("pcup:" + number);
break; break;
case FOR: case FOR:
if(isdown)websock.send("pfdown:"+number); if (isdown) websock.send("pfdown:" + number);
else websock.send("pfup:"+number); else websock.send("pfup:" + number);
break; break;
case BACK: case BACK:
if(isdown)websock.send("pbdown:"+number); if (isdown) websock.send("pbdown:" + number);
else websock.send("pbup:"+number); else websock.send("pbup:" + number);
break; break;
case LEFT: case LEFT:
if(isdown)websock.send("pldown:"+number); if (isdown) websock.send("pldown:" + number);
else websock.send("plup:"+number); else websock.send("plup:" + number);
break; break;
case RIGHT: case RIGHT:
if(isdown)websock.send("prdown:"+number); if (isdown) websock.send("prdown:" + number);
else websock.send("prup:"+number); else websock.send("prup:" + number);
break; break;
}
}
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 ); function switcher(number, state) {
}else if(state == 0){ if (state == null) {
$('#sl'+number).removeClass('checked'); if ($('#s' + number).is(':checked')) {
$('#sl'+number).prop( "checked", false ); 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);
}
} }

124
examples/gui/gui.ino
View File

@ -1,8 +1,8 @@
#include <WiFi.h>
#include <ESPUI.h> #include <ESPUI.h>
#include <WiFi.h>
const char* ssid = "ESP32"; const char *ssid = "ESP32";
const char* password = ""; const char *password = "";
long oldTime = 0; long oldTime = 0;
bool switchi = false; bool switchi = false;
@ -12,7 +12,7 @@ void setup(void) {
WiFi.mode(WIFI_AP); WiFi.mode(WIFI_AP);
WiFi.setHostname(ssid); WiFi.setHostname(ssid);
WiFi.softAP(ssid); WiFi.softAP(ssid);
//WiFi.softAP(ssid, password); // WiFi.softAP(ssid, password);
Serial.println(""); Serial.println("");
Serial.print("IP address: "); Serial.print("IP address: ");
Serial.println(WiFi.softAPIP()); Serial.println(WiFi.softAPIP());
@ -35,14 +35,13 @@ void setup(void) {
ESPUI.label("Status:", COLOR_TURQUOISE, "Stop"); ESPUI.label("Status:", COLOR_TURQUOISE, "Stop");
ESPUI.label("Millis:", COLOR_EMERALD, "0"); ESPUI.label("Millis:", COLOR_EMERALD, "0");
ESPUI.button("Push Button", &buttonCallback, COLOR_PETERRIVER); ESPUI.button("Push Button", &buttonCallback, COLOR_PETERRIVER);
ESPUI.button("Other Button", &buttonExample, COLOR_WETASPHALT, "Press" ); ESPUI.button("Other Button", &buttonExample, COLOR_WETASPHALT, "Press");
ESPUI.pad("Pad with center", true, &padExample, COLOR_SUNFLOWER); ESPUI.pad("Pad with center", true, &padExample, COLOR_SUNFLOWER);
ESPUI.pad("Pad without center", false, &padExample, COLOR_CARROT); ESPUI.pad("Pad without center", false, &padExample, COLOR_CARROT);
ESPUI.switcher("Switch one", false, &switchExample, COLOR_ALIZARIN); ESPUI.switcher("Switch one", false, &switchExample, COLOR_ALIZARIN);
ESPUI.switcher("Switch two", true, &otherSwitchExample, COLOR_NONE); ESPUI.switcher("Switch two", true, &otherSwitchExample, COLOR_NONE);
ESPUI.begin("ESP32 Control"); ESPUI.begin("ESP32 Control");
} }
void loop(void) { void loop(void) {
@ -56,60 +55,59 @@ void loop(void) {
void buttonCallback(Control sender, int type) { void buttonCallback(Control sender, int type) {
switch (type) { switch (type) {
case B_DOWN: case B_DOWN:
Serial.println("Button DOWN"); Serial.println("Button DOWN");
break; break;
case B_UP: case B_UP:
Serial.println("Button UP"); Serial.println("Button UP");
break; break;
} }
} }
void buttonExample(Control sender, int type) { void buttonExample(Control sender, int type) {
switch (type) { switch (type) {
case B_DOWN: case B_DOWN:
Serial.println("Status: Start"); Serial.println("Status: Start");
ESPUI.print(0, "Status: Start"); ESPUI.print(0, "Status: Start");
break; break;
case B_UP: case B_UP:
Serial.println("Status: Stop"); Serial.println("Status: Stop");
ESPUI.print(0, "Status: Stop"); ESPUI.print(0, "Status: Stop");
break; break;
} }
} }
void padExample(Control sender, int value) { void padExample(Control sender, int value) {
switch (value) { switch (value) {
case P_LEFT_DOWN: case P_LEFT_DOWN:
Serial.print("left down"); Serial.print("left down");
break; break;
case P_LEFT_UP: case P_LEFT_UP:
Serial.print("left up"); Serial.print("left up");
break; break;
case P_RIGHT_DOWN: case P_RIGHT_DOWN:
Serial.print("right down"); Serial.print("right down");
break; break;
case P_RIGHT_UP: case P_RIGHT_UP:
Serial.print("right up"); Serial.print("right up");
break; break;
case P_FOR_DOWN: case P_FOR_DOWN:
Serial.print("for down"); Serial.print("for down");
break; break;
case P_FOR_UP: case P_FOR_UP:
Serial.print("for up"); Serial.print("for up");
break; break;
case P_BACK_DOWN: case P_BACK_DOWN:
Serial.print("back down"); Serial.print("back down");
break; break;
case P_BACK_UP: case P_BACK_UP:
Serial.print("back up"); Serial.print("back up");
break; break;
case P_CENTER_DOWN: case P_CENTER_DOWN:
Serial.print("center down"); Serial.print("center down");
break; break;
case P_CENTER_UP: case P_CENTER_UP:
Serial.print("center up"); Serial.print("center up");
break; break;
} }
Serial.print(" "); Serial.print(" ");
Serial.println(sender.id); Serial.println(sender.id);
@ -117,12 +115,12 @@ void padExample(Control sender, int value) {
void switchExample(Control sender, int value) { void switchExample(Control sender, int value) {
switch (value) { switch (value) {
case S_ACTIVE: case S_ACTIVE:
Serial.print("Active:"); Serial.print("Active:");
break; break;
case S_INACTIVE: case S_INACTIVE:
Serial.print("Inactive"); Serial.print("Inactive");
break; break;
} }
Serial.print(" "); Serial.print(" ");
Serial.println(sender.id); Serial.println(sender.id);
@ -130,12 +128,12 @@ void switchExample(Control sender, int value) {
void otherSwitchExample(Control sender, int value) { void otherSwitchExample(Control sender, int value) {
switch (value) { switch (value) {
case S_ACTIVE: case S_ACTIVE:
Serial.print("Active:"); Serial.print("Active:");
break; break;
case S_INACTIVE: case S_INACTIVE:
Serial.print("Inactive"); Serial.print("Inactive");
break; break;
} }
Serial.print(" "); Serial.print(" ");
Serial.println(sender.id); Serial.println(sender.id);

4
src/ESPUI.cpp
View File

@ -93,8 +93,8 @@ void ESPUIClass::label(const char *label, int color, String value) {
cIndex++; cIndex++;
} }
void ESPUIClass::button(const char *label, void (*callBack)(Control, int), int color, void ESPUIClass::button(const char *label, void (*callBack)(Control, int),
String value) { int color, String value) {
if (labelExists(label)) { if (labelExists(label)) {
if (debug) if (debug)
Serial.println("UI ERROR: Element " + String(label) + Serial.println("UI ERROR: Element " + String(label) +