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

revert and add ellipsis

master
kkayam 2025-02-14 13:01:59 +00:00
parent b0cd46d228
commit 9888093c9c
2 changed files with 17 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
apps/cutelauncher/app.js
View File

@ -42,7 +42,7 @@
Bangle.drawWidgets = () => { };
Bangle.loadWidgets = () => { };
const ITEM_HEIGHT = 125;
const ITEM_HEIGHT = 110;
E.showScroller({
h: ITEM_HEIGHT,
@ -55,75 +55,31 @@
let icon = apps[idx].icon;
let iconWidth = icon.width || 48;
let iconHeight = icon.height || 48;
let maxSize = 60;
let maxSize = 70;
let scale = Math.min(maxSize / iconWidth, maxSize / iconHeight);
let scaledHeight = Math.floor(iconHeight * scale);
// Center the icon horizontally
let iconX = rect.x + (rect.w - maxSize) / 2;
g.drawImage(icon, iconX, rect.y, { scale: scale });
// Define rectangle size (independent of icon size)
const rectSize = 100;
const rectX = rect.x + (rect.w - rectSize) / 2;
// Draw app name with ellipsis if needed
let name = apps[idx].name;
let maxWidth = rect.w - 80; // Leave some padding
let textWidth = g.stringWidth(name);
// Draw rounded rectangle background using polygon
g.setColor(g.theme.bg2);
const r = 20; // increased radius from 10 to 20
const x1 = rectX - 5;
const y1 = rect.y + 5;
const x2 = rectX + rectSize + 5;
const y2 = rect.y + rectSize + 15;
// Create points for a rounded rectangle (approximating curves with more points per corner)
g.fillPoly([
x1 + r, y1, // Top edge
x2 - r, y1,
x2 - r * 0.7, y1,
x2 - r * 0.4, y1 + r * 0.1,
x2 - r * 0.1, y1 + r * 0.4, // Top right corner
x2, y1 + r * 0.7,
x2, y1 + r,
x2, y2 - r, // Right edge
x2, y2 - r * 0.7,
x2 - r * 0.1, y2 - r * 0.4,
x2 - r * 0.4, y2 - r * 0.1, // Bottom right corner
x2 - r * 0.7, y2,
x2 - r, y2,
x1 + r, y2, // Bottom edge
x1 + r * 0.7, y2,
x1 + r * 0.4, y2 - r * 0.1,
x1 + r * 0.1, y2 - r * 0.4, // Bottom left corner
x1, y2 - r * 0.7,
x1, y2 - r,
x1, y1 + r, // Left edge
x1, y1 + r * 0.7,
x1 + r * 0.1, y1 + r * 0.4,
x1 + r * 0.4, y1 + r * 0.1, // Top left corner
x1 + r * 0.7, y1
]);
g.setColor(g.theme.fg);
// Draw icon centered in the top portion
let iconPadding = 12;
// Center icon within the rectangle
let iconXInRect = rectX + (rectSize - maxSize) / 2;
g.setBgColor(g.theme.bg2).drawImage(icon, iconXInRect, rect.y + iconPadding + 10, { scale: scale });
// Draw app name with ellipsis if too long
const maxWidth = rectSize - 10;
let text = apps[idx].name;
let textWidth = g.stringWidth(text);
if (textWidth > maxWidth) {
const ellipsis = "...";
const ellipsisWidth = g.stringWidth(ellipsis);
while (textWidth + ellipsisWidth > maxWidth && text.length > 0) {
text = text.slice(0, -1);
textWidth = g.stringWidth(text);
// Add ellipsis and truncate text
while (textWidth > maxWidth - g.stringWidth("...") && name.length > 1) {
name = name.slice(0, -1);
textWidth = g.stringWidth(name);
}
text = text + ellipsis;
name += "...";
}
let textY = rect.y + iconPadding + scaledHeight + 18;
g.drawString(text, rectX + rectSize / 2, textY);
// Position text below icon with padding
let textY = rect.y + scaledHeight + 4;
g.drawString(name, rect.x + rect.w / 2, textY);
},
select: (idx) => {
// Launch the selected app

2
apps/cutelauncher/metadata.json
View File

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