Creating your own clock face with FitBit Studio

[SunsetRunner]

Can someone please explain to me exactly how this is done.  Is there a video tutorial to better explain. I have no clue what some of the technical wordings mean.  Thanks!

Moderator edit: added label

[MarreFitbit]

Welcome to the Fitbit Community @SunsetRunner, hope you're doing great today!  Have you checked the article "How do I develop new apps for the Fitbit App Gallery?". 

Check the Getting Started Guide page to find everything you need to develop your app. Also, I think it would be of help if you take a look at this post from @Gondwana where he shares an awesome tab of help for the Fitbit Studio. 

Let me know if there's anything else I can assist you with. 

[litetaker]

Hello Fitgirl. This is not a consumer friendly way of doing it. It involves a bit of programming, so if you are comfortable with that, go right ahead! But if you are not a developer, then unfortunately this can feel like complicated!

[SunsetRunner]

The link below is a good place to start, where you can look at a number of users who programmed their own clock face:

https://github.com/Fitbit/ossapps

You may find some codes are more sophisticated than others, I like the following two as their codes are easy to understand :

Poupinounours' Clock by François-Xavier Mauricard

TH3 by Terry Yuen

To start your journey, first go to https://studio.fitbit.com signing up an account.

Once you logged in, you will see a Windows File Manager like interface, left hand side are the files you need and right hand side is the editing window.

Basically, for a simple one page Fitbit clock face, if you are not going to use any icons and/or graphics, there are only three files you need to work on:

app\index.js

resources\index.gui

resources\styles.css

"index.js" is the page being called/run when your clock face is required to display, either from sleep/ging back from another page.  This file includes the functions of how the clock should work, what items are to be displayed in what manner, all the calculations on all scaling and dimension of basic shapes (like Lines, Rings etc.), all needed variables will be picked up by the second file.

"index.gui" is the second file, it is HTML like in format, this file controls how the variables picked up from "index.js" to be displayed on the clock window whether it is the Ionic with 348x250 or the Versa with 300x300, you may fine tune all your components position, size, type-face and colour (although you may also do this under "index.js")

"styles.css" is the last file, this is only for easier management for formatting, very much like an extension of "index.gui".

You are strongly encouraged to start off by putting some simple clock face into yours and try to fiddle with the paramters within the code and see what affect what.  I am sure you will create your own clock face very soon.

Here is mine, I started off by using TH3's analog clock.

[Giampi71]

I totally agree with all the above.

As I was a real beginner and I had no idea where to start from I found a good tutorial at Udemy, It costed me few bucks but it gave a very good start, If interested I can share you the link in private.

[LeiChat]

If you do not fancy programming there are now a few clock faces that offer some very clever customisation options. A great example is Maker from @MicroByte - https://microbytefitbit.wordpress.com/ionicmaker/

[MarreFitbit]

Thanks for sharing all the information guys @SunsetRunner, @Giampi71, and @LeiChat! I'm sure this will be helpful to other users who may be asking for this. 

If there's any questions, let me know. 

[Adlaishane]

Would it be possible to make a clock face with rings. Similar to the whole Apple Watch thing.  

I cant find one that I like so I thought I would make my own. Lol. 

But it I just don’t know where to start. 

[MarreFitbit]

Welcome to the Fitbit Communithy @Adlaishane! As I've mentioned above, if you want to create your own clock face, check the Getting Started Guide page to find everything you need to develop your app.

For anything else you would like to see implemented in the future, consider visiting our Feature Suggestions board. This is a space where Community users can post features, ideas, and suggestions that they'd like to see in future Fitbit products, accessories, and software and top-voted suggestions get relayed to our product team for review. 

We're constantly striving to improve Fitbit products and services, and we very much appreciate all of the input we receive from our customers. 

Our product team looks forward to reading and incorporating your suggestions into future versions of Fitbit trackers and apps. 

Let me know if there's anything else I may assist you with. 

[1_random_person]

Can I code my own clock face for my fitbit versa lite? 

[LeiChat]

Yes. Fitbit Versa, Versa Lite and Ionic are supported.

[1_random_person]

Thanks for the link, some of those examples look great!

You don't maybe know how to 

[1_random_person]

Thanks for the link, some of those examples look great!

You don't maybe know how to install a clock face with Fitbit Studio? I tried today, but according to their docs, Developer Bridge are not supported for Versa Lite. I understand that you need it for the installation, or am I missing something? 

[LeiChat]

Sorry, that link was just in my signature but thanks for the kind comment.

I think you might have to upload the   .fba file that you 'publish' from studio to the gallery app manager (GAM) and that will give you a private gallery link you can use on your phone to access and install. You don't have to submit for review if it's just for you/friends.

[1_random_person]

Thank you! I appreciate it very much. 😉 May you have an exceptionally good day!! 😁

[RottieLover]

I've looked  at the FitBit Studio & I find it too hard to use. I wish that it would be more like FitFace.xyz is & not have to know coding.

[Ktothemuse]

Thanks! I just downloaded this and made a quick and dirty custom clock face for my versa. At 44 years old, I want the date, time, steps, heart rate and battery % all on the screen, but can’t read the tiny font sizes most of the faces have. I was able to make one that I can actually see without my reading glasses on!! The “drag bars” you use to move text around (and make them larger or smaller) are pretty tricky to make the items go exactly where you want them, but other than that I love it! It’s just called “maker” now, btw. 🙂 

[RottieLover]

Is there some kind of video tutorial on how to use the FitBit Studio? I can't figure it out. I've made a few watch faces over at fitface & would like them to be available in the fitbit gallery.

[MarreFitbit]

Hello @Ktothemuse. I'm glad to hear that the clock face you've set is suiting your needs. 

Hi @RottieLover. I think it would be of help if you take a look at this post from @Catplace where he shares an awesome tab of help for the Fitbit Studio. 

Let me know if you have any questions present. 

[RottieLover]

@MarreFitbitThe shortcuts aren't an issue. It's the needing to actually understand coding to use the studio. I wish that it was entirely simpler to use & not have to know coding.