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

optimize

master
kkayam 2025-02-18 18:52:36 +00:00
parent 32d4812251
commit f96003ae0b
1 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
apps/cutelauncher/app.js
View File

@ -48,7 +48,37 @@
const overlayHeight = 35; const overlayHeight = 35;
const overlay = Graphics.createArrayBuffer(overlayWidth, overlayHeight, 16, { msb: true }); const overlay = Graphics.createArrayBuffer(overlayWidth, overlayHeight, 16, { msb: true });
// New helper function for creating rounded rectangle points // Function to create app backdrop
function createAppBackdrop(y) {
return [
58, y + 5, // Top edge
118, y + 5,
133 - 15 * 0.7, y + 5,
133 - 15 * 0.4, y + 5 + 15 * 0.1,
133 - 15 * 0.1, y + 5 + 15 * 0.4, // Top right corner
133, y + 5 + 15 * 0.7,
133, y + 20,
133, y + 75, // Right edge
133, y + 90 - 15 * 0.7,
133 - 15 * 0.1, y + 90 - 15 * 0.4,
133 - 15 * 0.4, y + 90 - 15 * 0.1, // Bottom right corner
133 - 15 * 0.7, y + 90,
118, y + 90,
58, y + 90, // Bottom edge
43 + 15 * 0.7, y + 90,
43 + 15 * 0.4, y + 90 - 15 * 0.1,
43 + 15 * 0.1, y + 90 - 15 * 0.4, // Bottom left corner
43, y + 90 - 15 * 0.7,
43, y + 75,
43, y + 20, // Left edge
43, y + 5 + 15 * 0.7,
43 + 15 * 0.1, y + 5 + 15 * 0.4,
43 + 15 * 0.4, y + 5 + 15 * 0.1, // Top left corner
43 + 15 * 0.7, y + 5
];
}
// Helper function for creating rounded rectangle points
function createRoundedRectPoints(x1, y1, x2, y2, r) { function createRoundedRectPoints(x1, y1, x2, y2, r) {
return [ return [
x1 + r, y1, // Top edge x1 + r, y1, // Top edge
@ -114,34 +144,23 @@
h: ITEM_HEIGHT, h: ITEM_HEIGHT,
c: apps.length, c: apps.length,
draw: (idx, rect) => { draw: (idx, rect) => {
g.setColor(g.theme.fg);
g.setFontAlign(0, -1, 0).setFont('8x16'); g.setFontAlign(0, -1, 0).setFont('8x16');
// Calculate icon dimensions // Calculate icon dimensions
let icon = apps[idx].icon; let icon = apps[idx].icon;
let iconSize = 48; let iconSize = 48;
// Define rectangle size (independent of icon size) // Define rectangle size (independent of icon size)
const rectSize = 80; const rectSize = 80;
const rectX = rect.x + (rect.w - rectSize) / 2; const rectX = 48;
// Draw rounded rectangle background using the new function // Draw rounded rectangle background using the new function
g.setColor(g.theme.bg2); const points = createAppBackdrop(rect.y);
const r = 15; g.setColor(g.theme.bg2).fillPoly(points);
const x1 = rectX - 5;
const y1 = rect.y + 5;
const x2 = rectX + rectSize + 5;
const y2 = rect.y + rectSize + 10;
const points = createRoundedRectPoints(x1, y1, x2, y2, r);
g.fillPoly(points);
g.setColor(g.theme.fg);
// Draw icon centered in the top portion // Draw icon centered in the top portion
let iconPadding = 8; let iconPadding = 8;
// Center icon within the rectangle // Center icon within the rectangle
let iconXInRect = rectX + (rectSize - iconSize) / 2; let iconXInRect = rectX + (rectSize - iconSize) / 2;
g.setBgColor(g.theme.bg2).drawImage(icon, iconXInRect, rect.y + iconPadding + 8); g.setColor(g.theme.fg).setBgColor(g.theme.bg2).drawImage(icon, iconXInRect, rect.y + iconPadding + 8);
// Draw app name with ellipsis if too long // Draw app name with ellipsis if too long
const maxWidth = rectSize - 8; const maxWidth = rectSize - 8;