Merge pull request #6 from smirko-dev/ActivityInfo

Activity info

README.md

@@ -2,9 +2,10 @@
 
 ![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.1.1-green)
+![version](https://img.shields.io/badge/version-%201.2.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.
@@ -13,16 +14,20 @@ It comes with
 - languages: de-DE, en-EN
 - battery icon with status in percentage
 - next calendar event of the current day
+- step count in case of no events
 
 Find the latest published version in the [Fitbit gallery](https://gallery.fitbit.com/details/ae441b73-2660-407f-b796-a98d1d0583a0).
 
 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)). 
 
-## Screenshot
 
-![Screenshot](screenshot.png)
+## Screenshots
+
+![Appointment](screenshot.png) ![Activity](screenshot2.png)
+
+
 
 ## How to build
 

app/index.js

@@ -2,6 +2,7 @@ import document from "document";
 import { battery } from "power";
 import { preferences } from "user-settings";
 import { display } from "display";
+import { today } from 'user-activity';
 import { me } from "appbit";
 import * as util from "../common/utils";
 import * as appointment from "./appointment";
@@ -16,6 +17,9 @@ const appointmentsLabel = document.getElementById("appointmentsLabel");
 const batteryImage = document.getElementById("batteryImage");
 const batteryLabel = document.getElementById("batteryLabel");
 
+const footstepImage = document.getElementById("footstepImage");
+const activityLabel = document.getElementById("activityLabel");
+
 clock.initialize("minutes", data => {
   // Update <text> elements with each tick
   hourLabel.text = data.hours;
@@ -50,12 +54,25 @@ function renderAppointment() {
   if (event) {
     const date = fromEpochSec(event.startDate);
     appointmentsLabel.text = timeString(date) + " " + event.title;
+    hideActivity();
   }
   else {
     appointmentsLabel.text = ""
+    renderActivity();
   }
 }
 
+function hideActivity() {
+  footstepImage.image = ""
+  activityLabel.text = ""
+}
+
+function renderActivity() {
+  footstepImage.image = "shoe-print.png"
+  footstepImage.style.fill = "blue"
+  activityLabel.text = today.adjusted.steps
+}
+
 function renderBattery() {
   // Update the battery <text> element every time when battery changed
   batteryLabel.text = Math.floor(battery.chargeLevel) + "%";

package.json

@@ -11,7 +11,8 @@
     "wipeColor": "",
     "requestedPermissions": [
       "access_calendar",
-      "run_background"
+      "run_background",
+      "access_activity"
     ],
     "buildTargets": [
       "higgs"

resources/index.gui

@@ -5,4 +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" />
+  <text id="activityLabel" opacity=".75" />
 </svg>

resources/styles.css

@@ -52,3 +52,13 @@
   y: 10%;
   fill: white;
 }
+
+#activityLabel {
+  font-size: 28;
+  font-family: Colfax-Light;
+  text-length: 32;
+  text-anchor: start;
+  x: 142;
+  y: 237;
+  fill: white;
+}