Adding Day of the week to a clockface

[Cardboard_Boy]

I want to add day of the week to my clock face that I've made, and I've read the other posts about it and I still don't quite understand. Is anyone willing to break it down for a newbie?

[JonFitbit]

There's a few different ways, and it also depends if you're localizing the day too, but here's a very basic example:

var days = [
    "Sunday",
    "Monday",
    "...", //etc
    "Saturday"
];

console.log(days[new Date().getDay()]);

[Cardboard_Boy]

I have tried it now and it doesn't show up, did i perhaps put it in wrong?

I'll show what i have, the stuff for the day of the week is bolded.

Here is my index.gui

<svg>
<image href= "moon.png" />
<text id="myLabel" />
<text id="myMonth" />
<text id="myDay" />
<image href="heart.png" x="233" y="178" width="75" height="75" />
<image href="run icon.png" x="240" y="237" width="50" height="50" />
<text id="myHRM"></text>
<text id="mySteps"></text>
<text id="day"></text>
</svg>

and here's the index.js

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] = "Jan.";
month[1] = "Feb.";
month[2] = "Mar.";
month[3] = "Apr.";
month[4] = "May";
month[5] = "Jun.";
month[6] = "Jul.";
month[7] = "Aug.";
month[8] = "Sep.";
month[9] = "Oct.";
month[10] = "Nov.";
month[11] = "Dec.";
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}`;
}

const myHRM = document.getElementById("myHRM");
import { HeartRateSensor } from "heart-rate";

if (HeartRateSensor) {
const hrm = new HeartRateSensor({ frequency: 1 });
hrm.addEventListener("reading", () => {

myHRM.text=`${hrm.heartRate}`;
});

hrm.start();
}

import { BodyPresenceSensor } from "body-presence";

if (BodyPresenceSensor) {
const body = new BodyPresenceSensor();
body.addEventListener("reading", () => {
if (!body.present) {
myHRM.text="--"
} else {

}
});
body.start();
}

const mySteps = document.getElementById("mySteps");
const myCalories = document.getElementById("myCalories");

import { me as appbit } from "appbit";
import { today } from "user-activity";

if (appbit.permissions.granted("access_activity")) {
console.log(`${today.adjusted.steps} Steps`);
mySteps.text=`${today.adjusted.steps}`;
if (today.local.calories !== undefined) {
myCalories.text=`${today.adjusted.calories}`;
console.log(`${today.adjusted.calories} calories`);
}


}

var days = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
];

console.log(days[new Date().getDay()]);

Heres styles.ccs

.background {
viewport-fill: white;
}

#myLabel {
font-size: 70;
font-family: System-Bold;
text-length: 32;
text-anchor: middle;
x: 50%;
y: 50%+28;
fill: #1B2C40;
}

#myMonth {
font-size: 25;
font-family: Tungsten-Medium;
text-length: 32;
text-anchor: middle;
x: 90%+-250;
y: 50%+-119;
fill: white;
}

#myDay {
font-size: 25;
font-family: Tungsten-Medium;
text-length: 32;
text-anchor: end;
x: 90%+-215;
y: 100%+-269;
fill: white;
}

#myHRM {
font-size: 23;
font-family: Seville-Bold ;
text-length: 32;
text-anchor: middle;
x: 24%+199;
y: 67%+20;
fill: #505050;
}

#mySteps {
font-size: 24;
font-family: Seville-Bold ;
text-length: 32;
text-anchor: middle;
x: 52%+110;
y: 67%+90;
fill: black;
}

#Day {
font-size: 25;
font-family: Tungsten-Medium;
text-length: 32;
text-anchor: end;
x: 90%+-215;
y: 100%+-269;
fill: white;
}

[kozm0naut · Accepted solution]

console.log() will merely write that value to the Console shown in fitbit studio, to display it on the watch face you'll need to set the text of a label.

A few things:

You have a label for "myDay" and one for "day" - you should only need one, but you will need to access it in your js using a line like the one you have for myDay:

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

Once you have made the javascript object referencing your element in svg, you can set the text of that element with:

myDay.text = days[new Date().getDay()];

or if you want to set keep the value in a variable:

let day = days[new Date().getDay()];
myDay.text = `${day}`;

Note that you have that last line in there once as well, but only right as things are initialized - it's not being updated when you're getting the value, you're just writing the value to console.

[Cardboard_Boy]

Tried that, just gave me an error at every place I had changed. I also tried it in a new project, still didn't work. Does someone perhaps have a complete code for month, day number, and day of the week already complete. If so please give it to me and tell me where to put each line of code as I'm obviously making a mistake every time I try to do it on my own.

[Cardboard_Boy]

Or at this point i might even be fine with just the month and day of the week.

[david.novella]

I Have a Question,

first try to show anything on your label text. Anything like "Hi".

If you can make your code shows "Hi" then, the problem should be in another part.(discarding parts will help you to find the actual error).

[Cardboard_Boy]

I've gotten it working but now I cant get the month to show.

[Cardboard_Boy]

Oh i got it working for the month. Now I just need to see if I can make it have day number too.

[Cardboard_Boy]

Your suggestion worked like a charm. Using your method I found out the issue I was having with showing the day number too was that I misplaced some code.

[ValgaDevs]

As I see you have already solved your problem. But I have developed a package that might help you getting also the day of the week, translated to all 17 languages supported by Fitbit. https://www.npmjs.com/package/fitbit-locale-helper

You only have to install it and create "fitbitLocaleHelper.json" in the root of your project with:

{
  "dateTimes": [
    {
      "folder": "app",
      "type": "weekDay",
      "format": "EEE"
    },
    {
      "folder": "app",
      "type": "month",
      "format": "MMM"
    }
  ]
}

 And execute the script with:

npx fitbit-locale-generate

And you will have all the translations ready in the app/i18n folder of your project.

Then you can get the translations with:

const date = new Date();
myDay.text = gettext(`week${date.getDay()}`);
myMonth.text = gettext(`month${date.getMonth()}`);

Also, I have another package to work with the clock easier. It also handles the zeroPadding and the user preferences to set 12 or 24 hour format. https://www.npmjs.com/package/fitbit-easy-clock 

After installing it's as simple as:

import { DigitalClock } from 'fitbit-easy-clock'
import { gettext } from 'i18n'

new DigitalClock(onTimeUpdate, onDateUpdate, {
  padHours: true,
  padMinutes: true,
  granularity: 'minutes' // This is not required as it defaults to minutes
})

function onTimeUpdate (data: TimeData) {
  myLabel.text = `${data.hours}:${data.minutes}`
}

function onDateUpdate (data: DateData) {
  myMonth.text = gettext(`month${data.month}`)
  myDay.text = gettext(`week${data.weekDay}`)
}

If you want to give it a try and have any problem I'll be happy to help you