diff --git a/apps/cc_clock24/ChangeLog b/apps/cc_clock24/ChangeLog index 531e6c047..c807c40a0 100644 --- a/apps/cc_clock24/ChangeLog +++ b/apps/cc_clock24/ChangeLog @@ -1 +1,3 @@ -0.01: Copied from andark (V0.08) +0.01: copied from andark (V0.08) + refactored + add 24 hour mode diff --git a/apps/cc_clock24/app.js b/apps/cc_clock24/app.js index 1f94da318..82487a5dd 100644 --- a/apps/cc_clock24/app.js +++ b/apps/cc_clock24/app.js @@ -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(); - -}