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;

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

@ -23,9 +23,9 @@ 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;
@ -89,67 +89,127 @@ function start() {
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) {
e.preventDefault();
buttonclick(data.id, true)
}
});
$('#' + data.id).on({
'touchend': function(e) {
e.preventDefault();
buttonclick(data.id, false)
}
});
break; break;
case UI_SWITCHER: case UI_SWITCHER:
var label = "<label id='sl"+data.id+"' class='switch checked'>"; 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>"; var input = "<input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' checked>";
if(data.value == "0"){ if (data.value == "0") {
label = "<label id='sl"+data.id+"' class='switch'>"; label = "<label id='sl" + data.id + "' class='switch'>";
input = "<input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' >"; input = "<input type='checkbox' id='s" + data.id + "' onClick='switcher(" + data.id + ",null)' >";
} }
$('#row').append( $('#row').append(
"<div id='"+data.id+"' class='one columns card tcenter "+colorClass(data.color)+"'><h5>"+data.label+"</h5><hr/>" + "<div id='" + data.id + "' class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/>" +
label + "<i class='icon-ok'></i>" + label + "<i class='icon-ok'></i>" +
"<i class='icon-remove'></i>" + input + "<i class='icon-remove'></i>" + input +
"</label>" + "</label>" +
"</div>"); "</div>");
break; 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='pc"+data.id+"'>OK</a>"; center = "<a class='confirm' onmousedown='padclick(CENTER, " + data.id + ", true)' onmouseup='padclick(CENTER, " + data.id + ", false)' href='#' id='pc" + data.id + "'>OK</a>";
//NO BREAK //NO BREAK
case UI_PAD: case UI_PAD:
$('#row').append( $('#row').append(
"<div class='two 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/>" +
"<nav class='control'>"+ "<nav class='control'>" +
"<ul>"+ "<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(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(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(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>" + "<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>");
$('#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);
@ -163,50 +223,50 @@ function start() {
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){ function switcher(number, state) {
if(state == null){ if (state == null) {
if($('#s'+number).is(':checked')){ if ($('#s' + number).is(':checked')) {
websock.send("sactive:"+number); websock.send("sactive:" + number);
$('#sl'+number).addClass('checked'); $('#sl' + number).addClass('checked');
}else { } else {
websock.send("sinactive:"+number); websock.send("sinactive:" + number);
$('#sl'+number).removeClass('checked'); $('#sl' + number).removeClass('checked');
} }
}else if(state == 1){ } else if (state == 1) {
$('#sl'+number).addClass('checked'); $('#sl' + number).addClass('checked');
$('#sl'+number).prop( "checked", true ); $('#sl' + number).prop("checked", true);
}else if(state == 0){ } else if (state == 0) {
$('#sl'+number).removeClass('checked'); $('#sl' + number).removeClass('checked');
$('#sl'+number).prop( "checked", false ); $('#sl' + number).prop("checked", false);
} }
} }

12
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) {
@ -63,7 +62,6 @@ void buttonCallback(Control sender, int type) {
Serial.println("Button UP"); Serial.println("Button UP");
break; break;
} }
} }
void buttonExample(Control sender, int type) { void buttonExample(Control sender, int type) {

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