Create Fitbit Ionic Clock Faces using JavaScript

A quick introduction for students to get to know Barry and grab a quick overview of what the course consists of.

An explanation for what we're aiming to build. Developing is always easier when you have the end in mind.

After completing this lecture, students will be able to start a new project and run a project on their Ionic.

An attempt to explain the functionality of all the code in the clock face code template.

NB: In this section, if you test your app at the end, the time will not show. I resolve this problem instantly in the next video lecture!

A link to Fitbit's official documentation on Application Structure

In this video you're taught how to draw an arc around the time display.

In this video we divide the circle arc into two halves so that we can draw the battery charge level indication with it later.

Link to useful docs on arcs and other SVG components.

In this video we show you how to get the date and day text elements correctly displayed on the screen. The next video takes care of setting the values to the correct date and day.

In this video we clean up the code (also known as refactoring) so that it will be easier to add more features later.

This video ties of the section of getting a working clock face out there. It now shows Time, Date and Day of the week.

Some notes regarding downloading the icons folder.

In this video we add icons to our project folder so that we can make use of them in the next lecture.

In this lecture you'll learn how to display images on your clock face.

In this video we add the statistic labels where you'll also learn how to rotate elements in your GUI document.

In this video we add in user permission request so that we can access the daily floors and steps values for display purposes.

Here's the link to the docs regarding user-activity: https://dev.fitbit.com/build/reference/device-api/user-activity/

In this lecture we display the distance in kilometers or miles. We'll build a util function to calculate the distance to display based on whether you want to show kilometers or miles.

Here's the code for the round function:

export function round(x, n) {
  return parseFloat(Math.round(x * Math.pow(10, n)) / Math.pow(10, n)).toFixed(n);
}

x is the value you want to round and n is the precision (i.e. the number of decimal places you want to round to). 

In this lecture we set up the Heart Rate Monitor and update the display on every Heart Rate reading.

The documentation for the Heart Rate Sensor can be found here: https://dev.fitbit.com/build/reference/device-api/heart-rate/

In this video we change the color of the arc based off of the battery charge state.

The documentation for the power API can be found here: https://dev.fitbit.com/build/reference/device-api/power/

In this lecture we draw the arc lengths based off the current battery charge state.

We add a little Easter egg in this lecture that lets our arc spin around whenever we click on it.

If you'd like to experiment further in animations, be sure to consult the docs on animations over here: https://dev.fitbit.com/build/guides/user-interface/animations/

We end off the course by learning how to publish our completed clock face.

Head over to https://gam.fitbit.com to publish your clock faces.

Some final notes to end off with.