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

exact coloring

master
kkayam 2025-01-23 10:27:48 +00:00
parent 6dfa1f6526
commit c7e0f7fe60
2 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
apps/onewordclock/app.js
View File

@ -36,36 +36,38 @@ function draw() {
var d = new Date(); var d = new Date();
var h = d.getHours(); var h = d.getHours();
var m = d.getMinutes(); var m = d.getMinutes();
var date = d.getDate(); var s = d.getSeconds();
var day = d.getDay(); var day = d.getDay();
var month = d.getMonth();
var timeStr = wordFromHour(h); var timeStr = wordFromHour(h);
var dateStr = wordsFromDayMonth(day); var dateStr = wordsFromDayMonth(day);
// draw time // draw time
g.setBgColor(g.theme.bg); g.setBgColor(g.theme.bg);
g.setColor(g.theme.fg);
g.clear(); g.clear();
g.setFontAlign(0, 0).setFont("Vector", 36); g.setFontAlign(-1, 0).setFont("Vector", 36);
// Calculate how much of the word should be colored based on minutes // Calculate exact progress through the hour (0 to 1)
var coloredChars = Math.floor((timeStr.length * m) / 60); var progress = (m + (s / 60)) / 60;
// Draw the colored portion first // Get total width of the word and starting position
if (coloredChars > 0) { var totalWidth = g.stringWidth(timeStr);
var startX = x - totalWidth / 2;
// Calculate the exact position where the color should change
var colorChangeX = startX + (totalWidth * progress);
// First draw the entire text in the uncolored version
g.setColor(g.theme.fg2);
g.drawString(timeStr, startX, y);
// Then draw the colored portion
if (progress > 0) {
g.setClipRect(startX, 0, colorChangeX, g.getHeight());
g.setColor(g.theme.bg2); g.setColor(g.theme.bg2);
var coloredPart = timeStr.substring(0, coloredChars); g.drawString(timeStr, startX, y);
var coloredWidth = g.stringWidth(coloredPart); // Reset clip rect to full screen
g.drawString(coloredPart, x - (g.stringWidth(timeStr) / 2) + (coloredWidth / 2), y); g.setClipRect(0, 0, g.getWidth(), g.getHeight());
}
// Draw the remaining portion
if (coloredChars < timeStr.length) {
g.setColor(g.theme.fg2);
var remainingPart = timeStr.substring(coloredChars);
var remainingWidth = g.stringWidth(remainingPart);
g.drawString(remainingPart, x + (g.stringWidth(timeStr) / 2) - (remainingWidth / 2), y);
} }
// draw date at bottom of screen // draw date at bottom of screen
@ -73,7 +75,6 @@ function draw() {
g.setFontAlign(0, 0).setFont("Vector", 20); g.setFontAlign(0, 0).setFont("Vector", 20);
g.drawString(g.wrapString(dateStr, g.getWidth()).join("\n"), x, g.getHeight() - 30); g.drawString(g.wrapString(dateStr, g.getWidth()).join("\n"), x, g.getHeight() - 30);
// queue draw in one minute
queueDraw(); queueDraw();
} }

2
apps/onewordclock/metadata.json
View File

@ -2,7 +2,7 @@
"id": "onewordclock", "id": "onewordclock",
"name": "One Word Clock", "name": "One Word Clock",
"shortName": "One Word", "shortName": "One Word",
"version": "0.7", "version": "0.8",
"description": "A unique clock that displays a single evocative word for each hour of the day", "description": "A unique clock that displays a single evocative word for each hour of the day",
"icon": "app.png", "icon": "app.png",
"tags": "clock", "tags": "clock",