04-30-2018
06:37
- last edited on
04-30-2018
08:12
by
JonFitbit
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-30-2018
06:37
- last edited on
04-30-2018
08:12
by
JonFitbit
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
So I am trying to change the min/hour hand depending on the hour. I have implemented a class in the CSS and in the JS file. I am performing this sample code. However it is not changing the fill. I have checked with the console.log to make sure the case black is being executed but the fill never changes.
switch (hours){ case 12: hourHand.style.fill = "#ECF2D0"; case 1: hourHand.style.fill = "#ECF2D0"; case 2: hourHand.style.fill = "#ECF2D0"; case 3: if(mins < 30){ hourHand.style.fill = "#ECF2D0"; }else{ hourHand.style.fill = "black"; }
Answered! Go to the Best Answer.

- Labels:
-
JavaScript
Accepted Solutions
04-30-2018 12:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-30-2018 12:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Fixed:
My hands: secHand, minHand, hourHand were referring to the <g> block, the actual rectangles within the <g> block. I added ID's for the rectangles and updated the JS code to refer to the new names and it works flawlessly.
Thanks
04-30-2018 08:11 - edited 04-30-2018 08:17
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


04-30-2018 08:11 - edited 04-30-2018 08:17
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Have you checked the format of your images is correct? They need to be 8bit png, see:
https://dev.fitbit.com/build/guides/user-interface/css/#image-grayscale-magic-
Sorry, I also just noticed, you aren't breaking in your switch.
switch (hours){ case 12: hourHand.style.fill = "#ECF2D0"; break;

04-30-2018 08:43
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-30-2018 08:43
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
These are not images, they are rectangles. Does FitBit require the break, common JS does not.

04-30-2018 08:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


04-30-2018 08:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I don't know commonjs, but the device uses ES 5.1 Javascript.
The break is optional, but will continue to the next statement without it.
I'd be tempted to try this before the switch, to make sure you have a handle on your element.
console.log(typeof hourHand);
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch
The optional break
statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If break
is omitted, the program continues execution at the next statement in the switch
statement.

04-30-2018 09:06
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-30-2018 09:06
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Jon,
Thanks. I have tried the
console.log(typeof hourHand);
And the result is Object. I know I have the right object because later in the code a transfer is working using that handler. For some reason it just won't change the color on the tick.

04-30-2018 12:23
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-30-2018 12:23
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Here is smaller example. For some reason it just does not want to change the color.
switch (secs){
case 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,48,49,50,51,52,53,54,55,56,57,58,59,60:
secHand.style.fill = "black";
break;
default:
secHand.style.fill = "#ECF2D0";
break;
}

04-30-2018 12:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-30-2018 12:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Fixed:
My hands: secHand, minHand, hourHand were referring to the <g> block, the actual rectangles within the <g> block. I added ID's for the rectangles and updated the JS code to refer to the new names and it works flawlessly.
Thanks
