Merge pull request #9 from smirko-dev/MoreActivities

Selectable activities

README.md

@@ -3,7 +3,7 @@
 [![](https://img.shields.io/badge/Fitbit%20App%20Gallery-%2300B0B9?style=flat&logo=fitbit&logoColor=white)](https://gallery.fitbit.com/details/ae441b73-2660-407f-b796-a98d1d0583a0)
 ![languages](https://img.shields.io/badge/languages-JavaScript%20|%20CSS-blue)
 ![platform](https://img.shields.io/badge/platforms-Ionic%20|%20Versa%20|%20Versa%202%20|%20Versa%20Lite-silver)
-[![version](https://img.shields.io/badge/version-%201.3.0-green)](https://github.com/smirko-dev/fitbit-clockface/releases)
+![version](https://img.shields.io/badge/version-%201.4.0-green)
 [![](https://img.shields.io/github/license/smirko-dev/fitbit-clockface.svg)](https://github.com/smirko-dev/fitbit-clockface/blob/master/LICENSE)
 [![FitbitBuild Actions Status](https://github.com/smirko-dev/fitbit-clockface/workflows/FitbitBuild/badge.svg)](https://github.com/smirko-dev/fitbit-clockface/actions)
 [![CodeQL Actions Status](https://github.com/smirko-dev/fitbit-clockface/workflows/CodeQL/badge.svg)](https://github.com/smirko-dev/fitbit-clockface/actions)
@@ -14,9 +14,9 @@ This is a simple clock face for Fitbit.
 It comes with
 - time (12/24hr format), date (including weekday)
 - languages: de-DE, en-EN
-- battery icon with status in percentage
+- battery icon (Ionic: and status in percentage)
 - next calendar event of the current day
-- step count in case of no events
+- user activity in case of no events (selectable in settings menu)
 
 Find the latest published version in the [Fitbit gallery](https://gallery.fitbit.com/details/ae441b73-2660-407f-b796-a98d1d0583a0).
 
@@ -34,6 +34,10 @@ Icons are from https://materialdesignicons.com/ ([Apache license version 2.0](ht
 
 ![Versa 2 Appointment](screenshots/versa2-event.png) ![Versa 2 Activity](screenshots/versa2-activity.png)
 
+### Settings
+
+![Settings](screenshots/settings.png)
+
 ## How to build
 
 ```

app/index.js

@@ -8,9 +8,10 @@ import { me as device } from "device";
 import * as util from "../common/utils";
 import * as appointment from "./appointment";
 import * as clock from "./clock";
+import * as messaging from "messaging";
 import { fromEpochSec, timeString } from "../common/utils";
 
-// Get a handle on the <text> elements
+// Get a handle on the <text> and <image> elements
 const hourLabel = document.getElementById("hourLabel");
 const minuteLabel = document.getElementById("minuteLabel");
 const dateLabel = document.getElementById("dateLabel");
@@ -21,6 +22,32 @@ const batteryLabel = document.getElementById("batteryLabel");
 const activityIcon = document.getElementById("activityIcon");
 const activityLabel = document.getElementById("activityLabel");
 
+const ActivitySelection = {
+  DIST: 'distance',
+  FLOORS: 'floors',
+  CAL: 'calories',
+  STEPS: 'steps'
+}
+
+let activitySelection = ActivitySelection.STEPS;
+
+// Update app settings
+messaging.peerSocket.onmessage = (evt) => {
+  if (evt.data === "distance") {
+    activitySelection = ActivitySelection.DIST;
+  }
+  else if (evt.data === "floors") {
+    activitySelection = ActivitySelection.FLOORS;
+  }
+  else if (evt.data === "calories") {
+    activitySelection = ActivitySelection.CAL;
+  }
+  else {
+    activitySelection = ActivitySelection.STEPS;
+  }
+  renderAppointment();
+}
+
 clock.initialize("minutes", data => {
   // Update <text> elements with each tick
   hourLabel.text = data.hours;
@@ -42,7 +69,7 @@ appointment.initialize(() => {
 });
 
 display.addEventListener("change", () => {
-  // Update appointment on display on
+  // Update appointment and battery on display on
   if (display.on) {
     renderAppointment();
     renderBattery();
@@ -58,19 +85,36 @@ function renderAppointment() {
     hideActivity();
   }
   else {
-    appointmentsLabel.text = ""
+    appointmentsLabel.text = "";
     renderActivity();
   }
 }
 
 function hideActivity() {
-  activityIcon.image = ""
-  activityLabel.text = ""
+  activityIcon.image = "";
+  activityLabel.text = "";
 }
 
 function renderActivity() {
-  activityIcon.image = "shoe-print.png"
-  activityLabel.text = today.adjusted.steps
+  switch (activitySelection) {
+    case ActivitySelection.DIST:
+      activityIcon.image = "distance.png";
+      activityLabel.text = today.adjusted.distance;
+      break;
+    case ActivitySelection.FLOORS:
+
+      activityIcon.image = "floors.png";
+      activityLabel.text = today.adjusted.elevationGain;
+      break;
+    case ActivitySelection.CAL:
+      activityIcon.image = "calories.png";
+      activityLabel.text = today.adjusted.calories;
+      break;
+    default:
+      activityIcon.image = "steps.png";
+      activityLabel.text = today.adjusted.steps;
+      break;
+  }
 }
 
 function renderBattery() {

common/utils.js

@@ -20,6 +20,18 @@ export function dayString(day) {
   else if (day == 3) {
     return "3rd"
   }
+  if (day == 21) {
+    return "21st"
+  }
+  else if (day == 22) {
+    return "22nd"
+  }
+  else if (day == 23) {
+    return "23rd"
+  }
+  if (day == 31) {
+    return "31st"
+  }
   return day.toString() + "th";
 }
 

companion/index.js

@@ -6,6 +6,19 @@ import { outbox } from "file-transfer";
 import { toEpochSec } from "../common/utils";
 import { dataFile, millisecondsPerMinute } from "../common/constants";
 
+import { settingsStorage } from "settings";
+import * as messaging from "messaging";
+
+// Update user settings 
+settingsStorage.onchange = function(evt) {
+  if (messaging.peerSocket.readyState === messaging.peerSocket.OPEN) {
+    if (evt.key === "activity") {
+      let data = JSON.parse(evt.newValue);
+      messaging.peerSocket.send(data["values"][0].value);
+    }
+  }
+}
+
 companion.wakeInterval = 15 * millisecondsPerMinute;
 companion.addEventListener("wakeinterval", refreshEvents);
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "compactclock",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "license": "MIT",
   "devDependencies": {
     "@fitbit/sdk": "~4.2.0",

resources/index.gui

@@ -1,10 +1,10 @@
 <svg class="background">
   <text id="hourLabel" />
   <text id="minuteLabel" />
-  <text id="dateLabel" opacity=".75" />
-  <textarea id="appointmentsLabel" opacity=".75" />
-  <image id="batteryImage" href="battery-alert.png" x="275" y="5" width="24" height="24" fill="white" opacity=".5" />
-  <text id="batteryLabel" opacity=".75" />
-  <image id="activityIcon" href="shoe-print.png" x="35%" y="80%" width="32" height="32" opacity=".75" class="activityIcon" />
-  <text id="activityLabel" opacity=".75" />
+  <text id="dateLabel" opacity=".8" />
+  <textarea id="appointmentsLabel" opacity=".8" />
+  <image id="batteryImage" href="battery-alert.png" x="275" y="5" width="24" height="24" opacity=".6" class="batteryIcon" />
+  <text id="batteryLabel" opacity=".8" />
+  <image id="activityIcon" href="steps.png" x="35%" y="80%" width="32" height="32" opacity=".8" class="activityIcon" />
+  <text id="activityLabel" opacity=".8" />
 </svg>

resources/styles.css

@@ -65,4 +65,8 @@
 
 .activityIcon {
   fill: #2490DD
+}
+
+.batteryIcon {
+  fill: #FFFFFF
 }

settings/i18n/de-DE.po

@@ -0,0 +1,15 @@
+
+msgid "title"
+msgstr "Aktivitäts-Info"
+
+msgid "steps"
+msgstr "Schritte"
+
+msgid "cal"
+msgstr "Kalorien"
+
+msgid "dist"
+msgstr "Distanz"
+
+msgid "floors"
+msgstr "Etagen"

settings/i18n/en-US.po

@@ -0,0 +1,15 @@
+
+msgid "title"
+msgstr "Activity info"
+
+msgid "steps"
+msgstr "Steps"
+
+msgid "cal"
+msgstr "Calories"
+
+msgid "dist"
+msgstr "Distance"
+
+msgid "floors"
+msgstr "Floors"

settings/i18n/ru-RU.po

@@ -0,0 +1,15 @@
+
+msgid "title"
+msgstr "Инфо о деятельности"
+
+msgid "steps"
+msgstr "Шаги"
+
+msgid "cal"
+msgstr "Калорий"
+
+msgid "dist"
+msgstr "Расстояние"
+
+msgid "floors"
+msgstr "Полы"

settings/index.jsx

@@ -0,0 +1,28 @@
+
+import { gettext } from "i18n";
+
+function settingsFunc(props) {
+  let title = gettext("title");
+  let steps = gettext("steps");
+  let dist = gettext("dist");
+  let floors = gettext("floors");
+  let cal = gettext("cal");
+  return (
+    <Page>
+        <Section>
+            <Select 
+                label={`${title}`}
+                settingsKey="activity"
+                options={[
+                    { name: `${steps}`, value: "steps" },
+                    { name: `${dist}`, value: "distance" },
+                    { name: `${floors}`, value: "floors" },
+                    { name: `${cal}`, value: "calories" }
+                ]}
+            />
+        </Section>
+    </Page>
+  )
+}
+
+registerSettingsPage(settingsFunc);