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.

[pmccrthy]

If removing the semi-colons causes your colour picker to stop working, it suggests deeper logic issues in your code.

I have to go back to my earlier comments and ask how are you sending the evt.key from the companion app? I don't see it in your code and without it I am at a loss to understand how the if() statements can work as you intend.

[SuperStevo86]

I've looked and looked and can't seem to find what I'm missing with the code. Could anyone please take a thorough look at the code and let me know what exactly I'm missing or doing wrong with my code. Thanks.

[pmccrthy]

I haven't tested or reivewed this fully, but at a quick glance I'd try the following:

In your companion try this:

settingsStorage.onchange = function(evt) {
if (evt.key === "background-image") {
compressAndTransferImage(evt.newValue);
}
if (messaging.peerSocket.readyState === messaging.peerSocket.OPEN) {
// This builds the key:value pair regardless of what type of event (font/icon) has happened
let data = {key: evt.key, value: JSON.parse(evt.newValue)};

// Send this the data
messaging.peerSocket.send(data);
}
}
}

Then in your app code:

messaging.peerSocket.onmessage = evt => {
// We passed the key as part of the data so it should be available for the if() stmt to evaluate
if (evt.data.key === "font") {
applyFont(evt.data.value);
} else {
applyIcon(evt.data.value);
}
}

This is very much off the top of my head, but hopefully it'll put you on the right track.

[SuperStevo86]

@pmccrthy applying your code, I now get the error "unhandled exception: TypeError: Cannot set property to '[object Object]': Unexpected type. Expected a String ('color name' or '#

?  at app/index.js:65,5

?  at app/index.js:64,3

?  at app/index.js:83,1 "

Refers to font color change and color on display doesn't change. If I try to apply the date color, i get the same error but referencing to "icon" instead of "font".

[pmccrthy · Accepted solution]

@SuperStevo86 I have similar watch face which I've open sourced. Take a look at how I've done the same thing, it might be more helpful than piecemeal debugging 🙂

https://github.com/pmccrthy/fitbit-digital-stats 

[SuperStevo86]

Thank you for that. It really helped and is working, but now the imagePicker isn't playing nice. I get the error code "RangeError: Encoded data to large: ****** bytes". It references settingsStorage.onchange in companion.

I get that error when I select an image in the settings app of the simulator to send to the clock face.

[MarioDings]

I’m intrigued. Why the forEach. Why not items.style.fill = icon ; etc. Never seen this before. I’ll get into this.

When I have the time, I’ll rewrite your code with remarks. There’s a lot to improve. I know it’s difficult to understand someone else’s code.

[SuperStevo86]

I actually get the error when I reload the clock face testing to make sure the settings reload and the error references the restoreSettings and sendVal functions of the code I copied from your app. I've pushed the updated files to github.

[SuperStevo86]

@pmccrthy I've fixed the issue that was causing the last set of errors when restoring my clock face. I just wanted to thank you for your support in helping me fix the issues I was having.

[pmccrthy]

You're welcome @SuperStevo86 🙂 

[SuperStevo86]

@pmccrthy I was wondering if/how text input could be added to the code files you provided? I want to add a feature where a user could display customized text, like contact information, reminders, other types of information that would show on the display of the clock face.

[pmccrthy]

@SuperStevo86 There is a text input section that you can add to the settings. I've never used it myself but that's where I'd start.

[SuperStevo86]

@pmccrthy I've seen it before, but the Fitbit documentation doesn't provide details of how to actually implement the feature. I seem to have gotten to work in my code though, but I can't seem to either get the settingsKey to save or reload.

[SuperStevo86]

@pmccrthy I was able to get the textInput feature to work perfectly. I've posted it to the GitHub repository and invited you, as it is now private, in case you wanted to use it, it's only right thing to do with you sharing your code with me. Thanks again for your help.