lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2024-11-22 04:00:55 +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 {
display: inline-block;
padding: 10px;
border-radius: 3px;
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_NONE = 7;
function colorClass(colorId){
function colorClass(colorId) {
colorId = Number(colorId);
switch(colorId){
switch (colorId) {
case C_TURQUOISE:
return "turquoise";
break;
@ -89,67 +89,127 @@ function start() {
var data = JSON.parse(evt.data);
var e = document.body;
var center = "";
switch(data.type){
switch (data.type) {
case UI_TITEL:
document.title = data.label;
$('#mainHeader').html(data.label);
break;
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;
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>");
$('#'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); buttonclick(data.id, true) } });
$('#'+data.id).on({ 'touchend' : function(e){e.preventDefault(); buttonclick(data.id, false) } });
$('#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({
'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)' >";
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='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>" +
"<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='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
case UI_PAD:
$('#row').append(
"<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>"+
"<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>"+
"</nav>" +
"</div>");
$('#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) } });
$('#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:
$('#l'+data.id).html(data.value);
$('#l' + data.id).html(data.value);
break;
case UPDATE_SWITCHER:
if(data.value == "0")
if (data.value == "0")
switcher(data.id, 0);
else
switcher(data.id, 1);
@ -163,50 +223,50 @@ function start() {
function buttonclick(number, isdown) {
if(isdown)websock.send("bdown:"+number);
else websock.send("bup:"+number);
if (isdown) websock.send("bdown:" + number);
else websock.send("bup:" + number);
}
function padclick(type, number, isdown) {
switch(type){
switch (type) {
case CENTER:
if(isdown)websock.send("pcdown:"+number);
else websock.send("pcup:"+number);
if (isdown) websock.send("pcdown:" + number);
else websock.send("pcup:" + number);
break;
case FOR:
if(isdown)websock.send("pfdown:"+number);
else websock.send("pfup:"+number);
if (isdown) websock.send("pfdown:" + number);
else websock.send("pfup:" + number);
break;
case BACK:
if(isdown)websock.send("pbdown:"+number);
else websock.send("pbup:"+number);
if (isdown) websock.send("pbdown:" + number);
else websock.send("pbup:" + number);
break;
case LEFT:
if(isdown)websock.send("pldown:"+number);
else websock.send("plup:"+number);
if (isdown) websock.send("pldown:" + number);
else websock.send("plup:" + number);
break;
case RIGHT:
if(isdown)websock.send("prdown:"+number);
else websock.send("prup:"+number);
if (isdown) websock.send("prdown:" + number);
else websock.send("prup:" + number);
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');
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 );
} 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);
}
}

12
examples/gui/gui.ino
View File

@ -1,8 +1,8 @@
#include <WiFi.h>
#include <ESPUI.h>
#include <WiFi.h>
const char* ssid = "ESP32";
const char* password = "";
const char *ssid = "ESP32";
const char *password = "";
long oldTime = 0;
bool switchi = false;
@ -12,7 +12,7 @@ void setup(void) {
WiFi.mode(WIFI_AP);
WiFi.setHostname(ssid);
WiFi.softAP(ssid);
//WiFi.softAP(ssid, password);
// WiFi.softAP(ssid, password);
Serial.println("");
Serial.print("IP address: ");
Serial.println(WiFi.softAPIP());
@ -35,14 +35,13 @@ void setup(void) {
ESPUI.label("Status:", COLOR_TURQUOISE, "Stop");
ESPUI.label("Millis:", COLOR_EMERALD, "0");
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 without center", false, &padExample, COLOR_CARROT);
ESPUI.switcher("Switch one", false, &switchExample, COLOR_ALIZARIN);
ESPUI.switcher("Switch two", true, &otherSwitchExample, COLOR_NONE);
ESPUI.begin("ESP32 Control");
}
void loop(void) {
@ -63,7 +62,6 @@ void buttonCallback(Control sender, int type) {
Serial.println("Button UP");
break;
}
}
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++;
}
void ESPUIClass::button(const char *label, void (*callBack)(Control, int), int color,
String value) {
void ESPUIClass::button(const char *label, void (*callBack)(Control, int),
int color, String value) {
if (labelExists(label)) {
if (debug)
Serial.println("UI ERROR: Element " + String(label) +