Connect IQ Watch face own shaped Battery Status Bar

Question

I am trying to show a battery status bar by using my own style (see image) on my Garmin Wacht Face.

At the moment I am using only 3 drawables (100% full, 50%, and 0% empty). Is there a possibility or other idea to fill my 0% shape be using the SystemStatus.battery

    var batStatus = System.getSystemStats().battery;
    var batPNG;

    if (batStatus > 75) {
        batPNG= Ui.loadResource(Rez.Drawables.Bat100);
    } else {
        if (batStatus > 25) {
            batPNG= Ui.loadResource(Rez.Drawables.Bat50);
        } else {
            batPNG= Ui.loadResource(Rez.Drawables.Bat0);
        }
    }
    dc.drawBitmap(  10, 35, batPNG);

Answer 1

If you want to represent the actual battery percentage but without needing images for each percentage point, you could accomplish this by converting your battery status bar to a custom font. Then just use the "Dynamic Color Filling" trick in this blog post on Garmin's developer site:

https://developer.garmin.com/connect-iq/connect-iq-faq/how-do-i-use-custom-fonts/

If you need help with creating a custom font, that same blog post has some pointers and links for that also.