mirror of https://github.com/espruino/BangleApps
[Nifty-B Clock] Use ClockFace library
Alessandro Cocco
parent
146244aecf
commit
d9a0884c5a
|
|
@ -1,20 +1,10 @@
|
|||
const is12Hour = Object.assign({ "12hour": false }, require("Storage").readJSON("setting.json", true))["12hour"];
|
||||
const color = Object.assign({ color: 63488 }, require("Storage").readJSON("ffcniftyb.json", true)).color; // Default to RED
|
||||
var scale;
|
||||
var screen;
|
||||
var center;
|
||||
var buf;
|
||||
var img;
|
||||
|
||||
/* Clock *********************************************/
|
||||
const scale = g.getWidth() / 176;
|
||||
|
||||
const screen = {
|
||||
width: g.getWidth(),
|
||||
height: g.getHeight() - 24,
|
||||
};
|
||||
|
||||
const center = {
|
||||
x: screen.width / 2,
|
||||
y: screen.height / 2,
|
||||
};
|
||||
|
||||
function d02(value) {
|
||||
function format(value) {
|
||||
return ("0" + value).substr(-2);
|
||||
}
|
||||
|
||||
|
|
@ -22,91 +12,69 @@ function renderEllipse(g) {
|
|||
g.fillEllipse(center.x - 5 * scale, center.y - 70 * scale, center.x + 160 * scale, center.y + 90 * scale);
|
||||
}
|
||||
|
||||
function renderText(g) {
|
||||
const now = new Date();
|
||||
function renderText(g, date) {
|
||||
const hour = date.getHours() - (this.is12Hour && date.getHours() > 12 ? 12 : 0);
|
||||
const month = date.getMonth() + 1;
|
||||
|
||||
const hour = d02(now.getHours() - (is12Hour && now.getHours() > 12 ? 12 : 0));
|
||||
const minutes = d02(now.getMinutes());
|
||||
const day = d02(now.getDate());
|
||||
const month = d02(now.getMonth() + 1);
|
||||
const year = now.getFullYear();
|
||||
|
||||
const month2 = require("locale").month(now, 3);
|
||||
const day2 = require("locale").dow(now, 3);
|
||||
const monthName = require("date_utils").month(month, 1);
|
||||
const dayName = require("date_utils").dow(date.getDay(), 1);
|
||||
|
||||
g.setFontAlign(1, 0).setFont("Vector", 90 * scale);
|
||||
g.drawString(hour, center.x + 32 * scale, center.y - 31 * scale);
|
||||
g.drawString(minutes, center.x + 32 * scale, center.y + 46 * scale);
|
||||
g.drawString(format(hour), center.x + 32 * scale, center.y - 31 * scale);
|
||||
g.drawString(format(date.getMinutes()), center.x + 32 * scale, center.y + 46 * scale);
|
||||
|
||||
g.setFontAlign(1, 0).setFont("Vector", 16 * scale);
|
||||
g.drawString(year, center.x + 80 * scale, center.y - 42 * scale);
|
||||
g.drawString(month, center.x + 80 * scale, center.y - 26 * scale);
|
||||
g.drawString(day, center.x + 80 * scale, center.y - 10 * scale);
|
||||
g.drawString(month2, center.x + 80 * scale, center.y + 44 * scale);
|
||||
g.drawString(day2, center.x + 80 * scale, center.y + 60 * scale);
|
||||
g.drawString(date.getFullYear(), center.x + 80 * scale, center.y - 42 * scale);
|
||||
g.drawString(format(month), center.x + 80 * scale, center.y - 26 * scale);
|
||||
g.drawString(format(date.getDate()), center.x + 80 * scale, center.y - 10 * scale);
|
||||
g.drawString(monthName, center.x + 80 * scale, center.y + 44 * scale);
|
||||
g.drawString(dayName, center.x + 80 * scale, center.y + 60 * scale);
|
||||
}
|
||||
|
||||
const buf = Graphics.createArrayBuffer(screen.width, screen.height, 1, {
|
||||
msb: true
|
||||
const ClockFace = require("ClockFace");
|
||||
const clock = new ClockFace({
|
||||
init: function () {
|
||||
const appRect = Bangle.appRect;
|
||||
|
||||
screen = {
|
||||
width: appRect.w,
|
||||
height: appRect.h
|
||||
};
|
||||
|
||||
center = {
|
||||
x: screen.width / 2,
|
||||
y: screen.height / 2
|
||||
};
|
||||
|
||||
buf = Graphics.createArrayBuffer(screen.width, screen.height, 1, { msb: true });
|
||||
|
||||
scale = g.getWidth() / screen.width;
|
||||
|
||||
img = {
|
||||
width: screen.width,
|
||||
height: screen.height,
|
||||
transparent: 0,
|
||||
bpp: 1,
|
||||
buffer: buf.buffer
|
||||
};
|
||||
|
||||
// default to RED (see settings.js)
|
||||
// don't use || to default because 0 is a valid color
|
||||
this.color = this.color === undefined ? 63488 : this.color;
|
||||
},
|
||||
draw: function (date) {
|
||||
// render outside text with ellipse
|
||||
buf.clear();
|
||||
renderText(buf.setColor(1), date);
|
||||
renderEllipse(buf.setColor(0));
|
||||
g.setColor(this.color).drawImage(img, 0, 24);
|
||||
|
||||
// render ellipse with inside text
|
||||
buf.clear();
|
||||
renderEllipse(buf.setColor(1));
|
||||
renderText(buf.setColor(0), date);
|
||||
g.setColor(this.color).drawImage(img, 0, 24);
|
||||
},
|
||||
settingsFile: "ffcniftyb.json"
|
||||
});
|
||||
|
||||
function draw() {
|
||||
|
||||
const img = {
|
||||
width: screen.width,
|
||||
height: screen.height,
|
||||
transparent: 0,
|
||||
bpp: 1,
|
||||
buffer: buf.buffer
|
||||
};
|
||||
|
||||
// cleat screen area
|
||||
g.clearRect(0, 24, g.getWidth(), g.getHeight());
|
||||
|
||||
// render outside text with ellipse
|
||||
buf.clear();
|
||||
renderText(buf.setColor(1));
|
||||
renderEllipse(buf.setColor(0));
|
||||
g.setColor(color).drawImage(img, 0, 24);
|
||||
|
||||
// render ellipse with inside text
|
||||
buf.clear();
|
||||
renderEllipse(buf.setColor(1));
|
||||
renderText(buf.setColor(0));
|
||||
g.setColor(color).drawImage(img, 0, 24);
|
||||
}
|
||||
|
||||
|
||||
/* Minute Ticker *************************************/
|
||||
|
||||
let ticker;
|
||||
|
||||
function stopTick() {
|
||||
if (ticker) {
|
||||
clearTimeout(ticker);
|
||||
ticker = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function startTick(run) {
|
||||
stopTick();
|
||||
run();
|
||||
ticker = setTimeout(() => startTick(run), 60000 - (Date.now() % 60000));
|
||||
}
|
||||
|
||||
/* Init **********************************************/
|
||||
|
||||
g.clear();
|
||||
startTick(draw);
|
||||
|
||||
Bangle.on("lcdPower", (on) => {
|
||||
if (on) {
|
||||
startTick(draw);
|
||||
} else {
|
||||
stopTick();
|
||||
}
|
||||
});
|
||||
|
||||
Bangle.setUI("clock");
|
||||
Bangle.loadWidgets();
|
||||
Bangle.drawWidgets();
|
||||
clock.start();
|
||||
Loading…
Reference in New Issue