Clock Face and Stats (bit of a noob)

[TKCMuzzer]

Hello, I will be straight up honest, I am a bit of a noob when it comes to developing. I do though like to design and the chance to create my own clock face for my watch is to tempting to miss out on. Now I have successfully added my own picture, altered the text colour size and position etc which is great. Unfortunately I can not find any info on how to add things like steps, heart rate etc to the clock face I have.

I have tried certain things to see if they will appear together but with no luck.

Now I don't want to take up to much of people's time but is there any chance someone could post some basic code that would show the clock and steps on the same screen. I don't want to much help as I want to learn as I go along. Any help would be appreciated.

[JonFitbit]

No problem!

We're working to improve our documentation and examples to make this easier for everyone.

Here's how to get the step count for example:

import { today } from "user-activity";
console.log((today.local.steps || 0) + " steps");

You can see what other stats are available in the reference docs https://dev.fitbit.com/reference/device-api/user-activity/

There are lots of developers helping each other on the unofficial Discord server. https://discord.gg/4ujeheG

[TKCMuzzer]

Sorry to come accross a little bit amatuer but where would I place this piece of code in relation to my clock face code that I already have?

[JonFitbit]

You'd need to include somewhere to display the text, in your index.gui file:

<text id="steps" y="100" width="100%" fill="red" />

In your index.js, you would include the "import" statement at the top. 

Then get a handle on the text box.

var steps = document.getElementById("steps");

Then inside your clock tick event, you would update the step count, every minute maybe.

steps.innerText = (today.local.steps || 0) + " steps";

Something like that anyway.

I'd recommend reading the User Interface guides.

Good luck

[FlyFrosty]

I'm a programming noob and I have successfully created my personalized, complex clock face (yay me).  I started by displaying the time with a picture behind it. I then made a clock face with local time and UTC time (I travel extensively) both displayed.  I then added a formatted calendar (probably the hardest part to figure out).  Lastly, I managed to get the clock face to where the local time is always present on the top part of the tracker face and the bottom part cycles between the other three items (calendar, UTC time, and steps) when you touch them. 

I'm all for donating my prorams to the cause for anyone trying to learn (like I did).  I tried to keep them properly commented and am too junior to use complex looking shorthand coding.  The codes should probably be reviewed for gross buffoonery before I share them, however.  Is there a process for this?

[Anthoang]

i'm more of a programmer than a designer.  maybe we can work together.   

[TKCMuzzer]

Yeah the issue I have is that I can create a clock, text, picture, size etc, thats fine, its when I need to add other code for things like steps. I'm not quite sure where to put this code in the app directory in relation to the clock code. I know its the basics but I can usually pick these things up quite quickly once I see it in front of me. I have done this with other types of coding with websites and especially messing with excel, once I see it down I get it.

Its a shame the fitbit studio doesn't have a preview function so I can quickly see any changes I make and their effects, like a visual representation of the Ionic watch face. That would be very handy.

[FlyFrosty]

Hope this helps...

Don't forget the mySteps in the styles.css and index.gui files and the import (see https://community.fitbit.com/t5/SDK-Development/Display-Current-Number-of-Steps-on-the-WatchFace/m-p... The clock granularity needs to be set too. You should be able to place this pretty much anywhere in the program.

// Function that uses the information from the import { today } and assigns it to the text element.  It also displays the steps
function updateSteps() {
  mySteps.innerText=(today.adjusted.steps);
}

//  This is where the "execution" part of the clock face starts
clock.ontick = () => updateSteps();

[TKCMuzzer]

---

@FlyFrosty wrote:

Hope this helps...

Don't forget the mySteps in the styles.css and index.gui files and the import (see https://community.fitbit.com/t5/SDK-Development/Display-Current-Number-of-Steps-on-the-WatchFace/m-p... The clock granularity needs to be set too. You should be able to place this pretty much anywhere in the program.

// Function that uses the information from the import { today } and assigns it to the text element.  It also displays the steps
function updateSteps() {
  mySteps.innerText=(today.adjusted.steps);
}

//  This is where the "execution" part of the clock face starts
clock.ontick = () => updateSteps();

---

Thank you, after a bit of tweaking I have the steps appearing next to the clock.  I will have a fiddle and report back. Much appreciated.

[TKCMuzzer]

Hello again. Ok, I got all this up and running and I had a clock running (following site tutorials) and then I got the steps to appear following useful information in this thread. Oddly, I have an issue (i'm sure its simple).

When I add this line to the app section, clock.ontick = () => updateSteps();  it seems to override the , clock.ontick = () => updateClock(); code in the app and only the steps update. If I insert the updateclock after the updatesteps in the app, the clock updates but the steps do not. 

Now I imagine its a simple solution but have fiddled around with no avail, it seems whichever code sits last in the app is the one executed.  Can anyone help on why this issue?

Thankyou in advance.

[drb116]

Call your updateSteps method from inside your updateClock method, then just call updateClock from the clock.tick event.

[mark73reed]

thankyou.  i was just having the same issue.  knew it must have been straightforward.  all working ok now.

[TKCMuzzer]

Sorry guys, this probably shows how much of a noob I am, is there any chance you can give an example of what you mean, i'm not sure what you mean by  inside the updateclock method. See, said I was a noob.

[drb116]

Here is an example. You just call it like you would from the tick event, then you can call your updateSteps inside the updateClock function.

function updateClock() {
     updateSteps();
    //Other code for your clock update
}

clock.ontick = () => updateClock();

[TKCMuzzer]

Brilliant, I had that code in the wrong place. I now have a clock, the date and steps. Small beginnings, cheers guys.

[TKCMuzzer]

Hello all, i'm back. After a good few days I have successfully got a couple of watch faces up and running. With a better understanding of the basic code I can add each activity to my watch face with great success. 

I do have one niggle and was wondering if anyone could help. Is there a bit of code I can add to stop things like, steps, elevation, active minutes etc saying 'undefined' the moment the time hits midnight. I know it only says undefined for a short time (except active minutes) but its bugs me, I would rather it show "0" when starting over.

Any help appreciated.

[drb116]

You can use the or operator. For example:

activeLabel.innerText = today.local.activeMinutes || 0;

[mark73reed]

i was having the same issue. HRM was OK (using  hrLabel.innerText = "---"; )  but something similar didn't work for steps or distance. been trying a lot of things, but this suggestion is working great now.

[TKCMuzzer]

---

@drb116 wrote:

You can use the or operator. For example:

activeLabel.innerText = today.local.activeMinutes || 0;

---

This worked a treat, just ticked over midnight and all was good. Is there any chance you know how to convert the distance from meters to miles or KM. Not many people judge their jogging distance in meters. Thank you in advance.

[drb116]

I haven't look at that part at all, but I would think it is as easy as taking the meters value and multiplying it by a constant. You would then need to apply a formatting to get the correct number of decimal points.