Clock face not showing background image

[pranav_kp]

Hi, I am trying to to make a clock face using fitbit studio for ionic watch. I have crated the hour, minute and second hand and i want to put a background for the clock face. I have put the image in my resources folder and i have added the codes in my svg but the image isn't displaying when i run the app. The code is given below

<svg class="background">
  <defs>
    <section>
      <symbol id="sec-hand">
        <line x1="0" y1="0" x2="0" y2="120" stroke-width="2"/>
      </symbol>
      <symbol id="min-hand">
      </symbol>
      <symbol id="hour-hand">
      </symbol>
      <symbol id="center-dot">
        <circle r="4" fill="#F5F5F5"/>
        <circle r="2" fill="fb-dark-gray"/>
      </symbol>
    </section>
    <symbol id="clock-widget" class='clock-widget' type='clock-widget'
        focusable='false' pointer-events='visible' system-events='all' width='348' height='250' data-size='16'/>
  </defs>
  
  <image id="WatchFace" class="WatchFace" href="background.png" />
  
  <use id="analog-watch-hands" href='#clock-widget' x='0' y='0' >
    <g transform="translate(50%,50%)">
      <g id="second-hand">
        <use href="#sec-hand" class="sec-hand" />
      </g>
      <g id="minute-hand">
        <use href="#min-hand" class="min-hand" />
         <image href="minuteHand.png" width="9" height="125" class="min-hand" /> 
      </g>
      <g id="hour-hand">
        <use href="#hour-hand" class="hour-hand" />
         <image href="hourHand.png" width="13" height="80" class="hour-hand" /> 
      </g>
      <g id="dot">
        <use href="#center-dot" class="center-dot" />
      </g>
    </g>
  </use>
</svg>

How can i solve this...........?

[JeCom]

Here are some things you could try or check:

• Put your image as the first line so it's loaded first and in the back (behind your other elements like your minute hand):
  

  <svg class="background">
     <image id="WatchFace" class="WatchFace" href="background.png" />
     ....

• Check if your image name is exactly "background.png", no difference in capital letters, file extension or such.
• [EDIT: I saw now that you have put in the resources folder, so this should be OK] Check if your image is under the resources folder, in the same place as your .gui file. If not, put it in the same place or give it a relative path. E.g. if your .gui file is in the resources file and your image is in a directory called "images" within resources you can put href="images/background.png".
• Check if the bakground image has the same size as your watch. If not, you can either resize your image or you can force it by putting width="100%" and height="100%" in your image tag:
  

  <image id="WatchFace" class="WatchFace" href="background.png" width="100%" and height="100%"/>

These are some of the first things I thought about. If these don't work or help please share some more info like your styles.css and your project structure 🙂

[pranav_kp]

---

@JeCom wrote:

Here are some things you could try or check:

• Put your image as the first line so it's loaded first and in the back (behind your other elements like your minute hand):
  

  <svg class="background">
     <image id="WatchFace" class="WatchFace" href="background.png" />
     ....

• Check if your image name is exactly "background.png", no difference in capital letters, file extension or such.
• [EDIT: I saw now that you have put in the resources folder, so this should be OK] Check if your image is under the resources folder, in the same place as your .gui file. If not, put it in the same place or give it a relative path. E.g. if your .gui file is in the resources file and your image is in a directory called "images" within resources you can put href="images/background.png".
• Check if the bakground image has the same size as your watch. If not, you can either resize your image or you can force it by putting width="100%" and height="100%" in your image tag:
  

  <image id="WatchFace" class="WatchFace" href="background.png" width="100%" and height="100%"/>

These are some of the first things I thought about. If these don't work or help please share some more info like your styles.css and your project structure 🙂

---

Thanks for your reply. I have tried your suggestions but still the background image is not showing. I have put my css file below.

.background {
  viewport-fill: fb-black;
}
.sec-hand {
  y: -105;
  fill: fb-light-gray;
}
.min-hand {
  x: -4;
  y: -108;
}
.hour-hand {
  x: -6;
  y: -67;
}

The gui file, css and the backround images are in the resources folder. 

[JeCom]

I copied your code from your .gui and .css to the 'digital clock' project with an example background image and got it to work without changing anything to the .gui or .css. 

The background image is shown as you can see above (the ugly red/blue stripes is the example background I used). 

I can't think of anything that might be wrong except for your background image. If you could upload it or provide a link to it I can take a further look if you want.

[JeCom]

I've uploaded the project I made to GitHub so you can check it out if you'd like.

[pranav_kp]

Thanks for you reply.  Sorry i couldn't reply earlier, i have checked with your image and its working fine but not with my image, still trying to figure out what's wrong with the image......may be size...?

[JeCom]

No problem 🙂

The size of the image could be possible. For example, I've had images larger than 300x300 before which would work on the simulator but not on the watch itself. 

If you are willing to share the image or a link to the image I'm happy to take a look to see what could be wrong 🙂

[pranav_kp]

background.png

This is the image i used as background image.