From 3f26b8b88e1b75323e9df4ba58468e81ea2000a2 Mon Sep 17 00:00:00 2001 From: Gordon Williams Date: Mon, 18 Oct 2021 11:32:46 +0100 Subject: [PATCH] Layout module now allows 'soft' buttons to be cycled through and selected using up/down on Bangle.js 1 --- apps/accellog/app.js | 4 +- apps/barclock/clock-bar.js | 2 +- apps/gpsinfo/gps-info.js | 8 +-- apps/speedo/speedo.js | 4 +- apps/weather/app.js | 2 +- modules/Layout.js | 69 +++++++++++++++------ tests/Layout/bin/runtest.sh | 6 +- tests/Layout/tests/accellog.js | 4 +- tests/Layout/tests/buttons_1_bangle1.bmp | Bin 0 -> 28874 bytes tests/Layout/tests/buttons_1_bangle1.js | 9 +++ tests/Layout/tests/buttons_1_bangle2.bmp | Bin 0 -> 15562 bytes tests/Layout/tests/buttons_1_bangle2.js | 6 ++ tests/Layout/tests/buttons_3_bangle1.bmp | Bin 0 -> 28874 bytes tests/Layout/tests/buttons_3_bangle1.js | 11 ++++ tests/Layout/tests/buttons_3_bangle2.bmp | Bin 0 -> 15562 bytes tests/Layout/tests/buttons_3_bangle2.js | 8 +++ tests/Layout/tests/buttons_osd_bangle1.bmp | Bin 0 -> 28874 bytes tests/Layout/tests/buttons_osd_bangle1.js | 17 +++++ tests/Layout/tests/buttons_osd_bangle2.bmp | Bin 0 -> 15562 bytes tests/Layout/tests/buttons_osd_bangle2.js | 10 +++ tests/Layout/tests/padding.bmp | Bin 15562 -> 15562 bytes tests/Layout/tests/padding_with_fill.bmp | Bin 15562 -> 15562 bytes 22 files changed, 126 insertions(+), 34 deletions(-) create mode 100644 tests/Layout/tests/buttons_1_bangle1.bmp create mode 100644 tests/Layout/tests/buttons_1_bangle1.js create mode 100644 tests/Layout/tests/buttons_1_bangle2.bmp create mode 100644 tests/Layout/tests/buttons_1_bangle2.js create mode 100644 tests/Layout/tests/buttons_3_bangle1.bmp create mode 100644 tests/Layout/tests/buttons_3_bangle1.js create mode 100644 tests/Layout/tests/buttons_3_bangle2.bmp create mode 100644 tests/Layout/tests/buttons_3_bangle2.js create mode 100644 tests/Layout/tests/buttons_osd_bangle1.bmp create mode 100644 tests/Layout/tests/buttons_osd_bangle1.js create mode 100644 tests/Layout/tests/buttons_osd_bangle2.bmp create mode 100644 tests/Layout/tests/buttons_osd_bangle2.js diff --git a/apps/accellog/app.js b/apps/accellog/app.js index fdb4d52be6..c54c5002be 100644 --- a/apps/accellog/app.js +++ b/apps/accellog/app.js @@ -99,12 +99,12 @@ function startRecord(force) { {type:"txt", id:"time", font:"6x8:2", label:" - ", pad:5, bgCol:g.theme.bg}, {type:"txt", font:"6x8:2", label:"RECORDING", bgCol:"#f00", pad:5, fillx:1}, ] - },[ // Buttons... + },{btns:[ // Buttons... {label:"STOP", cb:()=>{ Bangle.removeListener('accel', accelHandler); showMenu(); }} - ]); + ]}); layout.render(); // now start writing diff --git a/apps/barclock/clock-bar.js b/apps/barclock/clock-bar.js index c2b4bde126..2c6d66e457 100644 --- a/apps/barclock/clock-bar.js +++ b/apps/barclock/clock-bar.js @@ -40,7 +40,7 @@ const layout = new Layout({ {height: 40}, {id: "date", type: "txt", font: "10%", valign: 1}, ], -}, false, {lazy: true}); +}, {lazy: true}); // adjustments based on screen size and whether we display am/pm let thickness; // bar thickness, same as time font "pixel block" size if (is12Hour) { diff --git a/apps/gpsinfo/gps-info.js b/apps/gpsinfo/gps-info.js index 047c1bc175..df888651a9 100644 --- a/apps/gpsinfo/gps-info.js +++ b/apps/gpsinfo/gps-info.js @@ -68,7 +68,7 @@ function onGPS(fix) { {type:"txt", font:"6x8", label:"", fillx:true, id:"time" }, {type:"txt", font:"6x8", label:"", fillx:true, id:"sat" }, {type:"txt", font:"6x8", label:"", fillx:true, id:"maidenhead" }, - ]},[],{lazy:true}); + ]},{lazy:true}); } else { layout = new Layout( { type:"v", c: [ @@ -80,9 +80,9 @@ function onGPS(fix) { {type:"txt", font:"6x8", pad:3, label:"Satellites" } ]}, {type:"txt", font:"6x8", label:"", id:"progress" } - ]},[],{lazy:true}); + ]},{lazy:true}); } - g.clearRect(0,24,g.getWidth(),g.getHeight()); + g.clearRect(0,24,g.getWidth(),g.getHeight()); layout.render(); } lastFix = fix; @@ -103,7 +103,7 @@ function onGPS(fix) { nofix = (nofix+1) % 4; layout.progress.label = ".".repeat(nofix) + " ".repeat(4-nofix); } - layout.render(); + layout.render(); } Bangle.loadWidgets(); diff --git a/apps/speedo/speedo.js b/apps/speedo/speedo.js index 2e729c114e..1d87859a84 100644 --- a/apps/speedo/speedo.js +++ b/apps/speedo/speedo.js @@ -23,7 +23,7 @@ function onGPS(fix) { {type:"txt", font:"10%", label:fix.satellites, pad:2, id:"sat" }, {type:"txt", font:"6x8", pad:3, label:"Satellites" } ]}, - ]},[],{lazy:true}); + ]},{lazy:true}); } else { layout = new Layout( { type:"v", c: [ @@ -34,7 +34,7 @@ function onGPS(fix) { {type:"txt", font:"10%", label:fix.satellites, pad:2, id:"sat" }, {type:"txt", font:"6x8", pad:3, label:"Satellites" } ]}, - ]},[],{lazy:true}); + ]},{lazy:true}); } g.clearRect(0,24,g.getWidth(),g.getHeight()); layout.render(); diff --git a/apps/weather/app.js b/apps/weather/app.js index 6dba141433..6a0852f81e 100644 --- a/apps/weather/app.js +++ b/apps/weather/app.js @@ -35,7 +35,7 @@ var layout = new Layout({type:"v", bgCol: g.theme.bg, c: [ {type: "txt", font: "6x8", pad: 4, id: "updateTime", label: "15 minutes ago"}, ]}, {filly: 1}, -]}, null, {lazy: true}); +]}, {lazy: true}); function formatDuration(millis) { let pluralize = (n, w) => n + " " + w + (n == 1 ? "" : "s"); diff --git a/modules/Layout.js b/modules/Layout.js index 09e2a3d8c5..94abd42fdb 100644 --- a/modules/Layout.js +++ b/modules/Layout.js @@ -4,7 +4,7 @@ Usage: ``` var Layout = require("Layout"); -var layout = new Layout( layoutObject, btns, options ) +var layout = new Layout( layoutObject, options ) layout.render(optionalObject); ``` @@ -47,15 +47,13 @@ layoutObject has: * A `filly` int to choose if the object should fill available space in y. 0=no, 1=yes, 2=2x more space * `width` and `height` fields to optionally specify minimum size -btns is an array of objects containing: - -* `label` - the text on the button -* `cb` - a callback function -* `cbl` - a callback function for long presses - options is an object containing: * `lazy` - a boolean specifying whether to enable automatic lazy rendering +* `btns` - array of objects containing: + * `label` - the text on the button + * `cb` - a callback function + * `cbl` - a callback function for long presses If automatic lazy rendering is enabled, calls to `layout.render()` will attempt to automatically determine what objects have changed or moved, clear their previous locations, and re-render just those objects. @@ -78,9 +76,8 @@ Other functions: */ -function Layout(layout, buttons, options) { +function Layout(layout, options) { this._l = this.l = layout; - this.b = buttons; // Do we have >1 physical buttons? this.physBtns = (process.env.HWVERSION==2) ? 1 : 3; this.yOffset = Object.keys(global.WIDGETS).length ? 24 : 0; @@ -88,7 +85,43 @@ function Layout(layout, buttons, options) { options = options || {}; this.lazy = options.lazy || false; - if (buttons) { + var btnList; + if (process.env.HWVERSION!=2) { + // no touchscreen, find any buttons in 'layout' + btnList = []; + function btnRecurser(l) { + if (l.type=="btn") btnList.push(l); + if (l.c) l.c.forEach(btnRecurser); + } + btnRecurser(layout); + if (btnList.length) { // there are buttons in 'layout' + // disable physical buttons - use them for back/next/select + this.physBtns = 0; + this.buttons = btnList; + this.selectedButton = -1; + Bangle.setUI("updown", dir=>{ + var s = this.selectedButton, l=this.buttons.length; + if (dir===undefined && this.buttons[s]) + return this.buttons[s].cb(); + if (this.buttons[s]) { + delete this.buttons[s].selected; + this.render(this.buttons[s]); + } + s += dir; + if (s<0) s+=lh; + if (s>=l) s-=l; + if (this.buttons[s]) { + this.buttons[s].selected = 1; + this.render(this.buttons[s]); + } + this.selectedButton = s; + }); + } + } + + if (options.btns) { + var buttons = options.btns; + this.b = buttons; if (this.physBtns >= buttons.length) { // Handler for button watch events function pressHandler(btn,e) { @@ -114,12 +147,14 @@ function Layout(layout, buttons, options) { {type:"v", pad:1, filly:1, c: buttons.map(b=>(b.type="txt",b.font="6x8",b.height=btnHeight,b.r=1,b))} ]}; } else { - let btnHeight = Math.floor((g.getHeight()-this.yOffset) / buttons.length); - this._l.width = g.getWidth()-20; // button width + // add 'soft' buttons + this._l.width = g.getWidth()-32; // button width this._l = {type:"h", c: [ this._l, - {type:"v", c: buttons.map(b=>(b.type="btn",b.h=btnHeight,b.w=32,b.r=1,b))} + {type:"v", c: buttons.map(b=>(b.type="btn",b.filly=1,b.width=32,b.r=1,b))} ]}; + // if we're selecting with physical buttons, add these to the list + if (btnList) btnList.push.apply(btnList, this._l.c[1].c); } } if (process.env.HWVERSION==2) { @@ -233,7 +268,7 @@ Layout.prototype.render = function (l) { x,y+h-5, x,y+4 ]; - g.setColor(g.theme.bgH).fillPoly(poly).setColor(l.selected ? g.theme.fgH : g.theme.fg).drawPoly(poly).setFont("4x6",2).setFontAlign(0,0,l.r).drawString(l.label,l.x+l.w/2,l.y+l.h/2); + g.setColor(l.selected?g.theme.bgH:g.theme.bg2).fillPoly(poly).setColor(l.selected ? g.theme.fgH : g.theme.fg2).drawPoly(poly).setFont("6x8",2).setFontAlign(0,0,l.r).drawString(l.label,l.x+l.w/2,l.y+l.h/2); }, "img":function(l){ g.drawImage(l.src(), l.x + (0|l.pad), l.y + (0|l.pad)); }, "custom":function(l){ @@ -347,8 +382,8 @@ Layout.prototype.update = function() { l._w = g.stringWidth(l.label); } }, "btn": function(l) { - l._h = 24; - l._w = 14 + l.label.length*8; + l._h = 32; + l._w = 20 + l.label.length*12; }, "img": function(l) { var src = l.src(); // get width and height out of image if (src[0]) { @@ -407,5 +442,3 @@ Layout.prototype.clear = function(l) { if (l.bgCol!==undefined) g.setBgColor(l.bgCol); g.clearRect(l.x,l.y,l.x+l.w-1,l.y+l.h-1); }; - -exports = Layout; diff --git a/tests/Layout/bin/runtest.sh b/tests/Layout/bin/runtest.sh index 5ce2ab21fa..c85b3fe6cf 100755 --- a/tests/Layout/bin/runtest.sh +++ b/tests/Layout/bin/runtest.sh @@ -1,7 +1,7 @@ #!/bin/bash # Requires Linux x64 (for ./espruino) # Also imagemagick for display - + cd `dirname $0`/.. if [ "$#" -ne 1 ]; then echo "USAGE:" @@ -19,7 +19,7 @@ SRCBMP=$SRCDIR/`basename $SRCJS .js`.bmp echo "TEST $SRCJS ($SRCBMP)" cat ../../modules/Layout.js > $TESTJS -echo 'Bangle = {};BTN1=0;process.env = process.env;process.env.HWVERSION=2;' >> $TESTJS +echo 'Bangle = { setUI : function(){} };BTN1=0;process.env = process.env;process.env.HWVERSION=2;' >> $TESTJS echo 'g = Graphics.createArrayBuffer(176,176,4);' >> $TESTJS cat $SRCJS >> $TESTJS || exit 1 echo 'layout.render()' >> $TESTJS @@ -39,5 +39,3 @@ else echo Files are the same exit 0 fi - - diff --git a/tests/Layout/tests/accellog.js b/tests/Layout/tests/accellog.js index 4ae865f4fa..63b2ab4103 100644 --- a/tests/Layout/tests/accellog.js +++ b/tests/Layout/tests/accellog.js @@ -6,8 +6,8 @@ var layout = new Layout({ type: "v", c: [ {type:"txt", id:"time", font:"6x8:2", label:" - ", pad:5}, {type:"txt", font:"6x8:2", label:"RECORDING", bgCol:"#f00", pad:5, fillx:1}, ] -},[ // Buttons... +}{btns:[ // Buttons... {label:"STOP", cb:()=>{}} -]); +]}); layout.samples.label = "123"; layout.time.label = "123s"; diff --git a/tests/Layout/tests/buttons_1_bangle1.bmp b/tests/Layout/tests/buttons_1_bangle1.bmp new file mode 100644 index 0000000000000000000000000000000000000000..8da6d1e8a10ce5e36176da7a3d23242f576f46af GIT binary patch literal 28874 zcmeI(!D+)V6adg)=&|5cGD0Xl6}m$Y8K7fi1dq@WGD7JD9YaSS0;-gxK7<@>kzi<^ zLV|20|Nozaor|B}zCYs7Ud!)O`KI!Dh{t+v{j%O}x4YeLwdrH^9-D~I82b2%D93#a z5kIjRVm}P~($@$OAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs z0RjXF5FkK+009C72oRVi(4}ePu01Ms*S_Mk>)l!0obxo7e=@4e%k1YAv-fj%oYLjU zxu#t@^ILn|)6A~C#n;dp;>K}lYN4g%`u1Q$YgylPh*UG~>LNA8ZAkTRc~dPmr6`@6A>b2{8|Ztr>? zVX3%{kCXHC9TOlxfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk S1PBlyK!5-N0t5)$ufQ*2@=YoL literal 0 HcmV?d00001 diff --git a/tests/Layout/tests/buttons_1_bangle1.js b/tests/Layout/tests/buttons_1_bangle1.js new file mode 100644 index 0000000000..fb6fb29fa7 --- /dev/null +++ b/tests/Layout/tests/buttons_1_bangle1.js @@ -0,0 +1,9 @@ +var BTN2 = 1, BTN3=2; +process.env = process.env;process.env.HWVERSION=1; +g = Graphics.createArrayBuffer(240,240,4); + +var layout = new Layout({ type: "v", c: [ + {type:"txt", font:"6x8", label:"A test"}, +]},{btns:[ // Buttons... + {label:"STOP", cb:()=>{}}, +]}); diff --git a/tests/Layout/tests/buttons_1_bangle2.bmp b/tests/Layout/tests/buttons_1_bangle2.bmp new file mode 100644 index 0000000000000000000000000000000000000000..2e4d1a2567b5a549702915a933b08c90709f984a GIT binary patch literal 15562 zcmeIzv1!9V7{&1yNEx_QJU|K)QU$U@3Js$XG(yUh8X;tYjB(`^hRb)7qrw>72j+tW z{%34X^7;AcC&_+#{d&|gUhMV3o*(wO(|y}_d_IojIM4H8m~?p4Aib+h`jl*YQjxwj z6rD;r*_?p@0tg_000IagfB*srAbmjRqJ*0I>s)p8T*rY%Fx#yKht^;)BYNcvLt#bC|dVKTJur){x&DFOrrC;9M z%GT^@(o(zU?Yv^ExlQ&v^>f$HZ*kjXFE{Rf^Y-0qckR8X+-u);`@Xopix`Kz+(Ne> w_hmvUw2iV|Db^rhX literal 0 HcmV?d00001 diff --git a/tests/Layout/tests/buttons_1_bangle2.js b/tests/Layout/tests/buttons_1_bangle2.js new file mode 100644 index 0000000000..74b6c96afd --- /dev/null +++ b/tests/Layout/tests/buttons_1_bangle2.js @@ -0,0 +1,6 @@ + +var layout = new Layout({ type: "v", c: [ + {type:"txt", font:"6x8", label:"A test"}, +]},{btns:[ // Buttons... + {label:"STOP", cb:()=>{}}, +]}); diff --git a/tests/Layout/tests/buttons_3_bangle1.bmp b/tests/Layout/tests/buttons_3_bangle1.bmp new file mode 100644 index 0000000000000000000000000000000000000000..4edc88d08e59157613ebf50cc7cde4e9f1b7f154 GIT binary patch literal 28874 zcmeI(&1u6h6ae5?=&|5cGD0Xl6}m$Y8K7figpAM;GD7JD9YaSS0;-&(J_U?Lj0*k~ z5)}XF>3tSX4$seT-yd;qujTWpyi<8S#N)7S`?B5d_s8RLvpdA*J$4bF(I4U~qI^F@ zAMq2rK2CjqDt(Or0RjXF5FkK+009C72oNAZfWU-6m(s)$%j`~Fx6Hs3qpmG(&Ur$_ zZUO`d5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV6Rg=-Sj#L~2tzQ47im#$o#Er|P84@ii4^IzPw3_RCDHR)Ld@kOq zid!+&zssA3WOJ&S`4DyXy1Je*ra5-ze5V pnp&~Dq|qvHY7}@~Vehg;3_^ea0RjXF5FkK+009C72oPv2@Cz$nTPpwn literal 0 HcmV?d00001 diff --git a/tests/Layout/tests/buttons_3_bangle1.js b/tests/Layout/tests/buttons_3_bangle1.js new file mode 100644 index 0000000000..c8346f449c --- /dev/null +++ b/tests/Layout/tests/buttons_3_bangle1.js @@ -0,0 +1,11 @@ +var BTN2 = 1, BTN3=2; +process.env = process.env;process.env.HWVERSION=1; +g = Graphics.createArrayBuffer(240,240,4); + +var layout = new Layout({ type: "v", c: [ + {type:"txt", font:"6x8", label:"A test"}, +]},{btns:[ // Buttons... + {label:"A", cb:()=>{}}, + {label:"STOP", cb:()=>{}}, + {label:"B", cb:()=>{}}, +]}); diff --git a/tests/Layout/tests/buttons_3_bangle2.bmp b/tests/Layout/tests/buttons_3_bangle2.bmp new file mode 100644 index 0000000000000000000000000000000000000000..4b9fa5b42b5e628d1a19a3cc5d1fd73f7bf59d28 GIT binary patch literal 15562 zcmeI1K~BRk5Jd-xB~q@^1F)zNDW}2yhC?@PXIhV zKnL&*yADoWcfzvP)@Pd*6FE)JYV(8Z$_&MVT*Vb67UdeS0EsZ`$<8J1TnE=7A4Tp5 z_rq^LG=1AdXDH9VMqJFbp@enwbuN$#ZcX2KixyH>_Ja{O4M5#|olE|89bAXO1Af0l zLWqe*$dU$3b%~KglxkSkfT38BtkRldww&+Rv|nmt#I@3aNy>sOU0~69L1Iyg01K4_ zNQ7BvRB+n4B$DgkI^@H}{osC>^8>Ev!)f*T*N7We^alAlm&|cnIy6S>c`Ghy9QNwt zZ9pq?gAf+;gAo_qi_*s3pvTo8boGCd+tNb?d{o@GJuaQ7rxz5f(1Ez<#Mq`iZ^;U7 z6PI_0Lr-G4fD1)FYa$7Em^h}R#vSCvOyh5mczKIDq_58=L7I(~&sL=z#;TVtF4UWF zQz5m^N-1B1@fPDaH`Rou%hn#O9C5k12S&P`Hom^9h_@B|GK`eFL}U92Qkrz zFq8l43ydV9)YDQ6hGIcdomC~H_l3CHP1~x(<{Me*z$9fs=JO~#D@ZI#A!4?g0EsZO zO^QxBmt=AsT!(zXxF2rV57V++c^zQI#dX{8P+NOmH{*tf@#qlse66@QrSI5l+WJ~? z)5NLmhmq`DQo?m`9mX*cKL4#B#D$C7wOpdgG9!s7l_*x7p;!=Bt^Odby2G2>A3S-) A-T(jq literal 0 HcmV?d00001 diff --git a/tests/Layout/tests/buttons_3_bangle2.js b/tests/Layout/tests/buttons_3_bangle2.js new file mode 100644 index 0000000000..bf70fcb38c --- /dev/null +++ b/tests/Layout/tests/buttons_3_bangle2.js @@ -0,0 +1,8 @@ + +var layout = new Layout({ type: "v", c: [ + {type:"txt", font:"6x8", label:"A test"}, +]},{btns:[ // Buttons... + {label:"A", cb:()=>{}}, + {label:"STOP", cb:()=>{}}, + {label:"B", cb:()=>{}}, +]}); diff --git a/tests/Layout/tests/buttons_osd_bangle1.bmp b/tests/Layout/tests/buttons_osd_bangle1.bmp new file mode 100644 index 0000000000000000000000000000000000000000..72307538590627e10d4ef5495ae491ec376d4116 GIT binary patch literal 28874 zcmeHP(QOlF3tj2M+>U^BGF|z6$t8tvIIv=NPjI27xY8+>)&c|sRBdgA_8pqjdbv|9s zC(K~-=Y>VQQ0s{bo?EZ-9(MsbWLm}VZGQ2QjxBxidS1l4t)jX0D(|MiLDt&$!BCX0 zt02W#L+5v_o*bI$%qcUrUv(aoUK zd!VsrE)U$$&@KWxZ#Wd)HbO@a0hkIk_RJv-=0#*z7g1nKJ+2>_Y0#R*LeLkRqFaJb z(AXyZ2t$L`ECQl0Hbu7tpP;c#`Uwk_w`LL0j$d&rEV?E5GkN3nQ|5(A$e~yWlxx2M zuE}CoDdD+;1GfxU(WAvy=N zxxAqoYfz0t(%7bpE^yXeYS7KlAAP zNGC5B&J(&3?#7#{#H|?{4v35A{9QkruauVsC=;{kN_p{a4lnbjhRy1&^RCjFohVjG z9AMKWyz2GK#+PYppMR^oJIk%!=lHa_y8c7n`u(IArR7)`PwQPm>#^{-iZ@AuKN(&xPnC?kN#5|d zPP(lnB^6JK_11a0@FJ%jm)H3gg?J$XG0rWaH|xA5_=H%u9i zQJwoWlpv_i5|#RWROfyTB?#HONG7`kVW&^Rlx49KQWTa@B}s_F_dCTmxl2BAu<9(9 zs>@Mz?vhU&tU8OO>T*<_yW|rGFV#7Gz2Eq-UR>R+Bi6f$7rvCB9|xXX??PVtr5DV? z?9YSnV-#z6-_`v3)jWHCSMhG!$?Wy)nU&WoG5EOjeQ>Kq=XcX$sHO8eR8AI5b!Md* zI-oiam6HWiompvy4yevU73ozWNEPJ_75aXSr+~1JVHX1B*DiF8A-oq{|o4F Bg#7>j literal 0 HcmV?d00001 diff --git a/tests/Layout/tests/buttons_osd_bangle1.js b/tests/Layout/tests/buttons_osd_bangle1.js new file mode 100644 index 0000000000..108cb62b02 --- /dev/null +++ b/tests/Layout/tests/buttons_osd_bangle1.js @@ -0,0 +1,17 @@ +var BTN2 = 1, BTN3=2; +process.env = process.env;process.env.HWVERSION=1; +g = Graphics.createArrayBuffer(240,240,4); + +/* When displaying OSD buttons on Bangle.js 1 we should turn +the side buttons into 'soft' buttons and then use the physical +buttons for up/down selection */ + +var layout = new Layout({ type: "v", c: [ + {type:"txt", font:"6x8", label:"A test"}, + {type:"btn", label:"Button 1"}, + {type:"btn", label:"Button 2"} +]},{btns:[ // Buttons... + {label:"A", cb:()=>{}}, + {label:"STOP", cb:()=>{}}, + {label:"B", cb:()=>{}}, +]}); diff --git a/tests/Layout/tests/buttons_osd_bangle2.bmp b/tests/Layout/tests/buttons_osd_bangle2.bmp new file mode 100644 index 0000000000000000000000000000000000000000..397c9e8717da077fd2fe17f01b98755b5e8d1ccb GIT binary patch literal 15562 zcmeI2OO6yV3_yd#5~;5;2VgNmtdO_^i#g03VUEC(QyYL=$kDni(pPye}Umu=c!o#=l6vFp# zdI>*6fa8~N3gLHnI)%5>=?&yjpL6yZ#RSeFXC3o{>tus6L9XIDl8JH+*nwP_%gKw& zwOe&qb;x(o>W9@2+kQBlj|b|E!S~-uT*&pn36ITpaRYb3z15c<(J=MF{V<7}HsIKN z7nl2Y)nU~k_P~1H;X=3@jVnvqFx`?NxhUPR%)y{ckj&^3F?*dqU*cc#nZ%t{2UAiL zq;!H!dPg!*ng9hO2TEb`vbW0`rNm7E)U-uVoC@rvIHzx6qD{$P^fI^d)K2n|IW7p# zsnxA26aWQv6{iLTKtZi;RiOYVsH-?NC;$p-b*l;mKtWx_sX+l?)VR&SAx(Th8W`{> z@@PYnYyfc;CZkTkhzA1-#RDEi&rU9R#=ICoBWt3b$h?T6NsQKLFlyt^t~44wx$z>3 z20&{x7`5?dR~n6;eW@}i8UU|t)W-ipF1*oix%u_k=YlUA_5U$Ons9j?u#>3E zNSVoamRTPJmC;$rTYq(~=4XQ8Zb2~2XUQtHRTxZlcjuza2cM5 z%j?TMmpYGoHd^CB6iq+qvTc*=x$!N)wO`DRqjEx$R>~wwvS9O_#Dy*Feh<05pH=de z6EOMyORgkTnY;6?@MQU}xp*(5+q&)xIUPB@=2;pkK0kQwnCIV=jpnIBT5FLcU7uIN z;U@0?XlxC@n#5I$%Y+W@kxvf(tHk+8KPYg%CIPp$moIa{f_#p9rup{;h1)Ye(5(k7 z;GGQQJ<~oekzjztA?0D*SYF7K{_0ncsjD1x)R(!MrV4^Ga}Sps6{mvX$w4<)94qs^ zab1;M`jwO2TQ(#YWzVm+W>6+b&9kze-wZ3JUCWcWv+7_@0wo*$Jp@12 zn8UrR`bsy9uJ0^v+B>8BLCA~Cl~{FHb&x%Q^MBh9?!?{WT3(_~*^pe6PLwe>C={}}, + {label:"STOP", cb:()=>{}}, + {label:"B", cb:()=>{}}, +]}); diff --git a/tests/Layout/tests/padding.bmp b/tests/Layout/tests/padding.bmp index b2d192750fc3d6e454e2216e58e42dc4b5c3d000..84ae4dc1bcdebea1b531156b07448700812f843a 100644 GIT binary patch literal 15562 zcmeI2F>BjE6vwYnXi7u+Rq_Ekgwm+gtw3wX zY~4gR+aS39-#b~BW1Vg3J%yOuvn`zt>*v4!_xw&i`{kQoFAT?PYil(ib`?jFwNX5d2pY!`jwxbm`*JO2^6Y9nCKhP?0yP(hQZDNyE^dwsu>vk%+2jB) zk~a+>`s=N^aF$FUqvLw$Y;PZ!Tjc||w?e45;zH~ay63q0vU7d^>ik`QzV8_;xrXD} zS*JL0XRY7fE%#@$fVuL>J>P_SFR1d`<(W-^%TokbNK|xJDAPoN+d8vpaG??9oMk(` znAyZ!j8)srCg!?)Se$;KU5UFivvuJ9XqK_MNOI?g<&Wa#`Fnvn=9%B5T$+1OBymSw zryWNeNx8oHP0XF?h1gmzS~4!i$}_*oxHC5^TkD-vuLIeZ`Awwvy#B(vLF4!4`FrkG z1h9mGi>ln_v{FKACDfoE^rKz%bm8)XPM$Lm9OeQSTr4KD_zKyLA$yy>&3Xc2Z9u7SD&zk1ai5F0Ub!r| zzYkuy#z1i3Vl*F~5A=DXG^Wk$q2a?|+=fn7y?4WPW-H{`?7dfeJ?=t2Sk4Lkd{E>z z#|>tXA1Zo>;2MyX=^cp6b}nrmUY%UBfIA+P4{5sx)QbzL{?`wQ_re7BO1NIZ zkSpP0<*+?~6>;f&UkLp5A-O+rojpB$XnrQ1%$B6yHGAdlz;zxD=|fRq@bt&+$e6!F zaBqrYZwM~^A!Mt#dpCpVJt~Sp#w{8s&s^ov&)>jB=^3K#>{hG4_3lzWPY@w+osZk- z1O0Nt|4gO-b6mRjA>EP>^e0;048g^(D}>k8i{G)FW@Rq0`g$>FZrtc!PMSWz)p;o9 b!yJlM;5s|*xewAh5Y7({1P6ixTkXJq)aC)t delta 755 zcmX?Ad8%^5B-Y6fv@Nk>1vak9uUI2Dzh-3;pRB;fI{BlF#N> z5(8-lOMYNL0sP34^HHRL9FSI+PBe`S3?QvwH~p6rWd^DwmJM_U$fE!MK?Dea7$B>l zHW8MDXakynO($MSkOm;et`n~$USsh}LhZxpPmp6!B`4zuQBVZpj0TY8d{9Ut17N7a gf)zt6O4Q>_G=x$dRNj4argowr*0c;tJ~hToMDtinz373bs&k`bE?q&G8f?v`81%KiU80|NsP|7Z9=d84ArtE9h;Q+-nlC Jxz@;+3jnVndfNa1