04-22-2020 05:34
04-22-2020 05:34
Hello everyone, I am new to fitbit and javascript in general. Things are going well (coming from working on Android Wear, I can instantly see why these devices use less power). but I have a bit of a hitch.
I am trying to add steps and floors to my watchface. I can do so, but if I put the call for the steps in my clock method, it shows as undefined. Does anyone have any hints?
Here is my current code below.
```
import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";
import { me as appbit } from "appbit";
import { today } from "user-activity";
import {battery} from "power";
// Instatiate the <text> element
const powerLevelLabel = document.getElementById("powerLevelLabel");
const stepsLabel = document.getElementById("stepsLabel");
const stairsLabel = document.getElementById("stairsLabel");
if (appbit.permissions.granted("access_activity")) {
console.log(`${today.adjusted.steps} Steps`);
let steps = today.adjusted.steps
stepsLabel.text = `${steps}`;
if (today.local.elevationGain !== undefined) {
console.log(`${today.adjusted.elevationGain} Floor(s)`);
let floors = today.adjusted.elevationGain;
stairsLabel.text = `${floors}`;
}
}
// Update the clock every second
clock.granularity = "seconds";
let hourHand = document.getElementById("hours");
let minHand = document.getElementById("mins");
let secHand = document.getElementById("secs");
// Returns an angle (0-360) for the current hour in the day, including minutes
function hoursToAngle(hours, minutes) {
let hourAngle = (360 / 12) * hours;
let minAngle = (360 / 12 / 60) * minutes;
return hourAngle + minAngle;
}
// Returns an angle (0-360) for minutes
function minutesToAngle(minutes) {
return (360 / 60) * minutes;
}
// Returns an angle (0-360) for seconds
function secondsToAngle(seconds) {
return (360 / 60) * seconds;
}
// Rotate the hands every tick
function updateClock() {
let today = new Date();
let hours = today.getHours() % 12;
let mins = today.getMinutes();
let secs = today.getSeconds();
hourHand.groupTransform.rotate.angle = hoursToAngle(hours, mins);
minHand.groupTransform.rotate.angle = minutesToAngle(mins);
secHand.groupTransform.rotate.angle = secondsToAngle(secs);
let power = (Math.floor(battery.chargeLevel));
powerLevelLabel.text = `${power}` +" %";
}
// Update the clock every tick event
clock.ontick = () => updateClock();
```
This works and reads my steps, but only calls on the first run (obviously).
If I try to put the steps and stairs in the `clock.ontick()` method, the call to the steps fail. I think permissions are granted correctly.
Does anyone have any advice or an example they can share to keep the steps updated?
Answered! Go to the Best Answer.
04-22-2020 19:57
04-22-2020 19:57
Ah; bingo! You're using 'today' as a variable name (as well as an import)!
04-22-2020 13:58
04-22-2020 13:58
I think your approach is valid. I'm wondering about a syntax error. Could you paste the code that produces the error?
04-22-2020 19:25
04-22-2020 19:25
Thank you. It is good to know I am on the right track. After wearing the face all day, I do see that it updates, but it is incredibly slow (perhaps once every hour).
So, if I take the section where I call for the steps and floors, and move them into the method (function, sorry, old habits) that updates the clock, I get the unhandled exception. The odd thing is twofold. One, it passes the recommended if test (obviously, permission was actually granted), and two, the today class turns blue (unrecognized?) in the editor (I am using Fitbit Studio which is quite nice). Here is the code.
```
import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";
import { me as appbit } from "appbit";
import { today } from "user-activity";
import {battery} from "power";
// Instatiate the <text> element
const powerLevelLabel = document.getElementById("powerLevelLabel");
const stepsLabel = document.getElementById("stepsLabel");
const stairsLabel = document.getElementById("stairsLabel");
// Update the clock every second
clock.granularity = "seconds";
let hourHand = document.getElementById("hours");
let minHand = document.getElementById("mins");
let secHand = document.getElementById("secs");
// Returns an angle (0-360) for the current hour in the day, including minutes
function hoursToAngle(hours, minutes) {
let hourAngle = (360 / 12) * hours;
let minAngle = (360 / 12 / 60) * minutes;
return hourAngle + minAngle;
}
// Returns an angle (0-360) for minutes
function minutesToAngle(minutes) {
return (360 / 60) * minutes;
}
// Returns an angle (0-360) for seconds
function secondsToAngle(seconds) {
return (360 / 60) * seconds;
}
// Rotate the hands every tick
function updateClock() {
let today = new Date();
let hours = today.getHours() % 12;
let mins = today.getMinutes();
let secs = today.getSeconds();
hourHand.groupTransform.rotate.angle = hoursToAngle(hours, mins);
minHand.groupTransform.rotate.angle = minutesToAngle(mins);
secHand.groupTransform.rotate.angle = secondsToAngle(secs);
let power = (Math.floor(battery.chargeLevel));
powerLevelLabel.text = `${power}` +" %";
if (appbit.permissions.granted("access_activity")) {
console.log(`${today.adjusted.steps} Steps`);
let steps = today.adjusted.steps //today shows up blue, and the {steps} variable does not work.
stepsLabel.text = `${steps}`;
if (today.local.elevationGain !== undefined) {
console.log(`${today.adjusted.elevationGain} Floor(s)`); //It cannot read the console
let floors = today.adjusted.elevationGain; //today shows up blue, and the {floors} variable does not //work.
stairsLabel.text = `${floors}`;
}
}
}
// Update the clock every tick event
clock.ontick = () => updateClock();
```
Time still works, so it does not produce a blocking call (I did manage to accomplish that while trying to figure out how to place the stairs and the steps icons. I figured that out though.
04-22-2020 19:57
04-22-2020 19:57
Ah; bingo! You're using 'today' as a variable name (as well as an import)!
04-22-2020 21:10
04-22-2020 21:10
Oh my, how did I miss that? Thank you.
04-22-2020 21:15
04-22-2020 21:15
D'oh? 😉
04-23-2020 16:04
04-23-2020 16:04
Yep. (-‸ლ)