Battery Level Bar - Not working on watch, only Simulator

[Chamcham]

I am having an issue with coding working while in the simulator, but once I load the watchface to my Versa 3, the part of the watchface that I have coded to change images based on battery level, not only doesn't work, none of the images even show up.

Here is the code I have in my apps/index file(Uploaded as pic because I couldn't post with that many characters):

[Gondwana]

Are the images of the right size, or are you trying to get the watch to resize them when it displays them?

[Chamcham]

{editted: provided wrong code}

I have them resized the index file

<image id="MyBatteryLevels" x="5%" y="45%"width="305" height="55" href="dagger.png" class="MyBatteryLevels" />

[Gondwana · Accepted solution]

Try using images of the exact required size. Resizing images on the watch may be too demanding for it. You could test with just a single image.

[Chamcham]

I tried resizing all pictures to the 305x55 that I set it to in the image id, and now it shows as extremely large in the simulator and the watch. Does the watch not go by pixels?

[Gondwana]

Yes to pixels. Versa 3 is 336px wide at its widest point, so that's a very large battery gauge!

[Chamcham]

Yes, it is supposed to be the width of the face but it is clearly not sizing correctly because the height and width are off the face.

It is showing like this with no resizing:

But when resizing to 305x55:

[Chamcham]

@Gondwana 

Nevermind, it is showing correctly now that I put in the resizing, eventhough all the pictures are all that same size already. Very odd but it appears to be working now. Thank you!