more refactoring

add orange color if battery is between 20 and 40%
change date format

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

apps/cc_clock24/app.js

@@ -1,5 +1,3 @@
-{
-    
 // ----- const -----
 
 const defaultSettings = {
@@ -17,23 +15,23 @@ const center = {
 };
 
 const hourNumberPositions = (function() {
-  let z = [];
+  let positions = [];
-  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; }
+  for (let hour = 1; hour <= 12; hour += 1) {
-    if (sk==6){ ysk -= 10; }
+    let phi = 30 * (hour - 3) * (Math.PI / 180);
-    if (sk==9){ xsk += 10; }
+    let x = center.x + 2 + Math.cos(phi) * (center.x - 10);
-    if (sk==12){ ysk += 10; }
+    let y = center.y + 2 + Math.sin(phi) * (center.x - 10);
-    if (sk==10){ xsk += 3; }
 
-    z.push([sk, xsk, ysk]);
+    // fix positions, which are not on a circle
-    sk += 1;
+    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;
@@ -63,34 +64,41 @@ const updateState = function() {
       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
+  // draw ticks
-  for (let i = -14; i < 47; i++){
+  for (let i = 1; i <= 60; i++){
-    const alpha = i * 2 * Math.PI/60;
+    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) {
+function calcHandPolygon(len, thickness, phi) {
-  const x = center.x + Math.cos(alpha) * len/2,
+  const x = center.x + Math.cos(phi) * len/2,
-        y = center.y + Math.sin(alpha) * len/2,
+        y = center.y + Math.sin(phi) * len/2,
         d = {
           "d": 3,
-          "x": dia/2 * Math.cos(alpha + Math.PI/2),
+          "x": thickness/2 * Math.cos(phi + Math.PI/2),
-          "y": dia/2 * Math.sin(alpha + Math.PI/2)
+          "y": thickness/2 * Math.sin(phi + Math.PI/2)
         },
         polygon = [
           center.x - d.x,
@@ -103,18 +111,17 @@ 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();
@@ -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);
+  const today = new Date();
-  g.drawString(dateStr, center.x, center.y + 20, true);
+  const dateStr = formatDate(today);
+  g.setFont("Vector", 16);
+  g.drawString(dateStr, center.x + 5, center.y - 30, true);
 
-  const batteryStr = E.getBattery() + "%";
+  const batteryStr = calcAvgBatteryState() + "%";
 
-  if (Bangle.isCharging()) {
+  if (Bangle.isCharging())
     g.setBgColor(1, 0, 0);
-  }
-  g.drawString(batteryStr, center.x, center.y + 40, true);
-};
 
-const queueDraw = function() {
+  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 ////
@@ -219,9 +250,8 @@ Bangle.setUI({
     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();
-
-}