Tutorial: Create a Connect IQ Data Field 1



Prerequisite for this tutorial

Prerequiste: a working development environment, see how to set this up here.

Source code

The source code is available at the bottom of each tutorial, I would advise however to build the source code yourself step by step, as that way you will learn the most from this tutorial series!

What?

Data fields are programs which you can run while you are doing an activity. In this tutorial we will create a complex data field.
.

Purpose of the data field

The data field will show every 5 seconds another piece of information, consecutively it’ll show the following:
  • Total Steps
  • Active Steps
  • Steps To Go
  • Percentage of Daily Goal Reached
(In case you want to install the Steps Carousel on your watch – the finished version of the data field is available in the Connect IQ store.)

Let’s get started

Start Eclipse and click File -> New -> Connect IQ Project Give the project a name and choose Next

Choose the project type Data Field, the minimum level of the SDK you need for your project and the watches you’ll support. (The general watches square, tall, round and semi-round watch are marked as deprecated and will no longer be supported in future versions of the SDK)

There are 2 types of data fields Simple and Complex. The Simple data field allows you to set a label and a value, the complex data field allows you to do a more complex layout for your field. The reason we don’t choose the simple data field for this project is because you can only set the label on startup of the field (and can’t change the label value while the field is running like we’ll need). So choose Complex data field and click Next

In the final screen we choose which languages we will support.

Create a run configuration

After doing the steps above you have a working application and we can run it in the simulator. Let’s create a run configuration: Run -> Run configurations -> Connect IQ App -> New Give the run configuration a name, and choose the device you want to test in the simulator.

Click Run to run the application. If all goes well you should now see something similar like this:

Implement Screen update changes

We will need to update the label more than only when the layout changes, we introduce a label variable to store the contents and move the call to set the label into the function onUpdate() (this function will update the screen each second), after this change your function will look like this:

Was the start button pressed?

We will need some way to know whether the user pressed the start button right? And steps shouldn’t be recorded when the timer is in stopped state… This code should cover what we just described above:

Business logic!

Ah the fun part starts! We can actually implement what the field should do now! So we’re there, the layout certainly is not perfect yet, but we’ve coded our first connect IQ data field. In future tutorials we’ll learn how to further improve what we did so far!

Test the application in the simulator

When you run the simulator you can simulate test step data by going to the menu Simulation -> Activity Monitoring -> Set Activity Monitor Info

Source Code

You can download the full source code from github or download a local copy here


Next Tutorial

Next: Tutorial – Create a Connect IQ data field by doing direct dc.draw() calls

Feedback

Did you like this article?
Questions?
  • Post in the comments section below!

One comment on “Tutorial: Create a Connect IQ Data Field

  1. Reply FastAundrea Sep 19,2017 23:24

    I have noticed you don’t monetize your page, don’t waste your traffic, you can earn extra cash
    every month because you’ve got high quality content. If you want to
    know how to make extra bucks, search for: best adsense alternative Dracko’s tricks

Leave a Reply