mirror of
https://github.com/s00500/ESPUI.git
synced 2024-11-21 22:50:55 +00:00
No reload per default, just send JsonDom
This commit is contained in:
parent
60d676ddfd
commit
18431053a8
@ -1,4 +1,4 @@
|
|||||||
# ESPUI (v2.X)
|
# ESPUI
|
||||||
|
|
||||||
![ESPUI](https://github.com/s00500/ESPUI/blob/master/docs/ui_complete.png)
|
![ESPUI](https://github.com/s00500/ESPUI/blob/master/docs/ui_complete.png)
|
||||||
|
|
||||||
|
11
data/js/controls.js
vendored
11
data/js/controls.js
vendored
@ -232,6 +232,11 @@ function start() {
|
|||||||
var center = "";
|
var center = "";
|
||||||
switch (data.type) {
|
switch (data.type) {
|
||||||
case UI_INITIAL_GUI:
|
case UI_INITIAL_GUI:
|
||||||
|
// Clear current elements
|
||||||
|
$("#row").html("");
|
||||||
|
$("#tabsnav").html("");
|
||||||
|
$("#tabscontent").html("");
|
||||||
|
|
||||||
if (data.sliderContinuous) {
|
if (data.sliderContinuous) {
|
||||||
sliderContinuous = data.sliderContinuous;
|
sliderContinuous = data.sliderContinuous;
|
||||||
}
|
}
|
||||||
@ -242,9 +247,9 @@ function start() {
|
|||||||
handleEvent(fauxEvent);
|
handleEvent(fauxEvent);
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case UI_RELOAD:
|
case UI_RELOAD:
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case UI_TITEL:
|
case UI_TITEL:
|
||||||
document.title = data.label;
|
document.title = data.label;
|
||||||
|
2
data/js/controls.min.js
vendored
2
data/js/controls.min.js
vendored
@ -7,7 +7,7 @@ function restart(){$(document).add("*").off();$("#row").html("");websock.close()
|
|||||||
function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart,});}
|
function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart,});}
|
||||||
function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
|
function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
|
||||||
function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);if(window.location.port!=""||window.location.port!=80||window.location.port!=443){websock=new WebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws");}else{websock=new WebSocket("ws://"+window.location.hostname+"/ws");}
|
function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);if(window.location.port!=""||window.location.port!=80||window.location.port!=443){websock=new WebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws");}else{websock=new WebSocket("ws://"+window.location.hostname+"/ws");}
|
||||||
websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
|
websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
|
||||||
data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
|
data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
|
||||||
parent.append("<div id='id"+
|
parent.append("<div id='id"+
|
||||||
data.id+
|
data.id+
|
||||||
|
567
src/ESPUI.cpp
567
src/ESPUI.cpp
File diff suppressed because it is too large
Load Diff
53
src/ESPUI.h
53
src/ESPUI.h
@ -33,7 +33,8 @@
|
|||||||
|
|
||||||
// Message Types (and control types)
|
// Message Types (and control types)
|
||||||
|
|
||||||
enum ControlType : uint8_t {
|
enum ControlType : uint8_t
|
||||||
|
{
|
||||||
// fixed controls
|
// fixed controls
|
||||||
Title = 0,
|
Title = 0,
|
||||||
|
|
||||||
@ -103,7 +104,18 @@ enum ControlType : uint8_t {
|
|||||||
#define CLEAR_GRAPH ControlType::ClearGraph
|
#define CLEAR_GRAPH ControlType::ClearGraph
|
||||||
|
|
||||||
// Colors
|
// Colors
|
||||||
enum ControlColor : uint8_t { Turquoise, Emerald, Peterriver, Wetasphalt, Sunflower, Carrot, Alizarin, Dark, None = 0xFF };
|
enum ControlColor : uint8_t
|
||||||
|
{
|
||||||
|
Turquoise,
|
||||||
|
Emerald,
|
||||||
|
Peterriver,
|
||||||
|
Wetasphalt,
|
||||||
|
Sunflower,
|
||||||
|
Carrot,
|
||||||
|
Alizarin,
|
||||||
|
Dark,
|
||||||
|
None = 0xFF
|
||||||
|
};
|
||||||
#define COLOR_TURQUOISE ControlColor::Turquoise
|
#define COLOR_TURQUOISE ControlColor::Turquoise
|
||||||
#define COLOR_EMERALD ControlColor::Emerald
|
#define COLOR_EMERALD ControlColor::Emerald
|
||||||
#define COLOR_PETERRIVER ControlColor::Peterriver
|
#define COLOR_PETERRIVER ControlColor::Peterriver
|
||||||
@ -114,7 +126,8 @@ enum ControlColor : uint8_t { Turquoise, Emerald, Peterriver, Wetasphalt, Sunflo
|
|||||||
#define COLOR_DARK ControlColor::Dark
|
#define COLOR_DARK ControlColor::Dark
|
||||||
#define COLOR_NONE ControlColor::None
|
#define COLOR_NONE ControlColor::None
|
||||||
|
|
||||||
class Control {
|
class Control
|
||||||
|
{
|
||||||
public:
|
public:
|
||||||
ControlType type;
|
ControlType type;
|
||||||
uint16_t id; // just mirroring the id here for practical reasons
|
uint16_t id; // just mirroring the id here for practical reasons
|
||||||
@ -129,7 +142,8 @@ public:
|
|||||||
|
|
||||||
Control(ControlType type, const char *label, void (*callback)(Control *, int), String value, ControlColor color,
|
Control(ControlType type, const char *label, void (*callback)(Control *, int), String value, ControlColor color,
|
||||||
uint16_t parentControl = Control::noParent)
|
uint16_t parentControl = Control::noParent)
|
||||||
: type(type), label(label), callback(callback), value(value), color(color), parentControl(parentControl), next(nullptr) {
|
: type(type), label(label), callback(callback), value(value), color(color), parentControl(parentControl), next(nullptr)
|
||||||
|
{
|
||||||
id = idCounter++;
|
id = idCounter++;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -164,11 +178,18 @@ private:
|
|||||||
#define T_VALUE 10
|
#define T_VALUE 10
|
||||||
#define S_VALUE 11
|
#define S_VALUE 11
|
||||||
|
|
||||||
enum Verbosity : uint8_t { Quiet = 0, Verbose, VerboseJSON };
|
enum Verbosity : uint8_t
|
||||||
|
{
|
||||||
|
Quiet = 0,
|
||||||
|
Verbose,
|
||||||
|
VerboseJSON
|
||||||
|
};
|
||||||
|
|
||||||
class ESPUIClass {
|
class ESPUIClass
|
||||||
|
{
|
||||||
public:
|
public:
|
||||||
ESPUIClass() {
|
ESPUIClass()
|
||||||
|
{
|
||||||
verbosity = Verbosity::Quiet;
|
verbosity = Verbosity::Quiet;
|
||||||
jsonUpdateDocumentSize = 2000;
|
jsonUpdateDocumentSize = 2000;
|
||||||
jsonInitialDocumentSize = 8000;
|
jsonInitialDocumentSize = 8000;
|
||||||
@ -185,15 +206,14 @@ public:
|
|||||||
void prepareFileSystem(); // Initially preps the filesystem and loads a lot of stuff into SPIFFS
|
void prepareFileSystem(); // Initially preps the filesystem and loads a lot of stuff into SPIFFS
|
||||||
void list(); // Lists SPIFFS directory
|
void list(); // Lists SPIFFS directory
|
||||||
|
|
||||||
uint16_t addControl(ControlType type, const char *label, String value = String(""), ControlColor color = ControlColor::Turquoise,
|
uint16_t addControl(ControlType type, const char *label, String value = String(""), ControlColor color = ControlColor::Turquoise, uint16_t parentControl = Control::noParent, void (*callback)(Control *, int) = nullptr);
|
||||||
uint16_t parentControl = Control::noParent, void (*callback)(Control *, int) = nullptr);
|
bool removeControl(uint16_t id, bool force_reload_ui = false);
|
||||||
bool remControl(uint16_t id, bool reload_ui = true);
|
|
||||||
|
|
||||||
// create Elements
|
// create Elements
|
||||||
uint16_t button(const char *label, void (*callback)(Control *, int), ControlColor color, String value = ""); // Create Event Button
|
uint16_t button(const char *label, void (*callback)(Control *, int), ControlColor color, String value = ""); // Create Event Button
|
||||||
uint16_t switcher(const char *label, void (*callback)(Control *, int), ControlColor color, bool startState = false); // Create Toggle Button
|
uint16_t switcher(const char *label, void (*callback)(Control *, int), ControlColor color, bool startState = false); // Create Toggle Button
|
||||||
uint16_t pad(const char *label, void (*callback)(Control *, int), ControlColor color); // Create Pad Control
|
uint16_t pad(const char *label, void (*callback)(Control *, int), ControlColor color); // Create Pad Control
|
||||||
uint16_t padWithCenter(const char *label, void (*callback)(Control *, int), ControlColor color); // Create Pad Control with Centerbutton
|
uint16_t padWithCenter(const char *label, void (*callback)(Control *, int), ControlColor color); // Create Pad Control with Centerbutton
|
||||||
|
|
||||||
uint16_t slider(const char *label, void (*callback)(Control *, int), ControlColor color, int value, int min = 0,
|
uint16_t slider(const char *label, void (*callback)(Control *, int), ControlColor color, int value, int min = 0,
|
||||||
int max = 100); // Create Slider Control
|
int max = 100); // Create Slider Control
|
||||||
@ -202,10 +222,9 @@ public:
|
|||||||
uint16_t text(const char *label, void (*callback)(Control *, int), ControlColor color, String value = ""); // Create a Text Input Control
|
uint16_t text(const char *label, void (*callback)(Control *, int), ControlColor color, String value = ""); // Create a Text Input Control
|
||||||
|
|
||||||
// Output only
|
// Output only
|
||||||
uint16_t label(const char *label, ControlColor color, String value = ""); // Create Label
|
uint16_t label(const char *label, ControlColor color, String value = ""); // Create Label
|
||||||
uint16_t graph(const char *label, ControlColor color); // Create Graph display
|
uint16_t graph(const char *label, ControlColor color); // Create Graph display
|
||||||
uint16_t gauge(const char *label, ControlColor color, int value, int min = 0,
|
uint16_t gauge(const char *label, ControlColor color, int value, int min = 0, int max = 100); // Create Gauge display
|
||||||
int max = 100); // Create Gauge display
|
|
||||||
|
|
||||||
// Input only
|
// Input only
|
||||||
uint16_t accelerometer(const char *label, void (*callback)(Control *, int), ControlColor color);
|
uint16_t accelerometer(const char *label, void (*callback)(Control *, int), ControlColor color);
|
||||||
@ -221,8 +240,6 @@ public:
|
|||||||
void updateControl(uint16_t id, int clientId = -1);
|
void updateControl(uint16_t id, int clientId = -1);
|
||||||
void updateControl(Control *control, int clientId = -1);
|
void updateControl(Control *control, int clientId = -1);
|
||||||
|
|
||||||
void reload();
|
|
||||||
|
|
||||||
void print(uint16_t id, String value);
|
void print(uint16_t id, String value);
|
||||||
void updateLabel(uint16_t id, String value);
|
void updateLabel(uint16_t id, String value);
|
||||||
void updateSwitcher(uint16_t id, bool nValue, int clientId = -1);
|
void updateSwitcher(uint16_t id, bool nValue, int clientId = -1);
|
||||||
@ -238,8 +255,8 @@ public:
|
|||||||
// Variables
|
// Variables
|
||||||
const char *ui_title = "ESPUI"; // Store UI Title and Header Name
|
const char *ui_title = "ESPUI"; // Store UI Title and Header Name
|
||||||
Control *controls = nullptr;
|
Control *controls = nullptr;
|
||||||
|
void jsonReload();
|
||||||
void jsonDom(AsyncWebSocketClient *client);
|
void jsonDom(AsyncWebSocketClient *client);
|
||||||
void jsonReload(AsyncWebSocketClient *client);
|
|
||||||
|
|
||||||
Verbosity verbosity;
|
Verbosity verbosity;
|
||||||
|
|
||||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user