Adding heart rate and steps to clock face in fitbit studios

[AC1891]

I am creating my first watch face. I was able to add a back ground image adjust the time color but now I want to add the heart rate and steps on the screen. How do I do that? I don't know anything about coding. 

[SunsetRunner]

I've moved your post to the developer forum where hopefully someone can assist.

[Giampi71]

Check this great collection of open source clockfaces and apps for FitbitOS

https://github.com/Fitbit/ossapps/

[PandorasVirus]

Thanks for the link but I don't think that is what they are looking for. I am in the same boat as the original poster; although I do have some coding exp (going all the way back to html). I came to this thread looking for more of a tutorial on what to write and where to add it in the code to get the different stats on the watch face.  The official Fitbit tutorials and guides have yet to be fully finished and are not geared for beginners.  YouTube doesn't really have any videos that I have been able to find as of yet for watch faces.

[JonFitbit]

You need to add a <text> field with an ID, and then use CSS to style it.

<text id="txtSteps" />

#txtSteps {
  /* e.g. font-size, font-family, color, x, y */
}

Then you can use the User Activity API to put the step count into that field.

import { today } from "user-activity";

let txtSteps = document.getElementById("txtSteps");

// inside the clock tick handler
txtSteps.text = today.adjusted.steps || 0;

[Giampi71]

---

@PandorasVirus wrote:

Thanks for the link but I don't think that is what they are looking for. I am in the same boat as the original poster; although I do have some coding exp (going all the way back to html). I came to this thread looking for more of a tutorial on what to write and where to add it in the code to get the different stats on the watch face.  The official Fitbit tutorials and guides have yet to be fully finished and are not geared for beginners.  YouTube doesn't really have any videos that I have been able to find as of yet for watch faces.

---

May I suggest this great course on Udemy?

https://www.udemy.com/fitbit-ionic/learn/v4/overview

Of course it is just a base and then you need to work by yourself but it really helped me a lot to start to understand the basis of FitbitOS coding.

[Giampi71]

I did this very simple clockface "VERY BASIC" and you can find the source code at 

https://github.com/gpfrello/FitbitOS-Really-Basic

I hope it can help beginners like me 🙂

[PandorasVirus]

Thanks for the tips and Giampi71 thanks for making the simple watch face as a sample. I appreciate it and look forward to playing around with it 

[teshny]

Great respository! 

[nemoyatpeace]

This is great!  Thanks for the help.  I'm tweaking it now for my own needs.

[lneib]

your tutorial was great, and I mostly got it working but I am receiving a "No permission to access the user activity API" when I build the application and run it on the simulator. Any thoughts?

[lneib]

never mind newbie error, forgot to turn on the permissions in the package.json file.

D'oh!

[rohand]

go to the package.json and scroll down and check the heart rate box.

[ausiepete]

This is a great little project as it sticks to some basics and makes it easy to combine with some other code I had already done, many thanks

[Giampi71]

@ausiepete If you speak about my little Really Basic sample I thank you very much for your kind words