lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2025-06-12 04:10:39 +00:00
Code Issues Releases Activity

Color feature, and API changes

Browse Source
This commit is contained in:
Lukas Bachschwell
2017-11-14 12:09:52 +01:00
parent cca76c1389
commit fa45d9033b
5 changed files with 199 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
examples/gui/data/index.htm
View File

@ -1,23 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Control</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAACA1VWR21qQ2liR3FqR3FqS3VuR3VqR3VuR3VqO21mS21uS3FqS3FqS21uJ2GKQ21qR3FuR3FoAAAB/3Gu7AAAAEnRSTlMABoA3kPBwz8i5Kzioxg4NVcU3uEJHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EFEhcEM+HpYwQAAABYSURBVBjThY/JDsAgCESt4lpX/v9jLQZJ6qF9t3khAyj1xXUKbQ4BVowDwqOYgExkkW4iY6lPaF06RqM8YItOuRbMaz6xjbsusDAW/drplBg47jP696cXE8bPA1eUDeK2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA1LTE4VDIzOjA0OjUxKzAyOjAwxE59ewAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNS0xOFQyMzowNDo1MSswMjowMLUTxccAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC"/>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body onload="javascript:start();">
<div><h4><div id="mainHeader">Control</div> <span id="conStatus" class="label">Offline</span></h4></div>
<hr />
<div class="container">
<div id="row" class="row u-full-width">
</div>
</div>
<script src="/js/zepto.js"></script>
<script src="/js/controls.js"></script>
</body>
<head>
<meta charset="utf-8">
<title>Control</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAACA1VWR21qQ2liR3FqR3FqS3VuR3VqR3VuR3VqO21mS21uS3FqS3FqS21uJ2GKQ21qR3FuR3FoAAAB/3Gu7AAAAEnRSTlMABoA3kPBwz8i5Kzioxg4NVcU3uEJHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EFEhcEM+HpYwQAAABYSURBVBjThY/JDsAgCESt4lpX/v9jLQZJ6qF9t3khAyj1xXUKbQ4BVowDwqOYgExkkW4iY6lPaF06RqM8YItOuRbMaz6xjbsusDAW/drplBg47jP696cXE8bPA1eUDeK2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA1LTE4VDIzOjA0OjUxKzAyOjAwxE59ewAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNS0xOFQyMzowNDo1MSswMjowMLUTxccAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC"
/>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body onload="javascript:start();">
<div>
<h4><div id="mainHeader">Control</div> <span id="conStatus" class="label">Offline</span></h4></div>
<hr />
<div class="container">
<div id="row" class="row u-full-width">
</div>
</div>
<script src="/js/zepto.js"></script>
<script src="/js/controls.js"></script>
</body>
</html>

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

@ -13,6 +13,50 @@ const LEFT = 2;
const RIGHT = 3;
const CENTER = 4;
// Colors
const C_TURQUOISE = 0;
const C_EMERALD = 1;
const C_PETERRIVER = 2;
const C_WETASPHALT = 3;
const C_SUNFLOWER = 4;
const C_CARROT = 5;
const C_ALIZARIN = 6;
function colorClass(colorId){
colorId = Number(colorId);
switch(colorId){
case C_TURQUOISE:
return "turquoise";
break;
case C_EMERALD:
return "emerald";
break;
case C_PETERRIVER:
return "peterriver";
break;
case C_WETASPHALT:
return "wetasphalt";
break;
case C_SUNFLOWER:
return "sunflower";
break;
case C_CARROT:
return "carrot"
break;
case C_ALIZARIN:
return "alizarin"
break;
default:
return "alizarin";
}
}
var websock;
function start() {
@ -45,10 +89,10 @@ function start() {
$('#mainHeader').html(data.label);
break;
case UI_LABEL:
$('#row').append("<div class='two columns card tcenter wetasphalt'><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 wetasphalt'><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({ 'touchend' : function(e){e.preventDefault(); buttonclick(data.id, false) } });
break;
@ -60,7 +104,7 @@ function start() {
input = "<input type='checkbox' id='s"+data.id+"' onClick='switcher("+data.id+",null)' >";
}
$('#row').append(
"<div id='"+data.id+"' class='one columns card tcenter wetasphalt'><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>" +
@ -71,7 +115,7 @@ function start() {
//NO BREAK
case UI_PAD:
$('#row').append(
"<div class='two columns card tcenter wetasphalt'><h5>"+data.label+"</h5><hr/>"+
"<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>" +

32
examples/gui/gui.ino
View File

@ -32,14 +32,14 @@ void setup(void) {
Serial.println(WiFi.localIP());
*/
ESPUI.label("Status:", "Stop");
ESPUI.label("Millis:","0");
ESPUI.button("Push Button", &buttonCallback);
ESPUI.button("Other Button", &buttonExample, "Press");
ESPUI.pad("Pad with center", true, &padExample);
ESPUI.pad("Pad without center", false, &padExample);
ESPUI.switcher("Switch one", false, &switchExample);
ESPUI.switcher("Switch two", true, &otherSwitchExample);
ESPUI.label("Status:", 0, "Stop");
ESPUI.label("Millis:", 1, "0");
ESPUI.button("Push Button", &buttonCallback, 2);
ESPUI.button("Other Button", &buttonExample, 3, "Press" );
ESPUI.pad("Pad with center", true, &padExample, 4);
ESPUI.pad("Pad without center", false, &padExample, 5);
ESPUI.switcher("Switch one", false, &switchExample, 6);
ESPUI.switcher("Switch two", true, &otherSwitchExample, 0);
ESPUI.begin("ESP32 Control");
@ -54,7 +54,7 @@ void loop(void) {
}
}
void buttonCallback(Control* sender, int type) {
void buttonCallback(Control sender, int type) {
switch (type) {
case B_DOWN:
Serial.println("Button DOWN");
@ -66,7 +66,7 @@ void buttonCallback(Control* sender, int type) {
}
void buttonExample(Control* sender, int type) {
void buttonExample(Control sender, int type) {
switch (type) {
case B_DOWN:
Serial.println("Status: Start");
@ -78,7 +78,7 @@ void buttonExample(Control* sender, int type) {
break;
}
}
void padExample(Control* sender, int value) {
void padExample(Control sender, int value) {
switch (value) {
case P_LEFT_DOWN:
Serial.print("left down");
@ -112,10 +112,10 @@ void padExample(Control* sender, int value) {
break;
}
Serial.print(" ");
Serial.println(sender->id);
Serial.println(sender.id);
}
void switchExample(Control* sender, int value) {
void switchExample(Control sender, int value) {
switch (value) {
case S_ACTIVE:
Serial.print("Active:");
@ -125,10 +125,10 @@ void switchExample(Control* sender, int value) {
break;
}
Serial.print(" ");
Serial.println(sender->id);
Serial.println(sender.id);
}
void otherSwitchExample(Control* sender, int value) {
void otherSwitchExample(Control sender, int value) {
switch (value) {
case S_ACTIVE:
Serial.print("Active:");
@ -138,5 +138,5 @@ void otherSwitchExample(Control* sender, int value) {
break;
}
Serial.print(" ");
Serial.println(sender->id);
Serial.println(sender.id);
}