lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2024-11-24 17:30:55 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
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>
<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>
<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);
}

117
src/ESPUI.cpp
View File

@ -7,12 +7,15 @@ void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,
AwsEventType type, void *arg, uint8_t *data, size_t len) {
switch (type) {
case WS_EVT_DISCONNECT:
if(debug) Serial.printf("Disconnected!\n");
if (debug)
Serial.printf("Disconnected!\n");
break;
case WS_EVT_CONNECT: {
if(debug) Serial.println("Connected");
if (debug)
Serial.println("Connected");
ESPUI.jsonDom(client);
if(debug) Serial.println("JSON Data Sent to Client!");
if (debug)
Serial.println("JSON Data Sent to Client!");
} break;
case WS_EVT_DATA:
String msg = "";
@ -20,63 +23,66 @@ void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,
msg += (char)data[i];
}
if (msg.startsWith("bdown:")) {
Control* c = ESPUI.controls[msg.substring(6).toInt()];
c->callback(c, B_DOWN);
Control *c = ESPUI.controls[msg.substring(6).toInt()];
c->callback(*c, B_DOWN);
} else if (msg.startsWith("bup:")) {
Control* c = ESPUI.controls[msg.substring(4).toInt()];
c->callback(c, B_UP);
Control *c = ESPUI.controls[msg.substring(4).toInt()];
c->callback(*c, B_UP);
} else if (msg.startsWith("pfdown:")) {
Control* c = ESPUI.controls[msg.substring(7).toInt()];
c->callback(c, P_FOR_DOWN);
Control *c = ESPUI.controls[msg.substring(7).toInt()];
c->callback(*c, P_FOR_DOWN);
} else if (msg.startsWith("pfup:")) {
Control* c = ESPUI.controls[msg.substring(5).toInt()];
c->callback(c, P_FOR_UP);
Control *c = ESPUI.controls[msg.substring(5).toInt()];
c->callback(*c, P_FOR_UP);
} else if (msg.startsWith("pldown:")) {
Control* c = ESPUI.controls[msg.substring(7).toInt()];
c->callback(c, P_LEFT_DOWN);
Control *c = ESPUI.controls[msg.substring(7).toInt()];
c->callback(*c, P_LEFT_DOWN);
} else if (msg.startsWith("plup:")) {
Control* c = ESPUI.controls[msg.substring(5).toInt()];
c->callback(c, P_LEFT_UP);
Control *c = ESPUI.controls[msg.substring(5).toInt()];
c->callback(*c, P_LEFT_UP);
} else if (msg.startsWith("prdown:")) {
Control* c = ESPUI.controls[msg.substring(7).toInt()];
c->callback(c, P_RIGHT_DOWN);
Control *c = ESPUI.controls[msg.substring(7).toInt()];
c->callback(*c, P_RIGHT_DOWN);
} else if (msg.startsWith("prup:")) {
Control* c = ESPUI.controls[msg.substring(5).toInt()];
c->callback(c, P_RIGHT_UP);
Control *c = ESPUI.controls[msg.substring(5).toInt()];
c->callback(*c, P_RIGHT_UP);
} else if (msg.startsWith("pbdown:")) {
Control* c = ESPUI.controls[msg.substring(7).toInt()];
c->callback(c, P_BACK_DOWN);
Control *c = ESPUI.controls[msg.substring(7).toInt()];
c->callback(*c, P_BACK_DOWN);
} else if (msg.startsWith("pbup:")) {
Control* c = ESPUI.controls[msg.substring(5).toInt()];
c->callback(c, P_BACK_UP);
Control *c = ESPUI.controls[msg.substring(5).toInt()];
c->callback(*c, P_BACK_UP);
} else if (msg.startsWith("pcdown:")) {
Control* c = ESPUI.controls[msg.substring(7).toInt()];
c->callback(c, P_CENTER_DOWN);
Control *c = ESPUI.controls[msg.substring(7).toInt()];
c->callback(*c, P_CENTER_DOWN);
} else if (msg.startsWith("pcup:")) {
Control* c = ESPUI.controls[msg.substring(5).toInt()];
c->callback(c, P_CENTER_UP);
Control *c = ESPUI.controls[msg.substring(5).toInt()];
c->callback(*c, P_CENTER_UP);
} else if (msg.startsWith("sactive:")) {
Control* c = ESPUI.controls[msg.substring(8).toInt()];
Control *c = ESPUI.controls[msg.substring(8).toInt()];
ESPUI.updateSwitcher(c->id, true);
c->callback(c, S_ACTIVE);
c->callback(*c, S_ACTIVE);
} else if (msg.startsWith("sinactive:")) {
Control* c = ESPUI.controls[msg.substring(10).toInt()];
Control *c = ESPUI.controls[msg.substring(10).toInt()];
ESPUI.updateSwitcher(c->id, false);
c->callback(c, S_INACTIVE);
c->callback(*c, S_INACTIVE);
}
break;
}
}
void ESPUIClass::label(const char *label, String value) {
void ESPUIClass::label(const char *label, int color, String value) {
if (labelExists(label)) {
if (debug) Serial.println("UI ERROR: Element " + String(label) + " exists, skipping creating element!");
if (debug)
Serial.println("UI ERROR: Element " + String(label) +
" exists, skipping creating element!");
return;
}
Control *newL = new Control();
newL->type = UI_LABEL;
newL->label = label;
newL->color = color;
if (value != "")
newL->value = value; // Init with labeltext
else
@ -87,15 +93,19 @@ void ESPUIClass::label(const char *label, String value) {
cIndex++;
}
void ESPUIClass::button(const char *label, void (*callBack)(Control*, int), 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) + " exists, skipping creating element!");
if (debug)
Serial.println("UI ERROR: Element " + String(label) +
" exists, skipping creating element!");
return;
}
Control *newB = new Control();
newB->type = UI_BUTTON;
newB->label = label;
newB->color = color;
if (value != "")
newB->value = value; // Init with labeltext
@ -108,15 +118,19 @@ void ESPUIClass::button(const char *label, void (*callBack)(Control*, int), Stri
cIndex++;
}
void ESPUIClass::switcher(const char *label, bool startState, void (*callBack)(Control*, int)) {
void ESPUIClass::switcher(const char *label, bool startState,
void (*callBack)(Control, int), int color) {
if (labelExists(label)) {
if (debug) Serial.println("UI ERROR: Element " + String(label) + " exists, skipping creating element!");
if (debug)
Serial.println("UI ERROR: Element " + String(label) +
" exists, skipping creating element!");
return;
}
Control *newS = new Control();
newS->type = UI_SWITCHER;
newS->label = label;
newS->color = color;
newS->value = String(startState);
newS->callback = callBack;
newS->id = cIndex;
@ -124,9 +138,12 @@ void ESPUIClass::switcher(const char *label, bool startState, void (*callBack)(C
cIndex++;
}
void ESPUIClass::pad(const char *label, bool center, void (*callBack)(Control*, int)) {
void ESPUIClass::pad(const char *label, bool center,
void (*callBack)(Control, int), int color) {
if (labelExists(label)) {
if (debug) Serial.println("UI ERROR: Element " + String(label) + " exists, skipping creating element!");
if (debug)
Serial.println("UI ERROR: Element " + String(label) +
" exists, skipping creating element!");
return;
}
@ -136,6 +153,7 @@ void ESPUIClass::pad(const char *label, bool center, void (*callBack)(Control*,
else
newP->type = UI_PAD;
newP->label = label;
newP->color = color;
newP->callback = callBack;
newP->id = cIndex;
controls[cIndex] = newP;
@ -154,13 +172,16 @@ void ESPUIClass::print(int id, String value) {
root.printTo(json);
this->ws->textAll(json);
} else {
if(debug) Serial.println(String("Error: ") + String(id) + String(" is no label"));
if (debug)
Serial.println(String("Error: ") + String(id) + String(" is no label"));
}
}
void ESPUIClass::print(String label, String value) {
if (!labelExists(label)) {
if (debug) Serial.println("UI ERROR: Element does not " + String(label) + " exist, cannot update!");
if (debug)
Serial.println("UI ERROR: Element does not " + String(label) +
" exist, cannot update!");
return;
}
print(getIdByLabel(label), value);
@ -178,14 +199,17 @@ void ESPUIClass::updateSwitcher(int id, bool nValue) {
root.printTo(json);
this->ws->textAll(json);
} else {
if(debug) Serial.println(String("Error: ") + String(id) + String(" is no switcher"));
if (debug)
Serial.println(String("Error: ") + String(id) +
String(" is no switcher"));
}
}
void ESPUIClass::updateSwitcher(String label, bool nValue) {
if (!labelExists(label)) {
if (debug)
Serial.println("UI ERROR: Element does not " + String(label) + " exist, cannot update!");
Serial.println("UI ERROR: Element does not " + String(label) +
" exist, cannot update!");
return;
}
updateSwitcher(getIdByLabel(label), nValue);
@ -201,7 +225,8 @@ int ESPUIClass::getIdByLabel(String label) {
bool ESPUIClass::labelExists(String label) {
for (int i = 0; i < cIndex; i++) {
if (String(controls[i]->label) == label) return true;
if (String(controls[i]->label) == label)
return true;
}
return false;
}
@ -219,6 +244,7 @@ void ESPUIClass::jsonDom(AsyncWebSocketClient *client) {
root["type"] = controls[i]->type;
root["label"] = String(controls[i]->label);
root["value"] = String(controls[i]->value);
root["color"] = String(controls[i]->color);
root["id"] = String(i);
}
root.printTo(json);
@ -244,7 +270,8 @@ void ESPUIClass::begin(const char *_title) {
[](AsyncWebServerRequest *request) { request->send(404); });
server->begin();
if(debug) Serial.println("UI Initialized");
if (debug)
Serial.println("UI Initialized");
}
ESPUIClass ESPUI;

65
src/ESPUI.h
View File

@ -5,26 +5,26 @@
#define debug true
//ifdef 8266
// ifdef 8266
//#include "Hash.h"
#include "Arduino.h"
#include "stdlib_noniso.h"
#include "ArduinoJson.h"
#include "FS.h"
#include "SPIFFS.h"
#include "WiFi.h"
#include "stdlib_noniso.h"
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
typedef struct Control
{
typedef struct Control {
unsigned int type;
unsigned int id; // just mirroring the id here for practical reasons
const char *label;
void (*callback)(Control*, int);
void (*callback)(Control, int);
String value;
unsigned int color;
} Control;
// Types
@ -39,7 +39,7 @@ typedef struct Control
// Values
#define B_DOWN -1
#define B_UP 1
#define B_UP 1
#define P_LEFT_DOWN -2
#define P_LEFT_UP 2
@ -55,36 +55,49 @@ typedef struct Control
#define S_INACTIVE 7
// Colors
#define COLOR_TURQUOISE 0
#define COLOR_EMERALD 1
#define COLOR_PETERRIVER 2
#define COLOR_WETASPHALT 3
#define COLOR_SUNFLOWER 4
#define COLOR_CARROT 5
#define COLOR_ALIZARIN 6
class ESPUIClass {
public:
void begin(const char* _title); // Setup servers and page
void begin(const char *_title); // Setup servers and page
// Creating Elements
void label(const char* label, String value = ""); // Create Label
void button(const char* label, void (* callBack)(Control*, int), String value = ""); // Create Event Button
void switcher(const char* label, bool startState, void (* callBack)(Control*, int)); // Create Toggle Button
void pad(const char* label, bool centerButton, void (* callBack)(Control*, int)); // Create Pad Control
// Creating Elements
void label(const char *label, int color, String value = ""); // Create Label
void button(const char *label, void (*callBack)(Control, int), int color,
String value = ""); // Create Event Button
void switcher(const char *label, bool startState,
void (*callBack)(Control, int),
int color); // Create Toggle Button
void pad(const char *label, bool centerButton, void (*callBack)(Control, int),
int color); // Create Pad Control
// Update Elements
void print(int id, String value);
void print(String label, String value);
// Update Elements
void print(int id, String value);
void print(String label, String value);
void updateSwitcher(int id, bool nValue);
void updateSwitcher(String label, bool nValue);
void updateSwitcher(int id, bool nValue);
void updateSwitcher(String label, bool nValue);
// Variables ---
const char* ui_title = "ESPUI"; // Store UI Title and Header Name
int cIndex = 0; // Control index
Control* controls[25];
void jsonDom(AsyncWebSocketClient * client);
int getIdByLabel(String label);
bool labelExists(String label);
// Variables ---
const char *ui_title = "ESPUI"; // Store UI Title and Header Name
int cIndex = 0; // Control index
Control *controls[25];
void jsonDom(AsyncWebSocketClient *client);
int getIdByLabel(String label);
bool labelExists(String label);
private:
AsyncWebServer* server;
AsyncWebSocket* ws;
AsyncWebServer *server;
AsyncWebSocket *ws;
};
extern ESPUIClass ESPUI;