Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Adding heart rate and steps to clock face in fitbit studios

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. 

Best Answer
0 Votes
14 REPLIES 14

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

Best Answer

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

 

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

Best Answer

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.

Fitbit Versa SE, Aria 2
Best Answer

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;

 

Best Answer

@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.

Best Answer

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 🙂

Best Answer

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 

Fitbit Versa SE, Aria 2
Best Answer
0 Votes

Great respository! 

Best Answer
0 Votes

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

Best Answer
0 Votes

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?

Best Answer
0 Votes

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

 

D'oh!

Best Answer

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

Best Answer
0 Votes

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

Best Answer
0 Votes

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

Best Answer
0 Votes