mirror of https://github.com/espruino/BangleApps
95 lines
3.0 KiB
JavaScript
95 lines
3.0 KiB
JavaScript
/* jshint esversion: 6 */
|
|
/**
|
|
* A simple digital clock showing seconds as a bar
|
|
**/
|
|
// Check settings for what type our clock should be
|
|
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 = (locale.meridian(date)!=="");
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
|
|
function timeText(date) {
|
|
if (!clock.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 (clock.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}`;
|
|
}
|
|
|
|
|
|
const ClockFace = require("ClockFace"),
|
|
clock = new ClockFace({
|
|
precision:1,
|
|
init: function() {
|
|
const Layout = require("Layout");
|
|
this.layout = new Layout({
|
|
type: "v", c: [
|
|
{
|
|
type: "h", c: [
|
|
{id: "time", label: "88:88", type: "txt", font: "6x8:5", col:g.theme.fg, bgCol: g.theme.bg}, // size updated below
|
|
{id: "ampm", label: " ", type: "txt", font: "6x8:2", col:g.theme.fg, 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 (this.is12Hour) {
|
|
// Maximum font size = (<screen width> - <ampm: 2chars * (2*6)px>) / (5chars * 6px)
|
|
thickness = Math.floor((Bangle.appRect.w-24)/(5*6));
|
|
} else {
|
|
this.layout.ampm.label = "";
|
|
thickness = Math.floor(Bangle.appRect.w/(5*6));
|
|
}
|
|
this.layout.bar.height = thickness+1;
|
|
this.layout.time.font = "6x8:"+thickness;
|
|
this.layout.update();
|
|
},
|
|
update: function(date, c) {
|
|
if (c.m) this.layout.time.label = timeText(date);
|
|
if (c.h) this.layout.ampm.label = ampmText(date);
|
|
if (c.d) this.layout.date.label = dateText(date);
|
|
const SECONDS_PER_MINUTE = 60;
|
|
if (c.s) this.layout.bar.fraction = date.getSeconds()/SECONDS_PER_MINUTE;
|
|
this.layout.render();
|
|
},
|
|
resume: function() {
|
|
this.layout.forgetLazyState();
|
|
},
|
|
});
|
|
clock.start();
|