Simply-Analog

Simply Analog is a simple watch face with multiple options.

You can choose from 12 different watch faces.
The most basic watch face is simple, but from there you can choose what is display, how it is displayed and what watch face you would like.
There are also 9 buttons on the watch face that allow you to display or hide status information.

Hidden Buttons;
4 Corners buttons - Toggle on/off goal rings.
3 O'Clock buttons - Toggle on/off Date.
6 O'Clock buttons - Toggle on/off Heart rate.
9 O'Clock buttons - Toggle on/off Battery status.
12 O'Clock buttons - Toggle on/off Display Auto off.
Centre button - Cycles through watch faces.
All button choices are saved to settings

Creating Watch Faces

The watch faces are created using Image Grayscale Magic!.
A template for Adobe PhotoShop has been included in the Image Template folder.
The template is deesigned to display all 60 tick locations at the correct angle.
This template can be used to know where to place the ticks on image.
This is how I created all my watch faces.

Image Grayscale Magic!

Grayscale images can be colored dynamically with the fill property. The black area of an image will be fully transparent (0) and the white will be fully opaque (255). All the mid-gray areas will inherit opacity according to their depth of color (0 - 255).

Note: The image must be 8-bit PNG format.

Example Code

<svg>

<image width="100%" height="100%" href="hand.png" class="seconds" fill="#3fc0fc" opacity="1" />

</svg>

Aside from making UI more adjustable to color changes, the use of grayscale images reduces the size memory usage by a factor of 4.

You can generate images in the correct format by using the following;

ImageMagick command: convert original.png -colorspace gray final.png

Adobe Photoshop Image -> Mode -> Grayscale, 8 Bits/Channel.

Fitbit SDK

Fitbit SDK code to set an item in setting/companion (settingsStorage.setItem).

Examples for diffrent item types:

For <Selects> you would need to do;

Example Code

settingsStorage.setItem("hourmode", JSON.stringify({"selected":[0],"values":[{"name":"24 hour mode","value":"24"}]}));

For <Toggles> you just set it to true or false;

Example Code

settingsStorage.setItem("useweather", JSON.stringify({"value":"true"})) ;

For <TextInput> and <Sliders> you just set it like this;

Example Code

settingsStorage.setItem("theKey", "any text");

or
Example Code

settingsStorage.setItem("sliderKey", 42);

How Fitbit watch app and phone app communicate

Messaging

The Messaging API provides a synchronous socket based communications channel for sending and receiving simple messages while the app is running on the device.

This API has an identical implementation in the Device API and the Companion API.

File Transfer

The File-Transfer API provides an asynchronous mechanism for sending/recieving binary or text files from the companion, and receiving/sending them on the device, even if the app is not currently running on the device.

The Companion API and Device API provide Outbox and Inbox queues to send and receive files.