04-04-2020 07:49
04-04-2020 07:49
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.
04-04-2020 12:49
04-04-2020 12:49
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.
04-05-2020 02:03
04-05-2020 02:03
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
04-05-2020 12:55
04-05-2020 12:55
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).
04-05-2020 22:33
04-05-2020 22:33
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