A bit of help please......

[TKCMuzzer]

Hello developer community. I require a bit of assistance. As the tutorials are still , shall we say a little lacking' for new developer wannabes like myself I was wondering whether someone could point me in the right direction.

I currently have a battery percentage on my watch face, now, how would I go about creating the function that would change the colour of the text when the battery reaches a certain percentage. I would also assume the same method would work for goal percentages.

I have tried certain methods but am worried my constant trial and error could end up damaging my ionic (as i already spent two hours sorting it out as it went on constant reboot, hence, why an emulated ionic is essential as the watch is not cheap).

Any tips would be much appreciated, thanks in advance.

[allyann · Accepted solution]

You can write a function calculateBatteryColor(percent) that takes the percentage returned from battery.chargeLevel:

var batteryLevel = battery.chargeLevel;
//console.log(`battery level: ${batteryLevel}%`);
batteryPercent.style.fill = calculateBatteryColor(Math.floor(batteryLevel));
batteryPercent.text = batteryLevel + "%";

/** @function
* @name calculateBatteryColor(percent)
* @Param percent { Number } Number percentage
* @return color { String } String color name
* Calculate the color of the battery circle
*/
function calculateBatteryColor(percent) {

  let color;

  if (percent > 50) {
    color = 'fb-green';
  } else if (percent < 50 > 20) {
    color = 'fb-yellow';
  } else {
    color = 'fb-red';
  }

  //console.log("battery color: " + color)
  return color;
}

[qooApps]

if (percent > 50) {
    color = 'fb-green';
  } else if (percent < 50 > 20) {
    color = 'fb-yellow';
  } else {
    color = 'fb-red';
  }

better:

if (percent > 50) {
    color = 'fb-green';
  } else if (percent > 20) {
    color = 'fb-yellow';
  } else {
    color = 'fb-red';
  }

Because on 50% it would shown red.
And it's better to reduce/optimize the code 😉
But best is:

color = (percent>50) ? 'fb-green' : ((percent>20) ? 'fb-yellow' : 'fb-red');

[TKCMuzzer]

Cheers guys, a combination these codes worked brilliantly. Much appreciated.

[jomis003]

Is there some sort of import that needs to happen on the index.js file for the battery to show on the watchface? I am not finding anything on it in the documentation I am looking at.

[allyann]

import { battery } from "power";
console.log(Math.floor(battery.chargeLevel) + "%");

More information about the Power module can be found at: https://dev.fitbit.com/build/reference/device-api/power/

[allan175]

But best is:

color = (percent>50) ? 'fb-green' : ((percent>20) ? 'fb-yellow' : 'fb-red');

I'd argue you definition of "best". That will compile to the same/similar execution as the if/else version but the if/else is significantly more readable. Readable code is a good thing to practice!

[jomis003]

This solution works for coloring the text, however the percentage on the watchface does not update as the battery level decreases.

I attempted to put the below code in to the calculateBatteryColor(percent) function and call it with a display.onchange but it put my watch into a boot loop mode so don't do that....

  var batteryLevel = battery.chargeLevel;
  let batteryPercent = document.getElementById("batteryPercent");
  batteryPercent.style.fill = calculateBatteryColor(Math.floor(batteryLevel));
  batteryPercent.text = batteryLevel + "%";

Creating its own function does not work either. what is the "best way" to keep the percentage updated. Bonus points if we can translate it into having it be a fill to a battery icon.

[allyann]

Put the battery update code in a function, ie. updateBattery() and then call 

updateBattery();
setInterval(updateBattery, 300000);

You call function when the app is first opened, and then at intervals with setInterval. The first parameter is the function name you want to set the interval on and the second is the interval in milliseconds that you want it to run on.

https://dev.fitbit.com/build/reference/companion-api/globals/#function-setinterval-

[FunGamer]

Is there any way to do this to the background?

[jomis003]

I would think that this could be done with the background. You would just need to change the fill color using the same statement. 

[FunGamer]

Makes sense, thanks!

[JakeM123]

@qooApps

Where would you put this statement in the fitbit studio? And how would you make it known that this is only to change the battery colour and none of the other styles?