Tutorial: Create a Connect IQ Data Field 10



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.
.ads in wordpress

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!

10 thoughts 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

  2. Reply Jo A. Kim May 17,2018 10:25

    Hi Peter,

    Why do you load the Activityinfo again:

    var activityMonitorInfo = Toybox.ActivityMonitor.getInfo();

    You get the data on the parameter “info”.
    Is there a diference?

    • Reply Peter May 17,2018 11:48

      The info parameter contains an instance of the ActivityInfo class. The steps are not present in there, but are contained in the ActivityMonitorInfo class.

  3. Reply Nicolas May 7,2019 20:41

    Hello Peter,
    I am one of your custumers.
    I have a question.

    Can a datafiel access to data calculated or stored by an other datafield ?

    Thank’s.

  4. Reply Zunido Jun 4,2020 17:26

    Hi Peter, I’ve just purchased a Garmin device and (as a developer) was looking around how to build something interesting. Your tutorial is much clearer and to-the-point than Garmin’s for someone just starting and wanting to see something “running”.

    One thing, I’ve just read “tutorial 1” and noticed that in the “Was the start button pressed?” section you have a call to the “ticket” variable. This is only declared later in “Business logic!”. Not sure if its on purpose, but I wanted to give you an heads-up.

    Thanks for the tutorial!

    • Reply Zunido Jun 4,2020 17:27

      I meant “ticker”, not “ticket” :p

      • Reply Peter Jun 4,2020 17:55

        it should have been indeed declared under “was the start button pressed”, but as it’s a class variable it’s also accessible in the other function.

  5. Reply Malik Jun 11,2020 05:50

    Hello – This is my first step in programming with the Garmin Eclipse IDE and just landed on this website…Excellent tutorial to dive head first in learning the details of Garmin watch-face programming…

    Quick question: I don’t see the “menu Simulation -> Activity Monitoring -> Set Activity Monitor Info” option in the Eclipse IDE in my setup. Can you help?

    Thank you.

  6. Reply Peter Jun 15,2020 18:22

    That menu is part of the Simulator so you have to run the project before you see this menu

Leave a Reply