Background

[Poupette33]

Hi,

I just created an analog clock for my versa, quite simple, but everything works. Except the background, it doesn't load.
I followed the tutorial @ozibyte (a big thank you for your tutorial), but the wallpaper stay black.

Do you know why?

Sorry for google translate^^

[Poupette33]

I have this error message :

  Error 2 Invalid path c:/users...

[Durus]

Without looking at the code I can't say for certain, but it sounds like the path to the backgound image is wrong. 

[Poupette33]

What do you need, index.js ou index.gui, or both ?

[allan175]

index.gui I expect.

In your index.gui (or index.js) do you have the path "C:/users/..." mentioned?

[Durus]

It can go either place.

The path is a relative path from the root of the app install.  The c:\... message let's us know you are the simulator.  The path should be something like "./path/to/file.png".  Where are you saving the file to?

[Gondwana]

I haven't been following this closely, but it sounds to me like there might be confusion between where an image is stored on the development computer (which could start with 'c:\users') and where an image is stored on the watch (simulator or real) (which would typically start with '/resources/' or one of the folders listed on the LHS of the IDE).

[Poupette33]

i just drag te file into 'resources' folder and i have no path mentionned in my index.

my index.gui :

<svg class="background">
      <defs>
        <section>
          <symbol id="sec-hand">
            <line x1="0" y1="0" x2="0" y2="130" stroke-width="2"/>
          </symbol>
          <symbol id="min-hand">
            <line x1="0" y1="0" x2="0" y2="130" stroke-width="4"/>
          </symbol>
          <symbol id="hour-hand">
            <line x1="0" y1="0" x2="0" y2="80" stroke-width="6"/>
          </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='300' height='300' data-size='16'/>
      </defs>
      
      <image id="WatchFace" class="WatchFace" href="background.png" />
       <text id="date1" class="date1" />
       <text id="date2" class="date2" />
      
      <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" />
          </g>
          <g id="hour-hand">
            <use href="#hour-hand" class="hour-hand" />
          </g>
          <g id="dot">
            <use href="#center-dot" class="center-dot" />
          </g>
        </g>
      </use>

[Durus]

This 

href="background.png"

Should be  

href="./resources/background.png"

You should also load images with sync. 

[dpl73]

Hi

Hopefully, I'm not hijacking this thread; but I have the exact same issue (except, no path error), from the same source: https://ozibyte.com/creating-an-analog-fitbit-ionic-clockface-part-1/

Same problem whether using simulator or versa.

Everything displays and works, except for the backgound.png.

[dpl73]

Hi

To answer my own post: the problem was with the downloaded background.png.  I opened it, then saved it without transparency and that seemed to do the trick.

Thanks all.