diff --git a/apps/slopeclockpp/ChangeLog b/apps/slopeclockpp/ChangeLog index 1d28ea553..b5e455f78 100644 --- a/apps/slopeclockpp/ChangeLog +++ b/apps/slopeclockpp/ChangeLog @@ -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 diff --git a/apps/slopeclockpp/app.js b/apps/slopeclockpp/app.js index 99ef7272b..0f2416a4f 100644 --- a/apps/slopeclockpp/app.js +++ b/apps/slopeclockpp/app.js @@ -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(); diff --git a/apps/slopeclockpp/metadata.json b/apps/slopeclockpp/metadata.json index 3100d8b50..b419ef898 100644 --- a/apps/slopeclockpp/metadata.json +++ b/apps/slopeclockpp/metadata.json @@ -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"}], diff --git a/modules/clock_info.js b/modules/clock_info.js index 6f26f5c4b..cdd3c7520 100644 --- a/modules/clock_info.js +++ b/modules/clock_info.js @@ -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;