Battery image overrides background image

[amnicholls]

Hi,

I'm new to the fitbit development arena, and not terribly good at web development but I thought I'd give creating a clock face a stab.

I'm focusing first on the layout by embedding images in place and then moving on to the code later.  It seems that whenever my clock face encounters the battery image it replaces the background image with this battery image.

I've only tested it using the fitbit simulator and targeting an Ionic at this stage.  I'm a bit stumped, so any help would be very appreciated.

My index.gui is:

<svg>
   <svg class="background">
      <image href="ionicAntsFirstWatch.jpg" />
   </svg>
   <svg class="stats">
      <image href="battery100.png" />
      <text id="dateDay" />
      <text id="dateDateMonthYear" />
      <text id="clockHrsMins" />
      <text id="clockSecs" />
   </svg>
</svg>

And style.css:

.background {
   viewport-fill: black;
}

#batteryIcon {
   x: 2px;
   y: 2px;
}

#dateDay {
   font-size: 14;
   font-family: Colfax;
   text-length: 32;
   text-anchor: left;
   x: 0%;
   y: 90%;
   fill: white;
}

#dateDateMonthYear {
   font-size: 14;
   font-family: Colfax;
   text-length: 32;
   text-anchor: left;
   x: 0%;
   y: 95%;
   fill: white;
}

#clockHrsMins {
   font-size: 50;
   font-family: Colfax;
   text-length: 32;
   text-anchor: bottom;
   x: 60%;
   y: 100%;
   fill: white;
}

#clockSecs {
   font-size: 20;
   font-family: Colfax;
   text-length: 32;
   text-anchor: right;
   x: 94%;
   y: 100%; /*+40;*/
   fill: white;
}

[Gondwana]

Your battery image is perhaps just appearing over the top of the background (assuming that it's as large, or larger, than the screen). Use the element's width and height to make it smaller.

If I'm on the right track, it's also best to make your images no larger than they need to be, rather than forcing the watch to shrink them. The watch can have problems with large images, and it's a waste of memory and processing speed as well. Those things are much more limited on the watch than on any browser you've used in the last two decades.

[amnicholls]

Thanks for your reply. I should have said in my original post that my background image is the height and width of an ionic watch face, whilst my battery icon is 30x15px. I’ve tried setting the battery icon width and height both in the SVG image tag and also in the CSS but the battery icon gets stretched to fill the screen. I’ve also tested on my real ionic and it does the same so it rules out any issues with the simulator. 

[JonFitbit · Accepted solution]

Is the project on github, or can you put it there?

I also notice you're using `px` in your attribute values, they aren't valid here.

[amnicholls]

Removing the px from the CSS has fixed the issue.  Thanks.