1
0
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:
Lukas Bachschwell 2020-06-23 20:34:05 +02:00
parent 60d676ddfd
commit 18431053a8
Signed by: lbsadmin
GPG Key ID: CCC6AA87CC8DF425
6 changed files with 930 additions and 713 deletions

View File

@ -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
View File

@ -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;

View File

@ -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+

File diff suppressed because it is too large Load Diff

View File

@ -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