diff --git a/apps/cutelauncher/app.js b/apps/cutelauncher/app.js index 8fbba7423..b9e41660c 100644 --- a/apps/cutelauncher/app.js +++ b/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) { - 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); - } + const ITEM_HEIGHT = 88; - try { - let icon = apps[p * 4 + n].icon; + let scroller = E.showScroller({ + 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 - g.setFontAlign(0, -1, 0).setFont('8x16'); - let text = g.wrapString(apps[p * 4 + n].name, 88).join('\n'); - let textHeight = text.split('\n').length * 16; + // Center the icon horizontally + let iconX = rect.x + (rect.w - iconWidth) / 2; + g.drawImage(icon, iconX, rect.y); - let totalHeight = scaledHeight + 4 + textHeight; // 4px padding between icon and text - let startY = coords.y + (88 - totalHeight) / 2; + // Draw app name + let text = g.wrapString(apps[idx].name, rect.w).join('\n'); - // Draw icon centered horizontally and as part of vertical group - let iconX = coords.x + (88 - scaledWidth) / 2; - let iconY = startY; - g.drawImage(icon, iconX, iconY, { scale: scale }); - - // Draw text below icon - g.drawString(text, coords.x + coords.w / 2, startY + scaledHeight + 4); - } 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, + // Position text below icon with padding + let textY = rect.y + scaledHeight + 4; + g.drawString(text, rect.x + rect.w / 2, textY); + }, + select: (idx) => { + // Launch the selected app + load(apps[idx].src); + }, 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 () { diff --git a/apps/cutelauncher/metadata.json b/apps/cutelauncher/metadata.json index dd8c1dc22..ae08f44c7 100644 --- a/apps/cutelauncher/metadata.json +++ b/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",