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

Image isn't shown

ANSWERED

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;
}
Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

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>

 

 

View best answer in original post

Best Answer
4 REPLIES 4

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>

 

Best Answer
0 Votes

Hi, thanks for your reply. I've tried this as well and the image is still not showing.

Best Answer
0 Votes

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>
Best Answer

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>

 

 

Best Answer