bryan
/
BangleApps_old
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

more effective scroll indicator

master
kkayam 2025-02-15 12:40:27 +00:00
parent 862afd0cd9
commit 9f08ac775f
2 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
apps/cutelauncher/app.js
View File

@ -46,28 +46,18 @@
// Create scroll indicator overlay // Create scroll indicator overlay
const overlayWidth = 30; // Increased width const overlayWidth = 30; // Increased width
const overlayHeight = g.getHeight(); const overlayHeight = 35;
const overlay = Graphics.createArrayBuffer(overlayWidth, overlayHeight, 16, { msb: true }); const overlay = Graphics.createArrayBuffer(overlayWidth, overlayHeight, 16, { msb: true });
// Function to update scroll indicator // Initialize scroll indicator by drawing the thumb once
function updateScrollIndicator(scroll) { function initScrollIndicator() {
let scrollPercent = scroll / ((apps.length * ITEM_HEIGHT) - g.getHeight());
let indicatorHeight = 35; // Increased height
// Add margins to the scrollable area
const marginY = 5; // margin at top and bottom
const scrollableHeight = overlayHeight - (marginY * 2);
let indicatorY = marginY + (scrollableHeight - indicatorHeight) * scrollPercent;
overlay.setBgColor(g.theme.bg).clear(); overlay.setBgColor(g.theme.bg).clear();
const marginX = 2;
// Draw rounded rectangle for scroll thumb // Draw rounded rectangle for scroll thumb
const r = 10; // corner radius const r = 10; // corner radius
const x1 = 0; const x1 = 0;
const y1 = indicatorY; const y1 = 0; // Start at top, will be scrolled into position
const x2 = overlayWidth - marginX; const x2 = overlayWidth;
const y2 = indicatorY + indicatorHeight; const y2 = overlayHeight;
overlay.setColor(g.theme.fg2).fillPoly([ overlay.setColor(g.theme.fg2).fillPoly([
x1 + r, y1, // Top edge x1 + r, y1, // Top edge
@ -88,8 +78,17 @@
x1 + r / 2, y1, // Top left corner x1 + r / 2, y1, // Top left corner
x1 + r, y1 x1 + r, y1
]); ]);
}
Bangle.setLCDOverlay(overlay, g.getWidth() - overlayWidth, 0, { id: "scrollIndicator" }); // Function to update scroll indicator
function updateScrollIndicator(scroll) {
let scrollPercent = scroll / ((apps.length * ITEM_HEIGHT) - g.getHeight());
// Add margins to the scrollable area
const marginX = 2;
const marginY = 5;
const scrollableHeight = g.getHeight() - (marginY * 2) - overlayHeight;
let indicatorY = marginY + scrollableHeight * scrollPercent;
Bangle.setLCDOverlay(overlay, g.getWidth() - overlayWidth - marginX, indicatorY, { id: "scrollIndicator" });
} }
let scroller = E.showScroller({ let scroller = E.showScroller({
@ -179,16 +178,18 @@
setWatch(() => { }, BTN1); setWatch(() => { }, BTN1);
// Remove lock handler // Remove lock handler
Bangle.removeListener('lock'); Bangle.removeListener('lock');
// Clear the scroll overlay
Bangle.setLCDOverlay();
// Remove drag handler // Remove drag handler
Bangle.removeListener('drag', updateOnDrag); Bangle.removeListener('drag', updateOnDrag);
// Clear the scroll overlay
Bangle.setLCDOverlay();
} }
}); });
// Update scroll indicator on drag // Update scroll indicator on drag
const updateOnDrag = () => updateScrollIndicator(scroller.scroll); const updateOnDrag = () => updateScrollIndicator(scroller.scroll);
Bangle.on('drag', updateOnDrag); Bangle.on('drag', updateOnDrag);
// Initialize the scroll indicator
initScrollIndicator();
// Initial update of scroll indicator // Initial update of scroll indicator
updateScrollIndicator(scroller.scroll); updateScrollIndicator(scroller.scroll);

2
apps/cutelauncher/metadata.json
View File

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