Experimental Bangle.js layout for Heart Rate Monitor app

layout.js

// Some data to graph
var data = new Array(16);
data.fill(0);

// Our custom renderer that draws a graph inside the layout
function renderGraph(l) {
  require("graph").drawBar(g, data, {
    miny: 0,
    axes : true,
    x:l.x, y:l.y, width:l.w, height:l.h
  });
}

var Layout = require("Layout");
var layout = new Layout( {
  type:"v", c: [
    {type:"h", c: [
      {type:"txt", font:"6x8", label:"", pad:4, width: 50 },
      {type:"txt", font:"20%", label:"888", id:"bpm", fillx:1 },
      {type:"txt", font:"6x8", label:"BPM", pad:4, halign: -1, valign: 1, width: 50 }
    ]},
    {type:"txt", font:"6x8", label:"Confidence: 100%", id:"confidence", pad: 8 },
    {type:"txt", font:"6x8", label:"7000", id:"scale", pad:4, halign: -1 },
    {type:"custom", render:renderGraph, id:"graph", bgCol:g.theme.bg, fillx:1, filly:1, pad:4 }
  ]
});
g.clear();
layout.render(); // first call to layout.render() works out positions and draws
//layout.debug();