Usability improvements (#14)

* Added touch event to hide appointment

* Updated documentation

* Deactivated timer for activity update

* Commented out unused stuff

Co-authored-by: smirko-dev <smirko@arcor.de>

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.4.0-green)
+![version](https://img.shields.io/badge/version-%201.4.1-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)
@@ -17,6 +17,7 @@ It comes with
 - battery icon (Ionic: and status in percentage)
 - next calendar event of the current day
 - user activity in case of no events (selectable in settings menu)
+- touch to hide calendar event temporarily
 
 Find the latest published version in the [Fitbit gallery](https://gallery.fitbit.com/details/ae441b73-2660-407f-b796-a98d1d0583a0).
 

app/index.js

@@ -1,11 +1,8 @@
 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 { 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";
@@ -30,7 +27,7 @@ const ActivitySelection = {
 }
 
 let activitySelection = ActivitySelection.STEPS;
-let activityIntervalID = 0;
+//TODO: let activityIntervalID = 0;
 
 const INVISIBLE = 0.0;
 const VISIBLE = 0.8;
@@ -67,8 +64,6 @@ clock.initialize("minutes", data => {
   dateLabel.text = data.date;
   // Update appointment
   renderAppointment();
-  // Update battery
-  renderBattery();
 });
 
 battery.onchange = (evt) => {
@@ -81,13 +76,23 @@ appointment.initialize(() => {
 });
 
 display.addEventListener("change", () => {
-  // Update appointment and battery on display on
   if (display.on) {
+    // Update appointment and battery on display on
     renderAppointment();
     renderBattery();
   }
+  else {
+    // Stop updating activity info
+    hideActivity();
+  }
 });
 
+// Hide event when touched
+appointmentsLabel.addEventListener("mousedown", () => {
+  showActivity();
+  updateActivity();
+})
+
 function renderAppointment() {
   // Upate the appointment <text> element
   let event = appointment.next();
@@ -106,14 +111,14 @@ function hideActivity() {
   activityIcon.style.opacity = INVISIBLE;
   activityLabel.style.opacity = INVISIBLE;
   appointmentsLabel.style.opacity = VISIBLE;
-  clearInterval(activityIntervalID);
+  //TODO: clearInterval(activityIntervalID);
 }
 
 function showActivity() {
   activityIcon.style.opacity = VISIBLE;
   activityLabel.style.opacity = VISIBLE;
   appointmentsLabel.style.opacity = INVISIBLE;
-  activityIntervalID = setInterval(updateActivity, 1500);
+  //TODO: activityIntervalID = setInterval(updateActivity, 1500);
 }
 
 function updateActivity() {
@@ -123,7 +128,6 @@ function updateActivity() {
       activityLabel.text = today.adjusted.distance;
       break;
     case ActivitySelection.FLOORS:
-
       activityIcon.image = "floors.png";
       activityLabel.text = today.adjusted.elevationGain;
       break;
@@ -146,7 +150,10 @@ function renderBattery() {
   const level = Math.floor(battery.chargeLevel / 10) * 10;
   if (level < 20) {
     batteryImage.image = `battery-alert.png`;
-  } else {
+  }
+  else {
     batteryImage.image = `battery-${Math.floor(battery.chargeLevel / 10) * 10}.png`;
   }
 }
+
+renderBattery();

package.json

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

resources/index.gui

@@ -2,7 +2,7 @@
   <text id="hourLabel" />
   <text id="minuteLabel" />
   <text id="dateLabel" opacity=".8" />
-  <textarea id="appointmentsLabel" opacity=".8" />
+  <textarea id="appointmentsLabel" opacity=".8" pointer-events="visible" />
   <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" />