03-30-2018 06:07
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-30-2018 06:07
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Hi all,
New to all this, although I do have some limited experience with CSS and javascript. I've been working on a watch face I'd like to have on my Versa when it gets here, based on colours I like etc. I've got a handle on most of it so far but I'm struggling to find how to dynamically set the sweep angle of the Steps Arc based on how I'm doing on my daily goal. If I try to use a myStepArc.sweep-angle attribute in the index.js then the build fails because the dash in the attribute doesn't work. How can I get the number of step vs goal to display as a variable arc?
While on the subject, is there an easy way I could get the arc to swap out with the step count using a click event?
Answered! Go to the Best Answer.

Accepted Solutions
03-30-2018 13:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


03-30-2018 13:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
What you want is probably .sweepAngle (this is a common reformatting between CSS and JS).
At risk of self-promotion, if you've got an Ionic, see if you can find the 'Pies and Bars' app. It changes the gauge values displayed when clicked. If that's what you mean, let me know exactly what you're having problems with.
Gondwana Software
03-30-2018 13:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


03-30-2018 13:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
What you want is probably .sweepAngle (this is a common reformatting between CSS and JS).
At risk of self-promotion, if you've got an Ionic, see if you can find the 'Pies and Bars' app. It changes the gauge values displayed when clicked. If that's what you mean, let me know exactly what you're having problems with.
Gondwana Software
03-30-2018 13:43
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-30-2018 13:43
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Thanks for that. I figured it out about 15 minutes ago. Got the sweepAngle working nicely now. I haven't got anything yet, just using the simulator. What I'm after is, for example, having a battery gauge image that when tapped will swap out to battery percentage, then back again when tapped again.

03-30-2018 14:46
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


03-30-2018 14:46
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Read about the .onclick event handler, and don't forget pointer-events="visible" in your SVG.
Gondwana Software

03-30-2018 17:01
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-30-2018 17:01
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Hi @Gondwana. I've been looking at the onclick handler, but struggling to get my head around it. I've been trying to do it using a getElementsByClassname and toggling the display property between inline or none but getting nowhere. Essentially, I'm assuming it should be possible to put these two elements (in the pic) on top of each other and toggle the visibility on/off of both simultaneously using the class name? Any pointers in the right direction would be appreciated.
03-30-2018 20:54
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


03-30-2018 20:54
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@GrumpyCyclistYep, that's pretty much it. I'd be inclined to use getElementById because you probably want to target a specific element rather than all of the same class. Also be sure you're using .style.display and not just .display. The only other real gotcha is to hook into the correct element: when the hierarchy is deep and/or involves use/symbol, it can be unclear which element will respond. Trial and error will probably get you there, although there's a lot to be said for getting a simple case working first.
Gondwana Software

04-01-2018 10:04
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

04-01-2018 10:04
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
@Gondwana I got it working by cheating a bit. I put a non visible <rect> on top of the elements I want to swap out and used the onclick event for the rect to toggle the style.display property between none and inline for the battery meter and percentage. Seems to work OK.
