Arc Sweep Angle based on Goal

[GrumpyCyclist]

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?

[Gondwana · Accepted solution]

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.

[GrumpyCyclist]

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.

[Gondwana]

Read about the .onclick event handler, and don't forget pointer-events="visible" in your SVG.

[GrumpyCyclist]

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.

[Gondwana]

@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.

[GrumpyCyclist]

@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.