Fitbit Studio | How do I add steps and heart rate?

[Enoki]

I've managed to adjust some of the things in the clock face, but I don't know how to add the steps and heart rate. Any help?

[Rich_Laue]

Normally this will be found in the app under the clock then settings. Sometimes the clock has a settings on it. Other clocks the user taps to switch stats. 

If you would like to mention which of the 1000 or so faces we are interested in. We may be able to help. 

[Enoki]

I apologize for not elaborating enough. This is in Fitbit Studio, I'm trying to develop my own watch face.

[Rich_Laue]

Thank you @Enoki I've moved your post from hardware support to the development support. 

[JonHagen]

Hey Enoki!

There are examples for these functions in the device API.

Heart Rate 

Steps 

Also, here's another place where this question was previously answered. 

[Krish_2009]

For Heart rate:

Add this to your index.js: 

const myHRM = document.getElementById("myHRM");
import { HeartRateSensor } from "heart-rate";

if (HeartRateSensor) {
  const hrm = new HeartRateSensor({ frequency: 1 });
  hrm.addEventListener("reading", () =>  {
      
       myHRM.text=`${hrm.heartRate}`;
  });
 
  hrm.start();
}

import { BodyPresenceSensor } from "body-presence";

if (BodyPresenceSensor) {
  const body = new BodyPresenceSensor();
  body.addEventListener("reading", () => {
    if (!body.present) {
     myHRM.text="--"
    } else {
      
    }
  });
  body.start();
}

Index.gui:

<text id="myHRM"></text>

CSS:

#myHRM {
  font-size: 22;
  font-family: Seville-Bold ;
  text-length: 32;
  text-anchor: middle;
  x: 24%;
  y: 67%+0;
  fill: white;
}

For steps:

Index.js: 

const mySteps = document.getElementById("mySteps");
const myCalories = document.getElementById("myCalories");

import { me as appbit } from "appbit";
import { today } from "user-activity";

if (appbit.permissions.granted("access_activity")) {
   console.log(`${today.adjusted.steps} Steps`);
  mySteps.text=`${today.adjusted.steps}`;
   if (today.local.calories !== undefined) {
     myCalories.text=`${today.adjusted.calories}`;
    console.log(`${today.adjusted.calories} calories`);
     
   }
}

Index.gui:

<text id="mySteps"></text>
<text id="myCalories"></text>

At last CSS: 

#mySteps {
  font-size: 22;
  font-family: Seville-Bold ;
  text-length: 32;
  text-anchor: middle;
  x: 52%;
  y: 67%+0;
  fill: white;
}
#myCalories {
  font-size: 22;
  font-family: Seville-Bold ;
  text-length: 32;
  text-anchor: middle;
  x: 86%;
  y: 67%+0;
  fill: white;
}

Hopefully, this works 😉

Please note, the stats won't refresh. To get realtime stats use this post 

If this answer works please mark this post as a Best Answer.  ~ K.K Designs

[BatJew]

But where do I put those lines of code in the index.js file? In the clock tick? Outside of the clock tick? I have tried both and have had zero luck.

[Giampi71]

Hello @BatJew 

give a look to this little clockface I made that covers the basics.