Display Current Number of Steps on the WatchFace?

[Anthoang]

I'm looking for a way to display the current steps taken by the user on the watchface.  There seems to be several different ways.  Looking for some advice. 

In using this Web-API ( https://dev.fitbit.com/reference/web-api/activity/#get-daily-activity-summary)

In this API, it looks as though the user's activity is logged on the api.fitbit.com server, and a userID is required to be passed in as a parameter.  

Or use the Device API ( https://dev.fitbit.com/reference/device-api/user-activity/#interface-goals- )?

In this API, it looks like there's a way to get the number of steps directly from the Ionic.  But the documentation seems incomplete.  

[JonFitbit]

You want to use the Device API, it holds the local value, and the adjusted value from site.

import { today, goals } from "user-activity"

// show the user's activity for the day
const fieldMap: any = {
 distance: {name: "distance", unit: "m" },
 calories: {name: "calories", unit: "Cal" },
 steps: {name: "steps", unit: "" },
 elevationGain: {name: "elevation", unit: "floors"},
 activeMinutes: {name: "active minutes", unit: "" }
};
["local", "adjusted"].forEach(scope => {
 console.log(`Activity(${scope}):`)
 let activity: any = (today as any)[scope]
 for (let field in fieldMap) {
 if ((activity as any)[field] !== undefined) {
 console.log(` ${fieldMap[field].name}: ${activity[field]} ${fieldMap[field].unit}`)
 }
 }
})

[kenjamin · Accepted solution]

So a really basic version might look as simple as this?

import { today } from 'user-activity';
console.log(today.adjusted.steps)

[Anthoang]

Both of the above code snipplets work for me.  I am now able to get the current number of steps taken.  Here is the javascript version of the same code snipplets in case anyone needs it, 

  import { today, goals } from "user-activity";

  // show the user's activity for the day
  var fieldMap = {
    distance: { name: "distance", unit: "m" },
    calories: { name: "calories", unit: "Cal" },
    steps: { name: "steps", unit: "" },
    elevationGain: { name: "elevation", unit: "floors" },
    activeMinutes: { name: "active minutes", unit: "" }
  };
  ["local", "adjusted"].forEach(function (scope) {
    console.log("ANTActivity(" + scope + "):");
    var activity = today[scope];
    for (var field in fieldMap) {
        if (activity[field] !== undefined) {
            console.log(" " + fieldMap[field].name + ": " + activity[field] + " " + fieldMap[field].unit);
        }
    }
  });
  console.log("ANTsteps:" + today.adjusted.steps);

[Anthoang]

This line of code had worked for me before, 

import { today } from 'user-activity';
console.log(today.adjusted.steps)

But after updating my ionic to the latest firmware version, the same code now returns "undefined".  Nothing in the code change... only the firmware version.  

This code to get the goals returns undefined also, 

import { goals } from "user-activity";
console.log(goals.steps);

[Anthoang]

ok.  to resolve my issue, i had to request permission for the "Activity" in the package.json file.  

[SunsetRunner]

how does one actually set a variable to that so it could be stored and/or printed on the screen eventually?

can i do something like :

let steps = today.adjusted.steps;

?

and then display out 'steps' at some specific screen location?

[Fitnessgal86]

I am struggling with this to make it work.

Can anyone advise what I am doing wrong?:

import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";
import { today } from 'user-activity';

// Update the clock every minute
clock.granularity = "minutes";
console.log(today.adjusted.steps)

// Get a handle on the <text> element
const myLabel = document.getElementById("myLabel");
const myMonth = document.getElementById("myMonth");
const myDay = document.getElementById("myDay");

// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
let today = evt.date;
let hours = today.getHours();
let monthnum = today.getMonth();
let day = today.getDate();
var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
let monthname = month[monthnum];
if (preferences.clockDisplay === "12h") {
// 12h format
hours = hours % 12 || 12;
} else {
// 24h format
hours = util.zeroPad(hours);
}
let mins = util.zeroPad(today.getMinutes());
myLabel.text = `${hours}:${mins}`;
myMonth.text = `${monthname}`;
myDay.text = `${day}`;

}

It is starting to look a bit messy now and I am unsure where I should be adding to! I am new to all this and just want to add steps as well as Time and Date. 

Thank you!! 

[Giampi71]

Hello @Fitnessgal86, 

I know your feeling. I think you should go one step at the time.

I made this clockface just to learn the basis

https://github.com/gpfrello/FitbitOS-Really-Basic/tree/master/app

This should cover the steps indication (and others), then you can move to clear the bug of the date.

Let me know if you need further help.

[adriec]

Legend.

I am designing a rolex style clock face and I am teaching myself js from scratch lol

This helps a lot!