Device support

.github/workflows/FitbitBuild.yml

@@ -24,10 +24,10 @@ jobs:
       uses: actions/setup-node@v1
 
     - name: Checkout Fitbit SDK
-      run: npm add --dev @fitbit/sdk
+      run: npm add --also=dev @fitbit/sdk
 
     - name: Checkout Fitbit SDK-CLI
-      run: npm add --dev @fitbit/sdk-cli
+      run: npm add --also=dev @fitbit/sdk-cli
 
     - name: Run Build
       run: npx fitbit-build --if-present

README.md

@@ -1,14 +1,13 @@
-# Fitbit Ionic Clockface
+# Fitbit Clockface
 
 ![languages](https://img.shields.io/badge/languages-JavaScript%20|%20CSS-blue)
-![platform](https://img.shields.io/badge/platform-Fitbit%20Ionic-silver)
-![version](https://img.shields.io/badge/version-%201.2.0-green)
+![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)
 [![FitbitBuild Actions Status](https://github.com/smirko-dev/fitbit-clockface/workflows/FitbitBuild/badge.svg)](https://github.com/smirko-dev/fitbit-clockface/actions)
 
-
 ## Description
 
-This is a simple clock face for Fitbit Ionic.
+This is a simple clock face for Fitbit.
 It comes with
 - time (12/24hr format), date (including weekday)
 - languages: de-DE, en-EN
@@ -22,20 +21,23 @@ The clockface is based on https://github.com/Fitbit/sdk-calendar-clock/.
 
 Icons are from https://materialdesignicons.com/ ([Apache license version 2.0](https://www.apache.org/licenses/LICENSE-2.0.html)). 
 
-
 ## Screenshots
 
-![Appointment](screenshot.png) ![Activity](screenshot2.png)
+### Fitbit Ionic
+
+![Ionic Appointment](screenshots/ionic-event.png) ![Ionic Activity](screenshots/ionic-activity.png)
 
+### Fitbit Versa
 
+![Versa 2 Appointment](screenshots/versa2-event.png) ![Versa 2 Activity](screenshots/versa2-activity.png)
 
 ## How to build
 
 ```
 git clone [email protected]:smirko-dev/fitbit-clockface.git
 cd fitbit-clockface
-npm add --dev @fitbit/sdk
-npm add --dev @fitbit/sdk-cli
+npm add --also=dev @fitbit/sdk
+npm add --also=dev @fitbit/sdk-cli
 npx fitbit-build generate-appid
 npx fitbit-build
 ```

app/i18n/ru-RU.po

@@ -0,0 +1,57 @@
+
+msgid "sunday"
+msgstr "воскресенье"
+
+msgid "monday"
+msgstr "понедельник"
+
+msgid "tuesday"
+msgstr "вторник"
+
+msgid "wednesday"
+msgstr "среда"
+
+msgid "thursday"
+msgstr "четверг"
+
+msgid "friday"
+msgstr "пятница"
+
+msgid "saturday"
+msgstr "суббота"
+
+msgid "january"
+msgstr "январь"
+
+msgid "february"
+msgstr "февраль"
+
+msgid "march"
+msgstr "март"
+
+msgid "april"
+msgstr "апрель"
+
+msgid "may"
+msgstr "май"
+
+msgid "june"
+msgstr "июнь"
+
+msgid "july"
+msgstr "июль"
+
+msgid "august"
+msgstr "август"
+
+msgid "september"
+msgstr "сентябрь"
+
+msgid "october"
+msgstr "октябрь"
+
+msgid "november"
+msgstr "ноябрь"
+
+msgid "december"
+msgstr "декабрь"

app/index.js

@@ -4,6 +4,7 @@ import { preferences } from "user-settings";
 import { display } from "display";
 import { today } from 'user-activity';
 import { me } from "appbit";
+import { me as device } from "device";
 import * as util from "../common/utils";
 import * as appointment from "./appointment";
 import * as clock from "./clock";
@@ -17,7 +18,7 @@ const appointmentsLabel = document.getElementById("appointmentsLabel");
 const batteryImage = document.getElementById("batteryImage");
 const batteryLabel = document.getElementById("batteryLabel");
 
-const footstepImage = document.getElementById("footstepImage");
+const activityIcon = document.getElementById("activityIcon");
 const activityLabel = document.getElementById("activityLabel");
 
 clock.initialize("minutes", data => {
@@ -63,19 +64,26 @@ function renderAppointment() {
 }
 
 function hideActivity() {
-  footstepImage.image = ""
+  activityIcon.image = ""
   activityLabel.text = ""
 }
 
 function renderActivity() {
-  footstepImage.image = "shoe-print.png"
-  footstepImage.style.fill = "blue"
+  activityIcon.image = "shoe-print.png"
   activityLabel.text = today.adjusted.steps
 }
 
 function renderBattery() {
   // Update the battery <text> element every time when battery changed
-  batteryLabel.text = Math.floor(battery.chargeLevel) + "%";
+  // Show <text> just on Ionic
+  if (device.modelId != 27 ) {
+    batteryLabel.text = "";
+  }
+  else {
+    batteryLabel.text = Math.floor(battery.chargeLevel) + "%";
+  }
+
+  // Update battery icon
   const level = Math.floor(battery.chargeLevel / 10) * 10;
   if (level < 20) {
     batteryImage.image = `battery-alert.png`;

package.json

@@ -1,8 +1,18 @@
 {
+  "name": "compactclock",
+  "version": "1.3.0",
+  "license": "MIT",
   "devDependencies": {
     "@fitbit/sdk": "~4.2.0",
     "@fitbit/sdk-cli": "^1.7.3"
   },
+  "bugs": {
+    "url": "https://github.com/smirko-dev/fitbit-clockface/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/smirko-dev/fitbit-clockface.git"
+  },
   "fitbit": {
     "appUUID": "ae441b73-2660-407f-b796-a98d1d0583a0",
     "appType": "clockface",
@@ -15,7 +25,10 @@
       "access_activity"
     ],
     "buildTargets": [
-      "higgs"
+      "higgs",
+      "mira",
+      "meson",
+      "gemini"
     ],
     "i18n": {
       "en-US": {
@@ -28,6 +41,7 @@
     "defaultLanguage": "en-US"
   },
   "scripts": {
-    "build": "fitbit-build"
+    "build": "fitbit-build",
+    "debug": "fitbit"
   }
 }

resources/index.gui

@@ -5,6 +5,6 @@
   <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="footstepImage" href="shoe-print.png" x="110" y="210" width="32" height="32" fill="blue" 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" />
 </svg>

resources/styles.css

@@ -6,8 +6,8 @@
   font-size: 148;
   font-family: Colfax-Thin;
   text-length: 32;
-  text-anchor: middle;
-  x: 36%;
+  text-anchor: end;
+  x: 60%;
   y: 60%+20;
   fill: #2490DD;
 }
@@ -16,8 +16,8 @@
   font-size: 96;
   font-family: Colfax-Thin;
   text-length: 32;
-  text-anchor: middle;
-  x: 72%;
+  text-anchor: start;
+  x: 60%;
   y: 60%+20;
   fill: white;
 }
@@ -58,7 +58,11 @@
   font-family: Colfax-Light;
   text-length: 32;
   text-anchor: start;
-  x: 142;
-  y: 237;
+  x: 35%+30;
+  y: 80%+25;
   fill: white;
 }
+
+.activityIcon {
+  fill: #2490DD
+}