[Dashboard] Implement root page

DeltaLima commented

2024-07-25 00:39:18 +02:00

Owner

The overview of the values should look a bit more nice

DeltaLima added this to the CanGrow Firmware project 2024-09-16 00:26:27 +02:00

DeltaLima commented

2025-03-16 03:22:01 +01:00

Author

Owner

Dashboard aka root page is still not present in v0.2

DeltaLima changed title from ~~Enhancement: Liftup Root Page Design~~ to [Dashboard] Implement root page

2025-03-16 03:22:20 +01:00

DeltaLima added this to the v0.2.0 Release milestone 2025-03-16 03:22:33 +01:00

DeltaLima added the

enhancement

v0.2.x

labels 2025-03-16 03:22:36 +01:00

DeltaLima added reference firmware_v0.2-dev

2025-03-16 03:46:22 +01:00

DeltaLima commented

2025-04-09 19:16:26 +02:00

Author

Owner

guages are working fine now, actually working on charts. data logging is also done.

i first try chartscss.org which looks pretty nice and fits into the small space available on the ESP. 7kb gzipped file size! the project says.

chartscss works with an ordinary table, applying css classes to its elements. Pretty easy, but this leads that the generated HTML is pretty large (>14KB) which causes the ESP to crash.

So I think it would be better to draw the table itself with all its classes and so on with javascript.

Generating all the charts data as JSON and putting it directly into the HTML body like shown here (https://stackoverflow.com/questions/9320427/best-practice-for-embedding-arbitrary-json-in-the-dom)

<script type="application/json" id="stuff">
    {
        "unicorns": "awesome",
        "abc": [1, 2, 3]
    }
</script>

...

<script>var stuff = JSON.parse(document.getElementById('stuff').innerHTML);</script>

guages are working fine now, actually working on charts. data logging is also done. i first try chartscss.org which looks pretty nice and fits into the small space available on the ESP. `7kb gzipped file size!` the project says. chartscss works with an ordinary table, applying css classes to its elements. Pretty easy, but this leads that the generated HTML is pretty large (>14KB) which causes the ESP to crash. So I think it would be better to draw the table itself with all its classes and so on with javascript. Generating all the charts data as JSON and putting it directly into the HTML body like shown here (https://stackoverflow.com/questions/9320427/best-practice-for-embedding-arbitrary-json-in-the-dom) ```html <script type="application/json" id="stuff"> { "unicorns": "awesome", "abc": [1, 2, 3] } </script> ... <script>var stuff = JSON.parse(document.getElementById('stuff').innerHTML);</script> ```

DeltaLima commented

2025-04-09 19:20:37 +02:00

Author

Owner

Alternatively getting the data as JSON string by calling GET /api/chartdata or so would also do the trick. but this adds an additional request when loading the page, which can also lead into problems. ESPAsyncWebserver can only handle 3-4 requests at once. (or very short after another)

Alternatively getting the data as JSON string by calling `GET /api/chartdata` or so would also do the trick. but this adds an additional request when loading the page, which can also lead into problems. ESPAsyncWebserver can only handle 3-4 requests at once. (or very short after another)

DeltaLima commented

2025-04-12 02:51:18 +02:00

Author

Owner

Chart is now fully drawn by javascript function, json data is also embedded into html, to save a request. four requests at once, especially with so large documents like json time data and dashboard stuff, kills the ESP.

Todo:

Data Table
put gauge stuff into javascript to safe up space (gauges should be drawn completely by javascript)

Chart is now fully drawn by javascript function, json data is also embedded into html, to save a request. four requests at once, especially with so large documents like json time data and dashboard stuff, kills the ESP. Todo: - [ ] Data Table - [x] put gauge stuff into javascript to safe up space (gauges should be drawn completely by javascript)

DeltaLima referenced this issue from a commit

2025-04-18 20:13:29 +02:00

#2 put gauge data into json

DeltaLima referenced this issue from a commit

2025-04-19 00:47:23 +02:00

#2 migrated gauge to javascript

DeltaLima commented

2025-04-19 18:30:43 +02:00

Author

Owner

data table stalled until #39 has some real progress