Tutorial for creating an analog clockface with sample code

[WauloK]

Hey all.

For those needing a leg-up with creating your first clockface, I've written a tutorial with sample code and images which should help you start your development.

Please visit:

https://ozibyte.com/creating-an-analog-fitbit-ionic-clockface-part-1/

Let me know what you think! 🙂

Thanks to all in the Discord channel for helping me get started.

[JonFitbit]

Thanks for sharing!

[WauloK · Accepted solution]

Part two shows you how to add statistics such as Heartrate, Steps taken, Elevation gain (stairs walked up) and Calories burned.

Check it out here:

https://ozibyte.com/creating-an-analog-fitbit-ionic-clockface-part-2/

🙂

[gratefulmommy]

Thank you so much for posting these.  Can you please add the date into the code.  I don't understanding coding too much, but I'm great at copy/pasting (as long as I know exactly where everything goes.) I made a great clockface using your analog code, but would love to have the date also 🙂  Thanks!

[ndamo]

Hi,

Thanks for helping out by providing the code for this project.

There is one thing I do not understand in it though.

What is the flow of events that causes the hands to rotate?

There is no js code doing it, so I assume it is related to this

<symbol id="clock-widget" class='clock-widget' type='clock-widget'
  focusable='false' pointer-events='visible' system-events='all' 
  width='348' height='250' data-size='16'/>

Is the system-events="all" attribute causing events to be sent here?

How do they change the rotation angle?

I also note that there is a data-size=16 attribute. How does that relate to the above?

Is there a significance to the class assigned to the hands, eg 'min-hand', 'hour-hand' etc?

(i.e. does the runtime do something special with components with that class)

It would be great if you could provide some info or a link.

I haven't been able to find anything when searching for "system-events", "

Cheers,

Nick

[WauloK]

'min-hand', 'hour-hand' etc let you set the image and css later for these clock parts.

The rotation, etc is built into the Fitbit OS code. It's a special clock-widget built into it to do the rotation, etc.

You won't find any code for it as it is legacy code which will probably remain supported, but the code they show you on the website now is for manually calculating the angles for the images.

https://dev.fitbit.com/build/guides/clockfaces/

[ndamo]

Thank you very much!

I thought I was losing my mind as I couldn't find any docs on that method.

[justin_es]

this is so nice. Thank you! How to make the Sec.-hand, Min Hand or Hr-hand  cast a shadow?