diff --git a/apps/rellotge/ChangeLog b/apps/rellotge/ChangeLog index b2a2e2c67..953e8352c 100644 --- a/apps/rellotge/ChangeLog +++ b/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) \ No newline at end of file +0.70: Better wrapping of the text base (dynamic instead of hardcoded) +0.80: Add analog watch, steps and date \ No newline at end of file diff --git a/apps/rellotge/metadata.json b/apps/rellotge/metadata.json index bee544c56..b6468d39c 100644 --- a/apps/rellotge/metadata.json +++ b/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", diff --git a/apps/rellotge/rellotge.js b/apps/rellotge/rellotge.js index 5fab56f49..115d23fb4 100644 --- a/apps/rellotge/rellotge.js +++ b/apps/rellotge/rellotge.js @@ -6,13 +6,20 @@ const dateFontSize = 2; const font = "12x20"; - const xyCenter = g.getWidth() /9; - const yposTime = 55; - const yposDate = 130; + const Panel = { + STEPS: 0, + DATE: 1 + }; + + let panel = Panel.STEPS; + + const timeTextMagin = 15; + const xyCenter = timeTextMagin; + const yposTime = 45; 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 maxChars = Math.floor(Bangle.appRect.w / fontWeight); + const RED = '#f00'; + const BLACK = "#000" function getHora(hour) { if (hour >= 12) { @@ -21,14 +28,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++) { - const word = words[i]; - if (line.length + word.length > maxChars) { + for (const word of words) { + const nextLine = line + word; + const width = posX + g.stringWidth(nextLine) + margin; + + if (width > totalWidth) { lines += line.trim() + "\r\n"; line = ""; } @@ -38,16 +49,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 +178,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); - - // draw Hours - g.setFont(font, dateFontSize); - var mu = ""; - if (m < 10) {mu = "0"+m;} else {mu = m;} - - g.drawString(d.getHours()+":"+mu, xyCenter, yposDate, true); + g.setColor(BLACK); + if (panel == Panel.STEPS) { + drawSteps(); + panel = Panel.DATE; + } else { + drawDate(); + panel = Panel.STEPS; + } + + drawWatchFace(); + updateWatch(); } // handle switch display on by pressing BTN1 @@ -118,8 +216,15 @@ Bangle.removeListener('lcdPower', onLcd); } } - Bangle.on('lcdPower', onLcd); - Bangle.setUI("clock"); + Bangle.on('lcdPower', onLcd); + Bangle.setUI({ + mode: "clockupdown" + }, + btn => { + // up & down even which forces panel switch + drawSimpleClock(); + }); + Bangle.loadWidgets(); require("widget_utils").swipeOn();