App layout library

You are reading a single comment by @Ronin and its replies. Click here to read the full conversation.

•

Ronin

Hi I was making a simple clock with the layout library. Here is my code:

require("Font7x11Numeric7Seg").add(Graphics);

var Layout = require("Layout");
var layout = new Layout( 
  {type:"h", c: [
    {type:"txt", font:"7x11Numeric7Seg:2", label:"", id:"time"},
  ]},
  {btns:[
    {label:"", cb: l=>print("Two")},
], lazy:true});


layout.update();
layout.time.x = 170;
layout.time.y = 10;

function draw() {
  var currentDate = new Date();
  var currentHour = currentDate.getHours();
  var currentMinute = currentDate.getMinutes();

  layout.time.label = currentHour+":"+currentMinute;

  layout.render();
}

g.clear();
draw();
setInterval(draw, 5000);

The problem is I am using lazy rendering and the clock does not seem to automatically redraw. It just keeps drawing on top of itself. I am using the Bangle.js 1 emulator. I put a screenshot below of the emulator after I left it on for a while.

1 Attachment

•

NebbishHacker in reply to @Ronin

I suspect the issue is that since layout.time.label is initially empty, and you don't call layout.update after setting it, the layout code thinks it still has zero width and thus tries to clear an area with zero width.

Try either setting the label to a placeholder value of "00:00" when you construct the layout or call layout.update() before each render.

App layout library

About

Espruino