Advanced layouts

Just thought this might give you some ideas for alternatives to the default layout system. It's something I created quite early on, and I haven't gone back over it to optimize or anything.
<resources>

<!-- <>color</> -->
<string id="BGMeta">3</string>

<!-- <>color,font,just,x,y</> -->
<string id="TextMeta">0,4,0,40,24</string>

<!-- <>bgColor,fgColor,width,height,x,y,</> -->
<string id="RectMeta">2,0,205,6,0,142</string>

</resources>
using Toybox.WatchUi as Ui;
using Toybox.Graphics as Gfx;


class MyView extends Ui.WatchFace {


hidden var FONTS = [
Gfx.FONT_TINY,
Gfx.FONT_SMALL,
Gfx.FONT_MEDIUM,
Gfx.FONT_LARGE
];


hidden var JUSTS = [
Gfx.TEXT_JUSTIFY_LEFT,
Gfx.TEXT_JUSTIFY_CENTER,
Gfx.TEXT_JUSTIFY_RIGHT,
Gfx.TEXT_JUSTIFY_LEFT|Gfx.TEXT_JUSTIFY_VCENTER,
Gfx.TEXT_JUSTIFY_CENTER|Gfx.TEXT_JUSTIFY_VCENTER,
Gfx.TEXT_JUSTIFY_RIGHT|Gfx.TEXT_JUSTIFY_VCENTER
];


hidden var COLORS = [
Gfx.COLOR_WHITE,
Gfx.COLOR_LT_GRAY,
Gfx.COLOR_DK_GRAY,
Gfx.COLOR_BLACK,
Gfx.COLOR_RED,
Gfx.COLOR_DK_RED,
Gfx.COLOR_YELLOW,
Gfx.COLOR_ORANGE,
Gfx.COLOR_PINK,
Gfx.COLOR_PURPLE,
Gfx.COLOR_GREEN,
Gfx.COLOR_DK_GREEN,
Gfx.COLOR_BLUE,
Gfx.COLOR_DK_BLUE,
Gfx.COLOR_TRANSPARENT,
0x5500AA // Fenix purple
];


hidden var mBGColor;
hidden var mRect;
hidden var mText;


function onLayout(dc) {
var res;
var meta;


res = Ui.loadResource(Rez.Strings.BGMeta);
mBGColor = COLORS[res.toNumber()];


res = Ui.loadResource(Rez.Strings.TextMeta);
mText = resToText(res);


res = Ui.loadResource(Rez.Strings.RectMeta);
meta = strUnpack(res);
mRect = new Rect({
:bgColor => COLORS[meta[0].toNumber()],
:fgColor => COLORS[meta[1].toNumber()],
:width => meta[2].toNumber(),
:height => meta[3].toNumber(),
:locX => meta[4].toNumber(),
:locY => meta[5].toNumber()
});
}


function resToText(res){
var meta = strUnpack(res);
var obj = new Ui.Text({
:text => "",
:color => COLORS[meta[0].toNumber()],
:font => FONTS[meta[1].toNumber()],
:justification => JUSTS[meta[2].toNumber()],
:locX => meta[3].toNumber(),
:locY => meta[4].toNumber()
});
return obj;
}

class Rect{
hidden var mFgColor;
hidden var mBgColor;
hidden var mWidth;
hidden var mHeight;
hidden var mLocX;
hidden var mLocY;


function initialize(params){
mFgColor = params.get(:fgColor);
mBgColor = params.get(:bgColor);
mWidth = params.get(:width);
mHeight = params.get(:height);
mLocX = params.get(:locX);
mLocY = params.get(:locY);
}


function draw(dc){


dc.setColor(mFgColor, mBgColor);
dc.fillRectangle(mLocX, mLocY, mWidtl, mHeight);
}
}


function strUnpack(string){


var strLen = string.length();
var firstChar = 0;
var lastChar = 1;
var substrQty = 0;
var buffer = new [64];


do{
var ignore;
do{
ignore = false;
if(string.substring(firstChar,lastChar).equals(",")
|| string.substring(firstChar, lastChar).equals(" ")
|| string.substring(firstChar, lastChar).equals("\n")){
ignore = true;
firstChar++;
lastChar++;
}
}while(strLen > firstChar && ignore);


var nextChar = lastChar - 1;
do{
ignore = false;
if(string.substring(nextChar,lastChar).equals(",")
|| string.substring(nextChar, lastChar).equals(" ")
|| string.substring(nextChar, lastChar).equals("\n")){
ignore = true;
}
else{
nextChar = lastChar;
lastChar++;
}
}while(strLen >= lastChar && !ignore);


buffer[substrQty] = string.substring(firstChar, lastChar - 1);
substrQty++;
firstChar = lastChar;
lastChar++;


}while(strLen > firstChar);


var array = new [substrQty];
for(var i = 0; i < substrQty; i++){
array= buffer;
}
return array;
}

function onUpdate(dc) {


dc.setColor(Gfx.COLOR_TRANSPARENT, mBGColor);
dc.clear();


mText.draw(dc);
mRect.draw(dc);
}
}[/CODE]