made cutelauncher use scroll menu

apps/cutelauncher/app.js

@@ -36,129 +36,58 @@
     }
     let apps = launchCache.apps;
     apps.forEach((app) => {
-        if (app.icon) app.icon = s.read(app.icon); // should just be a link to a memory area
+        if (app.icon) app.icon = s.read(app.icon);
         else app.icon = s.read('placeholder.img');
     });
 
-    let Napps = apps.length;
-    let Npages = Math.ceil(Napps / 4);
-    let maxPage = Npages - 1;
-    let selected = -1;
-    let oldselected = -1;
-    let page = 0;
-
     require('Font8x16').add(Graphics);
     Bangle.drawWidgets = () => { };
     Bangle.loadWidgets = () => { };
 
-    let drawIcon = function (p, n, selected) {
+    const ITEM_HEIGHT = 88;
-        let coords = { x: (n % 2) * 88, y: n > 1 ? 88 : 0, w: 88, h: 88 };
-        if (selected) {
-            g.setColor(g.theme.bgH).fillRect(coords);
-            g.setColor(g.theme.fgH);
-        } else {
-            g.setColor(g.theme.bg).fillRect(coords);
-            g.setColor(g.theme.fg);
-        }
 
-        try {
+    let scroller = E.showScroller({
-            let icon = apps[p * 4 + n].icon;
+        h: ITEM_HEIGHT,
+        c: apps.length,
+        draw: (idx, rect) => {
+            g.setColor(g.theme.fg);
+            g.setFontAlign(0, -1, 0).setFont('8x16');
+
+            // Calculate icon dimensions
+            let icon = apps[idx].icon;
             let iconWidth = icon.width || 48;
             let iconHeight = icon.height || 48;
             let maxSize = 48;
             let scale = Math.min(maxSize / iconWidth, maxSize / iconHeight);
-            let scaledWidth = Math.floor(iconWidth * scale);
             let scaledHeight = Math.floor(iconHeight * scale);
 
-            // Get text height to center everything
+            // Center the icon horizontally
-            g.setFontAlign(0, -1, 0).setFont('8x16');
+            let iconX = rect.x + (rect.w - iconWidth) / 2;
-            let text = g.wrapString(apps[p * 4 + n].name, 88).join('\n');
+            g.drawImage(icon, iconX, rect.y);
-            let textHeight = text.split('\n').length * 16;
 
-            let totalHeight = scaledHeight + 4 + textHeight; // 4px padding between icon and text
+            // Draw app name
-            let startY = coords.y + (88 - totalHeight) / 2;
+            let text = g.wrapString(apps[idx].name, rect.w).join('\n');
 
-            // Draw icon centered horizontally and as part of vertical group
+            // Position text below icon with padding
-            let iconX = coords.x + (88 - scaledWidth) / 2;
+            let textY = rect.y + scaledHeight + 4;
-            let iconY = startY;
+            g.drawString(text, rect.x + rect.w / 2, textY);
-            g.drawImage(icon, iconX, iconY, { scale: scale });
+        },
-
+        select: (idx) => {
-            // Draw text below icon
+            // Launch the selected app
-            g.drawString(text, coords.x + coords.w / 2, startY + scaledHeight + 4);
+            load(apps[idx].src);
-        } catch (e) { }
+        },
-    };
-
-    let drawPage = function (p) {
-        g.reset();
-        g.setColor(g.theme.bg).fillRect(0, 0, 175, 175);
-        for (let i = 0; i < 4; i++) {
-            if (!apps[p * 4 + i]) return i;
-            drawIcon(p, i, selected == i && !settings.direct);
-        }
-        g.flip();
-    };
-
-    drawPage(0);
-
-    let swipeListenerDt = function (dirLeftRight, dirUpDown) {
-        updateTimeoutToClock();
-        selected = -1;
-        oldselected = -1;
-        if (settings.swipeExit && dirLeftRight == 1) Bangle.showClock();
-        if (dirUpDown == -1 || dirLeftRight == -1) {
-            ++page;
-            if (page > maxPage) page = 0;
-            drawPage(page);
-        } else if (dirUpDown == 1 || (dirLeftRight == 1 && !settings.swipeExit)) {
-            --page;
-            if (page < 0) page = maxPage;
-            drawPage(page);
-        }
-    };
-
-    let isTouched = function (p, n) {
-        if (n < 0 || n > 3) return false;
-        let x1 = (n % 2) * 88;
-        let y1 = n > 1 ? 88 : 0;
-        let x2 = x1 + 88;
-        let y2 = y1 + 88;
-        return p.x > x1 && p.y > y1 && p.x < x2 && p.y < y2;
-    };
-
-    let touchListenerDt = function (_, p) {
-        updateTimeoutToClock();
-        let i;
-        for (i = 0; i < 4; i++) {
-            if (page * 4 + i < Napps) {
-                if (isTouched(p, i)) {
-                    drawIcon(page, i, true && !settings.direct);
-                    if (selected >= 0 || settings.direct) {
-                        if (selected != i && !settings.direct) {
-                            drawIcon(page, selected, false);
-                        } else {
-                            load(apps[page * 4 + i].src);
-                        }
-                    }
-                    selected = i;
-                    break;
-                }
-            }
-        }
-        if ((i == 4 || page * 4 + i > Napps) && selected >= 0) {
-            drawIcon(page, selected, false);
-            selected = -1;
-        }
-    };
-
-    Bangle.setUI({
-        mode: 'custom',
-        swipe: swipeListenerDt,
-        touch: touchListenerDt,
         remove: () => {
             if (timeoutToClock) clearTimeout(timeoutToClock);
-        },
+        }
     });
 
+    // Update timeout on user interaction
+    const originalDraw = scroller.draw;
+    scroller.draw = () => {
+        updateTimeoutToClock();
+        originalDraw();
+    };
+
     // taken from Icon Launcher with minor alterations
     let timeoutToClock;
     const updateTimeoutToClock = function () {

apps/cutelauncher/metadata.json

@@ -1,7 +1,7 @@
 {
     "id": "cutelauncher",
     "name": "Cute Launcher",
-    "version": "0.01",
+    "version": "0.02",
     "description": "A simple launcher app for Bangle.js 2 that makes use of the full touchscreen",
     "icon": "app.png",
     "type": "launch",