HASPmota Chart Widget - Questions

[jkwim]

I am trying to get the HASPmota Chart widget working to the liking of me.

I am using the example from https://tasmota.github.io/docs/HASPmota/#chart

1. Can somebody explain what changes are needed to get the width of the top scrolling line increased to fill the gap as shown in the above image?

2. Can the color of the graphs changed to my preferences or are they automatic?

3. Can the font size of the clock display be made smaller? If so how?

My current pages,jsonl is as follows (only the page 0 is shown):

{"page":0,"comment":"---------- Upper stat line ----------"}
{"id":0,"text_color":"#FFFF44"}

{"id":90,"obj":"flex","x":0,"y":0,"w%":100,"h":24,"bg_color":"#4f4f4f","bg_opa":255,"radius":0,"border_side":1,"border_width":1,"border_color":"#FFFF44","text_color":"#FFFF44"}
  {"id":91,"obj":"label","parentid":90,"x":0,"y":0,"w%":100,"h%":100,"long_mode":3,"text":"HASPmota widgets explorer","flex_grow":1}
  {"id":92,"obj":"fixed","parentid":90,"w":80,"text_color":"#FFFF44"}
    {"id":95,"parentid":92,"comment":"-- Clock --","obj":"lv_clock","x":8,"y":3,"w":55,"h":16,"radius":0,"border_side":0}
    {"id":97,"parentid":92,"comment":"-- Wifi indicator --","obj":"lv_wifi_arcs","x":63,"y":2,"w":16,"h":16,"radius":0,"border_side":0,"bg_color":"#000000","line_color":"#FFFF44"}

If a link is provided for source code for HASPmota implementation that would be appreciated.

[sfromis]

Your questions about the top line are not even related to the chart widget, but did you try modifying the lines you posted? They have x/y/w/h attributes.

The docs for the chart object mentions the attributes to set colors for each series.
https://tasmota.github.io/docs/HASPmota/#chart
The common attributes across objects are mentioned here:
https://tasmota.github.io/docs/HASPmota/#attributes

In the Gallery of widgets, you can also click on each image to get to the details for that widget.

In general, just don't expect the HASPmota demo widgets to work well on such small displays. They're designed for 320x240 (like the very common ILI9341 display)

The source code is in the regular Tasmota repository https://github.com/arendst/Tasmota/ - but you did not ask for anything specific.

Here's the source code for the chart widget:
https://github.com/arendst/Tasmota/blob/development/lib/libesp32_lvgl/lvgl/src/widgets/chart/lv_chart.c

[jkwim]

Thanks for the pointers. Some of my concerns were addressed but I still have few questions.

1. Yes I modified the parameters to get the Top Status line to appear as I want:

{"page":0,"comment":"---------- Upper stat line ----------"}
{"id":0,"text_color":"#FFFF44"}

{"id":90,"obj":"flex","x":0,"y":0,"w%":100,"h":24,"bg_color":"#4f4f4f","bg_opa":255,"radius":0,"border_side":1,"border_width":1,"border_color":"#FFFF44","text_color":"#FFFF44"}
  {"id":91,"obj":"label","parentid":90,"x":0,"y":0,"w%":100,"h%":100,"long_mode":3,"text":"HASPmota widgets explorer","flex_grow":1}
  {"id":92,"obj":"fixed","parentid":90,"w":72,"text_color":"#FFFF44"}
    {"id":95,"parentid":92,"comment":"-- Clock --","obj":"lv_clock","x":0,"y":3,"w":55,"h":16,"radius":0,"border_side":0}
    {"id":97,"parentid":92,"comment":"-- Wifi indicator --","obj":"lv_wifi_arcs","x":53,"y":2,"w":16,"h":16,"radius":0,"border_side":0,"bg_color":"#000000","line_color":"#FFFF44"}

My question is around the object id's 91 & 92.
To illustrate further I have added a border around these objects using Berry Console commands:

global.p0b91.border_side=15
global.p0b91.border_width=1
global.p0b91.border_color="#FF0000"

global.p0b92.border_side=15
global.p0b92.border_width=1
global.p0b92.border_color="#FF0000"

Object id 91 has width set to 100%
Object id 92 has width set to 72

No matter what I do, there is a horizontal gap between 91 and 92, even if I manipulate the width of Obj 91 with absolute pixel numbers.

[s-hadinger]

This is probably due to padding.

Edit : look at pad_row attribute and set it to 0

If you want absolute placement you can remove the flex object and specify manually size and position for each object

[sfromis]

I might try playing with flex_main_place or other of the flex layout details, instead of only tweaking the values already used in the demo.

Still, if what you want is detailed manual control of layout details, using the flex layout for dynamic control may not be for you.

[jkwim]

This is probably due to padding.

Edit : look at pad_row attribute and set it to 0

If you want absolute placement you can remove the flex object and specify manually size and position for each object

global.p0b90.pad_column=0 did the trick.

Thanks

[jkwim]

Coming back to the questions about Chart, I had really missed the two parameters series1_color & series2_color.

When looking at the source there are y min/max values for secondary Y axis.

How do I specify that in JSON?
Or is it not supported?

I tried y2_min & y2_max but not accepted.

[sfromis]

Mucking around in the source code at the "lower" LVGL level does not get you to something not present if you actually read the docs for HASPmota, which shows what x/y min/max attributes are available.

The Berry code to interface from HASPmota to LVGL only shows setting min/max for the primary axis:
https://github.com/arendst/Tasmota/blob/development/lib/libesp32_lvgl/lv_haspmota/src/embedded/lv_haspmota.be#L2352-L2425

The sample code for the Wifi widget shows how you could use the LVGL level directly, for more fine-grained control (and more work):
https://github.com/arendst/Tasmota/blob/development/tasmota/berry/haspmota_src/haspmota_widgets/lv_wifi_graph.be

[s-hadinger]

Indeed y2_min and y2_max are not implemented (yet). It should be easy to add.

[s-hadinger]

It's now available in the last build

[jkwim]

It's now available in the last build

Oh Great!
Thank you for that quick action!

[jkwim]

Verified on Tasmota 14.5.0.3 (68f019c-lvgl-haspmota) and is working fine.

[jkwim]

Though not related to 'Chart' I have one more question.

I am trying to get the attribute text_rule working but was not successful:

1. Want to be able to capture EVENT MQTT message and display the EVENT value

2. JSON looks like this:
   {"id":20,"obj":"label","x":10,"y":80,"w":100,"h":20,"text":"MESSAGE","text_color":"#555555","text_rule":"EVENT#MESSAGE","text_rule_format":"%s","text_font":"montserrat-10"}

3. I am sending the MQTT from another device:
   cmnd/tasmota/EVENT This is a test message

4. Using add rule command in Berry I can see that the EVENT get triggered
   03:04:32.310 EVENT triggered. This is a test message EVENT#MESSAGE {'Event': {'MESSAGE': 'This is a test message'}}

5. Observed that the default text vale "MESSAGE" disappears from the screen but the expected value which is the payload of the EVENT message is not displayed.

What am I doing wrong here? format issue?

[sfromis]

You forgot to include the event name (message) in the Event command.

[jkwim]

It was a typo. I am sending:
cmnd/tasmota/EVENT MESSAGE=This is a test message

[sfromis]

Well, not posting details by literal copy/paste makes it harder to "trust" that you are getting it exactly right. And the smallest details can matter a lot, also depending on what tool you used to do your publish "from another device".

Did a quick test with your HASPmota object, only changing values for y and text_color (to make sure that it would be readable), and saw it work when publishing a correctly formatted Event command from another Tasmota MQTT client.

[jkwim]

Well, it goes fine with:

def eventmessage(value, trigger, data)
  print("EVENT triggered.", value, trigger, data)
end
tasmota.add_rule('EVENT#MESSAGE', eventmessage)

Getting the following on the Tasmota console:
03:04:32.310 EVENT triggered. This is a test message EVENT#MESSAGE {'Event': {'MESSAGE': 'This is a test message'}}

So that confirms that EVENT triggering is happening correctly right? The content also looks ok.

I can see that "text":"MESSAGE" disappears (or rather text becoming blank) when the EVENT is triggered.

I have used the format: "text_rule_format":"%s" which should be fine right?

[jkwim]

Something is not proper:

https://github.com/arendst/Tasmota/blob/development/lib/libesp32_lvgl/lv_haspmota/src/embedded/lv_haspmota.be#L91

[sfromis]

The string Hello (what you have in global.p10b20.text) indeed has no attribute text_rule_format. You should set the attribute on the HASPmota object instead.

Not seeing any point in the link you posted?

[jkwim]

Oh!
Realized my typo mistake in the Berry command which gave the error.

The reason for not getting the display was probably because I had a tasmota.add_rule in Berry but not a tasmota.remove_rule before that. Probably the multiple add commands caused the issue. After I corrected it the text string is getting displayed correctly.

[jkwim]

Documentation for 'Arc':
https://tasmota.github.io/docs/HASPmota/#arc

Shouldn't these be for suffix 20 instead of suffix 2?

pad_top2 | style_pad_top | Top padding for lv.PART_KNOB part
pad_bottom2 | style_pad_bottom | Bottom padding for lv.PART_KNOB part
pad_left2 | style_pad_left | Left padding for lv.PART_KNOB part
pad_right2 | style_pad_right | Right padding for lv.PART_KNOB part
pad_all2 | style_pad_all | Set all 4 padding for lv.PART_KNOB part (write-only)
radius2 | style_radius | Radius for lv.PART_KNOB part

The "HASPmota Styling" sections says the suffix 20 is for the knob:

https://tasmota.github.io/docs/HASPmota/#haspmota-styling

20 = the knob which can be used the change the value

[s-hadinger]

Yes, but this is an old implementation before the more general styling was implented. Basically both should work (although I haven't tried)

[jkwim]

Yes, but this is an old implementation before the more general styling was implented. Basically both should work (although I haven't tried)

Both worked. Actually I was looking for a way to make the knob smaller and overlooked the suffix 2. Then found a snippet from OpenHASP documentation to use pad_top20 and so on. Then I also noticed the pad_all2 implementation in HASPmota also :-)

[jkwim]

I am trying to adopt the "Roller" example to my screen size.

How do I reduce the height of these text rows?

I tried h -> changes the overall height of the list
I tried h50 -> no change
I tried pad_all=0 -> padding around individual menu items get reduced
reduced font size -> not much help I cannot get the row height reduced.

However still the height of the individual rows remain fixed.

[jkwim]

Never mind!
Found the answer.
It was text_line_space