Color Changing Images

[cbaldasa2]

For a watch face I am working on I used grey scale images.  If I wanted to update the color of the images when the battery percent is at a certain threshhold how would I do that?  

"aniDia" is an id to the image in the index.gui

battery.js is listed first below, followed by the index.gui

import document from "document"; 
import { battery } from "power";

//
export let bG = document.getElementById("bg");
let dia = document.getElementById("aniDia");

//
export function batteryColor() {
  let level = battery.chargeLevel;
  let batteryPercentage = Math.floor(level);
  if (batteryPercentage >= 30) {
      bG.style.fill = "limegreen";
      dia.style.fill = "#32CD32";
  } else {
      bG.style.fill = "crimson";  
      dia.style.fill = "crimson";
  }
  
} //end function

<svg class="background">

<circle id="bg" cx="50%" cy="50%" r="150" fill="gray"/>
  
<text id="myLabel" />

<svg>  
<defs>
<symbol id="wakeAnimation">
  
    <g>
      <image id="aniDia" x="50%-20" y="160" width="40" height="70" href="diamond2.png" fill="white" opacity="1" class="dia"/>  
      <animateTransform attributeType="translate" from="0, 0" to="0, 140" begin="load+1" dur="1" />
    </g>
    <g>
      <image id="aniDia" x="50%-20" y="70" width="40" height="70" href="diamond2.png" fill="white" opacity="1"/>  
      <animateTransform attributeType="translate" from="0, 0" to="0, -140" begin="load+1" dur="1" />
    </g>
    <g>
      <image id="aniDia" x="130" y="115" width="40" height="70" href="diamond2.png" fill="white" opacity="1"/>  
      <animateTransform attributeType="scale" from="0.0" to="1.5" begin="load+1" dur="1" />
    </g>
<svg/>  
  
  <g>
    <animateTransform attributeType="translate"
      to="-80" from="0" begin="load+1" dur="1" />
  <line id="line1" x1="100%-70" y1="10" x2="150" y2="150" fill="black" stroke-width="10" />
  <line id="line2" x1="150" y1="150" x2="100%-70" y2="100%-10" fill="black" stroke-width="10" />
  </g>

  <g>
    <animateTransform attributeType="translate"
      to="80" from="0" begin="load+1" dur="1" />
  <line id="line0" x1="70" y1="10" x2="150" y2="150" fill="black" stroke-width="10" />
  <line id="line3" x1="150" y1="150" x2="70" y2="100%-10" fill="black" stroke-width="10" />  
  </g>
</symbol>
</defs>
<use id="omniAnimation" href="#wakeAnimation"/>  
  
  
<arc x="-15" y="-15" width="330" height="330" fill="dimgray" arc-width="20" start-angle="0" sweep-angle="360" />
  
</svg>

[Gondwana]

Verify that your greyscale image is indeed 8 bits per pixel, rather RGB (24 or 32 bits per pixel).

The meaning of the shade of gray is a bit tricky: of the top of my head, black means transparent and white means whatever the fill colour is. Intermediate shades of gray represent intermediate opacity.

[cbaldasa2]

So you are correct, the images are not 8 bit, I must have messed up the conversion somewhere.  So if i can get the images in 8 bit,

dia.style.fill = "#32CD32";

should change the fill?

[JonFitbit]

Yes, style.fill, and conversion details are here: https://dev.fitbit.com/build/guides/user-interface/css/#image-grayscale-magic-