Limelight, switched to bolted hands, redid screenshots
|
@ -6,6 +6,7 @@
|
||||||
* Selection of different fonts
|
* Selection of different fonts
|
||||||
* Settings menu where you can select font, or switch to Vector font and try a range of sizes
|
* Settings menu where you can select font, or switch to Vector font and try a range of sizes
|
||||||
* 100 less lines of code, demonstrating that there is no need for a custom widget draw method
|
* 100 less lines of code, demonstrating that there is no need for a custom widget draw method
|
||||||
|
* Full screen options (widgets loaded but not displayed)
|
||||||
|
|
||||||

|

|
||||||

|

|
||||||
|
|
|
@ -1,3 +1,14 @@
|
||||||
|
/*
|
||||||
|
* Limelight analoguce clock with bolted hands
|
||||||
|
* Based on the work of @Andreas_Rozek
|
||||||
|
* [Simple_Clock](https://github.com/espruino/BangleApps/tree/master/apps/simple_clock)
|
||||||
|
*
|
||||||
|
* . Demonstrates simpler approach to establishing the available size of the appRect in relation
|
||||||
|
* to widgets, avoids having to take on the responsibility for managing the widget draw.
|
||||||
|
* . Demonstrates a settings menu and various configuration options
|
||||||
|
* . Demonstrates fullscreen verses, widgets and app area.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
g.clear();
|
g.clear();
|
||||||
|
|
||||||
|
@ -78,7 +89,7 @@ if (settings.fullscreen) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function debug(o) {
|
function debug(o) {
|
||||||
console.log(o);
|
//console.log(o);
|
||||||
}
|
}
|
||||||
|
|
||||||
debug("limelight.app.js");
|
debug("limelight.app.js");
|
||||||
|
@ -88,35 +99,54 @@ debug("outerRadius=" + outerRadius);
|
||||||
debug("y12=" + (CenterY - outerRadius));
|
debug("y12=" + (CenterY - outerRadius));
|
||||||
debug("y6=" + (CenterY + outerRadius));
|
debug("y6=" + (CenterY + outerRadius));
|
||||||
|
|
||||||
const HourHandLength = outerRadius * 0.5;
|
let HourHandLength = outerRadius * 0.5;
|
||||||
const HourHandWidth = 2*3, halfHourHandWidth = HourHandWidth/2;
|
let HourHandWidth = 2*5, halfHourHandWidth = HourHandWidth/2;
|
||||||
const MinuteHandLength = outerRadius * 0.7;
|
|
||||||
const MinuteHandWidth = 2*2, halfMinuteHandWidth = MinuteHandWidth/2;
|
|
||||||
const SecondHandLength = outerRadius * 0.9;
|
|
||||||
const SecondHandOffset = 6;
|
|
||||||
|
|
||||||
const twoPi = 2*Math.PI;
|
let MinuteHandLength = outerRadius * 0.7;
|
||||||
const Pi = Math.PI;
|
let MinuteHandWidth = 2*3, halfMinuteHandWidth = MinuteHandWidth/2;
|
||||||
const halfPi = Math.PI/2;
|
|
||||||
|
|
||||||
let HourHandPolygon = [
|
let SecondHandLength = outerRadius * 0.9;
|
||||||
-halfHourHandWidth,halfHourHandWidth,
|
let SecondHandOffset = halfHourHandWidth + 10;
|
||||||
-halfHourHandWidth,halfHourHandWidth-HourHandLength,
|
|
||||||
halfHourHandWidth,halfHourHandWidth-HourHandLength,
|
let outerBoltRadius = halfHourHandWidth + 2, innerBoltRadius = outerBoltRadius - 4;
|
||||||
halfHourHandWidth,halfHourHandWidth,
|
let HandOffset = outerBoltRadius + 4;
|
||||||
|
|
||||||
|
let twoPi = 2*Math.PI, deg2rad = Math.PI/180;
|
||||||
|
let Pi = Math.PI;
|
||||||
|
let halfPi = Math.PI/2;
|
||||||
|
|
||||||
|
let sin = Math.sin, cos = Math.cos;
|
||||||
|
|
||||||
|
let sine = [0, sin(30*deg2rad), sin(60*deg2rad), 1];
|
||||||
|
|
||||||
|
let HandPolygon = [
|
||||||
|
-sine[3],-sine[0], -sine[2],-sine[1], -sine[1],-sine[2], -sine[0],-sine[3],
|
||||||
|
sine[0],-sine[3], sine[1],-sine[2], sine[2],-sine[1], sine[3],-sine[0],
|
||||||
|
sine[3], sine[0], sine[2], sine[1], sine[1], sine[2], sine[0], sine[3],
|
||||||
|
-sine[0], sine[3], -sine[1], sine[2], -sine[2], sine[1], -sine[3], sine[0],
|
||||||
];
|
];
|
||||||
|
|
||||||
let MinuteHandPolygon = [
|
let HourHandPolygon = new Array(HandPolygon.length);
|
||||||
-halfMinuteHandWidth,halfMinuteHandWidth,
|
for (let i = 0, l = HandPolygon.length; i < l; i+=2) {
|
||||||
-halfMinuteHandWidth,halfMinuteHandWidth-MinuteHandLength,
|
HourHandPolygon[i] = halfHourHandWidth*HandPolygon[i];
|
||||||
halfMinuteHandWidth,halfMinuteHandWidth-MinuteHandLength,
|
HourHandPolygon[i+1] = halfHourHandWidth*HandPolygon[i+1];
|
||||||
halfMinuteHandWidth,halfMinuteHandWidth,
|
if (i < l/2) { HourHandPolygon[i+1] -= HourHandLength; }
|
||||||
];
|
if (i > l/2) { HourHandPolygon[i+1] += HandOffset; }
|
||||||
|
}
|
||||||
|
let MinuteHandPolygon = new Array(HandPolygon.length);
|
||||||
|
for (let i = 0, l = HandPolygon.length; i < l; i+=2) {
|
||||||
|
MinuteHandPolygon[i] = halfMinuteHandWidth*HandPolygon[i];
|
||||||
|
MinuteHandPolygon[i+1] = halfMinuteHandWidth*HandPolygon[i+1];
|
||||||
|
if (i < l/2) { MinuteHandPolygon[i+1] -= MinuteHandLength; }
|
||||||
|
if (i > l/2) { MinuteHandPolygon[i+1] += HandOffset; }
|
||||||
|
}
|
||||||
|
|
||||||
let transformedPolygon = new Array(HourHandPolygon.length);
|
/**** transforme polygon ****/
|
||||||
|
|
||||||
|
let transformedPolygon = new Array(HandPolygon.length);
|
||||||
|
|
||||||
function transformPolygon (originalPolygon, OriginX,OriginY, Phi) {
|
function transformPolygon (originalPolygon, OriginX,OriginY, Phi) {
|
||||||
let sPhi = Math.sin(Phi), cPhi = Math.cos(Phi), x,y;
|
let sPhi = sin(Phi), cPhi = cos(Phi), x,y;
|
||||||
|
|
||||||
for (let i = 0, l = originalPolygon.length; i < l; i+=2) {
|
for (let i = 0, l = originalPolygon.length; i < l; i+=2) {
|
||||||
x = originalPolygon[i];
|
x = originalPolygon[i];
|
||||||
|
@ -127,8 +157,11 @@ function transformPolygon (originalPolygon, OriginX,OriginY, Phi) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawHands () {
|
/**** draw clock hands ****/
|
||||||
|
|
||||||
|
function drawClockHands () {
|
||||||
let now = new Date();
|
let now = new Date();
|
||||||
|
|
||||||
let Hours = now.getHours() % 12;
|
let Hours = now.getHours() % 12;
|
||||||
let Minutes = now.getMinutes();
|
let Minutes = now.getMinutes();
|
||||||
let Seconds = now.getSeconds();
|
let Seconds = now.getSeconds();
|
||||||
|
@ -138,14 +171,17 @@ function drawHands () {
|
||||||
let SecondsAngle = (Seconds/60) * twoPi - Pi;
|
let SecondsAngle = (Seconds/60) * twoPi - Pi;
|
||||||
|
|
||||||
g.setColor(g.theme.fg);
|
g.setColor(g.theme.fg);
|
||||||
|
|
||||||
transformPolygon(HourHandPolygon, CenterX,CenterY, HoursAngle);
|
transformPolygon(HourHandPolygon, CenterX,CenterY, HoursAngle);
|
||||||
g.fillPoly(transformedPolygon);
|
g.fillPoly(transformedPolygon);
|
||||||
|
|
||||||
transformPolygon(MinuteHandPolygon, CenterX,CenterY, MinutesAngle);
|
transformPolygon(MinuteHandPolygon, CenterX,CenterY, MinutesAngle);
|
||||||
g.fillPoly(transformedPolygon);
|
g.fillPoly(transformedPolygon);
|
||||||
|
|
||||||
|
let sPhi = Math.sin(SecondsAngle), cPhi = Math.cos(SecondsAngle);
|
||||||
|
|
||||||
if (settings.secondhand) {
|
if (settings.secondhand) {
|
||||||
let sPhi = Math.sin(SecondsAngle), cPhi = Math.cos(SecondsAngle);
|
g.setColor(g.theme.fg2);
|
||||||
g.setColor('#FF0000');
|
|
||||||
g.drawLine(
|
g.drawLine(
|
||||||
CenterX + SecondHandOffset*sPhi,
|
CenterX + SecondHandOffset*sPhi,
|
||||||
CenterY - SecondHandOffset*cPhi,
|
CenterY - SecondHandOffset*cPhi,
|
||||||
|
@ -153,6 +189,13 @@ function drawHands () {
|
||||||
CenterY + SecondHandLength*cPhi
|
CenterY + SecondHandLength*cPhi
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
g.setColor(g.theme.fg);
|
||||||
|
g.fillCircle(CenterX,CenterY, outerBoltRadius);
|
||||||
|
|
||||||
|
g.setColor(g.theme.bg);
|
||||||
|
g.drawCircle(CenterX,CenterY, outerBoltRadius);
|
||||||
|
g.fillCircle(CenterX,CenterY, innerBoltRadius);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setNumbersFont() {
|
function setNumbersFont() {
|
||||||
|
@ -192,7 +235,7 @@ function draw() {
|
||||||
g.setColor(g.theme.bg);
|
g.setColor(g.theme.bg);
|
||||||
g.fillRect(Bangle.appRect);
|
g.fillRect(Bangle.appRect);
|
||||||
|
|
||||||
drawHands();
|
drawClockHands();
|
||||||
drawNumbers();
|
drawNumbers();
|
||||||
queueDraw();
|
queueDraw();
|
||||||
}
|
}
|
||||||
|
@ -216,6 +259,5 @@ Bangle.on('lcdPower',on=>{
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
loadSettings();
|
|
||||||
Bangle.setUI('clock');
|
Bangle.setUI('clock');
|
||||||
draw();
|
draw();
|
||||||
|
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 2.9 KiB |