mirror of https://github.com/espruino/BangleApps
109 lines
3.3 KiB
JavaScript
109 lines
3.3 KiB
JavaScript
/**
|
|
*
|
|
* Simplestpp Clock
|
|
*
|
|
* The entire clock code is contained within the block below this
|
|
* supports 'fast load'
|
|
*
|
|
* To add support for clock_info_supprt we add the code marked at [1] and [2]
|
|
*
|
|
*/
|
|
|
|
{
|
|
// must be inside our own scope here so that when we are unloaded everything disappears
|
|
// we also define functions using 'let fn = function() {..}' for the same reason. function decls are global
|
|
|
|
let draw = function() {
|
|
var date = new Date();
|
|
var timeStr = require("locale").time(date,1);
|
|
var h = g.getHeight();
|
|
var w = g.getWidth();
|
|
|
|
g.reset();
|
|
g.setColor(g.theme.bg);
|
|
g.fillRect(Bangle.appRect);
|
|
|
|
g.setFont('Vector', w/3);
|
|
g.setFontAlign(0, 0);
|
|
g.setColor(g.theme.fg);
|
|
g.drawString(timeStr, w/2, h/2);
|
|
clockInfoMenu.redraw(); // clock_info_support
|
|
|
|
// schedule a draw for the next minute
|
|
if (drawTimeout) clearTimeout(drawTimeout);
|
|
drawTimeout = setTimeout(function() {
|
|
drawTimeout = undefined;
|
|
draw();
|
|
}, 60000 - (Date.now() % 60000));
|
|
};
|
|
|
|
/**
|
|
* clock_info_support
|
|
* this is the callback function that get invoked by clockInfoMenu.redraw();
|
|
*
|
|
* We will display the image and text on the same line and centre the combined
|
|
* length of the image+text
|
|
*
|
|
*
|
|
*/
|
|
let clockInfoDraw = (itm, info, options) => {
|
|
|
|
g.reset().setFont('Vector',24).setBgColor(options.bg).setColor(options.fg);
|
|
|
|
//use info.text.toString(), steps does not have length defined
|
|
var text_w = g.stringWidth(info.text.toString());
|
|
// gap between image and text
|
|
var gap = 10;
|
|
// width of the image and text combined
|
|
var w = gap + (info.img ? 24 :0) + text_w;
|
|
// different fg color if we tapped on the menu
|
|
if (options.focus) g.setColor(options.hl);
|
|
|
|
// clear the whole info line
|
|
g.clearRect(0, options.y -1, g.getWidth(), options.y+24);
|
|
|
|
// draw the image if we have one
|
|
if (info.img) {
|
|
// image start
|
|
var x = (g.getWidth() / 2) - (w/2);
|
|
g.drawImage(info.img, x, options.y);
|
|
// draw the text to the side of the image (left/centre alignment)
|
|
g.setFontAlign(-1,0).drawString(info.text, x + 23 + gap, options.y+12);
|
|
} else {
|
|
// text only option, not tested yet
|
|
g.setFontAlign(0,0).drawString(info.text, g.getWidth() / 2, options.y+12);
|
|
}
|
|
|
|
};
|
|
|
|
// clock_info_support
|
|
// retrieve all the clock_info modules that are installed
|
|
let clockInfoItems = require("clock_info").load();
|
|
|
|
// clock_info_support
|
|
// setup the way we wish to interact with the menu
|
|
// the hl property defines the color the of the info when the menu is selected after tapping on it
|
|
let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, { x:64, y:132, w:50, h:40, draw : clockInfoDraw, bg : g.theme.bg, fg : g.theme.fg, hl : "#0ff"} );
|
|
|
|
// timeout used to update every minute
|
|
var drawTimeout;
|
|
g.clear();
|
|
|
|
// Show launcher when middle button pressed, add updown button handlers
|
|
Bangle.setUI({
|
|
mode : "clock",
|
|
remove : function() {
|
|
if (drawTimeout) clearTimeout(drawTimeout);
|
|
drawTimeout = undefined;
|
|
// remove info menu
|
|
clockInfoMenu.remove();
|
|
delete clockInfoMenu;
|
|
}
|
|
});
|
|
|
|
// Load widgets
|
|
Bangle.loadWidgets();
|
|
draw();
|
|
setTimeout(Bangle.drawWidgets,0);
|
|
} // end of clock
|