From d482648ecfe233a485ac9e8b92c9bf6add6c7132 Mon Sep 17 00:00:00 2001
From: fvanroie <15969459+fvanroie@users.noreply.github.com>
Date: Tue, 9 Nov 2021 07:29:56 +0100
Subject: [PATCH] Convert HTTP Settings and HASP Design forms to CSS #246
---
data/style.css | 2 +-
data/style.css.gz | Bin 1090 -> 1101 bytes
src/sys/svc/hasp_http.cpp | 621 ++++++++++++++++++++------------------
3 files changed, 327 insertions(+), 296 deletions(-)
diff --git a/data/style.css b/data/style.css
index c694b57d..d679ee4f 100644
--- a/data/style.css
+++ b/data/style.css
@@ -1 +1 @@
-:root{--star:url('data:image/svg+xml,')}.c,body{text-align:center}.clear{clear:both}.foot{background-color:transparent!important;all:revert;float:right;margin:0;font-size:.6em}a.foot:link,a.foot:visited{color:var(--footfg)}input:not([type=file]){background-color:var(--fldbg);color:var(--fldfg)}input[type=checkbox],input[type=radio]{width:1em}select{background-color:var(--fldbg);color:var(--fldfg)}input:invalid{border:1px solid var(--redbg)}body{font-family:verdana;width:60%;margin:auto;background:var(--bg);color:var(--txt)}.red{background-color:var(--btnred)}.red:focus,.red:hover{background-color:var(--btnredhi)}#doc{text-align:left;display:inline-block;color:var(--txt);width:100%;min-width:320px;max-width:700px;display:table}td{font-size:.87rem;padding-bottom:0;padding-top:0}th{padding-top:.5em}*{box-sizing:border-box}a,input,select,textarea{width:100%;padding:12px;border:1px solid #ccc;border-radius:.6rem;resize:vertical}label{padding:12px 18px 12px 0;display:inline-block}.required{background-image:var(--star);background-size:1.5em 1.5em;background-position:right;background-repeat:no-repeat}a,button,input[type=submit]{padding:12px;border:1px solid var(--btnbrd);border-radius:.6rem;background-color:var(--btnbg);color:var(--btnfg);font-size:1rem;width:100%;margin:12px 0;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none}a:hover,button:hover,input[type=submit]:hover{background-color:var(--btnbghi)}.container{background-color:var(--grpbg);color:var(--grpfg);border-radius:.6rem;padding:10px;margin:20px 0}.dist{display:flex;justify-content:space-between;width:100%}.dist>a{flex-grow:1;margin:0 6px}.dist>a:first-child{margin-left:0}.dist>a:last-child{margin-right:0}.col-25{float:left;width:25%;text-align:right;margin:0}.col-75{margin:0;float:left;width:75%}.row:after{content:"";display:table;clear:both}.row{font-size:.833rem;margin:5px}.gap,.row:last-of-type{margin:5px 5px 20px}.error,.info,.success,.validation,.warning{border:1px solid;margin:10px auto;padding:15px 10px 15px 50px;background-repeat:no-repeat;background-position:10px center;max-width:460px}.info{color:#00529b;background-color:#bde5f8}.success{color:#4f8a10;background-color:#dff2bf}.warning{color:#9f6000;background-color:#feefb3}.error{color:#d8000c;background-color:#ffd2d2}@media screen and (max-width:800px){.col-25,.col-75,input[type=submit]{width:100%;margin-top:0}.col-25{text-align:left}label{padding:5px 18px 5px 0}}
\ No newline at end of file
+:root{--star:url('data:image/svg+xml,')}a.foot:link,a.foot:visited{color:var(--footfg)}input:not([type=file]){background-color:var(--fldbg);color:var(--fldfg)}input[type=checkbox],input[type=radio]{width:1em}select{background-color:var(--fldbg);color:var(--fldfg)}input:invalid{border:1px solid var(--fldred)}body{font-family:verdana;margin:auto;background:var(--bg);color:var(--txt)}.c,body{text-align:center}.clear{clear:both}.foot{background-color:transparent!important;all:revert;float:right;margin:0;font-size:.6em}.red{background-color:var(--btnred)}.red:focus,.red:hover{background-color:var(--btnredhi)}#doc{text-align:left;margin:0 auto;display:inline-block;color:var(--txt);width:80%;min-width:300px;max-width:600px;display:table}td{font-size:.87rem;padding-bottom:0;padding-top:0}th{padding-top:.5em}*{box-sizing:border-box}a,input,select,textarea{width:100%;padding:12px;border:1px solid #ccc;border-radius:.6rem;resize:vertical}label{padding:12px 18px 12px 0;display:inline-block}.required{background-image:var(--star);background-size:1.5em 1.5em;background-position:right;background-repeat:no-repeat}a,button,input[type=submit]{padding:12px;border:1px solid var(--btnbrd);border-radius:.6rem;background-color:var(--btnbg);color:var(--btnfg);font-size:1rem;width:100%;margin:12px 0;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none}a:hover,button:hover,input[type=submit]:hover{background-color:var(--btnbghi)}.container{background-color:var(--grpbg);color:var(--grpfg);border-radius:.6rem;padding:10px;margin:20px 0}.dist{display:flex;justify-content:space-between;width:100%}.dist > a{flex-grow:1;margin:0 6px}.dist>a:first-child{margin-left:0}.dist>a:last-child{margin-right:0}.col-25{float:left;width:25%;text-align:right;margin:0}.col-75{margin:0;float:left;width:75%}.row:after{content:"";display:table;clear:both}.row{font-size:.833rem;margin:5px}.gap,.row:last-of-type{margin:5px 5px 20px}.error,.info,.success,.validation,.warning{border:1px solid;margin:10px auto;padding:15px 10px 15px 50px;background-repeat:no-repeat;background-position:10px center;max-width:500px}.info{color:#00529B;background-color:#BDE5F8}.success{color:#4F8A10;background-color:#DFF2BF}.warning{color:#9F6000;background-color:#FEEFB3}.error{color:#D8000C;background-color:#FFD2D2}@media screen and (max-width:800px){.col-25,.col-75,input[type=submit]{width:100%;margin-top:0}.col-25{text-align:left}label{padding:5px 18px 5px 0}}
\ No newline at end of file
diff --git a/data/style.css.gz b/data/style.css.gz
index e481c60ab785fb73caad5759cc2e3243995eecf3..9a9fe282e860f6cf7e46be5be68509cf20a359bb 100644
GIT binary patch
literal 1101
zcmV-T1hV@diwFpN`iWrz0CRMCY-KKEb8`TtR&A4$FcAJLSjX|IzyTGl!MoA(?4NM%
zLx4bILxLgnMTY");
@@ -392,41 +392,44 @@ void httpHandleReboot()
httpMessage += F("
");
httpMessage = F(D_DISPATCH_REBOOT);
- webSendPage(haspDevice.get_hostname(), httpMessage.length(), true);
+ webSendHeader(haspDevice.get_hostname(), httpMessage.length(), true);
webServer.sendContent(httpMessage);
}
- // httpMessage.clear();
webSendFooter();
- delay(200);
- dispatch_reboot(true);
+ { // Execute Actions
+ // delay(200);
+ dispatch_reboot(true);
+ }
}
////////////////////////////////////////////////////////////////////////////////////////////////////
-void webHandleScreenshot()
+static void webHandleScreenshot()
{ // http://plate01/screenshot
if(!httpIsAuthenticated(F("screenshot"))) return;
- if(webServer.hasArg(F("a"))) {
- if(webServer.arg(F("a")) == F("next")) {
- dispatch_page_next(LV_SCR_LOAD_ANIM_NONE);
- } else if(webServer.arg(F("a")) == F("prev")) {
- dispatch_page_prev(LV_SCR_LOAD_ANIM_NONE);
- } else if(webServer.arg(F("a")) == F("back")) {
- dispatch_page_back(LV_SCR_LOAD_ANIM_NONE);
+ { // Execute actions
+ if(webServer.hasArg(F("a"))) {
+ if(webServer.arg(F("a")) == F("next")) {
+ dispatch_page_next(LV_SCR_LOAD_ANIM_NONE);
+ } else if(webServer.arg(F("a")) == F("prev")) {
+ dispatch_page_prev(LV_SCR_LOAD_ANIM_NONE);
+ } else if(webServer.arg(F("a")) == F("back")) {
+ dispatch_page_back(LV_SCR_LOAD_ANIM_NONE);
+ }
+ }
+
+ if(webServer.hasArg(F("q"))) {
+ lv_disp_t* disp = lv_disp_get_default();
+ webServer.setContentLength(122 + disp->driver.hor_res * disp->driver.ver_res * sizeof(lv_color_t));
+ webServer.send_P(200, PSTR("image/bmp"), "");
+ guiTakeScreenshot();
+ webServer.client().stop();
+ return;
}
}
- if(webServer.hasArg(F("q"))) {
- lv_disp_t* disp = lv_disp_get_default();
- webServer.setContentLength(122 + disp->driver.hor_res * disp->driver.ver_res * sizeof(lv_color_t));
- webServer.send_P(200, PSTR("image/bmp"), "");
- guiTakeScreenshot();
- webServer.client().stop();
- return;
- }
-
- {
+ { // Send Content
String httpMessage((char*)0);
httpMessage.reserve(HTTP_PAGE_SIZE);
httpMessage += F("");
@@ -441,19 +444,18 @@ void webHandleScreenshot()
httpMessage += F("" D_HTTP_NEXT_PAGE "");
httpMessage += FPSTR(MAIN_MENU_BUTTON);
- webSendPage(haspDevice.get_hostname(), httpMessage.length(), false);
+ webSendHeader(haspDevice.get_hostname(), httpMessage.length(), false);
webServer.sendContent(httpMessage);
}
webSendFooter();
}
////////////////////////////////////////////////////////////////////////////////////////////////////
-
-void webHandleAbout()
+static void webHandleAbout()
{ // http://plate01/about
if(!httpIsAuthenticated(F("about"))) return;
- {
+ { // Send Content
String mitLicense((char*)0);
mitLicense = FPSTR(MIT_LICENSE);
@@ -496,16 +498,14 @@ void webHandleAbout()
httpMessage += FPSTR(MAIN_MENU_BUTTON);
- webSendPage(haspDevice.get_hostname(), httpMessage.length(), false);
+ webSendHeader(haspDevice.get_hostname(), httpMessage.length(), false);
webServer.sendContent(httpMessage);
}
- // httpMessage.clear();
webSendFooter();
}
////////////////////////////////////////////////////////////////////////////////////////////////////
-
-void add_json(String& data, JsonDocument& doc)
+static void add_json(String& data, JsonDocument& doc)
{
char buffer[512];
size_t len = serializeJson(doc, buffer, sizeof(buffer));
@@ -517,62 +517,59 @@ void add_json(String& data, JsonDocument& doc)
doc.clear();
}
-void webHandleInfoJson()
+static void webHandleInfoJson()
{ // http://plate01/
if(!httpIsAuthenticated(F("infojson"))) return;
- String htmldata((char*)0);
- htmldata.reserve(HTTP_PAGE_SIZE);
- DynamicJsonDocument doc(512);
+ { // Send Content
+ String htmldata((char*)0);
+ htmldata.reserve(HTTP_PAGE_SIZE);
+ DynamicJsonDocument doc(512);
- htmldata += F("
");
- htmldata += haspDevice.get_hostname();
- htmldata += F("
");
+ htmldata += F("");
+ htmldata += haspDevice.get_hostname();
+ htmldata += F("
");
- htmldata += "";
+ htmldata += "'; data = JSON.parse(data); var table = \"\"; for(let header in data) { "
+ "table += `
\"; "
+ "document.getElementById(\"info\").innerHTML = table;});";
- // String path = F(".html");
- // webServer.send(200, getContentType(path), htmldata);
+ htmldata += FPSTR(MAIN_MENU_BUTTON);
- htmldata += FPSTR(MAIN_MENU_BUTTON);
-
- webSendPage(haspDevice.get_hostname(), htmldata.length(), false);
- webServer.sendContent(htmldata);
-
- // htmldata.clear();
+ webSendHeader(haspDevice.get_hostname(), htmldata.length(), false);
+ webServer.sendContent(htmldata);
+ }
webSendFooter();
}
////////////////////////////////////////////////////////////////////////////////////////////////////
-void webHandleInfo()
+static void webHandleInfo()
{ // http://plate01/
if(!httpIsAuthenticated(F("info"))) return;
- {
+ { // Send Content
char size_buf[32];
String httpMessage((char*)0);
httpMessage.reserve(HTTP_PAGE_SIZE);
@@ -764,10 +761,9 @@ void webHandleInfo()
httpMessage += FPSTR(MAIN_MENU_BUTTON);
- webSendPage(haspDevice.get_hostname(), httpMessage.length(), false);
+ webSendHeader(haspDevice.get_hostname(), httpMessage.length(), false);
webServer.sendContent(httpMessage);
}
- // httpMessage.clear();
webSendFooter();
}
@@ -798,7 +794,7 @@ void webHandleInfo()
} */
static unsigned long htppLastLoopTime = 0;
-void webUploadProgress()
+static void webUploadProgress()
{
long t = webServer.header("Content-Length").toInt();
if(millis() - htppLastLoopTime >= 1250) {
@@ -825,11 +821,11 @@ static inline void webUpdatePrintError()
#endif
}
-void webUpdateReboot()
+static void webUpdateReboot()
{
LOG_INFO(TAG_HTTP, F("Update Success: %u bytes received. Rebooting..."), upload->totalSize);
- {
+ { // Send Content
String httpMessage((char*)0);
httpMessage.reserve(HTTP_PAGE_SIZE);
httpMessage += F(" tr> ${header} th> tr>`;"
+ "for(let key in data[header]) { "
+ "table += ` ${key}: td> ${data[header][key]} td> tr>`;"
+ "}} table += \" ");
@@ -837,17 +833,19 @@ void webUpdateReboot()
httpMessage += F("
");
httpMessage += F("Upload complete. Rebooting device, please wait...");
- webSendPage(haspDevice.get_hostname(), httpMessage.length(), true);
+ webSendHeader(haspDevice.get_hostname(), httpMessage.length(), true);
webServer.sendContent(httpMessage);
}
- // httpMessage.clear();
webSendFooter();
- delay(250);
- dispatch_reboot(true); // Save the current config
+ // Exectute Actions
+ {
+ // delay(250);
+ dispatch_reboot(true); // Save the current config
+ }
}
-void webHandleFirmwareUpload()
+static void webHandleFirmwareUpload()
{
upload = &webServer.upload();
@@ -903,7 +901,7 @@ void webHandleFirmwareUpload()
#endif
#if HASP_USE_SPIFFS > 0 || HASP_USE_LITTLEFS > 0
-int handleFileRead(String path)
+static int handleFileRead(String path)
{
// if(!httpIsAuthenticated(F("fileread"))) return false;
if(!httpIsAuthenticated()) return false;
@@ -974,7 +972,7 @@ int handleFileRead(String path)
return 404; // Not found
}
-void handleFileUpload()
+static void handleFileUpload()
{
if(webServer.uri() != "/edit") {
return;
@@ -1020,7 +1018,7 @@ void handleFileUpload()
}
}
-void handleFileDelete()
+static void handleFileDelete()
{
if(!httpIsAuthenticated(F("filedelete"))) return;
@@ -1043,7 +1041,7 @@ void handleFileDelete()
// path.clear();
}
-void handleFileCreate()
+static void handleFileCreate()
{
if(!httpIsAuthenticated(F("filecreate"))) return;
@@ -1083,7 +1081,7 @@ void handleFileCreate()
webServer.send(200, PSTR("text/plain"), "");
}
-void handleFileList()
+static void handleFileList()
{
if(!httpIsAuthenticated(F("filelist"))) return;
@@ -1154,7 +1152,7 @@ void handleFileList()
////////////////////////////////////////////////////////////////////////////////////////////////////
#if HASP_USE_CONFIG > 0
-void webHandleConfig()
+static void webHandleConfig()
{ // http://plate01/config
if(!httpIsAuthenticated(F("config"))) return;
@@ -1191,23 +1189,22 @@ void webHandleConfig()
httpMessage += F("" D_HTTP_FACTORY_RESET "");
httpMessage += FPSTR(MAIN_MENU_BUTTON);
- webSendPage(haspDevice.get_hostname(), httpMessage.length(), false);
+ webSendHeader(haspDevice.get_hostname(), httpMessage.length(), false);
webServer.sendContent(httpMessage);
}
- // httpMessage.clear();
webSendFooter();
}
////////////////////////////////////////////////////////////////////////////////////////////////////
#if HASP_USE_MQTT > 0
-void webHandleMqttConfig()
+static void webHandleMqttConfig()
{ // http://plate01/config/mqtt
if(!httpIsAuthenticated(F("config/mqtt"))) return;
- StaticJsonDocument<256> settings;
- mqttGetConfig(settings.to");
@@ -1268,20 +1265,19 @@ void webHandleMqttConfig()
httpMessage += F("");
add_form_button(httpMessage, F(D_BACK_ICON D_HTTP_CONFIGURATION), F("/config"));
- webSendPage(haspDevice.get_hostname(), httpMessage.length(), false);
+ webSendHeader(haspDevice.get_hostname(), httpMessage.length(), false);
webServer.sendContent(httpMessage);
}
- // httpMessage.clear();
webSendFooter();
}
#endif
////////////////////////////////////////////////////////////////////////////////////////////////////
-void webHandleGuiConfig()
+static void webHandleGuiConfig()
{ // http://plate01/config/wifi
if(!httpIsAuthenticated(F("config/gui"))) return;
- {
+ { // Send Content
StaticJsonDocument<256> settings;
guiGetConfig(settings.to
");
- httpMessage += haspDevice.get_hostname();
- httpMessage += F("
");
- httpMessage += F("" D_HTTP_WIFI_SETTINGS "
");
+ String httpMessage((char*)0);
+ httpMessage.reserve(HTTP_PAGE_SIZE);
+ httpMessage += F("");
+ httpMessage += haspDevice.get_hostname();
+ httpMessage += F("
");
+ httpMessage += F("" D_HTTP_WIFI_SETTINGS "
");
- // Form
- httpMessage += F("");
#if HASP_USE_WIFI > 0 && !defined(STM32F4xx)
- if(WiFi.getMode() == WIFI_STA) {
- add_form_button(httpMessage, F(D_BACK_ICON D_HTTP_CONFIGURATION), F("/config"));
- }
+ if(WiFi.getMode() == WIFI_STA) {
+ add_form_button(httpMessage, F(D_BACK_ICON D_HTTP_CONFIGURATION), F("/config"));
+ }
#endif
- webSendPage(haspDevice.get_hostname(), httpMessage.length(), false);
- webServer.sendContent(httpMessage);
-#if defined(STM32F4xx)
- httpMessage = "";
-#else
- httpMessage.clear();
-#endif
+ webSendHeader(haspDevice.get_hostname(), httpMessage.length(), false);
+ webServer.sendContent(httpMessage);
+ }
webSendFooter();
}
#if HASP_USE_CAPTIVE_PORTAL > 0
// I'm not an experienced programmer, this was the only way I managed to get it to work..
-void webHandleCaptivePortalWifiConfig()
+static void webHandleCaptivePortalWifiConfig()
{ // http://plate01/config/wifi
if(!httpIsAuthenticated(F("config/wifi"))) return;
- StaticJsonDocument<256> settings;
- wifiGetConfig(settings.to");
- httpMessage += haspDevice.get_hostname();
- httpMessage += F("
");
+ String httpMessage((char*)0);
+ httpMessage.reserve(HTTP_PAGE_SIZE);
+ httpMessage += F("");
+ httpMessage += haspDevice.get_hostname();
+ httpMessage += F("
");
- httpMessage += F("
WiFi Password (required)
WiFi Password (required)");
+ httpMessage += haspDevice.get_hostname();
+ httpMessage += F("
");
+ httpMessage += F("" D_HTTP_HTTP_SETTINGS "
");
- size_t len = snprintf_P(
- httpMessage, sizeof(httpMessage),
- PSTR("%s
"
- "
"
- "Web Password (optional)"
- ""
- "
UI Theme (required)
Default Font
Startup Layout (optional)
"); + httpMessage += + F("Startup Brightness (required)
ESP update
Updating ESP firmware from: "); - httpMessage += webServer.arg(url); + httpMessage += url; - webSendPage(haspDevice.get_hostname(), httpMessage.length(), true); + webSendHeader(haspDevice.get_hostname(), httpMessage.length(), true); webServer.sendContent(httpMessage); - // httpMessage.clear(); } webSendFooter(); - LOG_TRACE(TAG_HTTP, F("Updating ESP firmware from: %s"), webServer.arg(url).c_str()); - dispatch_web_update(NULL, webServer.arg(url).c_str(), TAG_HTTP); + LOG_TRACE(TAG_HTTP, F("Updating ESP firmware from: %s"), url); + dispatch_web_update(NULL, url, TAG_HTTP); } //////////////////////////////////////////////////////////////////////////////////////////////////// #if HASP_USE_CONFIG > 0 -void webHandleSaveConfig() +static void webHandleSaveConfig() { if(!httpIsAuthenticated(F("saveConfig"))) return; + configWrite(); } //////////////////////////////////////////////////////////////////////////////////////////////////// -void httpHandleResetConfig() +static void httpHandleResetConfig() { // http://plate01/resetConfig if(!httpIsAuthenticated(F("resetConfig"))) return; bool resetConfirmed = webServer.arg(F("confirm")) == F("yes"); - { + { // Send Content String httpMessage((char*)0); httpMessage.reserve(HTTP_PAGE_SIZE); httpMessage += F("