more refactoring
add orange color if battery is between 20 and 40% change date formatmaster
czeppi
parent
27d0b043e3
commit
567b37d948
|
|
@ -1 +1,3 @@
|
|||
0.01: Copied from andark (V0.08)
|
||||
0.01: copied from andark (V0.08)
|
||||
refactored
|
||||
add 24 hour mode
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
{
|
||||
|
||||
// ----- const -----
|
||||
|
||||
const defaultSettings = {
|
||||
|
|
@ -17,23 +15,23 @@ const center = {
|
|||
};
|
||||
|
||||
const hourNumberPositions = (function() {
|
||||
let z = [];
|
||||
let sk = 1;
|
||||
for (let i = -10; i < 50; i += 5){
|
||||
let alpha = i * 2 * Math.PI / 60;
|
||||
let xsk = center.x + 2 + Math.cos(alpha) * (center.x - 10),
|
||||
ysk = center.y + 2 + Math.sin(alpha) * (center.x - 10);
|
||||
|
||||
if (sk==3){ xsk -= 10; }
|
||||
if (sk==6){ ysk -= 10; }
|
||||
if (sk==9){ xsk += 10; }
|
||||
if (sk==12){ ysk += 10; }
|
||||
if (sk==10){ xsk += 3; }
|
||||
|
||||
z.push([sk, xsk, ysk]);
|
||||
sk += 1;
|
||||
let positions = [];
|
||||
|
||||
for (let hour = 1; hour <= 12; hour += 1) {
|
||||
let phi = 30 * (hour - 3) * (Math.PI / 180);
|
||||
let x = center.x + 2 + Math.cos(phi) * (center.x - 10);
|
||||
let y = center.y + 2 + Math.sin(phi) * (center.x - 10);
|
||||
|
||||
// fix positions, which are not on a circle
|
||||
if (hour == 3){ x -= 10; }
|
||||
else if (hour == 6){ y -= 10; }
|
||||
else if (hour == 9){ x += 10; }
|
||||
else if (hour == 12){ y += 10; }
|
||||
else if (hour == 10){ x += 3; }
|
||||
|
||||
positions.push([hour, x, y]);
|
||||
}
|
||||
return z;
|
||||
return positions;
|
||||
})();
|
||||
|
||||
|
||||
|
|
@ -42,11 +40,14 @@ const hourNumberPositions = (function() {
|
|||
let drawTimeout;
|
||||
let queueMillis = 1000;
|
||||
let unlock = true;
|
||||
let lastBatteryStates = [E.getBattery()];
|
||||
|
||||
|
||||
// ----- functions -----
|
||||
|
||||
const updateState = function() {
|
||||
function updateState() {
|
||||
updateBatteryStates();
|
||||
|
||||
if (Bangle.isLCDOn()) {
|
||||
if (!Bangle.isLocked()) {
|
||||
queueMillis = 1000;
|
||||
|
|
@ -57,40 +58,47 @@ const updateState = function() {
|
|||
unlock = false;
|
||||
}
|
||||
draw();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (drawTimeout)
|
||||
if (drawTimeout)
|
||||
clearTimeout(drawTimeout);
|
||||
drawTimeout = undefined;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const drawScale = function() { // draws the scale once the app is startet
|
||||
// clear the screen
|
||||
|
||||
function updateBatteryStates() {
|
||||
lastBatteryStates.push(E.getBattery());
|
||||
if (lastBatteryStates.length > 5)
|
||||
lastBatteryStates.shift(); // remove 1st item
|
||||
}
|
||||
|
||||
function drawTicks() { // draws the scale once the app is startet
|
||||
// clear screen
|
||||
g.setBgColor(0, 0, 0);
|
||||
g.clear();
|
||||
|
||||
// draw the ticks of the scale
|
||||
for (let i = -14; i < 47; i++){
|
||||
const alpha = i * 2 * Math.PI/60;
|
||||
|
||||
// draw ticks
|
||||
for (let i = 1; i <= 60; i++){
|
||||
const phi = 6 * i * (Math.PI / 180);
|
||||
let thickness = 2;
|
||||
if (i % 5 == 0) {
|
||||
if (i % 5 == 0)
|
||||
thickness = 5;
|
||||
}
|
||||
g.fillPoly(calcHandPolygon(300, thickness, alpha), true);
|
||||
|
||||
g.fillPoly(calcHandPolygon(300, thickness, phi), true);
|
||||
g.setColor(0, 0, 0);
|
||||
g.fillRect(10, 10, 2 * center.x - 10, 2 * center.x - 10);
|
||||
g.setColor(1, 1, 1);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const calcHandPolygon = function(len, dia, alpha) {
|
||||
const x = center.x + Math.cos(alpha) * len/2,
|
||||
y = center.y + Math.sin(alpha) * len/2,
|
||||
function calcHandPolygon(len, thickness, phi) {
|
||||
const x = center.x + Math.cos(phi) * len/2,
|
||||
y = center.y + Math.sin(phi) * len/2,
|
||||
d = {
|
||||
"d": 3,
|
||||
"x": dia/2 * Math.cos(alpha + Math.PI/2),
|
||||
"y": dia/2 * Math.sin(alpha + Math.PI/2)
|
||||
"x": thickness/2 * Math.cos(phi + Math.PI/2),
|
||||
"y": thickness/2 * Math.sin(phi + Math.PI/2)
|
||||
},
|
||||
polygon = [
|
||||
center.x - d.x,
|
||||
|
|
@ -103,20 +111,19 @@ const calcHandPolygon = function(len, dia, alpha) {
|
|||
y - d.y
|
||||
];
|
||||
return polygon;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// ----- draw ----
|
||||
|
||||
const draw = function() {
|
||||
function draw() {
|
||||
// draw black rectangle in the middle to clear screen from scale and hands
|
||||
g.setColor(0, 0, 0);
|
||||
g.fillRect(10, 10, 2 * center.x - 10, 2 * center.x - 10);
|
||||
// prepare for drawing the text
|
||||
|
||||
g.setFontAlign(0, 0);
|
||||
// do drawing
|
||||
drawNumbers();
|
||||
|
||||
|
||||
const date = new Date();
|
||||
if (settings.textAboveHands) {
|
||||
drawHands(date);
|
||||
|
|
@ -127,77 +134,101 @@ const draw = function() {
|
|||
drawHands(date);
|
||||
}
|
||||
queueDraw();
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
const drawNumbers = function() {
|
||||
function drawNumbers() {
|
||||
g.setFont("Vector", 20);
|
||||
|
||||
const batteryState = E.getBattery();
|
||||
|
||||
const batteryState = calcAvgBatteryState();
|
||||
if (batteryState < 20)
|
||||
g.setColor(1, 0, 0); // draw in red, if battery is low
|
||||
else if (batteryState < 40)
|
||||
g.setColor(1, 1, 0);
|
||||
else
|
||||
g.setColor(1, 1, 1);
|
||||
|
||||
|
||||
g.setBgColor(0, 0, 0);
|
||||
for(let i = 0; i < 12; i++){
|
||||
for(let i = 0; i < 12; i++) {
|
||||
let hour = hourNumberPositions[i][0];
|
||||
if (settings.show24HourMode)
|
||||
hour *= 2;
|
||||
|
||||
|
||||
g.drawString(hour, hourNumberPositions[i][1], hourNumberPositions[i][2], true);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const drawHands = function(date) {
|
||||
function calcAvgBatteryState() {
|
||||
const n = lastBatteryStates.length;
|
||||
if (n == 0)
|
||||
return 100;
|
||||
|
||||
let sum = lastBatteryStates.reduce((acc, value) => acc + value, 0);
|
||||
return Math.round(sum / n);
|
||||
}
|
||||
|
||||
function drawHands(date) {
|
||||
let m = date.getMinutes(),
|
||||
h = date.getHours(),
|
||||
s = date.getSeconds();
|
||||
|
||||
g.setColor(1, 1, 1);
|
||||
|
||||
|
||||
let numHoursForHourHand = settings.show24HourMode? 24 : 12;
|
||||
|
||||
if (h > numHoursForHourHand){
|
||||
|
||||
if (h > numHoursForHourHand)
|
||||
h = h - numHoursForHourHand;
|
||||
}
|
||||
|
||||
|
||||
|
||||
const hour_angle = 2 * Math.PI / numHoursForHourHand * (h + m/60) - Math.PI/2,
|
||||
minute_angle = 2 * Math.PI / 60 * m - Math.PI/2,
|
||||
second_angle = 2 * Math.PI / 60 * s - Math.PI/2;
|
||||
|
||||
const hourPolygon = calcHandPolygon(settings.shortHrHand? 88 : 100, 5, hour_angle);
|
||||
|
||||
const hourPolygon = calcHandPolygon(settings.shortHrHand ? 88 : 100, 5, hour_angle);
|
||||
g.fillPoly(hourPolygon, true);
|
||||
|
||||
|
||||
const minutePolygon = calcHandPolygon(150, 5, minute_angle);
|
||||
g.fillPoly(minutePolygon, true);
|
||||
|
||||
if (unlock){
|
||||
|
||||
if (unlock) {
|
||||
const secondPolygon = calcHandPolygon(150, 2, second_angle);
|
||||
g.fillPoly(secondPolygon, true);
|
||||
}
|
||||
g.fillCircle(center.x, center.y, 4);
|
||||
};
|
||||
}
|
||||
|
||||
const drawText = function(date) {
|
||||
function drawText(date) {
|
||||
if (!unlock)
|
||||
return
|
||||
return;
|
||||
|
||||
g.setFont("Vector", 10);
|
||||
g.setBgColor(0, 0, 0);
|
||||
g.setColor(1, 1, 1);
|
||||
|
||||
const dateStr = require("locale").date(date);
|
||||
g.drawString(dateStr, center.x, center.y + 20, true);
|
||||
|
||||
const batteryStr = E.getBattery() + "%";
|
||||
|
||||
if (Bangle.isCharging()) {
|
||||
g.setBgColor(1, 0, 0);
|
||||
}
|
||||
g.drawString(batteryStr, center.x, center.y + 40, true);
|
||||
};
|
||||
g.setColor(1, 1, 1);
|
||||
|
||||
const queueDraw = function() {
|
||||
const today = new Date();
|
||||
const dateStr = formatDate(today);
|
||||
g.setFont("Vector", 16);
|
||||
g.drawString(dateStr, center.x + 5, center.y - 30, true);
|
||||
|
||||
const batteryStr = calcAvgBatteryState() + "%";
|
||||
|
||||
if (Bangle.isCharging())
|
||||
g.setBgColor(1, 0, 0);
|
||||
|
||||
g.setFont("Vector", 24);
|
||||
g.drawString(batteryStr, center.x, center.y + 30, true);
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
const weekdays = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
|
||||
const month_names = ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"];
|
||||
const day = date.getDate();
|
||||
const month_name = month_names[date.getMonth()];
|
||||
const weekday = weekdays[date.getDay()];
|
||||
|
||||
return weekday + " " + day + ". " + month_name;
|
||||
}
|
||||
|
||||
function queueDraw() {
|
||||
if (drawTimeout)
|
||||
clearTimeout(drawTimeout);
|
||||
|
||||
|
|
@ -205,7 +236,7 @@ const queueDraw = function() {
|
|||
drawTimeout = undefined;
|
||||
draw();
|
||||
}, queueMillis - (Date.now() % queueMillis));
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
//// main running sequence ////
|
||||
|
|
@ -217,12 +248,11 @@ Bangle.setUI({
|
|||
Bangle.removeListener('lcdPower', updateState);
|
||||
Bangle.removeListener('lock', updateState);
|
||||
Bangle.removeListener('charging', draw);
|
||||
|
||||
|
||||
// We clear drawTimout after removing all listeners, because they can add one again
|
||||
if (drawTimeout) {
|
||||
if (drawTimeout)
|
||||
clearTimeout(drawTimeout);
|
||||
}
|
||||
|
||||
|
||||
drawTimeout = undefined;
|
||||
require("widget_utils").show();
|
||||
}
|
||||
|
|
@ -243,7 +273,5 @@ Bangle.on('lock', updateState);
|
|||
Bangle.on('charging', draw); // Immediately redraw when charger (dis)connected
|
||||
|
||||
updateState();
|
||||
drawScale();
|
||||
drawTicks();
|
||||
draw();
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue