Getting battery life and the date on clock face in Fitbit studio for Versa 2

[track03]

I am making my own watch face on fitbit studio for my versa 2  and I have a background I want and it is on it and I also have the time where I want it but I am trying to put the battery life indicator on it and the date on it. I am not exacly shore how to do this. I am new at this and am not familiar with coding language. 

Can anyone help? 

Moderator edit: updated  subject for clarity. 

[Guy_]

Hi @track03  - have a look at

https://dev.fitbit.com/build/reference/device-api/power/

If you want to display it only when it changes try something like

battery.onchange = (charger, evt) => {

myBattery.text = `${battery.chargeLevel}%`;

}

For date, various formats are shown

https://www.w3schools.com/js/js_date_formats.asp

[track03]

I will try, but when I do something like that it say build complete, then a app installed but it does't show on my watch.

do you know why that is?

and also if it was going to work which file spot wood I put then in?

[Guy_]

@track03  - have you loaded the simulator on your PC and started it, then select the Versa 2 and hit run in studio.

In the simulator power and display section you can adjust the battery level and see it on the face.

[track03]

I have tryed that but when I try to load it, it says oops, the simulator is not working and then it gives me the option to try again and it says the same thing.    ??????????

[track03]

so I set up the simulator and it is conected to the studio but when I press run it says build complete and app installed but it still does not show on the simulator. I might just be putting it in wrong though. could you please be a little more spicific on where I should put it and how I should put it in?

[Guy_]

@track03  - in studio you have build and console  tabs, look in console for the run results any any console.log messages from your program and check in the simulator Settings that you are correctly connected, which should be ok if the run worked.

[track03]

okay, so I got the battery life to work form Fitbit simulator but I still cant get the date to work, or to even show on the simulator.

[Guy_]

@track03-  well done, it may be working but you may have another field overlaying it.

Try moving it lower down in the definitions and put a console.log message in the code where you assign it.

myDateField.text = new Date().toString();

[Car_lotta09]

Hello @track03 , Maybe it doesn’t go to do the battery and the date on the background. 

[track03]

okay, I will try that.

I almost think that they are behind the back ground.

[track03]

@Guy_  says, 

well done, it may be working but you may have another field overlaying it.

Try moving it lower down in the definitions and put a console.log message in the code where you assign it.

myDateField.text = new Date().toString();

This is good advice, but it is still not working for me. although, I think I just might not be doing it right.

also witch file or folder thing would I put it into?

Thank you

[Guy_]

@track03- if you make background image first defined element others will display on top.

Try giving date a default text value.

<text id="myDateField" etc....> Default date </text>

Tip,  put all your CSS in the SVG, makes it easier to manage the order which is important.

What do you mean by file or folder?

[track03]

sorry, I mean like the js or css or gui.

[Guy_]

@track03- the definitions can be in either css or gui, try putting them all in the gui

in the js you will need declarations like

const myDateField= document.getElementById("myDateField");

[track03]

okay thank you, I will try.

sorry, do you mean index.gui or widgets.gui.

[Guy_]

Post corrected.

[Guy_]

index.gui

[track03]

@Guy_ sayed- 

if you make background image first defined element others will display on top.

Try giving date a default text value.

<text id="myDateField" etc....> Default date </text>

I did this and your advice is giving me the date on the watch face but I only saw it in front of the background once. when the simulator was loading my project it gliched and I could see the date but the background came back and it was gone again. should I take off the background and put it back on? or what should I do?

[Guy_]

@track03  - almost there!

Check your console log for errors

Make sure it's not being incorrectly set, you may see the default value for 1 second and then it is replaced by blank .

Other symptoms

You made it invisible

You made it same colour as background

You made it hidden

Try replacing the calculated value with a constant and see if it stays.