11-29-2018 16:40
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

11-29-2018 16:40
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I am trying to build my first watchface. I have the stats and goals all showing as numbers, but I am trying to now change these into bar graphs.
width=100% = goal reached
width=0% = no progress
I have the rectangle showing on my screen due to the following in my gui file. But I can't seem to find a way to change the rectangle width in my actual index file. Eventually hoping to do this off of a calculation actual/goal.
<rect x="0%" y="57%" width="150" height="25" fill="mediumvioletred" />
Any suggestions are appreciated. I am still learning, so trying to keep it as basic as possible.
Thanks!
Answered! Go to the Best Answer.

Accepted Solutions
11-29-2018 19:24
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


11-29-2018 19:24
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I think a problem may be that % measurements only work in .CSS. You'll probably have to use px in .js. You can capture the 100% width in .js when your app starts; that will make it easier to adapt your clockface for different devices.
Gondwana Software

11-29-2018 19:01
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

11-29-2018 19:01
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
You can assign an id to the rect element and then retrieve the element by id in the js file.
For example:
.gui:
<rect width="150" height="25" id="bar1" />
.js:
const bar1 = document.getElementById("bar1");
bar1.width=200;

11-29-2018 19:24
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


11-29-2018 19:24
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I think a problem may be that % measurements only work in .CSS. You'll probably have to use px in .js. You can capture the 100% width in .js when your app starts; that will make it easier to adapt your clockface for different devices.
Gondwana Software

