Changing background image based on battery level?

[Caedus320]

Hello! Newbie programmer working on their first clock face and was hoping someone could help me with one particular aspect. 

I have four different background images (each one has a different battery level indication; 100%, 75%, 50%, 25%) stored in my resources folder (25.png, 50png, etc.). 

I'm trying to get the index.js file to assess the battery charge level, store that into a variable, run it through a function with If statements to determine the right value, and then update the background image in the index.gui file. Is this possible? 

[JonFitbit · Accepted solution]

Sure, something vaguely like:

import { battery } from "power";

if (battery.chargeLevel > 75) {
  myImg.href = "100.png"; // 76-100
} else if (battery.chargeLevel > 50) {
  myImg.href = "75.png"; // 51-75
} else if (battery.chargeLevel > 25) {
  myImg.href = "50.png"; // 26-50
} else if (battery.chargeLevel > 5) {
  myImg.href = "25.png"; // 6-25
} else {
 myImg.href = "0.png";
}

[Caedus320]

That did the trick! Thanks! 

[gibbygibster]

Would you happen to know the code to use within index.gui to implement the code from index.js? I used your index.js code above, however I'm not sure what code to use to link it in index.gui so it works properly/talks to each other.

[Gondwana]

Off the top of my head, and for the example abpve, it will need to be something like:

<image id="myImg" x=...

 You might be able to think of a more descriptive id.

[gibbygibster]

Thank you for your help!

I input the code, however no images are showing up. Would I use the following to "name/id" the code in index.js?

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

This is the full string I'm using in index.js:

//battery levels
import { battery } from "power";
const myBatteryLevels = document.getElementById("myBatteryLevels");
if (battery.chargeLevel > 83) {
myImg.href = "100-01.png"; // 84-100
} else if (battery.chargeLevel > 67) {
myImg.href = "80-01.png"; // 68-83
} else if (battery.chargeLevel > 51) {
myImg.href = "60-01.png"; // 52-67
} else if (battery.chargeLevel > 40) {
myImg.href = "40-01.png"; // 41-51
} else if (battery.chargeLevel > 30) {
myImg.href = "30-01.png"; // 31-40
} else if (battery.chargeLevel > 20) {
myImg.href = "20-01.png"; // 21-30
} else if (battery.chargeLevel > 10) {
myImg.href = "10-01.png"; // 11-20
} else {
myImg.href = "0.png";
}

[Gondwana]

You'll probably need to change myImg to myBatteryLevels everywhere.

Probably your development environment spat out at least one error message when you tried to run that code. Error messages can help you to work out what's going wrong.

[gibbygibster]

That was it! Thank you! 😀