commit
ddc9ac34b1
|
|
@ -1,3 +1,4 @@
|
||||||
0.01: New App!
|
0.01: New App!
|
||||||
0.02: Redraw only when seconds change
|
0.02: Redraw only when seconds change
|
||||||
0.03: Fix typo in redraw check
|
0.03: Fix typo in redraw check
|
||||||
|
0.04: Register as clock and implement fast loading
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,30 @@
|
||||||
// Code based on the original Mixed Clock
|
// Code based on the original Mixed Clock
|
||||||
|
|
||||||
|
{
|
||||||
/* jshint esversion: 6 */
|
/* jshint esversion: 6 */
|
||||||
var locale = require("locale");
|
const locale = require("locale");
|
||||||
const Radius = { "center": 7, "hour": 60, "min": 80, "dots": 88 };
|
const Radius = { "center": 7, "hour": 60, "min": 80, "dots": 88 };
|
||||||
const Center = { "x": 120, "y": 96 };
|
const Center = { "x": 120, "y": 96 };
|
||||||
const Widths = { hour: 2, minute: 2 };
|
const Widths = { hour: 2, minute: 2 };
|
||||||
var buf = Graphics.createArrayBuffer(240,192,1,{msb:true});
|
const buf = Graphics.createArrayBuffer(240,192,1,{msb:true});
|
||||||
var lastDate = new Date();
|
let timeoutId;
|
||||||
|
|
||||||
function rotatePoint(x, y, d) {
|
const rotatePoint = function(x, y, d, center, res) {
|
||||||
rad = -1 * d / 180 * Math.PI;
|
"jit";
|
||||||
var sin = Math.sin(rad);
|
const rad = -1 * d / 180 * Math.PI;
|
||||||
var cos = Math.cos(rad);
|
const sin = Math.sin(rad);
|
||||||
xn = ((Center.x + x * cos - y * sin) + 0.5) | 0;
|
const cos = Math.cos(rad);
|
||||||
yn = ((Center.y + x * sin - y * cos) + 0.5) | 0;
|
res[0] = ((center.x + x * cos - y * sin) + 0.5) | 0;
|
||||||
p = [xn, yn];
|
res[1] = ((center.y + x * sin - y * cos) + 0.5) | 0;
|
||||||
return p;
|
};
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// from https://github.com/espruino/Espruino/issues/1702
|
// from https://github.com/espruino/Espruino/issues/1702
|
||||||
function setLineWidth(x1, y1, x2, y2, lw) {
|
const setLineWidth = function(x1, y1, x2, y2, lw) {
|
||||||
var dx = x2 - x1;
|
"ram";
|
||||||
var dy = y2 - y1;
|
let dx = x2 - x1;
|
||||||
var d = Math.sqrt(dx * dx + dy * dy);
|
let dy = y2 - y1;
|
||||||
|
let d = Math.sqrt(dx * dx + dy * dy);
|
||||||
dx = dx * lw / d;
|
dx = dx * lw / d;
|
||||||
dy = dy * lw / d;
|
dy = dy * lw / d;
|
||||||
|
|
||||||
|
|
@ -44,71 +45,84 @@ function setLineWidth(x1, y1, x2, y2, lw) {
|
||||||
x2 - dy, y2 + dx,
|
x2 - dy, y2 + dx,
|
||||||
x1 - dy, y1 + dx
|
x1 - dy, y1 + dx
|
||||||
];
|
];
|
||||||
}
|
};
|
||||||
|
|
||||||
function drawMixedClock(force) {
|
const drawMixedClock = function() {
|
||||||
var date = new Date();
|
const date = new Date();
|
||||||
if ((force || Bangle.isLCDOn()) && buf.buffer && date.getSeconds() !== lastDate.getSeconds()) {
|
const dateArray = date.toString().split(" ");
|
||||||
lastDate = date;
|
const isEn = locale.name.startsWith("en");
|
||||||
var dateArray = date.toString().split(" ");
|
let point = [0, 0];
|
||||||
var isEn = locale.name.startsWith("en");
|
const minute = date.getMinutes();
|
||||||
var point = [];
|
const hour = date.getHours();
|
||||||
var minute = date.getMinutes();
|
let radius;
|
||||||
var hour = date.getHours();
|
|
||||||
var radius;
|
|
||||||
|
|
||||||
g.reset();
|
|
||||||
buf.clear();
|
|
||||||
|
|
||||||
// draw date
|
|
||||||
buf.setFont("6x8", 2);
|
|
||||||
buf.setFontAlign(-1, 0);
|
|
||||||
buf.drawString(locale.dow(date,true) + ' ', 4, 16, true);
|
|
||||||
buf.drawString(isEn?(' ' + dateArray[2]):locale.month(date,true), 4, 176, true);
|
|
||||||
buf.setFontAlign(1, 0);
|
|
||||||
buf.drawString(isEn?locale.month(date,true):(' ' + dateArray[2]), 237, 16, true);
|
|
||||||
buf.drawString(dateArray[3], 237, 176, true);
|
|
||||||
|
|
||||||
// draw hour and minute dots
|
g.reset();
|
||||||
for (i = 0; i < 60; i++) {
|
buf.clear();
|
||||||
radius = (i % 5) ? 2 : 4;
|
|
||||||
point = rotatePoint(0, Radius.dots, i * 6);
|
|
||||||
buf.fillCircle(point[0], point[1], radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
// draw digital time
|
// draw date
|
||||||
buf.setFont("6x8", 3);
|
buf.setFont("6x8", 2);
|
||||||
buf.setFontAlign(0, 0);
|
buf.setFontAlign(-1, 0);
|
||||||
buf.drawString(dateArray[4], 120, 120, true);
|
buf.drawString(locale.dow(date,true) + ' ', 4, 16, true);
|
||||||
|
buf.drawString(isEn?(' ' + dateArray[2]):locale.month(date,true), 4, 176, true);
|
||||||
|
buf.setFontAlign(1, 0);
|
||||||
|
buf.drawString(isEn?locale.month(date,true):(' ' + dateArray[2]), 237, 16, true);
|
||||||
|
buf.drawString(dateArray[3], 237, 176, true);
|
||||||
|
|
||||||
// draw new minute hand
|
// draw hour and minute dots
|
||||||
point = rotatePoint(0, Radius.min, minute * 6);
|
for (i = 0; i < 60; i++) {
|
||||||
buf.drawLine(Center.x, Center.y, point[0], point[1]);
|
radius = (i % 5) ? 2 : 4;
|
||||||
buf.fillPoly(setLineWidth(Center.x, Center.y, point[0], point[1], Widths.minute));
|
rotatePoint(0, Radius.dots, i * 6, Center, point);
|
||||||
// draw new hour hand
|
buf.fillCircle(point[0], point[1], radius);
|
||||||
point = rotatePoint(0, Radius.hour, hour % 12 * 30 + date.getMinutes() / 2 | 0);
|
|
||||||
buf.fillPoly(setLineWidth(Center.x, Center.y, point[0], point[1], Widths.hour));
|
|
||||||
|
|
||||||
// draw center
|
|
||||||
buf.fillCircle(Center.x, Center.y, Radius.center);
|
|
||||||
|
|
||||||
g.drawImage({width:buf.getWidth(),height:buf.getHeight(),bpp:1,buffer:buf.buffer},0,24);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
Bangle.on('lcdPower', function(on) {
|
// draw digital time
|
||||||
if (on)
|
buf.setFont("6x8", 3);
|
||||||
drawMixedClock(true);
|
buf.setFontAlign(0, 0);
|
||||||
Bangle.drawWidgets();
|
buf.drawString(dateArray[4], 120, 120, true);
|
||||||
});
|
|
||||||
|
|
||||||
setInterval(() => drawMixedClock(true), 30000); // force an update every 30s even screen is off
|
// draw new minute hand
|
||||||
|
rotatePoint(0, Radius.min, minute * 6, Center, point);
|
||||||
|
buf.drawLine(Center.x, Center.y, point[0], point[1]);
|
||||||
|
buf.fillPoly(setLineWidth(Center.x, Center.y, point[0], point[1], Widths.minute));
|
||||||
|
// draw new hour hand
|
||||||
|
rotatePoint(0, Radius.hour, hour % 12 * 30 + date.getMinutes() / 2 | 0, Center, point);
|
||||||
|
buf.fillPoly(setLineWidth(Center.x, Center.y, point[0], point[1], Widths.hour));
|
||||||
|
|
||||||
|
// draw center
|
||||||
|
buf.fillCircle(Center.x, Center.y, Radius.center);
|
||||||
|
|
||||||
|
g.drawImage({width:buf.getWidth(),height:buf.getHeight(),bpp:1,buffer:buf.buffer},0,24);
|
||||||
|
|
||||||
|
if (timeoutId !== undefined) {
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
}
|
||||||
|
const period = (Bangle.isLCDOn() ? 1000 : 60000); // Update every second if display is on else every minute
|
||||||
|
let timeout = period - (Date.now() % period);
|
||||||
|
timeoutId = setTimeout(()=>{
|
||||||
|
timeoutId = undefined;
|
||||||
|
drawMixedClock();
|
||||||
|
}, timeout);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onLCDPower = function(on) {
|
||||||
|
if (on) {
|
||||||
|
drawMixedClock();
|
||||||
|
Bangle.drawWidgets();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
Bangle.on('lcdPower', onLCDPower);
|
||||||
|
|
||||||
|
Bangle.setUI({mode:"clock", remove:function() {
|
||||||
|
if (timeoutId !== undefined) {
|
||||||
|
delete buf.buffer;
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
timeoutId = undefined;
|
||||||
|
Bangle.removeListener('lcdPower',onLCDPower);
|
||||||
|
}
|
||||||
|
}});
|
||||||
|
|
||||||
g.clear();
|
g.clear();
|
||||||
Bangle.loadWidgets();
|
Bangle.loadWidgets();
|
||||||
Bangle.drawWidgets();
|
Bangle.drawWidgets();
|
||||||
drawMixedClock(); // immediately draw
|
drawMixedClock(); // immediately draw
|
||||||
setInterval(drawMixedClock, 500); // update twice a second
|
}
|
||||||
|
|
||||||
// Show launcher when middle button pressed after freeing memory first
|
|
||||||
setWatch(() => {delete buf.buffer; Bangle.showLauncher()}, BTN2, {repeat:false,edge:"falling"});
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"id": "miclock2",
|
"id": "miclock2",
|
||||||
"name": "Mixed Clock 2",
|
"name": "Mixed Clock 2",
|
||||||
"version": "0.03",
|
"version": "0.04",
|
||||||
"description": "White color variant of the Mixed Clock with thicker clock hands for better readability in the bright sunlight, extra space under the clock for widgets and seconds in the digital clock.",
|
"description": "White color variant of the Mixed Clock with thicker clock hands for better readability in the bright sunlight, extra space under the clock for widgets and seconds in the digital clock.",
|
||||||
"icon": "clock-mixed.png",
|
"icon": "clock-mixed.png",
|
||||||
"type": "clock",
|
"type": "clock",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue