add ClockFace module
Richard de Boer
parent
ec1bed62b5
commit
12f84357ca
|
|
@ -0,0 +1,103 @@
|
||||||
|
/*
|
||||||
|
Most of the boilerplate needed to run a clock.
|
||||||
|
See ClockFace.md for documentation
|
||||||
|
*/
|
||||||
|
function ClockFace(options) {
|
||||||
|
if ("function"=== typeof options) options = {draw: options}; // simple usage
|
||||||
|
// some validation, in the hopes of at least catching typos/basic mistakes
|
||||||
|
Object.keys(options).forEach(k => {
|
||||||
|
if (![
|
||||||
|
"precision",
|
||||||
|
"init", "draw", "update",
|
||||||
|
"pause", "resume",
|
||||||
|
"up", "down", "upDown"
|
||||||
|
].includes(k)) throw `Invalid ClockFace option: ${k}`;
|
||||||
|
});
|
||||||
|
if (!options.draw && !options.update) throw "ClockFace needs at least one of draw() or update() functions";
|
||||||
|
this.draw = options.draw || (t=> {
|
||||||
|
options.update.apply(this, [t, {d: true, h: true, m: true, s: true}]);
|
||||||
|
});
|
||||||
|
this.update = options.update || (t => {
|
||||||
|
g.clear();
|
||||||
|
options.draw.apply(this, [t, {d: true, h: true, m: true, s: true}]);
|
||||||
|
});
|
||||||
|
if (options.precision===1000||options.precision===60000) throw "ClockFace precision is in seconds, not ms";
|
||||||
|
this.precision = (options.precision || 60);
|
||||||
|
if (options.init) this.init = options.init;
|
||||||
|
if (options.pause) this._pause = options.pause;
|
||||||
|
if (options.resume) this._resume = options.resume;
|
||||||
|
if ((options.up || options.down) && options.upDown) throw "ClockFace up/down and upDown cannot be used together";
|
||||||
|
if (options.up || options.down) this._upDown = (dir) => {
|
||||||
|
if (dir<0 && options.up) options.up.apply(this);
|
||||||
|
if (dir>0 && options.down) options.down.apply(this);
|
||||||
|
};
|
||||||
|
if (options.upDown) this._upDown = options.upDown;
|
||||||
|
}
|
||||||
|
|
||||||
|
ClockFace.prototype.tick = function() {
|
||||||
|
const time = new Date();
|
||||||
|
const now = {
|
||||||
|
d: `${time.getFullYear()}-${time.getMonth()}-${time.getDate()}`,
|
||||||
|
h: time.getHours(),
|
||||||
|
m: time.getMinutes(),
|
||||||
|
s: time.getSeconds(),
|
||||||
|
};
|
||||||
|
if (!this._last) {
|
||||||
|
g.clear(true);
|
||||||
|
Bangle.drawWidgets();
|
||||||
|
g.reset();
|
||||||
|
this.draw.apply(this, [time, {d: true, h: true, m: true, s: true}]);
|
||||||
|
} else {
|
||||||
|
let c = {d: false, h: false, m: false, s: false}; // changed
|
||||||
|
if (now.d!==this._last.d) c.d = c.h = c.m = c.s = true;
|
||||||
|
else if (now.h!==this._last.h) c.h = c.m = c.s = true;
|
||||||
|
else if (now.m!==this._last.m) c.m = c.s = true;
|
||||||
|
else if (now.s!==this._last.s) c.s = true;
|
||||||
|
g.reset();
|
||||||
|
this.update.apply(this, [time, c]);
|
||||||
|
}
|
||||||
|
this._last = now;
|
||||||
|
if (this.paused) return; // called redraw() while still paused
|
||||||
|
// figure out timeout: if e.g. precision=60s, update at the start of a new minute
|
||||||
|
const interval = this.precision*1000;
|
||||||
|
this._timeout = setTimeout(() => this.tick(), interval-(Date.now()%interval));
|
||||||
|
};
|
||||||
|
|
||||||
|
ClockFace.prototype.start = function() {
|
||||||
|
Bangle.loadWidgets();
|
||||||
|
if (this.init) this.init.apply(this);
|
||||||
|
if (this._upDown) Bangle.setUI("clockupdown", d=>this._upDown.apply(this,[d]));
|
||||||
|
else Bangle.setUI("clock");
|
||||||
|
delete this._last;
|
||||||
|
this.tick();
|
||||||
|
|
||||||
|
Bangle.on("lcdPower", on => {
|
||||||
|
if (on) this.resume();
|
||||||
|
else this.pause();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
ClockFace.prototype.pause = function() {
|
||||||
|
if (!this._timeout) return; // already paused
|
||||||
|
clearTimeout(this._timeout);
|
||||||
|
delete this._timeout;
|
||||||
|
this.paused = true; // apps might want to check this
|
||||||
|
if (this._pause) this._pause.apply(this);
|
||||||
|
};
|
||||||
|
ClockFace.prototype.resume = function() {
|
||||||
|
if (this._timeout) return; // not paused
|
||||||
|
delete this._last;
|
||||||
|
delete this.paused;
|
||||||
|
if (this._resume) this._resume.apply(this);
|
||||||
|
this.tick(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Force a complete redraw
|
||||||
|
*/
|
||||||
|
ClockFace.prototype.redraw = function() {
|
||||||
|
delete this._last;
|
||||||
|
this.tick();
|
||||||
|
};
|
||||||
|
|
||||||
|
exports = ClockFace;
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
ClockFace
|
||||||
|
=========
|
||||||
|
|
||||||
|
This module handles most of the tasks needed to set up a clock, so you can
|
||||||
|
concentrate on drawing the time.
|
||||||
|
|
||||||
|
Example
|
||||||
|
-------
|
||||||
|
Tthe [tutorial clock](https://www.espruino.com/Bangle.js+Clock) converted to use
|
||||||
|
this module:
|
||||||
|
|
||||||
|
```js
|
||||||
|
|
||||||
|
// Load fonts
|
||||||
|
require("Font7x11Numeric7Seg").add(Graphics);
|
||||||
|
// position on screen
|
||||||
|
const X = 160, Y = 140;
|
||||||
|
|
||||||
|
var ClockFace = require("ClockFace");
|
||||||
|
var clock = new ClockFace({
|
||||||
|
precision: 1, // update every second
|
||||||
|
draw: function(d) {
|
||||||
|
// work out how to display the current time
|
||||||
|
var h = d.getHours(), m = d.getMinutes();
|
||||||
|
var time = (" "+h).substr(-2)+":"+("0"+m).substr(-2);
|
||||||
|
// draw the current time (4x size 7 segment)
|
||||||
|
g.setFont("7x11Numeric7Seg", 4);
|
||||||
|
g.setFontAlign(1, 1); // align right bottom
|
||||||
|
g.drawString(time, X, Y, true /*clear background*/);
|
||||||
|
// draw the seconds (2x size 7 segment)
|
||||||
|
g.setFont("7x11Numeric7Seg", 2);
|
||||||
|
g.drawString(("0"+d.getSeconds()).substr(-2), X+30, Y, true /*clear background*/);
|
||||||
|
// draw the date, in a normal font
|
||||||
|
g.setFont("6x8");
|
||||||
|
g.setFontAlign(0, 1); // align center bottom
|
||||||
|
// pad the date - this clears the background if the date were to change length
|
||||||
|
var dateStr = " "+require("locale").date(d)+" ";
|
||||||
|
g.drawString(dateStr, g.getWidth()/2, Y+15, true /*clear background*/);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
clock.start();
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Complete Usage
|
||||||
|
--------------
|
||||||
|
|
||||||
|
```js
|
||||||
|
|
||||||
|
var ClockFace = require("ClockFace");
|
||||||
|
var clock = new ClockFace({
|
||||||
|
precision: 1, // optional, defaults to 60: how often to call update(), in seconds
|
||||||
|
init: function() { // optional
|
||||||
|
// called only once before starting the clock, but after setting up the
|
||||||
|
// screen/widgets, so you can use Bangle.appRect
|
||||||
|
},
|
||||||
|
draw: function(time, changed) { // at least draw or update is required
|
||||||
|
// (re)draw entire clockface, time is a Date object
|
||||||
|
// `changed` is the same format as for update() below, but always all true
|
||||||
|
},
|
||||||
|
// The difference between draw() and update() is that the screen is cleared
|
||||||
|
// before draw() is called, so it needs to always redraw the entire clock
|
||||||
|
update: function(time, changed) { // at least draw or update is required
|
||||||
|
// redraw date/time, time is a Date object
|
||||||
|
// if you want, you can only redraw the changed parts:
|
||||||
|
if (changed.d) // redraw date (changed.h/m/s will also all be true)
|
||||||
|
if (changed.h) // redraw hours
|
||||||
|
if (changed.m) // redraw minutes
|
||||||
|
if (changed.s) // redraw seconds
|
||||||
|
},
|
||||||
|
pause: function() { // optional, called when the screen turns off
|
||||||
|
// for example: turn off GPS/compass if the watch used it
|
||||||
|
},
|
||||||
|
resume: function() { // optional, called when the screen turns on
|
||||||
|
// for example: turn GPS/compass back on
|
||||||
|
},
|
||||||
|
up: function() { // optional, up handler
|
||||||
|
},
|
||||||
|
down: function() { // optional, down handler
|
||||||
|
},
|
||||||
|
upDown: function(dir) { // optional, combined up/down handler
|
||||||
|
if (dir === -1) // Up
|
||||||
|
else // (dir === 1): Down
|
||||||
|
},
|
||||||
|
});
|
||||||
|
clock.start();
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
Simple Usage
|
||||||
|
------------
|
||||||
|
Basic clocks can pass just a function to redraw the entire screen every minute:
|
||||||
|
|
||||||
|
```js
|
||||||
|
|
||||||
|
var ClockFace = require("ClockFace");
|
||||||
|
var clock = new ClockFace(function(time) {
|
||||||
|
// draw the current time at the center of the screen
|
||||||
|
g.setFont("Vector:50").setFontAlign(0, 0)
|
||||||
|
.drawString(
|
||||||
|
require("locale").time(time, true),
|
||||||
|
Bangle.appRect.w/2, Bangle.appRect.h/2
|
||||||
|
);
|
||||||
|
});
|
||||||
|
clock.start();
|
||||||
|
|
||||||
|
```
|
||||||
Loading…
Reference in New Issue