Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Image displayed simulator but not on watch

Hi fellow developers,

 

I add an icon to my watch face and it seems to work on the simulator but is not shown on my watch.

My code is

 

#myLightningImg {
x: 235;
y: 280;
width: 35;
height: 22;
fill: gold;
in styles.css

and  <image id="myLightningImg" href="lightningGray.png" /> in index.gui

 I already read something that image resizing on the watch was not properly working so I changed my css to:

#myLightningImg {
x: 235;
y: 280;
fill: gold;
}

 

I suppose with this new css code isn't resized the image any more?? However with this code the image is still not shown.

 

Any one got an idea? 

Looking forward to read it.

 

Best Answer
4 REPLIES 4

How large is your source image (.png)?

I note that your original CSS would push the bottom of the image off the bottom of the screen, but that shouldn't matter.

Peter McLennan
Gondwana Software
Best Answer
0 Votes

Hi @Gondwana, maby thanks!!

 

Uhm the picture is 700x700 :-(, didn't realize it was that large. Taking a smaller picture seems to work. Still got a question:

What you wrote about the bottom is right but I'm still struggling with HTML/CSS. For now for a 20px icon i used css code

width: 20;
height: 20;

This seems to works work on the watch but in a technical sense is it still resizing? Is there a way to explicitly not resize?

 

Thanks in advance,

 

Robert

Best Answer
0 Votes

Resizing does work, within limits. For best results, it's best not to use it on the device, though. Pre-size your images to the exact pixel size you want before putting them into your Fitbit project.

 

If you need one image to display at multiple sizes, consider having multiple versions of it (one per size).

Peter McLennan
Gondwana Software
Best Answer
0 Votes

Hi,

 

many thanks but still the CSS/HTML part is not clear. I have a 20px picture and when I use the CSS code:

#myLightningImg {
x: 236;
y: 280;
fill: gold;
} it got a vague picture. When is use

 

#myLightningImg {
x: 236;
y: 280;
width: 20;
height: 20;
fill: gold;
} (don't look at the x and y coordinates)is the last one okay? Or is it still resizing in technical sense? And what should then be the code?

 

Like to hear from you

Best Answer
0 Votes