The attached screenshot illustrates what I expected - but I reached that state with a custom renderer only:
/**** Label ****/ function Label (Text, Options) { function renderLabel (Details) { let halfWidth = Details.w/2, xAlignment = Details.halign || 0; let halfHeight = Details.h/2, yAlignment = Details.valign || 0; let Padding = Details.pad || 0; g.setColor(Details.col || g.theme.fg || '#000000'); if (Details.font != null) { g.setFont(Details.font); } g.setFontAlign(xAlignment,yAlignment); g.drawString(Details.label, Details.x + halfWidth + xAlignment*(halfWidth+Padding), Details.y + halfHeight + yAlignment*(halfHeight+Padding) ); } let Result = Object.assign({}, Options || {}, { type:'custom', render:renderLabel, label:Text || '' }); let TextMetrics if (! Options.width || ! Options.height) { if (Options.font != null) { g.setFont(Options.font); } TextMetrics = g.stringMetrics(Result.label); } Result.width = Options.width || TextMetrics.width + 2*(Options.pad || 0); Result.height = Options.height || TextMetrics.height + 2*(Options.pad || 0); return Result; }
Here is a simple "smoke test" for the above "component":
let ScreenWidth = g.getWidth(), ColumnWidth = ScreenWidth/3; // 3 columns let ScreenHeight = g.getHeight(), RowHeight = ScreenHeight/3; // and 3 rows g.clear(true); /**** Label ****/ function Label (Text, Options) { function renderLabel (Details) { let halfWidth = Details.w/2, xAlignment = Details.halign || 0; let halfHeight = Details.h/2, yAlignment = Details.valign || 0; let Padding = Details.pad || 0; g.setColor(Details.col || g.theme.fg || '#000000'); if (Details.font != null) { g.setFont(Details.font); } g.setFontAlign(xAlignment,yAlignment); g.drawString(Details.label, Details.x + halfWidth + xAlignment*(halfWidth+Padding), Details.y + halfHeight + yAlignment*(halfHeight+Padding) ); } let Result = Object.assign({}, Options || {}, { type:'custom', render:renderLabel, label:Text || '' }); let TextMetrics if (! Options.width || ! Options.height) { if (Options.font != null) { g.setFont(Options.font); } TextMetrics = g.stringMetrics(Result.label); } Result.width = Options.width || TextMetrics.width + 2*(Options.pad || 0); Result.height = Options.height || TextMetrics.height + 2*(Options.pad || 0); return Result; } g.setFont12x20(); // does not seem to be respected in layout! let Layout = require('Layout'); let Display = new Layout({ type:'v', c:[ { type:'h', c:[ Label('Test',{ valign:-1, halign:-1, font:'12x20', width:ColumnWidth, height:RowHeight }), Label('Test',{ valign:0, halign:-1, font:'12x20', width:ColumnWidth, height:RowHeight }), Label('Test',{ valign:1, halign:-1, font:'12x20', width:ColumnWidth, height:RowHeight }), ] }, { type:'h', c:[ Label('Test',{ valign:-1, halign:0, font:'12x20', width:ColumnWidth, height:RowHeight }), Label('Test',{ valign:0, halign:0, font:'12x20', width:ColumnWidth, height:RowHeight }), Label('Test',{ valign:1, halign:0, font:'12x20', width:ColumnWidth, height:RowHeight }), ] }, { type:'h', c:[ Label('Test',{ valign:-1, halign:1, font:'12x20', width:ColumnWidth, height:RowHeight }), Label('Test',{ valign:0, halign:1, font:'12x20', width:ColumnWidth, height:RowHeight }), Label('Test',{ valign:1, halign:1, font:'12x20', width:ColumnWidth, height:RowHeight }), ] }, ] }); Display.render();
(the "Label" component is part of my Bangle.js 2 activities as documented on GitHub)
1 Attachment
@Andreas_Rozek started
Espruino is a JavaScript interpreter for low-power Microcontrollers. This site is both a support community for Espruino and a place to share what you are working on.
The attached screenshot illustrates what I expected - but I reached that state with a custom renderer only:
Here is a simple "smoke test" for the above "component":
(the "Label" component is part of my Bangle.js 2 activities as documented on GitHub)
1 Attachment