mirror of https://github.com/espruino/BangleApps
109 lines
3.2 KiB
JavaScript
109 lines
3.2 KiB
JavaScript
/* jshint esversion: 6 */
|
|
/**
|
|
* A simple digital clock showing seconds as a bar
|
|
**/
|
|
// Check settings for what type our clock should be
|
|
const is12Hour = (require("Storage").readJSON("setting.json", 1) || {})["12hour"];
|
|
let locale = require("locale");
|
|
{ // add some more info to locale
|
|
let date = new Date();
|
|
date.setFullYear(1111);
|
|
date.setMonth(1, 3); // februari: months are zero-indexed
|
|
const localized = locale.date(date, true);
|
|
locale.dayFirst = /3.*2/.test(localized);
|
|
|
|
locale.hasMeridian = false;
|
|
if (typeof locale.meridian==="function") { // function does not exist if languages app is not installed
|
|
locale.hasMeridian = (locale.meridian(date)!=="");
|
|
}
|
|
}
|
|
Bangle.loadWidgets();
|
|
function renderBar(l) {
|
|
if (!this.fraction) {
|
|
// zero-size fillRect stills draws one line of pixels, we don't want that
|
|
return;
|
|
}
|
|
const width = this.fraction*l.w;
|
|
g.fillRect(l.x, l.y, l.x+width-1, l.y+l.height-1);
|
|
}
|
|
|
|
const Layout = require("Layout");
|
|
const layout = new Layout({
|
|
type: "v", c: [
|
|
{
|
|
type: "h", c: [
|
|
{id: "time", label: "88:88", type: "txt", font: "6x8:5", bgCol: g.theme.bg}, // size updated below
|
|
{id: "ampm", label: " ", type: "txt", font: "6x8:2", bgCol: g.theme.bg},
|
|
],
|
|
},
|
|
{id: "bar", type: "custom", fraction: 0, fillx: 1, height: 6, col: g.theme.fg2, render: renderBar},
|
|
{height: 40},
|
|
{id: "date", type: "txt", font: "10%", valign: 1},
|
|
],
|
|
}, {lazy: true});
|
|
// adjustments based on screen size and whether we display am/pm
|
|
let thickness; // bar thickness, same as time font "pixel block" size
|
|
if (is12Hour) {
|
|
// Maximum font size = (<screen width> - <ampm: 2chars * (2*6)px>) / (5chars * 6px)
|
|
thickness = Math.floor((g.getWidth()-24)/(5*6));
|
|
} else {
|
|
layout.ampm.label = "";
|
|
thickness = Math.floor(g.getWidth()/(5*6));
|
|
}
|
|
layout.bar.height = thickness+1;
|
|
layout.time.font = "6x8:"+thickness;
|
|
layout.update();
|
|
|
|
function timeText(date) {
|
|
if (!is12Hour) {
|
|
return locale.time(date, true);
|
|
}
|
|
const date12 = new Date(date.getTime());
|
|
const hours = date12.getHours();
|
|
if (hours===0) {
|
|
date12.setHours(12);
|
|
} else if (hours>12) {
|
|
date12.setHours(hours-12);
|
|
}
|
|
return locale.time(date12, true);
|
|
}
|
|
function ampmText(date) {
|
|
return (is12Hour && locale.hasMeridian)? locale.meridian(date) : "";
|
|
}
|
|
function dateText(date) {
|
|
const dayName = locale.dow(date, true),
|
|
month = locale.month(date, true),
|
|
day = date.getDate();
|
|
const dayMonth = locale.dayFirst ? `${day} ${month}` : `${month} ${day}`;
|
|
return `${dayName} ${dayMonth}`;
|
|
}
|
|
|
|
draw = function draw(force) {
|
|
if (!Bangle.isLCDOn()) {return;} // no drawing, also no new update scheduled
|
|
const date = new Date();
|
|
layout.time.label = timeText(date);
|
|
layout.ampm.label = ampmText(date);
|
|
layout.date.label = dateText(date);
|
|
const SECONDS_PER_MINUTE = 60;
|
|
layout.bar.fraction = date.getSeconds()/SECONDS_PER_MINUTE;
|
|
if (force) {
|
|
Bangle.drawWidgets();
|
|
layout.forgetLazyState();
|
|
}
|
|
layout.render();
|
|
// schedule update at start of next second
|
|
const millis = date.getMilliseconds();
|
|
setTimeout(draw, 1000-millis);
|
|
};
|
|
|
|
// Show launcher when button pressed
|
|
Bangle.setUI("clock");
|
|
Bangle.on("lcdPower", function(on) {
|
|
if (on) {
|
|
draw(true);
|
|
}
|
|
});
|
|
g.reset().clear();
|
|
Bangle.drawWidgets();
|
|
draw();
|