Stats refresh interval

[ramirezp]

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!

[FlyFrosty]

Is your granularity set to minutes or seconds?

[ramirezp]

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);
  
};

[FlyFrosty]

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.

[ramirezp]

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!

[Krish_2009]

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

[paulera888]

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);

[Krish_2009]

Updated my post to match what you want.