02-07-2023 12:25
02-07-2023 12:25
I have built a face for my Versa 3 with a basic battery (meter from.. import { battery } from "power";). I am playing around and wanting something a bit fancier. Can some one point me to an example of using images to associate with the battery meter %, and displaying it. Something fairly basic please, I'm a baby developer 🙂 Thanks
02-08-2023 00:15
02-08-2023 00:15
Hi @Punzai - if you place the PNG images in the projects resources folder simply add an image SVG entry with href="image name".
You can have multiple defined in the same place and choose which one you want with opacity = 1;
Author | ch, passion for improvement.
02-08-2023 10:51
02-08-2023 10:51
hey guy_
im a complete newbie at this, would you be able to post a demo scipt to show how this works?
02-09-2023 02:29
02-09-2023 02:29
Hi @mickslsnikt - see the link in the previous post for displaying the image.
In Fitbit Studio best to start a new project example with clock and modify that.
Author | ch, passion for improvement.
02-09-2023 11:14
02-09-2023 11:14
<svg class="background">
<image id="myBatteryLevels" x="15%" y="92%" width="70%" height="5%"/>
</svg>
Index.js
import * as document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";
import { battery } from "power";
const myBatteryLevels = document.getElementById("myBatteryLevels");
//battery levels
if (battery.chargeLevel > 90) {
myBatteryLevels.href = "BatFull.png";
} else if (battery.chargeLevel > 80) {
myBatteryLevels.href = "Bat80.png";
} else if (battery.chargeLevel > 60) {
myBatteryLevels.href = "Bat60.png";
} else if (battery.chargeLevel > 40) {
myBatteryLevels.href = "Bat40.png";
} else if (battery.chargeLevel > 20) {
myBatteryLevels.href = "Bat20.png";
} else if (battery.chargeLevel > 10) {
myBatteryLevels.href = "BatLow.png";
} else {
myBatteryLevels.href = "BatEmpty.png";}
02-09-2023 11:20
02-09-2023 11:22
02-09-2023 11:22
This is the battery bit I separated from the rest of my code. Hope it helps
Add your battery images .png to the root of Resources.
02-10-2023 10:59
02-10-2023 10:59
Nice one, thanks for this! I find it easier to learn when I can see how things work!