IoT Development - Easy control of household appliances with the Fitbit Smartwatch

Challenge

At the beginning of 2019 our customer tasked us with an exciting project: Let's create a Smart Home App for Fitbit smartwatches! The goal: Users can monitor and control their household appliances such as coffee machines, washing machines or ovens from their wrist. Six weeks later we were proud too see it launch.

Solution

To allow customers to interact with their home appliances we use the official Home Connect API. So we rely on an active internet connection on the users mobile phone, from which we forward the data to the watch. Any actions of the user would take the other way around.

Because of the equal complexity of front- and backend development in app development, these two parts are treated separately in the following.      

Backend Solution

Development Infrastructure is Key
The Fitbit CLI can create a nice skeleton app locally and also supports building the app locally and run it directly on the device or in the simulator. So we were decoupled from the Web IDE and ready to go with our individual setups. Another aspect that helped us, is the SDK’s support to code not only in JavaScript but also in TypeScript without any additional build setup.

There is a simulator available from Fitbit to run the apps locally without the need for a device. It is a nice helper, especially because the cycles for building and deploying an application to the watch takes some time.      

Frontend Solution

It seems quite trivial at first, but due to the low resolution of 348x250 pixels for the Fitbit Ionic, respectively 300x300 pixels for the Fitbit Versa (Lite), compared to a big screen you have to rethink a bit. So in our example you don’t have a menu or a list for the selection of your home appliances, but you simply swipe to the right or left.

The UI library comes with a lot of helpful pre-defined widgets and also includes animation support. Nonetheless we had to manually animate elements as well. For example we manually draw a rectangle as progressbar for every second because the interpolation of the animations might cause some jitter otherwise. Also in this case we didn’t notice any performance hits.

While SVG from other application areas is better known from single icons and animations, Fitbit describes the complete UI in SVG .gui files. With the help of the app logic written in JavaScript (or in our case TypeScript), you can interact with the UI, more precisely with the HTML DOM objects.

Unfortunately this has its pitfalls - namely the dynamic generation of content. Existing SVG elements can be changed, but no new ones can be added. In our example with the home appliances this was a real problem, because we display a variable number of home appliances - depending on how many the user has paired. Our workaround for this was to create a maximum number of home appliances as SVG elements, hide them by default and then enable them for each paired appliance using JavaScript.

Benefits

The handling of the Smart Home devices has thus been considerably simplified. Who hasn't always wanted to control the oven, coffee machine or washing machine with their clock?