Setting the colour of grayscale png icon from settings

[VoxT3R]

Hi all.

I have a simple clock face. It uses an 8bit grayscale Heart Icon in PNG format. I have also added colour options in the settings. Once a colour is chosen from the settings panel, I have two lines of code to assing the chosen colour to the Heart Rate Text, and the Heart Rate Icon.

I am using the folloiwing code in the app's index.js file within the messaging.peerSocket.onmessage settings retrieval function:

messaging.peerSocket.onmessage = evt => {
  console.log(`App received: ${JSON.stringify(evt)}`);
    if (evt.data.key === "time_colour" && evt.data.newValue) {
    let color = JSON.parse(evt.data.newValue);
    console.log(`Setting clock text to colour: ${color}`);

    HeartRateText.style.fill = color;  
    HeartIcon.style.fill = color;
  } 
};

The chosen colour from the settings panel is successfully applied to the Heart Rate text in the clock face. But the code to set the fill colour of the Heart Icon doesn't work. Instead, the image icon on the clock face remains black, and the console shows the error:

Unhandled exception: TypeError: Cannot read property 'style' of null

I know the 8bit Heart png file is the correct format and it can be coloured. If I assing a colour to the grayscale Heart Icon statically in the resource's styles.css file using the following code, it works, the icon is coloured successfully:

fill: orange;

I would like to assign the grayscale png image fill colour from the colour in the settings panel if possible and within the messaging.peerSocket.onmessage as I have originally done.

I'm probably missing something really simple, but does anyone know what I'm doing wrong?

Thanks ever so much in advance.

[Gondwana]

I'd be investigating how HeartIcon gets initialised. Look at your getElementById; watch capitalisation; make use of console.log() to debug.

[VoxT3R]

Hi @Gondwana.

I figured it out just before you posted. HeartIcon was initiallised correctly, but the id="HeartIcon" was missing in the view.. 

Thanks for your input 🙂