04-14-2018 09:37
04-14-2018 09:37
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.
04-14-2018 13:40
04-14-2018 13:40
I've moved your post to the developer forum where hopefully someone can assist.
04-15-2018 06:36
04-15-2018 06:36
Check this great collection of open source clockfaces and apps for FitbitOS
04-16-2018 11:24
04-16-2018 11:24
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.
04-16-2018 12:09
04-16-2018 12:09
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;
04-16-2018 18:43
04-16-2018 18:43
@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.
04-21-2018 06:29
04-21-2018 06:29
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 🙂
04-21-2018 11:12
04-21-2018 11:12
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
12-01-2018 14:45
12-01-2018 14:45
Great respository!
12-20-2018 21:33
12-20-2018 21:33
This is great! Thanks for the help. I'm tweaking it now for my own needs.
12-22-2018 08:51
12-22-2018 08:51
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?
12-22-2018 09:28
12-22-2018 09:28
never mind newbie error, forgot to turn on the permissions in the package.json file.
D'oh!
10-09-2019 19:23
10-09-2019 19:23
go to the package.json and scroll down and check the heart rate box.
04-20-2020 06:25
04-20-2020 06:25
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
04-20-2020 23:41
04-20-2020 23:41
@ausiepete If you speak about my little Really Basic sample I thank you very much for your kind words