Independent Color Selection for Time and Date

[SuperStevo86]

My watch face already has color selection for all text and a photo picker, but I'm trying to make it where the colors for time and date are independently selectable on my watch face. Nothing but the default background image I have set functions and I receive errors when loading my clock face to Fitbit OS Simulator

I've provided the code for my watch and a screen shot of the error in GitHub.

https://github.com/SuperStevo86/Clock-Only-Beta-export

Please help.

[MarioDings]

SuperStevo86 doesn’t have any public repositories yet.

[Krish_2009]

Try This link, I don't know if it helps. 🙂

[SuperStevo86]

The repository has been updated to be public.

[SuperStevo86]

That's basically how I have the feature set up already, but instead of using <colorselect> in settings, I use <select>. When I code the clock face for all text elements to be selectable with the same selection, it works fine, but when I try to make the time and date color selections independent, that's when I get issues with the clock face.

[MarioDings]

Went trough your code on github and found this:

// Listen for the onmessage event

messaging.peerSocket.onmessage = evt => {
console.log(evt) ; // I added this  code
applyTheme(evt.data.font);}
messaging.peerSocket.onmessage = evt => {
console.log(evt) ; // I added this  code
applyIcon(evt.data.icon);}

Now tell me, why 2 times. I don't understand and maybe the interpreter doesn't either.

You get only 1 message.

so investigate the event and then execute the desired function. 

I hope it will get you further. 

[SuperStevo86]

I've tried it like this:

messaging.peerSocket.onmessage = evt => {
if (evt.key === "font") {
applyTheme(evt.data.font);}
if (evt.key === "icon") {
applyIcon(evt.data.icon);}
}

and like this

messaging.peerSocket.onmessage = evt => {
applyTheme(evt.data.font);
applyIcon(evt.data.icon);
}

as well, to no avail. I've also tried adding your ammended code. No results. Still get the same error that is in the screenshot posted on GitHub.

[pmccrthy]

Maybe try the following, I can't be sure without digging deeper into your code, but it looks similar to what I have to do.

messaging.peerSocket.onmessage = evt => {
if (evt.data.key === "font") {
applyTheme(evt.data.value);}
if (evt.data.key === "icon") {
applyIcon(evt.data.value);}
}

This can check the evt.data.key and use the corresponding evt.data.value for your applyTheme() or applyIcon() as needed.

You may also need to change how you're sending the data in order for this to work. If you look at the Settings Guide you will see that sendValue() arranges the data to be sent as a key:value pair, evt.data.key and evt.data.value.

[SuperStevo86]

I just tried the suggestion you provided @pmccrthy but it still doesn't work. I get the same error. I tried want the web page says as well and still doesn't work the way I want it. I can't get the time color and date color to change independent of each other rewriting the code based on the Fitbit Settings Guide.

[MarioDings]

Your GUI:

<svg class="background">
<image href="images/image placeholder versa.png" fill="white" load="sync" />
<image id="imageBackground" />
<text id="time" class="foreground" />
<text id="ampm" class="foreground" />
<text id="date" class="foreground" />
</svg>

Your APP:

..

let items = document.getElementsByClassName("icon");

..

There are no .getElementsByClassName("icon"), 

The only classNames are "foreground" and "background".

This is because your naming suggests something else. And that is confusing.

I dont get your error screenshot, but I should. Because theres no item with class "font" and therefore "undefined". 

[SuperStevo86]

You're pulling that information from the index~300x300.gui file which is for Versa family. When I develop a clock face, I develop it for the Ionic then adapt to the Versa family. I have not adapted the features that i'm working on to the Versa family yet because the features aren't working on the Ionic. This is the index.gui file for the Ionic which i'm getting all these issues on still.

<svg class="background">
<image href="images/image placeholder ionic.png" fill="white" load="sync" />
<image id="imageBackground" />
<text id="time" class="font" />
<text id="ampm" class="font" />
<text id="date" class="icon" />
</svg>

[SuperStevo86]

I've made some changes to the code that seem to make the clock face display now. The imagePicker is working correctly but when selecting color options, those changes don't apply to the corresponding element on the clock face. In the console on Fitbit Studio, I receive no errors when selecting the new color options I'm trying to apply to the clock face.

I've updated the GitHub repository to reflect the changes I made and I've adapted the features I'm trying to develop to the Versa series watches as well, as some who are helping seem to be using the Versa series instead of the Ionic.

[pmccrthy]

In your companion code, you only seem to be sending the value. The evt.key doesn't seem to be part of the data being sent. Without sending the key as well, evt.data.key is probably null or undefined and this code IMO can never work:

messaging.peerSocket.onmessage = evt => {
if (evt.data.key === "font") {
applyTheme(evt.data.font)}
if (evt.data.key === "icon") {
applyTheme(evt.data.icon)}
}

Try dumping the contents of the evt that the onmessage receives to the console and check that it's sending values the if statement can work with. E.g. console.log(evt.data.value, evt.data.key) etc.

[SuperStevo86]

I've posted a screenshot of the error, in GitHub, I get after adding the console.log code to my companion.

[pmccrthy]

Assuming you used console.log(evt.data.key) (I don't see it in your code) the screenshot means that the evt.data.key is undefined, in other words does not exist.

You need to define this and send it along with the value from your companion app. Take a look at the settings guide that Krish_2009 and I linked to previously for an example of how to do this: https://dev.fitbit.com/build/guides/settings/#settings-in-action

In particular the function sendValue(key, val) shows how to create key:value pair to be sent.

[SuperStevo86]

The settings in action guide is confusing because it uses "getElementById" in the example, not "getElementByClassName" which is what i'm using.

[SuperStevo86]

I've made some more changes, kind of going backwards to a previous state and as of this posting, when I change the color of the 2 time elements (time and am/pm), it seems that it is trying to change an element that is undefined but the errors reference the class for the date elements that I want to change separately while at the same time not being able to change the date elements with the errors referencing the same class definitions in app/index.js I don't know why the two classes or elements aren't being separated.

I've updated my GitHub repository with the updated code.

[SuperStevo86]

I've also uploaded a video to the link below explaining the errors that I am getting and the behavior I want from the features that I'm trying to add.

https://1drv.ms/v/s!AuYV54osP4_RwN1cH-ibTGeGDdiOVg?e=SK1X1k

[pmccrthy]

Took a quick look at your video. You have two typos on lines 81 and 84. Remove the ';' at the end of the if() statement. This will cause the if() to evaulate on its own and then the following statement will execute regardless of and independent of the results of the if().

You have:

if (evt.key === "font"); {...

Should be:

if (evt.key === "font") {...

[SuperStevo86]

Removing the semi-colons causes the functionality of the color picker to stop working all together.