New CLI For FitBit!

Yesterday, FitBit released a brand new CLI for developers. This is huge news that brings development to the local machine, and doesn't rely on the use of their web-based studio.
Don't get me wrong, the studio is a great tool! However, it is very nice to be able to run local editors such as VSCode.

When I was testing the new CLI, I ran into an issue that is simple to solve, but I couldn't find anything online telling me what was wrong. Here is the error when trying to install my app to the simulator:

Install failed: App was built for meson, but connected device only supports higgs applications.

The Solution

Silly me... My app is only built to work on Versa devices. The simulator first launched as an Ionic device. So naturally, the app will not install to Ionic. You can change this from within your package.json file.

"buildTargets": [
    "meson",
    "higgs"
],

meson is for the Versa, and higgs is for Ionic. If you weren't aware of this before, then the error wouldn't mean anything to you. But, now you know, so go out there and make some amazing apps for FitBit!

When developing my first FitBit Versa watch face, I ran into an issue when my wife and I were testing on our devices.  When the battery gets low, the OS displays a low battery icon.  The issue here is that the face that I developed already has an icon that changes with the battery level:

Now the OS battery icon is in almost the same exact place, so it looks really weird to have them overlapping each other.  From what I have found on the developer's forum, there is no way to suppress the OS's icon.

Solution


According to the Versa user manual, the OS displays the icon when the device is within 24 hours of running out of power, and starts flashing when it gets to a critical level.  The only solution that I have come up with at this time is to just hide my custom icon when it gets near that level. Hopefully in the future, the power API will be able to tell us when this actually happens, as it can be different for different devices. Here is a simplified version of the JavaScript that handles this for us:

import { battery } from "power";

imgBattery = document.getElementById("battery_img");

let batteryChargeLevel = Math.floor(battery.chargeLevel);

if(batteryChargeLevel <= 20) {
    imgBattery.style.display = "none";
} else {
    imgBattery.style.display = "inline";
}

For the full code, you can visit the repository for this face on GitHub. This file also contains an example of how to hide the custom icon when the watch is attached to the charger, as again, the OS has it's own icon that it wants to display.

I am hopeful that in a future version of the FitBit OS, we will have the ability to suppress the OS's icon, and be able to just use our custom icon for our watch face.

Copyright © 2018 Chris Perko

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram