Layout Library extremely slow?

[espruino-discuss2]

Posted at 2022-06-20 by RaoulDuke

I have a layout that displays five labels and a bar graph. I would like to update several times per second, but Layout.update takes about 0.22s to complete. Is this normal? Changing fonts from vector to bitmap did not change anything.
As a workaround i just use g.clear() and redraw the layout completely in 0.12s. This way, i can call Layout.update just once, but then text alignments are messed up. Turns out layout uses update to calculate the position and size of a text label, then draws the text centered into it.
I think layout should use g.setFontAlign with the correct alignment to align the labels, one call to layout.update would then be enough for many apps (where you usually don´t want your layout to change because a number is now two instead of one digit).

[espruino-discuss2]

Posted at 2022-06-21 by Sir_Indy

You're correct that layout.update takes a long time, because it's recalculating the sizes of every element. But there are other ways to update only certain elements of the layout, see the docs here: https://www.espruino.com/Bangle.js+Layout#updating-the-screen.
The first is 'lazy' - it will only update the items that have changed when you call layout.render (not .update, you shouldn't need to call that manually).

The second is, if you give the items you want to change in your layout an id, you can clear it, update it, then render just that item:

my_layout.clear(my_layout[id_name]);
my_layout[id_name].label = new_value;
my_layout.render(my_layout[id_name]);

This doesn't change the size, or change any other items, so it's much faster.
I made this into a function in one of my apps to repeatedly change text values: https://github.com/sir-indy/BangleApps/blob/2508fd38abf4c1f701967824395a311c6c34b114/apps/smpltmr/app.js#L167-L171

Hope that helps!

---

Posted at 2022-06-21 by RaoulDuke

This kind of works, but the values will always be center-aligned. I have some fields that have 1-5 digits and would like them aligned to the right of their window.
Maybe I should just write my own render function and use the coordinates provided by layout.update.

---

Posted at 2022-06-28 by @gfwilliams

Interesting about the font alignment - what you suggest with setFontAlign makes a lot of sense!

But yes, updating the layout is pretty slow. I've tried to improve things (and have recently moved to a minified Layout which should improve things more) but if anyone spots anything that would improve matters PRs are very welcome :)