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

Adding Labels and Pads

Browse Source
This commit is contained in:
Lukas Bachschwell 2017-10-19 13:46:47 +02:00
parent 139de283a9
commit a258eab72b
6 changed files with 388 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
examples/softAP_UI_Test/data/css/style.css
View File

@ -295,6 +295,7 @@
/* Lists /* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
ul { ul {
list-style: circle inside; } list-style: circle inside; }
ol { ol {
@ -310,7 +311,7 @@
font-size: 90%; } font-size: 90%; }
li { li {
margin-bottom: 1rem; } margin-bottom: 1rem; }
*/
/* Code /* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
@ -398,3 +399,85 @@
content: ""; content: "";
display: table; display: table;
clear: both; } clear: both; }
/* ButtonPad
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.control {
background-color: #ddd;
background-image: linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
border-radius: 50%;
box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.5),
0 0 1px 1px hsla(0,0%,100%,.75),
0 0 1px 2px hsla(0,0%,100%,.25),
0 0 1px 3px hsla(0,0%,100%,.25),
0 0 1px 4px hsla(0,0%,100%,.25),
0 0 1px 6px hsla(0,0%,0%,.75);
height: 9em;
margin: 3em auto;
position: relative;
width: 9em;
}
.control ul {
height: 100%;
padding: 0;
transform: rotate(45deg);
}
.control li {
border-radius: 100% 0 0 0;
box-shadow: inset -1px -1px 1px hsla(0,0%,100%,.5),
0 0 1px hsla(0,0%,0%,.75);
display: inline-block;
height: 50%;
overflow: hidden;
width: 50%;
}
.control ul li:nth-child(2) {
transform: rotate(90deg);
}
.control ul li:nth-child(3) {
transform: rotate(-90deg);
}
.control ul li:nth-child(4) {
transform: rotate(180deg);
}
.control ul a {
height: 200%;
position: relative;
transform: rotate(-45deg);
width: 200%;
}
.control a:hover,
.control a:focus {
background-color: hsla(0,0%,100%,.25);
}
.control a {
border-radius: 50%;
color: #333;
display: block;
font: bold 1em/3 sans-serif;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px hsla(0,0%,100%,.4);
transition: .15s;
}
.control .confirm {
background-color: #ddd;
background-image: linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,100%,.25));
box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.5),
0 0 1px 1px hsla(0,0%,100%,.25),
0 0 1px 2px hsla(0,0%,100%,.25),
0 0 1px 3px hsla(0,0%,100%,.25),
0 0 1px 4px hsla(0,0%,100%,.25),
0 0 1px 6px hsla(0,0%,0%,.85);
left: 50%;
line-height: 3;
margin: -1.5em;
position: absolute;
top: 50%;
width: 3em;
}
.control .confirm:hover,
.control .confirm:focus {
background-color: #eee;
}

5
examples/softAP_UI_Test/data/index.htm
View File

@ -5,17 +5,18 @@
<title>Control</title> <title>Control</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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/normalize.css">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
</head> </head>
<body onload="javascript:start();"> <body onload="javascript:start();">
<div><h4 id="mainHeader">Control<span id="conStatus" class="label">Offline</span></h4></div>
<div><h4><div id="mainHeader">Control</div> <span id="conStatus" class="label">Offline</span></h4></div>
<hr /> <hr />
<div class="container"> <div class="container">
<div id="row" class="row u-full-width"> <div id="row" class="row u-full-width">
</div> </div>
</div> </div>
<script src="/js/zepto.js"></script> <script src="/js/zepto.js"></script>
<script src="/js/controls.js"></script> <script src="/js/controls.js"></script>
</body> </body>

118
examples/softAP_UI_Test/data/js/controls.js vendored
View File

@ -1,9 +1,20 @@
// TASKS: // Roadmap:
// Roadmap
// Build changeable Labels
// Build a serial Console? // Build a serial Console?
const UI_TITEL = 0;
const UI_LABEL = 1;
const UI_BUTTON = 2;
const UI_SWITCHER = 3;
const UI_PAD = 4;
const UI_CPAD = 5;
const UPDATE_LABEL = 6;
const FOR = 0;
const BACK = 1;
const LEFT = 2;
const RIGHT = 3;
const CENTER = 4;
var websock; var websock;
function start() { function start() {
websock = new WebSocket('ws://' + window.location.hostname + '/ws'); websock = new WebSocket('ws://' + window.location.hostname + '/ws');
@ -27,29 +38,88 @@ function start() {
websock.onmessage = function(evt) { websock.onmessage = function(evt) {
console.log(evt); console.log(evt);
var data = JSON.parse(evt.data); var data = JSON.parse(evt.data);
console.log(data);
var e = document.body; var e = document.body;
if (data.type === 'domButton') { var center = "";
//initial rendering of the Buttons switch(data.type){
$('#row').append("<div class='two columns card'><h5>"+data.label+"</h5><hr/><button onClick='buttonclick(this)'' id="+data.id+"></button></div>"); case UI_TITEL:
} document.title = data.label;
if (data.type === 'domLabel') { $('#mainHeader').html(data.label);
//initial rendering of the Labels break;
$('#row').append("<div class='two columns card'><h5>"+data.l_title+"</h5><hr /><h3><span class='label'>"+data.label+"</span></h3></div>"); case UI_LABEL:
} $('#row').append("<div class='two columns card'><h5 id='"+data.id+"'>"+data.label+"</h5></div>");
else if (data.type === 'value') { break;
// Display some kind of value case UI_BUTTON:
} $('#row').append("<div class='two columns card'><h5>"+data.label+"</h5><hr/><button onmousedown='buttonclick("+data.id+", true)' onmouseup='buttonclick("+data.id+", false)' id='"+data.id+"'></button></div>");
else { $('#'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); buttonclick(data.id, true) } });
console.log('unknown event'); $('#'+data.id).on({ 'touchend' : function(e){e.preventDefault(); buttonclick(data.id, false) } });
break;
case UI_CPAD:
center = "<a class='confirm' onmousedown='padclick(CENTER, "+data.id+", true)' onmouseup='padclick(CENTER, "+data.id+", false)' href='#' id='c"+data.id+"'>OK</a>";
//NO BREAK
case UI_PAD:
$('#row').append(
"<div class='two columns card'><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='f"+data.id+"'>▲</a></li>" +
"<li><a onmousedown='padclick(RIGHT, "+data.id+", true)' onmouseup='padclick(RIGHT, "+data.id+", false)' href='#' id='r"+data.id+"'>▲</a></li>" +
"<li><a onmousedown='padclick(LEFT, "+data.id+", true)' onmouseup='padclick(LEFT, "+data.id+", false)' href='#' id='l"+data.id+"'>▲</a></li>" +
"<li><a onmousedown='padclick(BACK, "+data.id+", true)' onmouseup='padclick(BACK, "+data.id+", false)' href='#' id='b"+data.id+"'>▲</a></li>" +
"</ul>"+
center +
"</nav>"+
"</div>");
$('#f'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(FOR, data.id, true) } });
$('#f'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(FOR, data.id, false) } });
$('#l'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(LEFT, data.id, true) } });
$('#l'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(LEFT, data.id, false) } });
$('#r'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(RIGHT, data.id, true) } });
$('#r'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(RIGHT, data.id, false) } });
$('#b'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(BACK, data.id, true) } });
$('#b'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(BACK,data.id, false) } });
$('#c'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(CENTER, data.id, true) } });
$('#c'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(CENTER,data.id, false) } });
break;
case UPDATE_LABEL:
$('#'+data.id).html(data.label);
break;
default:
console.error('Unknown type or event');
break;
} }
}; };
} }
function buttonclick(e) {
websock.send("bdown:"+e.id); function buttonclick(number, isdown) {
/* if(isdown)websock.send("bdown:"+number);
if release else websock.send("bup:"+number);
websock.send("bup:"+e.id); }
*/
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;
}
} }

88
examples/softAP_UI_Test/softAP_UI_Test.ino
View File

@ -1,36 +1,94 @@
#include <WiFi.h> #include <WiFi.h>
#include <EasyUI.h> #include <EasyUI.h>
const char* ssid = "EasyUI"; const char* ssid = "LARSUI";
const char* password = ""; const char* password = "";
long oldTime = 0;
void setup(void) { void setup(void) {
Serial.begin(115200); Serial.begin(115200);
WiFi.mode(WIFI_AP); WiFi.mode(WIFI_AP);
WiFi.softAP(ssid, password); WiFi.setHostname(ssid);
WiFi.softAP(ssid);
//WiFi.softAP(ssid, password);
Serial.println(""); Serial.println("");
Serial.print("IP address: "); Serial.print("IP address: ");
Serial.println(WiFi.softAPIP()); Serial.println(WiFi.softAPIP());
EasyUI.title("LARSControl"); EasyUI.label("Status: Maxim Stop");
EasyUI.label("0");
EasyUI.button("MaximDance Button", &callback2);
EasyUI.pad("center", true, &callback3);
EasyUI.pad("NoCenter", false, &callback3);
EasyUI.begin("LARS Control");
EasyUI.label("Label","123");
EasyUI.label("Label2","456");
EasyUI.label("Label3","789");
EasyUI.button("LED", &callback1);
EasyUI.begin();
} }
void loop(void) { void loop(void) {
if(millis()-oldTime> 5000){
EasyUI.print(1, String(millis()));
oldTime = millis();
}
} }
void callback1(void) { void callback1(int id, int type) {
Serial.println("CALLBACK UNO"); switch (type) {
case B_DOWN:
Serial.println("Button DOWN");
break;
case B_UP:
Serial.println("Button UP");
break;
}
} }
void callback2(void) {
Serial.println("CALLBACK DOS"); void callback2(int id, int type) {
switch (type) {
case B_DOWN:
Serial.println("Maxim Start DAnce######################");
EasyUI.print(0, "Status: Maxim Start");
break;
case B_UP:
Serial.println("Maxim STOP DAnce######################");
EasyUI.print(0, "Status: Maxim Start");
break;
}
} }
void callback3(void) { void callback3(int id, int value) {
Serial.println("CALLBACK TRES"); switch (value) {
case P_LEFT_DOWN:
Serial.println("left down");
break;
case P_LEFT_UP:
Serial.println("left up");
break;
case P_RIGHT_DOWN:
Serial.println("right down");
break;
case P_RIGHT_UP:
Serial.println("right up");
break;
case P_FOR_DOWN:
Serial.println("for down");
break;
case P_FOR_UP:
Serial.println("for up");
break;
case P_BACK_DOWN:
Serial.println("back down");
break;
case P_BACK_UP:
Serial.println("back up");
break;
case P_CENTER_DOWN:
Serial.println("center down");
break;
case P_CENTER_UP:
Serial.println("center up");
break;
}
Serial.println(id);
} }

220
src/EasyUI.cpp
View File

@ -16,168 +16,124 @@ void onWsEvent(AsyncWebSocket * server, AsyncWebSocketClient * client, AwsEventT
} }
break; break;
case WS_EVT_DATA: case WS_EVT_DATA:
Serial.print("WS Event");
String msg = ""; String msg = "";
for (size_t i = 0; i < len; i++) { for (size_t i = 0; i < len; i++) {
msg += (char) data[i]; msg += (char) data[i];
} }
Serial.println(msg); if(msg.startsWith("bdown:")){
StaticJsonBuffer<200> jsonBuffer; EasyUI.controls[msg.substring(6).toInt()]->callback(msg.substring(6).toInt(), B_DOWN);
JsonObject& root = jsonBuffer.parseObject(msg); }else if(msg.startsWith("bup:")){
String type = root["type"]; EasyUI.controls[msg.substring(4).toInt()]->callback(msg.substring(4).toInt(), B_UP);
if(type == "t"){ }else if(msg.startsWith("pfdown:")){
//Button Action EasyUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_FOR_DOWN);
//TODO: get Button here }else if(msg.startsWith("pfup:")){
EasyUI.buttons[0]->callback(); EasyUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_FOR_UP);
//EasyUI.tbuttonStatus(); }else if(msg.startsWith("pldown:")){
} EasyUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_LEFT_DOWN);
/* }else if(msg.startsWith("plup:")){
else if(mode == "tb_click"){ EasyUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_LEFT_UP);
String status = root["status"]; }else if(msg.startsWith("prdown:")){
String index = root["index"]; EasyUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_RIGHT_DOWN);
//EasyUI.tbClick(index, status); }else if(msg.startsWith("prup:")){
} EasyUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_RIGHT_UP);
*/ }else if(msg.startsWith("pbdown:")){
break; EasyUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_BACK_DOWN);
}else if(msg.startsWith("pbup:")){
EasyUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_BACK_UP);
}else if(msg.startsWith("pcdown:")){
EasyUI.controls[msg.substring(7).toInt()]->callback(msg.substring(7).toInt(), P_CENTER_DOWN);
}else if(msg.startsWith("pcup:")){
EasyUI.controls[msg.substring(5).toInt()]->callback(msg.substring(5).toInt(), P_CENTER_UP);
}
break;
} }
} }
void EasyUIClass::title(const char* _title){ void EasyUIClass::label(const char* label){
ui_title = _title; Control* newL = new Control();
newL->type = UI_LABEL;
newL->label = label;
newL->oldValue = label;
newL->callback = NULL;
controls[cIndex] = newL;
cIndex++;
} }
// Create Labels void EasyUIClass::button(const char* label, void(* callBack)(int, int)){
void EasyUIClass::label(const char* label_name,const char* label_val){ Control* newB = new Control();
label_value[l_index] = label_val; newB->type = UI_BUTTON;
label_title[l_index] = label_name; newB->label = label;
l_index++;
}
/*
// Create Toggle Buttons
void EasyUIClass::toggleButton(uint8_t pin, const char* tbutton_label, int start_state, bool swap_state){
pinMode(pin, OUTPUT);
digitalWrite(pin, start_state);
tbutton_swap[tb_index] = swap_state;
tbutton_pinout[tb_index] = pin;
tbuttontitle[tb_index] = tbutton_label;
tb_index++;
}
*/
// Create a generic Button
void EasyUIClass::button(const char* bLabel, void(* callBack)()){
//TODO: Implement
Button* newB = new Button();
newB->label = bLabel;
newB->callback = callBack; newB->callback = callBack;
buttons[bIndex] = newB; controls[cIndex] = newB;
bIndex++; cIndex++;
} }
/*
// Check Toggle Buttons States and Transfer to Webpage
void EasyUIClass::tbuttonStatus(){
String json;
StaticJsonBuffer<200> jsonBuffer;
JsonObject& root = jsonBuffer.createObject();
root["mode"] = "t_button_startup";
root["index"] = tb_index;
for(int i=0; i<tb_index; i++){
String name = "tb"+String(i);
int stat = digitalRead(tbutton_pinout[i]);
if(tbutton_swap[i]){
if(stat == HIGH)
root[name] = "0";
else if(stat == LOW)
root[name] = "1";
else
root[name] = "unknown";
}
else{
if(stat == HIGH)
root[name] = "1";
else if(stat == LOW)
root[name] = "0";
else
root[name] = "unknown";
}
}
root.printTo(json);
webSocket->broadcastTXT(json);
}
*/
/* void EasyUIClass::switcher(const char* label, int start_state, void(* callBack)(int, int)){
// Handle Toggle Button Click Response Control* newS = new Control();
void EasyUIClass::tbClick(String _index, String _status){ newS->type = UI_SWITCHER;
String json; newS->label = label;
StaticJsonBuffer<200> jsonBuffer; newS->callback = callBack;
JsonObject& root = jsonBuffer.createObject(); controls[cIndex] = newS;
String name = "tb"+_index; cIndex++;
root["mode"] = "t_button_click"; //TODO: implement switch state buffer
root["index"] = _index; //tbutton_swap[tb_index] = swap_state;
}
if(_status == "on"){ void EasyUIClass::pad(const char* label, bool center, void(* callBack)(int, int)){
root[name] = "1"; Control* newP = new Control();
if(center)newP->type = UI_CPAD;
else newP->type = UI_PAD;
newP->label = label;
newP->callback = callBack;
controls[cIndex] = newP;
cIndex++;
}
void EasyUIClass::print(int labelid, String value){
if(labelid<cIndex && controls[labelid]->type == UI_LABEL){
controls[labelid]->oldValue = value;
String json;
StaticJsonBuffer<200> jsonBuffer;
JsonObject& root = jsonBuffer.createObject();
root["type"] = UPDATE_LABEL;
root["label"] = value;
root["id"] = String(labelid);
root.printTo(json); root.printTo(json);
webSocket->broadcastTXT(json); this->ws->textAll(json);
if(tbutton_swap[_index.toInt()]){
digitalWrite(tbutton_pinout[_index.toInt()], LOW);
}else{
digitalWrite(tbutton_pinout[_index.toInt()], HIGH);
}
}
else if(_status == "off"){
root[name] = "0";
root.printTo(json);
webSocket->broadcastTXT(json);
if(tbutton_swap[_index.toInt()]){
digitalWrite(tbutton_pinout[_index.toInt()], HIGH);
}else{ }else{
digitalWrite(tbutton_pinout[_index.toInt()], LOW); Serial.println(String("Error: ")+ String(labelid) +String(" is no label"));
}
} }
} }
*/
// Convert & Transfer Arduino elements to JSON elements // Convert & Transfer Arduino elements to JSON elements
void EasyUIClass::jsonDom(AsyncWebSocketClient * client){ void EasyUIClass::jsonDom(AsyncWebSocketClient * client){
//SiteTitle for(int i=-1; i<cIndex; i++){
//TODO: emit here
// Labels
for(int i=0; i<l_index; i++){
String json; String json;
StaticJsonBuffer<200> jsonBuffer1; StaticJsonBuffer<200> jsonBuffer;
JsonObject& root1 = jsonBuffer1.createObject(); JsonObject& root = jsonBuffer.createObject();
root1["type"] = "domLabel"; if(i == -1){
root1["l_title"] = String(label_title[i]); root["type"] = UI_TITEL;
root1["label"] = String(label_value[i]); root["label"] = String(ui_title);
root1.printTo(json); }else{
root["type"] = controls[i]->type;
root["label"] = String(controls[i]->label);
root["id"] = String(i);
if(controls[i]->type == UI_LABEL)root["label"] = controls[i]->oldValue;
}
root.printTo(json);
client->text(json); client->text(json);
} }
// Buttons
for(int i=0; i<bIndex; i++){
String json;
StaticJsonBuffer<200> jsonBuffer2;
JsonObject& root2 = jsonBuffer2.createObject();
root2["type"] = "domButton";
root2["index"] = String(i);
root2["label"] = buttons[i]->label;
root2.printTo(json);
client->text(json);
}
} }
void EasyUIClass::begin(){ void EasyUIClass::begin(const char * _title){
ui_title = _title;
server = new AsyncWebServer(80); server = new AsyncWebServer(80);
ws = new AsyncWebSocket("/ws"); ws = new AsyncWebSocket("/ws");
SPIFFS.begin(false); SPIFFS.begin();
ws->onEvent(onWsEvent); ws->onEvent(onWsEvent);
server->addHandler(ws); server->addHandler(ws);
server->serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm"); server->serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm");
//Heap for general Servertest //Heap for general Servertest

69
src/EasyUI.h
View File

@ -16,38 +16,61 @@
#include <AsyncTCP.h> #include <AsyncTCP.h>
#include <ESPAsyncWebServer.h> #include <ESPAsyncWebServer.h>
typedef struct Button typedef struct Control
{ {
unsigned int type;
const char *label; const char *label;
void (*callback)(); void (*callback)(int, int);
} Button; String oldValue;
} Control;
// Types
#define UI_TITEL 0
#define UI_LABEL 1
#define UI_BUTTON 2
#define UI_SWITCHER 3
#define UI_PAD 4
#define UI_CPAD 5
#define UPDATE_LABEL 6
// Values
#define B_DOWN -1
#define B_UP 1
#define P_LEFT_DOWN -2
#define P_LEFT_UP 2
#define P_RIGHT_DOWN -3
#define P_RIGHT_UP 3
#define P_FOR_DOWN -4
#define P_FOR_UP 4
#define P_BACK_DOWN -5
#define P_BACK_UP 5
#define P_CENTER_DOWN -6
#define P_CENTER_UP 6
class EasyUIClass{ class EasyUIClass{
public: public:
void begin(); // Begin HTTP Server + WebSocketsServer & Initalize All Elements void begin(const char* _title); // Setup servers and page
void title(const char* _title); // Define Webpage Header Name and title
//void toggleButton(uint8_t pin, const char* tbutton_label, int start_state = 0, bool swap_state = false); // Create Toggle Button // Creating Elements
void button(const char* tbutton_label, void(* callBack)()); // Create Event Button void label(const char* label); // Create Label
void label(const char* label_name, const char* label_val); // Create Label void button(const char* label, void(* callBack)(int, int)); // Create Event Button
void switcher(const char* label, int start_state, void(* callBack)(int, int)); // Create Toggle Button
void pad(const char* label, bool centerButton, void(* callBack)(int, int)); // Create Pad Control
// Update Elements
void print(int labelid, String value);
// Variables --- // Variables ---
const char* ui_title = "EasyUI"; // Store UI Title and Header Name const char* ui_title = "ESPUI"; // Store UI Title and Header Name
int bIndex; // How Many Buttons int cIndex; // Control index
int l_index; // How Many Labels Control* controls[25];
bool tbutton_swap[10];
Button* buttons[10];
const char* label_value[10]; // Stores Label Values - MAX 10
const char* label_title[10]; // Stores Label Titles - MAX 10
String webpage; // Coverts Arduino elements to JSON elements
void tbClick(String _index, String _status);
void tbuttonStatus();
void jsonDom(AsyncWebSocketClient * client); void jsonDom(AsyncWebSocketClient * client);
private: private:
AsyncWebServer* server; AsyncWebServer* server;
AsyncWebSocket* ws; AsyncWebSocket* ws;
}; };