My motivation

Let me tell you a story about sailing with my wife, Audrey. She and I have different opinions of what constitutes a good time. For me, I love sailing together, for her, not so much. So when I ask her to take over for a second so that I can close out of my navigational charts on the iPad and open a different instrument panel view to see how fast we're going, she gets a bit nervous and has less of a good time. When I get curious about what our current speed is, I have to choose between frustrating Audrey by asking her to take control, or not know how fast we're moving rendering myself unable to tell her how much longer we'll be out there. Both scenario's cause frustration for both of us.

The Solution

I had been going back and forth on whether I wanted the new Fitbit Ionic (a waterproof fitness tracker) or graduate up to Apple's iWatch. After reading reviews, and thinking hard about the features I wanted and needed, I settled in on the Ionic. For my birthday, Audrey bought the Fitbit device for me. I was thrilled, but neither of us knew that it might be able to solve the issue of our sailing frustrations.

While digging around and looking for apps for the watch, I discovered that the app gallery for it had not even gone live yet. I also stumbled upon Fitbit's dev resources. From there I discovered how to register myself as a developer, integrate with their SDK, tools and studio editor, and within a day had written an application that would solve our real world problem.

I created an application that with the flick of my wrist would give me my current speed in Knots, and MPH along with my current compass heading by comparing my previous GPS location with my current. It's not the most perfect accuracy, but it allows for ballpark estimation while navigating a boat. This solved the little problem that Audrey and I had been experiencing for years. Now we're going to dig in to some of what I learned while working on the app called SaltyDog.

The Fitbit Development Environment

Before we can do anything else, there is an unfortunate limitation (among other limitations) to developing for the Ionic, you need to have one of the devices. At the time of writing, there is no simulator or emulator capable of running the apps that you make for the Fitbit.

Access to a Fitbit Ionic watch

A standard Fitbit Account

Fitbit app for iOS, Android or (if anyone has it) Windows Phone

a Wi-Fi network

Javascript

CSS for layout and styling

SVG for the gui DOM

Fitbit Studio web based editor

Fitbit developer's reference API documentation

Fitbit studio

Fitbit studio is the web based editor and debug tool for developing and adjusting Fitbit ionic apps.

App architecture

The folder structure of an app or a watchface for the Fitbit Ionic app may seem familiar to you, especially if you've made anything using Node.js or React before. There are a few exceptions, mainly being that there are special directories created if your app has configuration options available in a settings menu (which lives on your mobile devices' Fitbit app), or a companion app that will run concurrently with a user's mobile device.

Read more on Fitbit app architecture here

A different kind of DOM

For the most part, you can select objects for styling in your CSS or manipulate them through JavaScript using ID's or class names, but this isn't the DOM that most of us are used to.

Fitbit relies exclusively on using SVG's to render anything visible on screen. Your SVG becomes your DOM. The SVG that we're talking about lives inside of your project's index.gui file. There is another .gui file called widgets.gui where we can allow access to certain Fitbit OS systemwide components to be used within an applications. widgets.gui is great to use if you'd like to create a quick app using Fitbit's already designed UI elements.

Read more on SVGs for Fitbit

Styling with CSS

This should feel pretty familiar to any web developer as the process is very much the same. CSS for the most part is read by the Fitbit app renderer in a very similar manner to a browser's approach for interpretation. There are a few minor differences though.

Gotchas:

For Fitbit CSS, unlike CSS for web, don't use units such as px for values to properties such as font-size , or letter-spacing .

EG: #myElement: { font-size: 20; letter-spacing: 10; } Use the fill property instead of color to add color to text elements , this falls in line with the standards of coloring objects with CSS that reside within and SVG.



EG: / use fill instead of color to add color rules to your test / #myElement: { fill: #FCFCFF; } When aligning or justifying your text, the standard CSS property text-align will not work. Instead use text-anchor .



EG: / use text-anchor instead of text-align to align you bodies of text / #myElement: { text-anchor: start | middle | end; }

Alternately, you can use some of the systemwide text components and take advantage of the system's UI rules and styling. Read more on using system text components

If you are in the habit of getting fancy with your CSS selectors, you're in for some disappointment with Fitbit's CSS selector limitations. Child, Descendant, and Attribute selectors are not supported, meaning the following examples will NOT work:

DON'T TRY THESE: #myElement .child: { fill: #FCFCFC; border-radius: 10; } #myElement > ul: { font-size: 20; letter-spacing: 10; } #myElement[selected="true"]: { fill: red; letter-spacing: 10; }

It's safe to assume that pseudo selectors like :before , :after and :first-of-type do not work either.

Read more on Fitbit's CSS guide

Linking CSS to your view

You'll want to handle linking your stylesheets to your view via your widgets.gui using a standard link tag.