lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2025-10-25 22:13:50 +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
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;

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

@@ -23,190 +23,250 @@ const C_CARROT = 5;
const C_ALIZARIN = 6;
const C_NONE = 7;
function colorClass(colorId){
colorId = Number(colorId);
switch(colorId){
case C_TURQUOISE:
return "turquoise";
break;
function colorClass(colorId) {
colorId = Number(colorId);
switch (colorId) {
case C_TURQUOISE:
return "turquoise";
break;
case C_EMERALD:
return "emerald";
break;
case C_EMERALD:
return "emerald";
break;
case C_PETERRIVER:
return "peterriver";
break;
case C_PETERRIVER:
return "peterriver";
break;
case C_WETASPHALT:
return "wetasphalt";
break;
case C_WETASPHALT:
return "wetasphalt";
break;
case C_SUNFLOWER:
return "sunflower";
break;
case C_SUNFLOWER:
return "sunflower";
break;
case C_CARROT:
return "carrot"
break;
case C_CARROT:
return "carrot"
break;
case C_ALIZARIN:
return "alizarin"
break;
case C_ALIZARIN:
return "alizarin"
break;
case C_NONE:
return ""
break;
case C_NONE:
return ""
break;
default:
return "";
}
default:
return "";
}
}
var websock;
function start() {
websock = new WebSocket('ws://' + window.location.hostname + '/ws');
websock.onopen = function(evt) {
console.log('websock open');
$("#conStatus").addClass("color-green");
$("#conStatus").text("Connected");
};
websock.onclose = function(evt) {
console.log('websock close');
$("#conStatus").removeClass("color-green");
$("#conStatus").addClass("color-red");
$("#conStatus").text("Error / No Connection");
};
websock.onerror = function(evt) {
console.log(evt);
$("#conStatus").removeClass("color-green");
$("#conStatus").addClass("color-red");
$("#conStatus").text("Error / No Connection");
};
websock.onmessage = function(evt) {
console.log(evt);
var data = JSON.parse(evt.data);
var e = document.body;
var center = "";
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>");
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) } });
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='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>";
//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>"+
center +
"</nav>"+
"</div>");
websock = new WebSocket('ws://' + window.location.hostname + '/ws');
websock.onopen = function(evt) {
console.log('websock open');
$("#conStatus").addClass("color-green");
$("#conStatus").text("Connected");
};
websock.onclose = function(evt) {
console.log('websock close');
$("#conStatus").removeClass("color-green");
$("#conStatus").addClass("color-red");
$("#conStatus").text("Error / No Connection");
};
websock.onerror = function(evt) {
console.log(evt);
$("#conStatus").removeClass("color-green");
$("#conStatus").addClass("color-red");
$("#conStatus").text("Error / No Connection");
};
websock.onmessage = function(evt) {
console.log(evt);
var data = JSON.parse(evt.data);
var e = document.body;
var center = "";
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>");
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)
}
});
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='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>";
//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>" +
center +
"</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);
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');
break;
}
};
break;
case UPDATE_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');
break;
}
};
}
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){
case CENTER:
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);
break;
case BACK:
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);
break;
case RIGHT:
if(isdown)websock.send("prdown:"+number);
else websock.send("prup:"+number);
break;
switch (type) {
case CENTER:
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);
break;
case BACK:
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);
break;
case RIGHT:
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');
}
}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 );
}
}
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);
}
}

124
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) {
@@ -56,60 +55,59 @@ void loop(void) {
void buttonCallback(Control sender, int type) {
switch (type) {
case B_DOWN:
Serial.println("Button DOWN");
break;
case B_UP:
Serial.println("Button UP");
break;
case B_DOWN:
Serial.println("Button DOWN");
break;
case B_UP:
Serial.println("Button UP");
break;
}
}
void buttonExample(Control sender, int type) {
switch (type) {
case B_DOWN:
Serial.println("Status: Start");
ESPUI.print(0, "Status: Start");
break;
case B_UP:
Serial.println("Status: Stop");
ESPUI.print(0, "Status: Stop");
break;
case B_DOWN:
Serial.println("Status: Start");
ESPUI.print(0, "Status: Start");
break;
case B_UP:
Serial.println("Status: Stop");
ESPUI.print(0, "Status: Stop");
break;
}
}
void padExample(Control sender, int value) {
switch (value) {
case P_LEFT_DOWN:
Serial.print("left down");
break;
case P_LEFT_UP:
Serial.print("left up");
break;
case P_RIGHT_DOWN:
Serial.print("right down");
break;
case P_RIGHT_UP:
Serial.print("right up");
break;
case P_FOR_DOWN:
Serial.print("for down");
break;
case P_FOR_UP:
Serial.print("for up");
break;
case P_BACK_DOWN:
Serial.print("back down");
break;
case P_BACK_UP:
Serial.print("back up");
break;
case P_CENTER_DOWN:
Serial.print("center down");
break;
case P_CENTER_UP:
Serial.print("center up");
break;
case P_LEFT_DOWN:
Serial.print("left down");
break;
case P_LEFT_UP:
Serial.print("left up");
break;
case P_RIGHT_DOWN:
Serial.print("right down");
break;
case P_RIGHT_UP:
Serial.print("right up");
break;
case P_FOR_DOWN:
Serial.print("for down");
break;
case P_FOR_UP:
Serial.print("for up");
break;
case P_BACK_DOWN:
Serial.print("back down");
break;
case P_BACK_UP:
Serial.print("back up");
break;
case P_CENTER_DOWN:
Serial.print("center down");
break;
case P_CENTER_UP:
Serial.print("center up");
break;
}
Serial.print(" ");
Serial.println(sender.id);
@@ -117,12 +115,12 @@ void padExample(Control sender, int value) {
void switchExample(Control sender, int value) {
switch (value) {
case S_ACTIVE:
Serial.print("Active:");
break;
case S_INACTIVE:
Serial.print("Inactive");
break;
case S_ACTIVE:
Serial.print("Active:");
break;
case S_INACTIVE:
Serial.print("Inactive");
break;
}
Serial.print(" ");
Serial.println(sender.id);
@@ -130,12 +128,12 @@ void switchExample(Control sender, int value) {
void otherSwitchExample(Control sender, int value) {
switch (value) {
case S_ACTIVE:
Serial.print("Active:");
break;
case S_INACTIVE:
Serial.print("Inactive");
break;
case S_ACTIVE:
Serial.print("Active:");
break;
case S_INACTIVE:
Serial.print("Inactive");
break;
}
Serial.print(" ");
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++;
}
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) +