App layout library

Hi! As some of you know, I'm looking into launching a Bangle.js 2.0 soon which should resolve a lot of the niggles that folks have had with the original Bangle. One part of that is moving to a sunlight readable full touch LCD which has a different resolution (176x176) to the current Bangle's 240x240.

This presents an issue for pretty much all existing apps as they're all laid out for the 240x240 screen, and while they could be converted ideally we want the same app to be able to run on both devices.

However this feels like a an opportunity. In many cases all we want is a simple layout - sometimes just one line above another - so a library to handle this would solve a lot of issues and would clean up a lot of apps. There's also the possibility of easily handling touch input and maybe even having some layout tools.

Does anyone have any thoughts about this? Can you think of any nice solutions?

I'm imagining a simple thermometer app might look something like this:

var layout = ["vertical",
  {type:"text", font:"6x8", txt:"Temperature"},
  ["horizontal",
    {type:"text", font:"30%", txt:"20.0"},
    {type:"text", font:"6x8", txt:"'C"}
  ],
  {type:"button", txt:"more...", touch:myTouchHandler},
  //{type:"custom", width:16, height:16, render:myRendererer},
  //{type:"image", src: _=>atob("imagebase64code")},
];

Layout.update(layout);
Layout.render(layout);

setInterval(function() {
  layout[1][1].txt = E.getTemperature().toFixed(1);
  Layout.update(layout);
  Layout.render( layout[1]); // re-render just this part
});

But I'm very open to suggestions. We just need to keep things as simple and lightweight as possible.