Changing the app background via javascript

[patrick-f]

Hi all,

I'm new to Fitbit Versa and I'm trying to change the background color of a simple app when different events occur - for example when the device is removed from the wrist, turn the background color "fb-orange".

Are there any examples of this?

The viewport-fill property seems to be read-only (correct me if I'm wrong), so what is the correct way to turn the entire screen a defined color?

Thanks in advance - Patrick

[JonFitbit]

<svg>
  <image id="background" href="myimage.jpg" />
  <text id="myLabel"></text>
</svg>

then in your JS

import document from "document";

let bg = document.getElementById("background");
bg.href = "someotherimage.jpg";

[patrick-f]

Hmm. So there is no way to simply change the background color apart from loading an image?

Seems a bit clumsy?

[JonahMonaghan]

I would add several SVG rectangles on top of each other then only show the one that you want displayed based on the user's interaction. I use a simple toggle function to show and hide different elements.

function toggle(ele) {
  ele.style.display = (ele.style.display === "none") ? "inline" : "none";
}

//Function in use
myElement.toggle();

[ted-tanner]

You cannot change the background color in the way you expect (namely, by editing the viewport-fill property from the JavaScript), but you can change the background color without adding an image. Here is the simplest way (in my opinion) to change the background color:

1. Create a rectangle that fills the screen. Keep it at the top of the SVG file so every other element will cover it.

<svg viewport-fill="#000000">
  <rect id="clockBackground" width="100%" height="100%" x="0" y="0" />
  ...
</svg>

2. Get the element by id in your js code

const clockBackground = document.getElementById("clockBackground");

3. When you want to change the background color, edit the clockBackground.style.fill property

clockBackground.style.fill = "#ffffff"; // Replace "#ffffff" with your color

I know drawing a rectangle to cover the screen isn't elegant, but it's the best way to do it with what the Fitbit SDK supports.

[xyyx0110]

@ted-tanner:Took me less than a minute to get this working thanks to your straight forward and complete explanation.  I agree, much easier than putting an image in there when you just think in terms of SVG.

[robert-k-42]

I would have never figured this out on my own. Thanks @ted-tanner