Add analog watch, steps and date

apps/rellotge/ChangeLog

@@ -5,4 +5,5 @@
 0.50: Fixing lint warnings for unused vars
 0.60: Fixes typos, BTN1 to show launcher and show app icon
 0.61: Minor code improvements
-0.70: Better wrapping of the text base (dynamic instead of hardcoded)
+0.70: Better wrapping of the text base (dynamic instead of hardcoded)
+0.80: Add analog watch, steps and date

apps/rellotge/metadata.json

@@ -1,7 +1,7 @@
 { "id": "rellotge",
   "name": "Rellotge en catala",
   "shortName":"Rellotge",
-  "version": "0.70",
+  "version": "0.80",
   "description": "A clock with traditional naming of hours in Catalan",
   "icon": "icona.png",
   "readme": "README.md",

apps/rellotge/rellotge.js

@@ -6,13 +6,21 @@
   const dateFontSize = 2;
   const font = "12x20";
 
-  const xyCenter = g.getWidth() /9;
+  const Panel = {
-  const yposTime = 55;
+    STEPS: 0,
+    DATE: 1
+  };
+
+  let panel = Panel.STEPS;
+
+  const timeTextMagin = 15;
+  const xyCenter = timeTextMagin;
+  const yposTime = 45;
   const yposDate = 130;
   const leshores = ["Les dotze","La una","Les dues","Les tres","Les quatre","Les cinc","Les sis","Les set","Les vuit","Les nou","Les deu","Les onze","Les dotze","La una","Les dues","Les tres","Les quatre","Les cinc","Les sis","Les set","Les vuit","Les nou","Les deu","Les onze","Les dotze"];
   const leshores2 = ["d'una","de dues","de tres","de quatre","de cinc","de sis","de set","de vuit","de nou","de deu","d'onze","de dotze"];
-  const fontWeight = 12;
+  const RED = '#f00';
-  const maxChars = Math.floor(Bangle.appRect.w / fontWeight);
+  const BLACK = "#000"
 
   function getHora(hour) {
     if (hour >= 12) {
@@ -21,14 +29,18 @@
     return leshores2[hour];
   }
 
-  function addLineFeeds(inputString) {
+  function addLineFeeds(inputString, g, posX) {
+      const margin = timeTextMagin;
       const words = inputString.split(' ');
       let lines = "";
       let line = "";
+      const totalWidth = g.getWidth();
 
-      for (let i = 0; i < words.length; i++) {
+      for (const word of words) {
-          const word = words[i];
+          const nextLine = line + word;
-          if (line.length + word.length > maxChars) {
+          const width = posX + g.stringWidth(nextLine) + margin;
+
+          if (width > totalWidth) {
               lines += line.trim() + "\r\n";
               line = "";
           }
@@ -38,16 +50,85 @@
       return lines;
   }
 
+  // Define the center coordinates of the watch face
+  const margin = 10;
+  const centerX = 40 + margin;
+  const centerY = g.getHeight() - 40 - margin;
+
+  // Function to draw the watch face
+  function drawWatchFace() {
+
+    const diameter = 40;
+    g.setColor(BLACK);
+    g.drawCircle(centerX, centerY, diameter);
+
+    // Draw hour markers
+    for (let i = 0; i < 12; i++) {
+      const angle = (i / 12) * Math.PI * 2;
+      const x1 = centerX + Math.sin(angle) * 70 / 2;
+      const y1 = centerY - Math.cos(angle) * 70 / 2;
+      const x2 = centerX + Math.sin(angle) * 60 / 2;
+      const y2 = centerY - Math.cos(angle) * 60 / 2;
+      g.drawLine(x1, y1, x2, y2);
+    }
+  }
+
+  function drawHand(centerX, centerY, hourAngle, handLength) {
+    const hourHandX = centerX + Math.sin(hourAngle) * handLength;
+    const hourHandY = centerY - Math.cos(hourAngle) * handLength;
+    g.drawLine(centerX, centerY, hourHandX, hourHandY);
+  }
+
+  // Function to update the watch display
+  function updateWatch() {
+    const now = new Date();
+    const hours = now.getHours() % 12;
+    const minutes = now.getMinutes();
+
+    // Calculate angles for hour, minute, and second hands
+    const hourAngle = ((hours + minutes / 60) / 12) * Math.PI * 2;
+    const minuteAngle = (minutes / 60) * Math.PI * 2;
+    g.setColor(BLACK);
+
+    drawHand(centerX, centerY, hourAngle, 10);
+    drawHand(centerX, centerY, minuteAngle, 15);
+  }
+
+  function getSteps() {
+    var steps = Bangle.getHealthStatus("day").steps;
+    steps = Math.round(steps/1000);
+    return steps + "k";
+  }
+
+  function drawDate() {
+    g.setFont(font, dateFontSize);
+
+    const date = new Date();
+    const dow = require("locale").dow(date, 2).toUpperCase(); //dj.
+    g.drawString(dow, g.getWidth() - 60, g.getHeight() - 60, true);
+
+    const mon = date.getDate() + " " + require("locale").month(date, 1);
+    g.setFont(font, "4x6");
+    g.drawString(mon, g.getWidth() - 70, g.getHeight() - 25, true);
+  }
+
+  function drawSteps() {
+  
+    g.setFont(font, dateFontSize);
+    const steps = getSteps()
+    g.drawString(steps, g.getWidth() - 60, g.getHeight() - 60, true);
+
+    g.setFont(font, "4x6");
+    const text = "Passos"
+    g.drawString(text, g.getWidth() - 70, g.getHeight() - 25, true);
+  }
+
   function drawSimpleClock() {
-    g.clearRect(Bangle.appRect);
+
     // get date
     var d = new Date();
     var m = d.getMinutes();
 
-    // drawSting centered
-    g.setFontAlign(-1, 0);
-
-    // draw time
     let t;
     if (m >= 0 && m < 2) {
       t = leshores[d.getHours()] + " en punt";
@@ -98,16 +179,34 @@
     } else if (m >= 57) {
       t = "Tres quarts i mig ben tocats " + getHora(d.getHours());
     }
-    t = addLineFeeds(t)
+    g.clearRect(Bangle.appRect);
+    // drawString centered
+    g.setFontAlign(-1, 0);
+
     g.setFont(font, timeFontSize);
+    t = addLineFeeds(t, g, xyCenter);
+
+    let color;
+    if (E.getBattery() < 15) {
+      color = RED;
+    }
+    else {
+      color = BLACK;
+    }
+
+    g.setColor(color);
     g.drawString(t, xyCenter, yposTime, true);
-
+    g.setColor(BLACK);
-    // draw Hours
+    if (panel == Panel.STEPS) {
-    g.setFont(font, dateFontSize);    
+       drawSteps();
-    var mu = "";
+       panel = Panel.DATE;
-    if (m < 10) {mu = "0"+m;} else {mu = m;}
+    } else {
-
+       drawDate();
-    g.drawString(d.getHours()+":"+mu, xyCenter, yposDate, true);
+       panel = Panel.STEPS;
+    }
+   
+    drawWatchFace();
+    updateWatch();
   }
 
   // handle switch display on by pressing BTN1
@@ -118,8 +217,15 @@
       Bangle.removeListener('lcdPower', onLcd);
     }
   }
-  Bangle.on('lcdPower', onLcd);
+ Bangle.on('lcdPower', onLcd);
-  Bangle.setUI("clock");
+ Bangle.setUI({
+         mode: "clockupdown"
+     },
+     btn => {
+         // up & down even which forces panel switch
+         drawSimpleClock();
+     });
+
   Bangle.loadWidgets();
   require("widget_utils").swipeOn();