04-01-2018 04:55 - edited 04-01-2018 04:56
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-01-2018 04:55 - edited 04-01-2018 04:56
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Hello,
Hope all is well. Right now I have my clock face running. However, the steps don’t update in real-time on my clock face. What’s the best way to write the JS to update these stats in real-time? Thanks in advance!

- Labels:
-
JavaScript
04-01-2018 10:11
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-01-2018 10:11
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Is your granularity set to minutes or seconds?

04-01-2018 15:44
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-01-2018 15:44
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I have set to seconds. See the index.js file below. Thanks!
'use strict'; import clock from "clock"; import document from "document"; import { preferences } from "user-settings"; import * as util from "../common/utils"; import * as simpleActivity from "./simple-activity"; import { HeartRateSensor } from "heart-rate"; // Update the clock @ a specified interval clock.granularity = "seconds"; // Get a handle on the <text> element const MYHOUR = document.getElementById("myHour"); const MYMINUTES = document.getElementById("myMinutes"); const MYDATE = document.getElementById("myDate"); const MONTH_NAMES = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN","JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]; const MYHR = document.getElementById("myHR"); // Update the <text> element every tick with the current time clock.ontick = (evt) => { let today = evt.date; var hours = today.getHours(); if (preferences.clockDisplay === "12h") { // 12h format hours = hours % 12 || 12; } else { // 24h format hours = util.zeroPad(hours); } let mins = util.zeroPad(today.getMinutes()); let day = today.getDate(); let month = MONTH_NAMES[today.getMonth()]; let year = today.getFullYear().toString().slice(-2); MYHOUR.text = `${hours}`; MYMINUTES.text = `${mins}`; MYDATE.text = `${day} ${month} ${year}`; // Get heart rate var hrm = new HeartRateSensor(); hrm.onreading = function() { // Peek the current sensor values MYHR.text = hrm.heartRate; console.log("Current heart rate: " + hrm.heartRate); // Stop monitoring the sensor hrm.stop(); } // Begin monitoring the sensor hrm.start(); // Get today's stats const GRANULARITY = "seconds"; // or seconds let barCalories = document.getElementById("barCalories"); let barSteps = document.getElementById("barSteps"); let barActiveMinutes = document.getElementById("barActiveMinutes"); let statCalories = document.getElementById("statCalories"); let statSteps = document.getElementById("statSteps"); let statActiveMinutes = document.getElementById("statActiveMinutes"); function activityCallback(data) { // work out the percentage height here barCalories.height = (data.calories.raw / data.goalCalories.raw)*348; // data.calories; barSteps.height = (data.steps.raw / data.goalSteps.raw)*348; //data.steps; barActiveMinutes.height = (data.activeMinutes.raw / data.goalActiveMinutes.raw)*348; //data.activeminutes; statCalories.text = data.calories.pretty; statSteps.text = data.steps.pretty; statActiveMinutes.text = data.activeMinutes.pretty } simpleActivity.initialize(GRANULARITY, activityCallback); };

04-02-2018 09:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-02-2018 09:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I was kind of hoping an actual programmer would have stepped in to help by now. In their absence, I have some thoughts. My first question is, where did you find the simple-activity api? I could not find reference to it. The second question is, what does the ".pretty" do?
My suggestion would be to use
import { today } from 'user-activity';
Along with this, I update my steps using
let stepCt = today.adjusted.steps;
I get this info from Device API, User-Activity API. My only other real thought is that you might want to try and pull your functions out of the clock.ontick function. Then, inside the clock.ontick function, call them. I only say this because I have found as newb that it is easier to troubleshoot when I screw something up.

04-03-2018 14:48 - edited 04-03-2018 14:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-03-2018 14:48 - edited 04-03-2018 14:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Thanks FlyFrosty! I got the simple-activity.js from this post: https://community.fitbit.com/t5/SDK-Development/Best-way-to-embed-steps-and-calories-into-bar-graph/...
However, I think I may have to tweak something there to get it to work properly. Thanks for your input!

08-12-2020 16:19 - edited 11-05-2021 11:23
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-12-2020 16:19 - edited 11-05-2021 11:23
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
To get real-time stats put the following into your index.js:
function refresh_myActivity() {
statSteps.text = today.adjusted.steps;
statCalories.text = today.adjusted.calories;
statActiveMinutes.text = today.adjusted.activeMinutes;
}
clock.granularity = "seconds";
clock.ontick = (evt) => {
refresh_myActivity();
}
Hopefully, this code works for you 😉 The clock.ontick function only runs when the display is on so battery consumption is low.
If this answer works please mark this post as a Best Answer. ~ K.K Designs
01-19-2021 12:48
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-19-2021 12:48
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Refreshing constantly while the display is off can be a waste of battery. I would also suggest using the Display API to detect whether the display is on or off. Making an addition to @Krish_2009 suggestion above:
import { display } from "display";
// ...
// Refresh data on the screen
function refresh_myActivity() {
statSteps.text = today.adjusted.steps;
statCalories.text = today.adjusted.calories;
statActiveMinutes.text = today.adjusted.activeMinutes;
}
let timerId = 0; // Keeps the timer id, so we can kill it.
// Kills the timer (if it is running)
function stopTimer() {
if (timerId != 0) {
clearInterval (timerId);
timerId = 0;
}
}
// Starts the timer. If there is one running, kills and replaces it.
function startTimer() {
stopTimer();
if (timerId == 0) {
timerId = setInterval(refresh_myActivity, 700); /* refresh rate in ms */
}
}
// Event handler for changes in the display status
function displayChanged() {
if (display.on) {
startTimer();
} else {
stopTimer();
}
}
// Calls displayChanged() when display changes.
display.addEventListener("change", displayChanged);
08-04-2021 20:09
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-04-2021 20:09
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Updated my post to match what you want.

