Tutorial: Create a Connect IQ Data Field
3

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:

Monkey

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

hidden varlabel="Total";//intial value forthe label

//Display the value you computed here.Thiswill be called

//onceasecond when the data fieldisvisible.

functiononUpdate(dc){

//Set the background color

View.findDrawableById("Background").setColor(getBackgroundColor());

//Set the foreground color andvalue

varvalue=View.findDrawableById("value");

if(getBackgroundColor()==Gfx.COLOR_BLACK){

value.setColor(Gfx.COLOR_WHITE);

}else{

value.setColor(Gfx.COLOR_BLACK);

}

value.setText(mValue.format("%.2f"));

//label also needs tobe updated regularly

View.findDrawableById("label").setText(label);

//Call parent's onUpdate(dc) to redraw the layout

View.onUpdate(dc);

}

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:

Monkey

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

hidden vartimerRunning=0;//did the user press the start button?

hidden varstepsNonActive=0;//todays steps-steps of the current activity

hidden varstepsRecorded=0;//the number of steps recorded by the current activity

//!Timer transitions from stopped torunning state

functiononTimerStart(){

if(!timerRunning){

varactivityMonitorInfo=Toybox.ActivityMonitor.getInfo();

stepsNonActive=activityMonitorInfo.steps-stepsRecorded;

timerRunning=true;

}

}

//!Timer transitions from running tostopped state

functiononTimerStop(){

timerRunning=false;

ticker=0;

}

//!Activity isended

functiononTimerReset(){

stepsRecorded=0;

}

Business logic!

Ah the fun part starts! We can actually implement what the field should do now!

Monkey

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

hidden varticker=0;//amount of seconds the timer isinthe"active"state

//The given info objectcontains all the current workout

//information.Calculateavalue andsave it locally inthismethod.

functioncompute(info){

varactivityMonitorInfo=Toybox.ActivityMonitor.getInfo();

if(timerRunning){

stepsRecorded=activityMonitorInfo.steps-stepsNonActive;

ticker++;

}

vartimerSlot=(ticker%20);//modulo the number of fields(4)*number of seconds toshow the field(5)

3 thoughts on “Tutorial: Create a Connect IQ Data Field”

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