User Selected BG color under transparent png as BG

[BlackCat7]

Hi,

I am developing my first watch face, and I have somehow forgotten how to code lol... Maybe I just haven't had enough coffee, but I want to have a background color that can be user selected under a transparent png. What would some more experienced Fitbit os coders do to achieve this?

[BlackCat7 · Accepted solution]

nevermind I got it

[MolliorMerx]

Considering I was looking for this exact question as well, could you be so kind as to document the steps? Some of us are still new at JS/CSS. Thanks! 

[ishfulthinking]

@MolliorMerx in case you (or others who stumble upon this thread) still need help, you can create a .png image with partial transparency and then set up the index.gui file like this:

<svg>
  <rect id="background"/>
  <image href="background.png" load="sync"/>
</svg>

In the .css, make sure to set the color of #background with fill:

#background {
  width: 100%;
  height: 100%;
  fill: #1E90FF;
}

With this ordering, you'll have a colored background with shaded areas thanks to the partially-transparent .png image laid on top of it.

As for allowing the user to customize the color, follow the guide at https://dev.fitbit.com/build/guides/settings/ to learn how to add a companion app to your clock face so colors can be selected by the user. Then call background.style.fill = "#1E90FF" or any color you like.

Hope this helps