From 8aa839be26dfca48c32381659d7d31e9cc5acf7d Mon Sep 17 00:00:00 2001 From: Rob Pilling Date: Tue, 10 Sep 2024 22:05:03 +0100 Subject: [PATCH 1/3] promenu: factor out `drawLine()` --- apps/promenu/bootb2.ts | 80 ++++++++++++++++++++++++------------------ 1 file changed, 45 insertions(+), 35 deletions(-) diff --git a/apps/promenu/bootb2.ts b/apps/promenu/bootb2.ts index 11ae56e1bf..1b4781b6cb 100644 --- a/apps/promenu/bootb2.ts +++ b/apps/promenu/bootb2.ts @@ -39,6 +39,49 @@ E.showMenu = (items?: Menu): MenuInstance => { scroll: selected, }; + const drawLine = ( + name: string, + v: string, + item: ActualMenuItem, + idx: number, + x: number, + y: number, + ) => { + const hl = (idx === selected && !selectEdit); + if(g.theme.dark){ + fillRectRnd(x, y, x2, y + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg + 40); + }else{ + fillRectRnd(x, y, x2, y + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg - 20); + } + + g.setFont12x20() + .setColor(hl ? g.theme.fgH : g.theme.fg) + .setFontAlign(-1, -1); + + const vplain = v.indexOf("\0") < 0; + if(vplain && name.length >= 17 - v.length && typeof item === "object"){ + g.drawString(name.substring(0, 12 - v.length) + "...", x + 3.7, y + 2.7); + }else if(vplain && name.length >= 15){ + g.drawString(name.substring(0, 15) + "...", x + 3.7, y + 2.7); + }else{ + g.drawString(name, x + 3.7, y + 2.7); + } + + let xo = x2; + if (selectEdit && idx === selected) { + xo -= 24 + 1; + g.setColor(g.theme.fgH) + .drawImage( + "\x0c\x05\x81\x00 \x07\x00\xF9\xF0\x0E\x00@", + xo, + y + (fontHeight - 10) / 2, + {scale:2}, + ); + } + g.setFontAlign(1, -1); + g.drawString(v, xo - 2, y + 1); + }; + const l = { draw: (rowmin?: number, rowmax?: number) => { let rows = 0|Math.min((y2 - y) / fontHeight, menuItems.length); @@ -66,17 +109,7 @@ E.showMenu = (items?: Menu): MenuInstance => { const name = menuItems[idx]; const item = items![name]! as ActualMenuItem; - const hl = (idx === selected && !selectEdit); - if(g.theme.dark){ - fillRectRnd(x, iy, x2, iy + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg + 40); - }else{ - fillRectRnd(x, iy, x2, iy + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg - 20); - } - - g.setColor(hl ? g.theme.fgH : g.theme.fg); - g.setFontAlign( - 1, -1); - - let v; + let v: string; if (typeof item === "object") { v = "format" in item ? (item.format as any)(item.value) // format(), value: T @@ -86,30 +119,7 @@ E.showMenu = (items?: Menu): MenuInstance => { v = ""; } - /*???*/{ - const vplain = v.indexOf("\0") < 0; - if(vplain && name.length >= 17 - v.length && typeof item === "object"){ - g.drawString(name.substring(0, 12 - v.length) + "...", x + 3.7, iy + 2.7); - }else if(vplain && name.length >= 15){ - g.drawString(name.substring(0, 15) + "...", x + 3.7, iy + 2.7); - }else{ - g.drawString(name, x + 3.7, iy + 2.7); - } - - let xo = x2; - if (selectEdit && idx === selected) { - xo -= 24 + 1; - g.setColor(g.theme.fgH) - .drawImage( - "\x0c\x05\x81\x00 \x07\x00\xF9\xF0\x0E\x00@", - xo, - iy + (fontHeight - 10) / 2, - {scale:2}, - ); - } - g.setFontAlign(1, -1); - g.drawString(v, xo - 2, iy + 1); - } + drawLine(name, v, item, idx, x, iy); g.setColor(g.theme.fg); iy += fontHeight; From 4061b419c61af1f8815147b61db6843e83341f27 Mon Sep 17 00:00:00 2001 From: Rob Pilling Date: Thu, 12 Sep 2024 18:22:37 +0100 Subject: [PATCH 2/3] promenu: scroll truncated menu lines --- apps/promenu/bootb2.ts | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/apps/promenu/bootb2.ts b/apps/promenu/bootb2.ts index 1b4781b6cb..269bbdffa0 100644 --- a/apps/promenu/bootb2.ts +++ b/apps/promenu/bootb2.ts @@ -38,6 +38,7 @@ E.showMenu = (items?: Menu): MenuInstance => { const scroller = { scroll: selected, }; + let nameScroller: IntervalId | null = null; const drawLine = ( name: string, @@ -46,6 +47,7 @@ E.showMenu = (items?: Menu): MenuInstance => { idx: number, x: number, y: number, + nameScroll: number = 0, ) => { const hl = (idx === selected && !selectEdit); if(g.theme.dark){ @@ -59,12 +61,14 @@ E.showMenu = (items?: Menu): MenuInstance => { .setFontAlign(-1, -1); const vplain = v.indexOf("\0") < 0; + let truncated = true; if(vplain && name.length >= 17 - v.length && typeof item === "object"){ - g.drawString(name.substring(0, 12 - v.length) + "...", x + 3.7, y + 2.7); + g.drawString(name.substring(nameScroll, nameScroll + 12 - v.length) + "...", x + 3.7, y + 2.7); }else if(vplain && name.length >= 15){ - g.drawString(name.substring(0, 15) + "...", x + 3.7, y + 2.7); + g.drawString(name.substring(nameScroll, nameScroll + 15) + "...", x + 3.7, y + 2.7); }else{ g.drawString(name, x + 3.7, y + 2.7); + truncated = false; } let xo = x2; @@ -80,10 +84,13 @@ E.showMenu = (items?: Menu): MenuInstance => { } g.setFontAlign(1, -1); g.drawString(v, xo - 2, y + 1); + + return truncated; }; const l = { draw: (rowmin?: number, rowmax?: number) => { + if (nameScroller) clearInterval(nameScroller), nameScroller = null; let rows = 0|Math.min((y2 - y) / fontHeight, menuItems.length); let idx = E.clip(selected - (rows>>1), 0, menuItems.length - rows); @@ -119,7 +126,22 @@ E.showMenu = (items?: Menu): MenuInstance => { v = ""; } - drawLine(name, v, item, idx, x, iy); + const truncated = drawLine(name, v, item, idx, x, iy, 0); + if (truncated && idx === selected){ + let nameScroll = 0; + nameScroller = setInterval(( + name: string, + v: string, + item: ActualMenuItem, + idx: number, + x: number, + iy: number, + ) => { + drawLine(name, v, item, idx, x, iy, nameScroll); + nameScroll += 1; + if (nameScroll >= name.length - 5) nameScroll = 0; + }, 300, name, v, item, idx, x, iy); + } g.setColor(g.theme.fg); iy += fontHeight; @@ -201,6 +223,7 @@ E.showMenu = (items?: Menu): MenuInstance => { mode: "updown", back, remove: () => { + if (nameScroller) clearInterval(nameScroller); Bangle.removeListener("swipe", onSwipe); }, } as SetUIArg<"updown">, From aa6e46898f1d605fe1394b8b6abe159ce52b3ef3 Mon Sep 17 00:00:00 2001 From: Rob Pilling Date: Thu, 12 Sep 2024 18:22:47 +0100 Subject: [PATCH 3/3] promenu: generate js --- apps/promenu/bootb2.js | 81 +++++++++++++++++++++++++++--------------- 1 file changed, 52 insertions(+), 29 deletions(-) diff --git a/apps/promenu/bootb2.js b/apps/promenu/bootb2.js index 434f0c07f2..c066cae35a 100644 --- a/apps/promenu/bootb2.js +++ b/apps/promenu/bootb2.js @@ -31,8 +31,45 @@ E.showMenu = function (items) { var scroller = { scroll: selected, }; + var nameScroller = null; + var drawLine = function (name, v, item, idx, x, y, nameScroll) { + if (nameScroll === void 0) { nameScroll = 0; } + var hl = (idx === selected && !selectEdit); + if (g.theme.dark) { + fillRectRnd(x, y, x2, y + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg + 40); + } + else { + fillRectRnd(x, y, x2, y + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg - 20); + } + g.setFont12x20() + .setColor(hl ? g.theme.fgH : g.theme.fg) + .setFontAlign(-1, -1); + var vplain = v.indexOf("\0") < 0; + var truncated = true; + if (vplain && name.length >= 17 - v.length && typeof item === "object") { + g.drawString(name.substring(nameScroll, nameScroll + 12 - v.length) + "...", x + 3.7, y + 2.7); + } + else if (vplain && name.length >= 15) { + g.drawString(name.substring(nameScroll, nameScroll + 15) + "...", x + 3.7, y + 2.7); + } + else { + g.drawString(name, x + 3.7, y + 2.7); + truncated = false; + } + var xo = x2; + if (selectEdit && idx === selected) { + xo -= 24 + 1; + g.setColor(g.theme.fgH) + .drawImage("\x0c\x05\x81\x00 \x07\x00\xF9\xF0\x0E\x00@", xo, y + (fontHeight - 10) / 2, { scale: 2 }); + } + g.setFontAlign(1, -1); + g.drawString(v, xo - 2, y + 1); + return truncated; + }; var l = { draw: function (rowmin, rowmax) { + if (nameScroller) + clearInterval(nameScroller), nameScroller = null; var rows = 0 | Math.min((y2 - y) / fontHeight, menuItems.length); var idx = E.clip(selected - (rows >> 1), 0, menuItems.length - rows); if (idx != lastIdx) @@ -55,18 +92,9 @@ E.showMenu = function (items) { rows = 1 + rowmax - rowmin; } } - while (rows--) { + var _loop_1 = function () { var name = menuItems[idx]; var item = items[name]; - var hl = (idx === selected && !selectEdit); - if (g.theme.dark) { - fillRectRnd(x, iy, x2, iy + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg + 40); - } - else { - fillRectRnd(x, iy, x2, iy + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg - 20); - } - g.setColor(hl ? g.theme.fgH : g.theme.fg); - g.setFontAlign(-1, -1); var v = void 0; if (typeof item === "object") { v = "format" in item @@ -78,29 +106,22 @@ E.showMenu = function (items) { else { v = ""; } - { - var vplain = v.indexOf("\0") < 0; - if (vplain && name.length >= 17 - v.length && typeof item === "object") { - g.drawString(name.substring(0, 12 - v.length) + "...", x + 3.7, iy + 2.7); - } - else if (vplain && name.length >= 15) { - g.drawString(name.substring(0, 15) + "...", x + 3.7, iy + 2.7); - } - else { - g.drawString(name, x + 3.7, iy + 2.7); - } - var xo = x2; - if (selectEdit && idx === selected) { - xo -= 24 + 1; - g.setColor(g.theme.fgH) - .drawImage("\x0c\x05\x81\x00 \x07\x00\xF9\xF0\x0E\x00@", xo, iy + (fontHeight - 10) / 2, { scale: 2 }); - } - g.setFontAlign(1, -1); - g.drawString(v, xo - 2, iy + 1); + var truncated = drawLine(name, v, item, idx, x, iy, 0); + if (truncated && idx === selected) { + var nameScroll_1 = 0; + nameScroller = setInterval(function (name, v, item, idx, x, iy) { + drawLine(name, v, item, idx, x, iy, nameScroll_1); + nameScroll_1 += 1; + if (nameScroll_1 >= name.length - 5) + nameScroll_1 = 0; + }, 300, name, v, item, idx, x, iy); } g.setColor(g.theme.fg); iy += fontHeight; idx++; + }; + while (rows--) { + _loop_1(); } g.setFontAlign(-1, -1); g.setColor((idx < menuItems.length) ? g.theme.fg : g.theme.bg).fillPoly([72, 166, 104, 166, 88, 174]); @@ -170,6 +191,8 @@ E.showMenu = function (items) { mode: "updown", back: back, remove: function () { + if (nameScroller) + clearInterval(nameScroller); Bangle.removeListener("swipe", onSwipe); }, }, function (dir) {