05-20-2018 14:52
05-20-2018 14:52
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^^
05-20-2018 15:00
05-20-2018 15:00
I have this error message :
Error 2 Invalid path c:/users...
05-20-2018 15:15
05-20-2018 15:15
Without looking at the code I can't say for certain, but it sounds like the path to the backgound image is wrong.
05-21-2018 01:46
05-21-2018 01:46
What do you need, index.js ou index.gui, or both ?
05-21-2018 02:48
05-21-2018 02:48
index.gui I expect.
In your index.gui (or index.js) do you have the path "C:/users/..." mentioned?
05-21-2018 04:20
05-21-2018 04:20
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?
05-21-2018 04:33
05-21-2018 04:33
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).
05-21-2018 04:41
05-21-2018 04:41
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>
05-21-2018 04:47
05-21-2018 04:47
This
href="background.png"
Should be
href="./resources/background.png"
You should also load images with sync.
05-30-2018 09:43
05-30-2018 09:43
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.
05-30-2018 10:02
05-30-2018 10:02
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.