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.
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 AnswerResizing 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).
Best AnswerHi,
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