How to use the Bangle.js Layout library

..."\o"... I know where that leads to: quite elaborate figuring what the context / object is - to properly deal with the variations of the options information.

Just a note that the tutorial is now live: http://www.espruino.com/Bangle.js+Layout

Additions/tweaks welcome

I like the partial and lazy update of a layout... what bothers me a bit is calling a value a label... I understand that it is historical, and atomic- with no composite display object, such as ro/rw field as in html - everything can be looked at as a label, the label of a field and the value of a field.

Since I cannot see any absolute placements, I assume the partial update walks the complete layout to determine where the update has to happen.

Regarding fonts: I understand that with vector fonts the font size is in percents of screen size and allows use in both bangles. What a bout the (much faster) WxH fonts? I assume the W and H are absolute. Is there a solution path for layouts using such fonts? The Bangle 1 / 2 ration is 1.363636., or 0.73333. Could something be baked in to the layout for these fonts that tells for which bangle the layout is originally specified, like dots per (square) screen? Line height (and positions) - vertical (horizontal?) on horizontal display could then still be calculated and a font mapping could figure what font to use. To handle font (as well as colors) I would always go for a palette. Handling the mapping of elements in a palette is always easier than do it for every layout element (label) definition. What are the thoughts for selecting a font (and color) from a palette in a layout element?

What a bout the (much faster) WxH fonts

Yes, these are all scaled explicitly. I have been wondering about an 'auto' font size... So basically don't specify a font and then Layout just uses a font that fits into the available space.

Seems like a good plan, but it requires two passes, since you might lay out once to find out how much width you have, but then choose a bigger font which uses up more height and needs another layout

What are the thoughts for selecting a font (and color) from a palette

We now have themes in g.theme.fg/etc - so I think it's reasonable to just pull colors from there?

Is it possible to scroll text horizontally if the text exceeds the available width?
I'm thinking how to adapt the Grocery app if the items are long.

@avanc,

everything can be made... BUT: Something has to hold on to the graphics buffer of the full with, or you would have to calculate for every output, beginning with what pixel you have to send the graphics to the device... and you would end up with 'snailing display'. With double buffer and messing with the buffer size in the memory and the view port size of the actual display... that works. I'm not sure current setup would allow you to define a different buffer size than the display and to offset the view port from the buffer (for double buffering, and it would cost you a lot of memory... 176x176x3/8 = 11.6 Kbytes for a matching buffer, and way much more for a buffer that would accommodate longer lines...). If you can go on a single fixed width font and matching grid, you could make scroll work with redrawing always 'everything' without double buffering.

Right now I'm not sure it makes sense to add things like animation to layout, but it'd be pretty easy to add it yourself. There's the 'custom' object type - so you can just provide your own renderer. If you call g.setClipRect you can ensure you don't draw in the wrong place, so you could then just use drawString with an offset - I don't think an offscreen buffer is needed

For the grocery list, does something like E.showMenu make more sense as it'll be scrollable.