05-24-2018 10:32
05-24-2018 10:32
I'm experimenting with a clockface. I've added the time and some stats on my clock face and now I'd like to add some icons. I downloaded the steps icon from github, added it to my resources folder and tested it on my Versa and the Versa simulator but it won't show. Anyone any idea why the icon is not showing?
My index.gui is like this:
<svg class="background"> <text id="myBattery" class="topLeft smallFont"/> <text id="mySteps" class="topRight smallFont"/> <text id="myTime" class="midMid"/> </svg> <svg> <image href="stat_steps_solid_24px.png" x="20" y="20"/> </svg>
And my styles.css is like this:
.background {
viewport-fill: #000000;
}
.midMid {
font-size: 60;
font-family: System-Bold;
text-length: 32;
text-anchor: middle;
x: 50%;
y: 50%+30;
fill: white;
}
.smallFont {
font-size: 15;
font-family: System-Bold;
text-length: 32;
fill: white;
}
.topLeft {
text-anchor: start;
x: 2;
y: 15;
}
.topRight {
text-anchor: end;
x: 100%-2;
y: 15;
}
Answered! Go to the Best Answer.
05-24-2018 12:53
05-24-2018 12:53
I found out why the image was not showing. The icon I downloaded from the Fitbit GitHub had a transparant background and the image itself was black which made it "invisible" against the black background of the app. The confusing part was that GitHub and the fitbit studio showed the image as white with black surrounding...
I was able to show the icon as just two white footprints by adding fill="white". The width and height attribute did help me though with getting it to the right size. So thank you for that part 🙂 My code ended up like this:
<svg class="background"> <text id="myBattery" class="topLeft smallFont"/> <image href="stat_steps_solid_24px.png" x="20" y="20" width="24" height="24" fill="white"/> <text id="mySteps" class="topRight smallFont"/> <text id="myTime" class="midMid"/> </svg>
05-24-2018 11:12
05-24-2018 11:12
I think you should include the image in the same svg; try this (I put the image next to the label inthe code for cleanliness sake):
<svg class="background"> <text id="myBattery" class="topLeft smallFont"/>
<image href="stat_steps_solid_24px.png" x="20" y="20"/> <text id="mySteps" class="topRight smallFont"/> <text id="myTime" class="midMid"/> </svg>
05-24-2018 11:40 - edited 05-24-2018 11:41
05-24-2018 11:40 - edited 05-24-2018 11:41
Hi, thanks for your reply. I've tried this as well and the image is still not showing.
05-24-2018 12:18
05-24-2018 12:18
Maybe try this:
<svg class="background"> <text id="myBattery" class="topLeft smallFont"/>
<image href="stat_steps_solid_24px.png" x="20" y="20" width="20" height="20"/> <text id="mySteps" class="topRight smallFont"/> <text id="myTime" class="midMid"/> </svg>
05-24-2018 12:53
05-24-2018 12:53
I found out why the image was not showing. The icon I downloaded from the Fitbit GitHub had a transparant background and the image itself was black which made it "invisible" against the black background of the app. The confusing part was that GitHub and the fitbit studio showed the image as white with black surrounding...
I was able to show the icon as just two white footprints by adding fill="white". The width and height attribute did help me though with getting it to the right size. So thank you for that part 🙂 My code ended up like this:
<svg class="background"> <text id="myBattery" class="topLeft smallFont"/> <image href="stat_steps_solid_24px.png" x="20" y="20" width="24" height="24" fill="white"/> <text id="mySteps" class="topRight smallFont"/> <text id="myTime" class="midMid"/> </svg>