issues with text_font

[evaluationevaluation]

Hi,

during the last weeks I heavily worked to integrate the CYD into my NodeRed environment.
It was a real pleasure to use OpenHasp together with assistence of OpenHaspDesigner!

But now as my page as a certain complexity the stability of the display suffers a lot.
Accessing the WebUI is nearly impossible, often several resets needed until WebUI works again.
Updates of the page are sometimes "incomplete". Here is a screenshot of my page showing a "half" sun.
The device regularly does reboots.

As the device has no PS-RAM I need to intensively use icons from the font.

Version | 0.7.0-rc13 042fe05
Environment | esp32-2432s028r-ili9342_4MB

It seems that text_font of labels has a big impact on stability.
Obviously I did not understand the concept behind and unfortunately am not able to understand the source code, too.

I used text_font attribute to get scaled characters/icons.
This worked fine until some complexity limit.

In the screenshot I recently added the lower right section for the car and the car icon used text_font = 50.
This leads to regular system crashes.
I figured out that the system is more stable with text_font=60 but don't know why.

Attached you find the source of my page. I would really appreciate to get some advice which text_font values are "good" and which are "bad" and learn about the background.

{"page":0,"id":0,"next":1,"prev":0}
{"id":1,"obj":"btn","x":  0,"y":210,"w":100,"h":30,"text":"\uE141","action":{"down":"page prev"}}
{"id":2,"obj":"btn","x":220,"y":210,"w":100,"h":30,"text":"\uE142","action":{"down":"page next"}}
{"id":3,"obj":"btn","x":100,"y":210,"w":120,"h":30,"text":"\uE2DC","action":{"down":"page 1"}}

{"page":4,"comment":"Icon Page"}
{"page":4,"id":0,"next":4,"prev":4}
{"id":10,"obj":"obj","x":90,"y":10,"w":135,"h":100,"bg_color":"#fff59c","bg_opa":20}
{"id":11,"parentid":10            ,"obj":"label","x": 0,"y": 0,"w":100,"h":100,"text_font":100,"text_color":"#0000FF","border_color":"#FFFFFF","border_width":1,"text":"\uE2DC","comment":"Haus_Icon"}
{"id":12,"parentid":10            ,"obj":"label","x":75,"y":35,"w":60,"h":60,"text_font": 60,"text_color":"#0000FF","border_color":"#FFFFFF","border_width":1,"text":"\uF2D3","comment":"Garage_closed_Icon"}
{"id":13,"parentid":10,"hidden":1 ,"obj":"label","x":75,"y":35,"w":60,"h":60,"text_font": 60,"text_color":"#FF0000","border_color":"#FFFFFF","border_width":1,"text":"\uF2D4","comment":"Garage_open_Icon"}
{"id":14,"parentid":10,"hidden":1 ,"obj":"label","x":37,"y":30,"w":100,"h":100,"text_font": 25,"text_color":"#FF0000","border_color":"#FFFFFF","border_width":1,"text":"\uF1DB","comment":"Window_open_Icon"}
{"id":15,"parentid":10            ,"obj":"label","x":30,"y":63,"w":30,"h":30,"text_font": 30,"text_color":"#0000FF","border_color":"#FFFFFF","border_width":1,"text":"\uE81B","comment":"Door_Closed_Icon"}
{"id":16,"parentid":10,"hidden":1 ,"obj":"label","x":30,"y":63,"w":30,"h":30,"text_font": 30,"text_color":"#FF0000","border_color":"#FFFFFF","border_width":1,"text":"\uE81C","comment":"Door_Open_Icon"}
{"id":17,"parentid":10            ,"obj":"label","x":80,"y":20,"w": 40,"h": 20,"text_font": 20,"text_color":"#0000FF","border_color":"#FFFFFF","border_width":1,"text":"?"}
{"id":18,"parentid":10            ,"obj":"label","x":60,"y":70,"w":20,"h":20,"text_font": 20,"text_color":"#000000","border_color":"#FFFFFF","border_width":1,"text":"\uE28F","comment":"Paketbox_Icon"}

{"id":20,"obj":"obj","x":110,"y":130,"w":120,"h":70,"bg_color":"#fff59c","bg_opa":20}
{"id":21,"parentid":20            ,"obj":"label","x":30,"y": 0,"w":30,"h":35,"text_font":30,"text_color":"#0000FF","border_color":"#FFFFFF","border_width":1,"text":"\uE438","comment":"Hitachi_Heizen_Icon"}
{"id":22,"parentid":20            ,"obj":"label","x":60,"y": 0,"w":30,"h":35,"text_font":30,"text_color":"#0000FF","border_color":"#FFFFFF","border_width":1,"text":"\uE58C","comment":"Hitachi_Warmwasser_Icon"}
{"id":23,"parentid":20            ,"obj":"label","x":90,"y": 0,"w":30,"h":35,"text_font":30,"text_color":"#0000FF","border_color":"#FFFFFF","border_width":1,"text":"\uE717","comment":"Snowflake_Icon"}
{"id":24,"parentid":20            ,"obj":"label","x": 0,"y": 0,"w":30,"h":35,"text_font":30,"text_color":"#0000FF","border_color":"#FFFFFF","border_width":1,"text":"\uE01B","comment":"Aircon_Icon"}
{"id":25,"parentid":20            ,"obj":"label","x":30,"y":35,"w":30,"h":35,"text_font":30,"text_color":"#0000FF","border_color":"#FFFFFF","border_width":1,"text":"\uEAAC","comment":"Dishwasher_Icon"}
{"id":26,"parentid":20            ,"obj":"label","x":60,"y":35,"w":30,"h":35,"text_font":30,"text_color":"#0000FF","border_color":"#FFFFFF","border_width":1,"text":"\uE72A","comment":"WashingMachine_Icon"}
{"id":27,"parentid":20            ,"obj":"label","x":90,"y":35,"w":30,"h":35,"text_font":30,"text_color":"#0000FF","border_color":"#FFFFFF","border_width":1,"text":"\uE917","comment":"Dryer_Icon"}
{"id":28,"parentid":20            ,"obj":"label","x": 0,"y":35,"w":30,"h":35,"text_font":30,"text_color":"#0000FF","border_color":"#FFFFFF","border_width":1,"text":"\uE01B","comment":"Aircon2_Icon"}
{"id":29,"parentid":20,"hidden":1 ,"obj":"label","x":30,"y": 0,"w":30,"h":35,"text_font":30,"text_color":"#0000FF","border_color":"#FFFFFF","border_width":1,"text":"\uE438","comment":"Hitachi_Heizen_OFF_Icon"}

{"id":30,"obj":"obj","x":0,"y":120,"w":100,"h":80,"bg_color":"#fff59c","bg_opa":20}
{"id":31,"parentid":30            ,"obj":"label","x":-10,"y": 0,"w":80,"h":80,"text_font":80,"text_color":"#FF0000","border_color":"#FFFFFF","border_width":1,"text":"\uED3E","comment":"Grid_Icon"}
{"id":32,"parentid":30,"hidden":1 ,"obj":"label","x": 60,"y":10,"w":30,"h":30,"text_font":30,"text_color":"#FF0000","border_color":"#FFFFFF","border_width":1,"text":"\uE04D","comment":"Grid_ArrorLeft_Icon"}
{"id":33,"parentid":30            ,"obj":"label","x": 60,"y":10,"w":30,"h":30,"text_font":30,"text_color":"#FF0000","border_color":"#FFFFFF","border_width":1,"text":"\uE054","comment":"Grid_ArrowRight_Icon"}
{"id":34,"parentid":30            ,"obj":"label","x": 50,"y":50,"w": 40,"h": 20,"text_font":20,"text_color":"#FF0000","border_color":"#FFFFFF","border_width":1,"text":"?","align":"center","comment":"Power"}

{"id":40,"obj":"obj","x":239,"y":120,"w":80,"h":80,"bg_color":"#fff59c","bg_opa":20}
{"id":41,"parentid":40            ,"obj":"label","x":20,"y":20,"w":60,"h":60,"text_font":60,"text_color":"#AAAAAA","border_color":"#FFFFFF","border_width":1,"text":"\uE10B","comment":"Auto_Icon"}
{"id":42,"parentid":40            ,"obj":"label","x": 0,"y":20,"w":30,"h":30,"text_font":30,"text_color":"#FF00FF","border_color":"#FFFFFF","border_width":1,"text":"\uE5F1","comment":"Auto_Charger_Icon"}
{"id":43,"parentid":40,"hidden":1 ,"obj":"label","x": 5,"y":50,"w":35,"h":20,"text_font":20,"text_color":"#FF0000","border_color":"#FFFFFF","border_width":1,"text":"?","comment":"NRG_PTOTAL"}
{"id":44,"parentid":40            ,"obj":"label","x":40,"y":10,"w":35,"h":20,"text_font":20,"text_color":"#FF0000","border_color":"#FFFFFF","border_width":1,"text":"?","comment":"Wh"}

{"id":50,"obj":"obj","x":0,"y":0,"w":80,"h":80,"bg_color":"#fff59c","bg_opa":20}
{"id":51,"parentid":50            ,"obj":"label","x": 0,"y": 0,"w":80,"h":80,"text_font":80,"text_color":"#FFFF00","border_color":"#FFFFFF","border_width":1,"text":"\uE5A8","comment":"Sonne_Icon"}
{"id":52,"parentid":50            ,"obj":"label","x":23,"y":35,"w": 34,"h": 20,"text_font":20,"text_color":"#000000","border_color":"#FFFFFF","border_width":1,"text":"?","align":"center"}

{"id":60,"obj":"obj","x":230,"y":0,"w":90,"h":80,"bg_color":"#fff59c","bg_opa":20}
{"id":61,"parentid":60            ,"obj":"label","x":30,"y": 0,"w":80,"h":80,"text_font":80,"text_color":"#00FF00","border_color":"#FFFFFF","border_width":1,"text":"\uF2A3","comment":"BYD_100_Icon"}
{"id":62,"parentid":60,"hidden":1 ,"obj":"label","x":30,"y": 0,"w":80,"h":80,"text_font":80,"text_color":"#00FF00","border_color":"#FFFFFF","border_width":1,"text":"\uF2A2","comment":"BYD_66_Icon"}
{"id":63,"parentid":60,"hidden":1 ,"obj":"label","x":30,"y": 0,"w":80,"h":80,"text_font":80,"text_color":"#00FF00","border_color":"#FFFFFF","border_width":1,"text":"\uF2A1","comment":"BYD_33_Icon"}
{"id":64,"parentid":60,"hidden":1 ,"obj":"label","x":30,"y": 0,"w":80,"h":80,"text_font":80,"text_color":"#00FF00","border_color":"#FFFFFF","border_width":1,"text":"\uE08E","comment":"BYD_0_Icon"}
{"id":65,"parentid":60            ,"obj":"label","x":20,"y":50,"w":30,"h":30,"text_font":30,"text_color":"#00FF00","border_color":"#FFFFFF","border_width":1,"text":"\uE05D","comment":"BYD_ArrowUp_Icon"}
{"id":66,"parentid":60            ,"obj":"label","x":20,"y":55,"w":30,"h":30,"text_font":30,"text_color":"#00FF00","border_color":"#FFFFFF","border_width":1,"text":"\uE045","comment":"BYD_ArrowDown_Icon"}
{"id":67,"parentid":60            ,"obj":"label","x": 0,"y":30,"w": 40,"h": 20,"text_font":20,"text_color":"#00FF00","border_color":"#FFFFFF","border_width":1,"text":"?","align":"right","comment":"Power"}
{"id":68,"parentid":60            ,"obj":"label","x": 0,"y": 0,"w": 40,"h": 20,"text_font":20,"text_color":"#00FF00","border_color":"#FFFFFF","border_width":1,"text":"?","align":"right","comment":"SOC"}

[fvanroie]

https://www.openhasp.com/0.7.0/design/fonts/#truetype

Warning
You should only load TTF fonts on a device that has PSRAM

You've got the cheapest display, without PSram. When you then add complex designs with TrueType font sizes, the ESP32 is going to have a very hard time with its 520kB of memory... You simply can not expect desktop performance, there are trade-offs to be made...

Limit yourself to 12, 16, 24 and 32pt sizes as these don't add memory requirements. Any other size is rendered via TrueType vector scaling; adding MCU and memory pressure. You can use maybe one or two other sizes on simple pages, but if you add too much, stability is going to suffer.

There is no guardrail, openHASP will let you push it to the limit, but your mileage may vary. You seem to be using anything but the per-rendered font sizes...

Either get a device with PSram that supports your layout requirements, or scale back the use of text_font and limit your designs to 12, 16, 24 and 32pt sizes. You really need PSram for other sizes.

You might read up on Memory Usage here https://www.openhasp.com/0.7.0/firmware/compiling/memory/

[evaluationevaluation]

thanks a lot for the explanation. I expected to have performance drawbacks and can live with it.
What I don't understand is why a character scaled to 60px works great while the same character scaled to 50px leads to instability and crashes. I thought that it is perhaps easier for the device when I use multiples of known font sizes, i.e. x * 16 or x * 32 or x * 12 but when I changed the house from 100 to 96 it got worse.
So far I have no idea whether there are scales that usually work better that others.
If I would know a rule like this I could adjust my layout to those values.

The mentioned "memory handling" article will help me to dig a little bit deeper into it using trial/error approach.
But if you know "good" values for scales I would love to share your experience and save trial/error time...

Now knowing about the importance of PSRAM the next device will have some :-)

[evaluationevaluation]

P.S.: does it make a difference whether the icons overlap or not or cross the borders of the display?