Colour background changes, help required..

[TKCMuzzer]

Hello again. I have learnt a lot over the last few months thanks many on these forums, so first of thank you. I have had many emails from ionic users informing they like my watch faces but one question keeps coming up. Is there any chance of the option to change the background colour? 

So I have been looking into it so have decided to start of simple. I copied the code of the tutorial site https://dev.fitbit.com/build/guides/settings/ 

When I run the code (with the developer bridge connected on the iphone) the app installs on the watch but I can not get the settings option to appear on the phone for me to change the colour. Now its not clear in that documentation (to me anyway) in which folders to place some of that code, I assumed there would need to be settings folder and a companion folder. I tried this with no luck.

If someone could point me in the right direction so this test code works I can probably work it onto my own watch faces from there on in.

Thanks in advance

[JonFitbit]

You need a /companion and /settings folder in your project.

The basic principle is that you save a setting into settingsStorage, the companion is notified in thesettingsStorage.onchange event, then passes that data using messaging to the device.

See https://github.com/Fitbit/sdk-lcd-clock for an example

[TKCMuzzer]

Thank You, I managed to get the background to change using the settings info on this site. How would I go about changing background and text separately? I have managed to get two different sections in the settings menu to provide two menus but both only change the background. I assume I am doing something wrong in the main app or companion to pick up separate values depending on the style fill.

Below is the code I use in the app section, I did originally separate the code but the companion would only pick up the Element style no matter what I changed.

messaging.peerSocket.onmessage = function(evt,evt2) {
  myElement.style.fill = evt.data.value;
  myDistance.style.fill = evt2.data.value;
  mySteps.style.fill = evt2.data.value;
  myCalories.style.fill = evt2.data.value;
  myBattery.style.fill = evt2.data.value;
  myClock.style.fill = evt2.data.value;
  myMins.style.fill = evt2.data.value;
  myElevationGain.style.fill = evt2.data.value;

I would assume I would have to separate these values, one for background and one for text. If I create a seperate one both sections of the setting menu change the text colour and not the background.

So after a lot of rambling on, my question is, how do I separate these two elements to be changed independently from one another?

Thank you in advance

[TKCMuzzer]

I can see how that would not work. This is my current code:  

This allows me to change the background and some clock hand elements so they match.

So I need to now be able to select the colour of the text separately but understand if I simply add myDistance.style.fill into the function below it will end up the same colour as the background.

So, how do I create a separate value for the text elements. 

Thank you in advance

messaging.peerSocket.onmessage = function(evt) {
  myElement.style.fill = evt.data.value;
  myMinsc.style.fill = evt.data.value;
  myHoursc.style.fill = evt.data.value;
  mySecsc.style.fill = evt.data.value;

[SunsetRunner]

Only one setting change is sent at a time, which means you need to ‘test’ for which key setting has arrived at the device.