Weight widget (part 2)

Hello,

in this second part of my blog posts about the weight widget for Connect IQ I will present the basic app structure and some fundamental methods with the target to reach the basic functionality for obtaining data from Fitbit and presenting it on the watch ui. In the first post I gave an overview of the plan for the app, and what I basically wanted to reach.

Before I’ll start the struggle with the OAuth2 related issues, I want to provide a basic skeleton for the app: there will be a basic view with a label for the app name, latest measurement date and the actual weight figure. The field with the date and the current weight will be dynamic and use the data from Fitbit, but all in all the user interface is very simple. The plan is to implement a set of settings where the user may specify the target weight, colours etc.

App structure

Based on the mockup presented last time I created an XML file with the basic layout (see the code excerpt of layouts.xml below). Basically there will be one layout with four labels, and the content of dateLabel and weightDisplayLabel will be updated dynamically . As the target device will be Vívoactive HR, I don’t have to think about the layout too much, but concentrate on that it works on that particular watch. Naturally it would be better to do everything right, but sometimes the effort doesn’t necessarily pay off…

<layouts>
   <!-- A generic, centered layout. -->
   <layout id="MainLayout">
      <label id="appLabel" x="center" y="top" color="Gfx.COLOR_WHITE" justification="Gfx.TEXT_JUSTIFY_CENTER" font="Gfx.FONT_LARGE" />
      <label id="latestMeasurementLabel" x="center" y="20" color="Gfx.COLOR_WHITE" justification="Gfx.TEXT_JUSTIFY_CENTER" font="Gfx.FONT_SMALL" />
      <label id="dateLabel" x="center" y="40" color="Gfx.COLOR_WHITE" justification="Gfx.TEXT_JUSTIFY_CENTER" font="Gfx.FONT_SMALL" />
      <label id="weightDisplayLabel" x="center" y="80" color="Gfx.COLOR_WHITE" justification="Gfx.TEXT_JUSTIFY_CENTER" font="Gfx.FONT_SYSTEM_NUMBER_HOT" />
   </layout>
</layouts>

Additionally there will a delegate class taking care of the user authentication with OAuth2, sending the actual request to the Fitbit API, processing the return value (in the successful case process a JSON file) and returning the processed result to the presentation layer (the view class updating the content on the watch UI). The resources will be loaded and the content is initialized in the method onLayout(dc):

    function onLayout(dc) {

        View.setLayout(Rez.Layouts.MainLayout(dc));
        
        var labelView = View.findDrawableById("appLabel");
        labelView.locY = Ui.LAYOUT_VALIGN_TOP;
        labelView.setText(Rez.Strings.appLabel);
        
        var latestMeasurementView = View.findDrawableById("latestMeasurementLabel");
        latestMeasurementView.locY = Ui.LAYOUT_VALIGN_TOP + 20;
	latestMeasurementView.setText(Rez.Strings.latestMeasurementLabel);
        
        var dateView = View.findDrawableById("dateLabel");
        dateView.locY = Ui.LAYOUT_VALIGN_TOP + 40;
        dateView.setText(Rez.Strings.dateLabel);
		
	var weightDisplayView = View.findDrawableById("weightDisplayLabel");
	weightDisplayView.setText(Rez.Strings.weightDisplayLabel);
        weightDisplayView.locY = Ui.LAYOUT_VALIGN_TOP + 80;
        weightDisplayView.setColor(Gfx.COLOR_DK_RED);
        
	return true;
    }

The result of the first try with a hardcoded weight and date looks like the figure below:

Use of Fitbit API

As I already stated, the Fitbit public API is extensive and well-documented. For my use case there are a couple of relevant requests (as long as the client has been authorised), e.g. fetching the weight of the user on one certain date (in addition to modifying the parameters, there has to be the valid OAuth tokens with the request):

https://api.fitbit.com/1/user/-/body/log/weight/date/2017-01-08.json

The response of a successful request looks like as follows, and from that it’s simple to obtain the actual desired value from the JSON string:

{"weight":[{"bmi":21.05,"date":"2017-01-08","fat":8.090999603271484,"logId":1483872301000,"source":"Aria","time":"10:45:01","weight":68.2}]}

In the next (and probably the last) part of the series I’ll show the actual process of doing the request, and on the other hand authenticating the user by using OAuth2.