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

clock_info images now optional

master
Gordon Williams 2022-11-25 16:27:42 +00:00
parent 602689ed28
commit 7bdafa281a
4 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/slopeclockpp/ChangeLog
View File

@ -4,3 +4,4 @@
0.04: Changed to use clock_info for displayed data
Made fonts smaller to avoid overlap when (eg) 22:00
Allowed black/white background (as that can look nice too)
0.05: Images in clkinfo are optional now

10
apps/slopeclockpp/app.js
View File

@ -121,18 +121,18 @@ let animate = function(isIn, callback) {
// clock info menus (scroll up/down for info)
let clockInfoDraw = (itm, info, options) => {
let texty = options.y+26;
let texty = options.y+41;
g.reset().setFont("6x15").setBgColor(options.bg).setColor(options.fg).clearRect(options.x, texty, options.x+options.w-2, texty+15);
if (options.focus) g.setColor(options.hl);
if (options.x < g.getWidth()/2) { // left align
let x = options.x+2;
g.clearRect(x, options.y, x+23, options.y+23).drawImage(info.img, x, options.y);
g.setFontAlign(-1,-1).drawString(info.text, x,texty);
if (info.img) g.clearRect(x, options.y, x+23, options.y+23).drawImage(info.img, x, options.y);
g.setFontAlign(-1,1).drawString(info.text, x,texty);
} else { // right align
let x = options.x+options.w-3;
g.clearRect(x-23, options.y, x, options.y+23).drawImage(info.img, x-23, options.y);
g.setFontAlign(1,-1).drawString(info.text, x,texty);
if (info.img) g.clearRect(x-23, options.y, x, options.y+23).drawImage(info.img, x-23, options.y);
g.setFontAlign(1,1).drawString(info.text, x,texty);
}
};
let clockInfoItems = require("clock_info").load();

2
apps/slopeclockpp/metadata.json
View File

@ -1,6 +1,6 @@
{ "id": "slopeclockpp",
"name": "Slope Clock ++",
"version":"0.04",
"version":"0.05",
"description": "A clock where hours and minutes are divided by a sloping line. When the minute changes, the numbers slide off the screen. This is a clone of the original Slope Clock which shows extra information and allows the colors to be selected.",
"icon": "app.png",
"screenshots": [{"url":"screenshot.png"}],

15
modules/clock_info.js
View File

@ -15,7 +15,7 @@ Note that each item is an object with:
{
'text' // the text to display for this item
'img' // a 24x24px image to display for this item
'img' // optional: a 24x24px image to display for this item
'v' // (if hasRange==true) a numerical value
'min','max' // (if hasRange==true) a minimum and maximum numerical value (if this were to be displayed as a guage)
}
@ -36,7 +36,8 @@ example.clkinfo.js :
items: [
{ name : "Item1",
get : () => ({ text : "TextOfItem1", v : 10, min : 0, max : 100,
img : atob("GBiBAAD+AAH+AAH+AAH+AAH/AAOHAAYBgAwAwBgwYBgwYBgwIBAwOBAwOBgYIBgMYBgAYAwAwAYBgAOHAAH/AAH+AAH+AAH+AAD+AA==") }),
img : atob("GBiBAAD+AAH+AAH+AAH+AAH/AAOHAAYBgAwAwBgwYBgwYBgwIBAwOBAwOBgYIBgMYBgAYAwAwAYBgAOHAAH/AAH+AAH+AAH+AAD+AA==")
}),
show : () => {},
hide : () => {}
// run : () => {} optional (called when tapped)
@ -139,8 +140,8 @@ let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, {
g.reset().clearRect(options.x, options.y, options.x+options.w-2, options.y+options.h-1);
if (options.focus) g.drawRect(options.x, options.y, options.x+options.w-2, options.y+options.h-1); // show if focused
var midx = options.x+options.w/2;
g.drawImage(info.img, midx-12,options.y+4);
g.setFont("6x8:2").setFontAlign(0,0).drawString(info.text, midx,options.y+36);
if (info.img) g.drawImage(info.img, midx-12,options.y+4);
g.setFont("6x8:2").setFontAlign(0,1).drawString(info.text, midx,options.y+44);
}
});
// then when clock 'unloads':
@ -166,8 +167,8 @@ let clockInfoDraw = (itm, info, options) => {
g.reset().setBgColor(options.bg).setColor(options.fg).clearRect(options.x, options.y, options.x+options.w-2, options.y+options.h-1);
if (options.focus) g.drawRect(options.x, options.y, options.x+options.w-2, options.y+options.h-1)
var midx = options.x+options.w/2;
g.drawImage(info.img, midx-12,options.y);
g.setFont("6x15").setFontAlign(0,-1).drawString(info.text, midx,options.y+26);
if (info.img) g.drawImage(info.img, midx-12,options.y);
g.setFont("6x15").setFontAlign(0,1).drawString(info.text, midx,options.y+41);
};
let clockInfoItems = require("clock_info").load();
let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, { x:126, y:24, w:50, h:40, draw : clockInfoDraw, bg : g.theme.bg, fg : g.theme.fg });
@ -225,7 +226,7 @@ exports.addInteractive = function(menu, options) {
} else if (lr) {
if (menu.length==1) return; // 1 item - can't move
oldMenuItem = menu[options.menuA].items[options.menuB];
options.menuA += ud;
options.menuA += lr;
if (options.menuA<0) options.menuA = menu.length-1;
if (options.menuA>=menu.length) options.menuA = 0;
options.menuB = 0;