DeltaLima/CanGrow

Fork 0

[Webserver:WebUI] Rework WebUI in Javascript with REST API #13

New issue

Open

opened 2024-07-28 02:40:56 +02:00 by DeltaLima · 2 comments

DeltaLima commented

2024-07-28 02:40:56 +02:00

Owner

Current page handling is a nightmare

    String body = returnHTMLheader("growSettings");
    
    if(strlen(GrowName) < 1) {
      body += "<h1>Final step: Grow settings</h1>";
      body += "<p>Please configure all settings<br>";
      body += "</p>";
      GrowStart = timeClient.getEpochTime();
    }
    
    body += "<h2>&#128262; Grow settings</h2>";
    if(webserver.hasArg("success")) {
      body += FPSTR(HTMLsuccess);
    } 
    body += "<p>Here you can set everything grow related, like light hours, how much water, LED brightness<br>";
    body += "</p>";
    
    body += "<form method='post' action='/growSettings/save'>\n";

I would like to store the basic html page in LittleFS and do all the dynamic things with javascript. WLED and Tasmota have good examples for this

Current page handling is a nightmare ``` String body = returnHTMLheader("growSettings"); if(strlen(GrowName) < 1) { body += "<h1>Final step: Grow settings</h1>"; body += "<p>Please configure all settings<br>"; body += "</p>"; GrowStart = timeClient.getEpochTime(); } body += "<h2>🔆 Grow settings</h2>"; if(webserver.hasArg("success")) { body += FPSTR(HTMLsuccess); } body += "<p>Here you can set everything grow related, like light hours, how much water, LED brightness<br>"; body += "</p>"; body += "<form method='post' action='/growSettings/save'>\n"; ``` I would like to store the basic html page in LittleFS and do all the dynamic things with javascript. WLED and Tasmota have good examples for this

DeltaLima added this to the CanGrow Firmware project

2024-09-16 00:25:23 +02:00

DeltaLima commented

2025-03-16 03:28:43 +01:00

Author

Owner

in v0.2 with ESPAsyncWebserver, i couldnt avoid the way of building pages shown above.
I already use the template function, but this is also not super great.

Maybe i should consider building the WebUI completely with javascript and get all the nice data from api endpoints (json).

This topic might be something for v0.3

in v0.2 with ESPAsyncWebserver, i couldnt avoid the way of building pages shown above. I already use the template function, but this is also not super great. Maybe i should consider building the WebUI completely with javascript and get all the nice data from api endpoints (json). This topic might be something for v0.3

DeltaLima added the

enhancement

label

2025-03-16 03:28:58 +01:00

DeltaLima changed title from ~~Enhancement: Rework Web Page handling, get them as static as possible~~ to [Webserver] Rework Web Page handling, get them as static as possible

2025-03-16 03:33:35 +01:00

DeltaLima added the

v0.3.x

label

2025-03-16 03:38:10 +01:00

DeltaLima added a new dependency

2025-04-15 00:46:56 +02:00

#39 Shrink image size

DeltaLima added the

v0.2.x

label

2025-04-15 00:47:20 +02:00

DeltaLima referenced this issue

2025-10-18 23:21:20 +02:00

Shrink image size #39

DeltaLima added reference main

2025-10-18 23:22:06 +02:00

DeltaLima removed the

v0.3.x

label

2025-10-18 23:22:41 +02:00

DeltaLima self-assigned this

2025-10-18 23:22:42 +02:00

DeltaLima added this to the v0.2.0 Release milestone

2025-10-18 23:22:45 +02:00

DeltaLima commented

2025-10-19 00:08:20 +02:00

Author

Owner

The work on this topic has begun in #39 - some progress is made:

Building the WebUI is done for the root dashboard page and most of the grow settings (dashboard settings missing).
For this GET requests are used, to determine which page has to be shown. This causes always a static request, like GET /?p=grow&s=light for the HTML and a second one for the view.json api request to get the actual content GET /view.json?p=grow&s=light.

After exchanging some thoguhts I will rework this rework again with the following structure:

For the beginning, every page and subpage delivers the same html, so like

webserver.on("/", HTTP_GET, WebFile_index_html);
webserver.on("/grow/", HTTP_GET, WebFile_index_html);
webserver.on("/grow/light/", HTTP_GET, WebFile_index_html);
webserver.on("/system/sensors/", HTTP_GET, WebFile_index_html);

later on, this can be replaced within the javascript part, so those "routes" arent used. But for now I think, it is more straight forward for me, to go this way.

The view.json requests will be replaced in a similar way:

webserver.on("/view", HTTP_GET, ViewJson_Root);
webserver.on("/grow/view", HTTP_GET, ViewJson_Grow);
webserver.on("/grow/light/view", HTTP_GET, ViewJson_Grow_Light);
webserver.on("/system/sensors/view", HTTP_GET, ViewJson_System_Sensors);

For editing stuff, i would introduce another subpage called edit, same for add

Adding stuff is pretty obvious, for this the webserver routings would look like

webserver.on("/system/sensors/add/", HTTP_GET, WebFile_index_html);
webserver.on("/system/sensors/add/view", HTTP_GET, ViewJson_System_Sensors_Add);

A new sensor id here is looked up by the esp code and sent within the view json

For editing something

webserver.on("/system/sensors/edit/", HTTP_GET, WebFile_index_html);
webserver.on("/system/sensors/edit/view", HTTP_GET, ViewJson_System_Sensors_Edit);

But this request would require to tell the webserver some ID so it can show the set values in the view json.
For this we can pass a search parameter, so the request would look like

GET /system/sensors/edit/?id=2

On Javascript side we have then to grab this search parameter id=2 and put it to our view json request as well. This kinda is already done in the actual javascript rework:

var params = new URLSearchParams(document.location.search);

  /* https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/get */
  var params = new URLSearchParams(document.location.search);
  var page = params.get('p');
  var subpage = params.get('s');
  console.log(page);
  
  /* https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/toString */
  const viewJson = await getJson('view.json?' + params.toString());
  console.log(viewJson);

The work on this topic has begun in #39 - some progress is made: Building the WebUI is done for the root dashboard page and most of the grow settings (dashboard settings missing). For this GET requests are used, to determine which page has to be shown. This causes always a static request, like `GET /?p=grow&s=light` for the HTML and a second one for the `view.json` api request to get the actual content `GET /view.json?p=grow&s=light`. After exchanging some thoguhts I will rework this rework again with the following structure: For the beginning, every page and subpage delivers the same html, so like ```c++ webserver.on("/", HTTP_GET, WebFile_index_html); webserver.on("/grow/", HTTP_GET, WebFile_index_html); webserver.on("/grow/light/", HTTP_GET, WebFile_index_html); webserver.on("/system/sensors/", HTTP_GET, WebFile_index_html); ``` later on, this can be replaced within the javascript part, so those "routes" arent used. But for now I think, it is more straight forward for me, to go this way. The view.json requests will be replaced in a similar way: ```c++ webserver.on("/view", HTTP_GET, ViewJson_Root); webserver.on("/grow/view", HTTP_GET, ViewJson_Grow); webserver.on("/grow/light/view", HTTP_GET, ViewJson_Grow_Light); webserver.on("/system/sensors/view", HTTP_GET, ViewJson_System_Sensors); ``` For editing stuff, i would introduce another subpage called `edit`, same for `add` Adding stuff is pretty obvious, for this the webserver routings would look like ```c++ webserver.on("/system/sensors/add/", HTTP_GET, WebFile_index_html); webserver.on("/system/sensors/add/view", HTTP_GET, ViewJson_System_Sensors_Add); ``` A new sensor id here is looked up by the esp code and sent within the view json For editing something ```c++ webserver.on("/system/sensors/edit/", HTTP_GET, WebFile_index_html); webserver.on("/system/sensors/edit/view", HTTP_GET, ViewJson_System_Sensors_Edit); ``` But this request would require to tell the webserver some ID so it can show the set values in the view json. For this we can pass a search parameter, so the request would look like ``` GET /system/sensors/edit/?id=2 ``` On Javascript side we have then to grab this search parameter `id=2` and put it to our view json request as well. This kinda is already done in the actual javascript rework: https://git.la10cy.net/DeltaLima/CanGrow/src/commit/ff950b27ee3619a361643239988594430869b3cb/include/Webserver/static/cangrow.js#L1063 ```js /* https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/get */ var params = new URLSearchParams(document.location.search); var page = params.get('p'); var subpage = params.get('s'); console.log(page); /* https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/toString */ const viewJson = await getJson('view.json?' + params.toString()); console.log(viewJson); ```

DeltaLima changed title from ~~[Webserver] Rework Web Page handling, get them as static as possible~~ to [Webserver:WebUI] Rework WebUI in Javascript with REST API

2025-10-19 00:09:55 +02:00

DeltaLima referenced this issue from a commit

2025-10-19 02:50:45 +02:00

#13 started to rework the new WebUI in javascript, WIP