Trying to add date to my clock face on Fitbit Ionic

[Lindzr85]

I just got a Fitbit Ionic and I am trying to create a custom clock face in Fitbit Studio. I've got the image background I want, and the time where I want it, but I would like to add the date so that it updates each day. How do I do this?? I don't know what the proper code is and I cannot find it anywhere. Please help! 

[Bsherm · Accepted solution]

I was playing with this the other night. 

I started with the clock app, and tweaked it.

First think of the 3 spots you need to change:
Apps>index.js is where the calculating happens.

Resource>index.gui is where you define what goes on the face.

Resource>styles.css defines how it is displayed.

This may not be the most efficient, but this is how i added it:

index.js
Added these to const below the current one:

const myMonth = document.getElementById("myMonth");
const myDay = document.getElementById("myDay");

Added 2 addition "let":

let monthnum = today.getMonth();
let day = today.getDate();

Since monthnum is now the number of the month (0-11, so January is 0) I wanted to change to the name, so I created an array for the Month Names:

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";

Then used the array to set the variable for the Month Name

let monthname = month[monthnum];

Then I assigned the labels:

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

That's it for Index.js

Index.gui I added the labels to the face:

  <text id="myMonth" />
  <text id="myDay" />

Finally I added code for the placement and formatting of text:

#myMonth {
  font-size: 50;
  font-family: Tungsten-Medium;
  text-length: 32;
  text-anchor: end;
  x: 90%;
  y: 50%+80;
  fill: red;
}

#myDay {
  font-size: 50;
  font-family: Tungsten-Medium;
  text-length: 32;
  text-anchor: end;
  x: 90%;
  y: 100%;
  fill: red;
}

[Lindzr85]

Thank you SO much! That greatly helps! 

The only thing now is that I keep getting an error message which says "today is not defined". How would I go about doing that?

[qooApps]

Just add the line:

let today = new Date();

before it is used.

[Bsherm]

Odd... maybe I missed a change. Here is the whole index.js for me:

import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";


// 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();
  let monthnum = today.getMonth();
  let day = today.getDate();
  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";
let monthname = month[monthnum];
  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}`;
  myMonth.text = `${monthname}`;
  myDay.text = `${day}`; 
}

[Bsherm]

It seems most of the times I get one of those kind of errors it is a missing or errant ; or other character, so I would check that as well.

[FlyFrosty]

Try changing you today thing to

let today = new Date();

I read somewher the `new` part is important. 

[CJParis]

Since I had already used today in this way, in my code (for getting steps):

import { today } from "user-activity";

adding your code collided and caused some issues, so I just renamed that variable to thisDay like this:
(inside the clock tick area)
let thisDay = evt.date;
let monthnum = thisDay.getMonth();
let day = thisDay.getDate();

...and that sorted things out for me.

Thanks for sharing your great example!

[KiLee]

I am trying to use your code, but I am getting the following error

>Unhandled TypeError: Cannot set property 'text' of null myMonth at app/index.js:40,1

I am not sure what I am doing wrong.

[FlyFrosty]

Did you add it to the styles.css and the index.gui?  Did you add it to the document.getElementById in your index.js?

[Bsherm]

I have not touched any of this since not long after I posted it. The null might indicate that monthname is not getting set properly, therefore getting a null error. I would look at your assignment there.

[sspyli]

It works! Thank you!

---

@Bsherm wrote:

Odd... maybe I missed a change. Here is the whole index.js for me:

import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";


// 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();
  let monthnum = today.getMonth();
  let day = today.getDate();
  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";
let monthname = month[monthnum];
  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}`;
  myMonth.text = `${monthname}`;
  myDay.text = `${day}`; 
}

---

---

@Bsherm wrote:

Odd... maybe I missed a change. Here is the whole index.js for me:

import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";


// 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();
  let monthnum = today.getMonth();
  let day = today.getDate();
  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";
let monthname = month[monthnum];
  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}`;
  myMonth.text = `${monthname}`;
  myDay.text = `${day}`; 
}

---