Customise Fitbit Versa clock face with Fitbit Studio

[Fitnessgal86]

Hi Everyone,

I am new to this and just recently got a Fitbit Versa.

I would like to create my own clock face rather than pay for one so have managed so far some basic CSS on the Fitbit Studio and using Procreate to create my own design.

I have managed to change the background to my own photo finally after much fiddling! However I would like to add steps and HR to the clock face too - I am sure this is pretty simple once you know how!! 

Thanks in advance for any tips! 

Emma 

[SunsetRunner]

Hi, there is a new way to create your own Clock Faces, see: https://fitface.xyz. Open the link in/with your mobile browser.

It's easier than Fitbit Studio. Have a look at it and enjoy it. 

[Fitnessgal86]

Thank you this looks great! I will give this a go! 

I would still like to know how to do this on Fitbit Studio however if anyone can help?

Thanks

Emma 

[Fitnessgal86]

I have tested the FitFace and it doesn't seem to load to edit on my laptop unfortunately. 

[SunsetRunner]

Hi Emma, as I wrote you have to open the link on/in your mobile browser, otherwise you will not be able to add a newly created clock to the gallery. Login with your Fitbit account. See my signature, thanks. 

EDIT: clicked the link on my laptop and it just opened, but it's better to use it on your mobile device. Opening the site on my laptop, I see on top of the screen left: FitFace and on the right side Login and then: "Let's create Clock faces", etc. 

EDIT 2: See also this topic: https://community.fitbit.com/t5/Fitbit-App-Gallery/Create-your-own-faces-graphically-with-FitFace-xy....

[Fitnessgal86]

Hi Kuzibri,

Thank you for your reply.  I just get an error on mobile saying editor is only available on desktop and then on desktop the editor only seems to half load unfortunately. 

There are some nice simple clockfaces however on here so thank you.

However I still want to create my own design. Can anyone advice the code for index.js for adding the date, steps and HR.  And can someone advise where to place it (I am a bit of a newbie!).  

This is what I currently have tried but it doesn't work:

import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";
import { today } from 'user-activity';
console.log(today.adjusted.steps)

// Update the clock every minute
clock.granularity = "minutes";

// Get a handle on the <text> element
const myLabel = document.getElementById("myLabel");
const myMonth = document.getElementById("myMonth");
const myDay = document.getElementById("myDay");

// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
let today = evt.date;
let hours = today.getHours();
if (preferences.clockDisplay === "12h") {
// 12h format
hours = hours % 12 || 12;
} else {
// 24h format
hours = util.zeroPad(hours);
}
let mins = util.zeroPad(today.getMinutes());
myLabel.text = `${hours}:${mins}`;
let monthnum = today.getMonth();
let day = today.getDate();
let monthname = month[monthnum];
}

// Update the <myMonth.text> element every month with the current month
var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";

myMonth.text = `${monthname}`;
myDay.text = `${day}`;

Any help would be much appreciated! 

Thank you! 

Emma