Enhancement Pages with graphs

[vitalyrepin]

Enhancement Summary

Add support for pages with graphs

Detailed Description

I want to be able to see the following graphs:

• Electricity price per hour (forecast for the day). Available in home assistant with ApexCharts card.
• Temperature per hour till the rest of the day (midnight)

It would be great to have them as charts (1 bar per hour) and supply every bar with additional data. So, when I touch the bar, additional data is displayed.

Therefore I would like to be able to configure 1 page with chart (for electricity price) and modify weather forecast page to include graph there.

According to my understanding, this requires changes in TFT.

It looks like it shall be feasible: https://nextion.tech/2020/10/05/the-sunday-blog-understanding-and-customizing-hmi-components-part-7-design-a-new-component-from-scratch-the-bar-graph-display/

What do you think about this idea and if I to implement this feature, what shall I start from? I am embedded software developer but I'm new to Nextion and NSPanel.

Additional Context

No response

[edwardtfn]

Plot bars in the Nextion display will require some redesign, but it is totally feasible. The hard part on this one is to get the info for that graph using a Blueprint, as we mainly use states, which are usually a single value.
There's no standards on Home Assistant for future electricity price, so find a reliable way to get this will require quite a lot of coding as was done for weather which, by the way, now have future temperatures in a standardized way.
So, it is feasible, maybe not hard for weather entities... but will require some time. And won't be that flexible as people may expect...
We had discussed a few times about redesigning the weather pages... that maybe should be a starting point...
The other enhancement requests related to weather are the following:

• Feature request Weather forecast on one page #831
• Feature request Weather forecast for next 3h 6h 9h in single screen #1233
• animated weather icon on Home screen #1444
• Enhancement Change weather colours to higher saturation #1696

Maybe with a quick look on those you can help me defining how to link to this potentially new graph page, then we define how that page should be.
I would love to have some support on this journey as I want that page on my panels also (and I'm more interested on the electricity price, but I'm fine about starting with the easier approach with weather page).

[vitalyrepin]

I suggest to use the values of entities which encode a list of values.

It will be easy to create this format from any other sources of data in Home Assistant using (e.g.) python scripts.
Something like:

hass.states.set(
           "data_for_graph", "[1, 2.1, -1.1, 0.01, 12]" , {"friendly_name": "histogram values"}
       )

E:g., for histogram it could be just list of comma-separated floats. Number of elements is a number of bars.

Then we can connect the sensor data_for_graph with a graph element. Then somebody (esphome code?) needs to parse this list and draw the graph using nextion API.

[vitalyrepin]

Thought about the data format a little bit more.

It shall also be possible to supply the names of the bars ("x"-labels) and may be the width. All can be done using the string value. I would suggest to use json as a format but not sure it will be easy to parse on the esphome/display side.

I do not have experience with nextion. I installed editor and managed to create a separate page. But I do not see any ready-to-use components to display histograms. Looks like that Waveform component is not suitable for this.

https://nextion.tech/2020/10/05/the-sunday-blog-understanding-and-customizing-hmi-components-part-7-design-a-new-component-from-scratch-the-bar-graph-display/ explains how to develop custom component. Is it supported by nspanel?

[edwardtfn]

Parsing json is quite easy, as we already use it when receiving some data from the display, however the ESPHome API used to communicate with Home Assistant is probably limited in length.
Anyways, we can handle this logic in the Blueprint side and only send the specific text ready to display...