How to draw programatically?

[NiVZ]

Just wondered if there are examples of how to draw using code for non-static elements?  

eg Using lines to draw a graph or drawing arcs to show the seconds around the edge (like Fitbit Blaze Chronograph face).

Thanks,

NiVZ

[kenjamin]

I'm interested in this as well.

I'm wondering if the answer is essentially that you have to modify the document's innerHTML manually to edit "inline" .gui files.

Perhaps with the help of Preact if it can handle the 3kb memory hit it could be accomplished in a React / JSX style way. I could be overthinking things and introducing unneeded complexity, but I'm not seeing an actual drawing library like <canvas> provides.

[JonFitbit · Accepted solution]

Great question.

We don't currently have a drawing or canvas API, but it's something we're definitely aware of the benefits.

You also can't directly modify the innerHTML, or it's equivalent in this case. 

You can however dynamically adjust the attributes of the existing svg elements, like <arc>.

https://dev.fitbit.com/guides/user-interface/svg/#arc

I'll try to add an example to the developer website.

[nevraw]

Examples will really help get us started. The initial ones don't cover all we need, as Paul has highlighted.

[kenjamin]

I know that visibility can't be toggled, but what about access to an element's classList methods?

[JonFitbit]

classList isn't available, sorry.