Create apps for NXT with MIT App Inventor

MIT App Inventor is a web-based tool for creating apps for Android phones. The apps you create are stored on a server and can be downloaded to your phone or computer as well.

In this tutorial, we will teach you how to create an app for your robot. You could, for example, create a simple remote control that uses your phone’s tilt sensors to drive the robot.

Note: Although this tutorial is based around using the NXT brick, the MIT App Inventor also supports the EV3 brick as well.

Get started

To start App Inventor, go to the site http://ai2.appinventor.mit.edu and log in using a Google account.

Once logged in, you will have access to a range of tutorials includes one for creating an app to control a MINDSTORMS robot, but we have created a NXT-based project template for you where you can start programming an NXT robot at once. You can download it HERE and unzip it. You can save the resulting file (NXT_Template.aia) in any folder.

In App Inventor, press the More actions button and select upload source:

 upload_Source

Browse to where the NXT_Template.aia is located, select the file and press OK. After a while the Designer screen will open.

The designer screen

The designer screen looks something like this:

AI_Screen

This window contains of 4 different areas: Palette, Viewer, Components, and Properties.

Palette

You will find the different components that an app can contain on the palette. Examples of components can be buttons, canvas, or a picture. The palette is divided into several groups. For example, the Basic group as shown here.

palette

Viewer

The next area is the screen of the app that we will see on the phone.

Viewer

Here we see all the components we have chosen for this project. Some components that are required to make your app work are non-visible components. For example, the BluetoothClient is required if we want to communicate with the NXT, but it won’t appear on the phone’s screen. Non-visible components are displayed below the window

Components

The Components area displays all the components of the project:

Components

We see that they are arranged in the same way as folders on a hard drive. In this project we can look at Screen1 as a “folder” with Listpicker1, Start program, and so on as files. It is possible to add more screens to the app which will then become a new “folder”.

Properties

In the properties window, you set the properties of the different components. The number of properties varies from component to component.

For example, the properties for timer:

Timer_Properties

When inserting a new component it is often necessary to change one or more of the properties of the component.

The Blocks Editor

We have now been through the four areas that together are used to build up the screen of our app. Now we are going to take a closer look at the blocks editor. We get this by pressing the blocks button up to the right:

Blokcs_Button
We press this to open the blocks editor.

Blocks_Editor

This window consists of two parts: the Blocks and the Viewer.

Notice that the blocks are group into two main categories: Built-in and Screen1. The Built-in blocks are available to all App Inventor projects. Also, all App Inventor projects must of course have a screen, and it is by default called Screen1. If the there were two screens in our app, a new category would have been added. Below screen1 we see all the components that belongs to screen1. If we press one of these components, we get the blocks for this component.

As an example let’s look into Listpicker1:

listpicker1_Blcoks

We see that the blocks are divided into three different colors: brown, purple and green. The colour tells us what kind of block it is:

Brown: This an event block. For example the block listpicker1.Gotfocus will run when Listpciker1 gets focus.

Purple: This is block is a procedure call. It will call the actual procedure. A procedure is a set of blocks. It is also possible to create your own procedures.

Green: The green blocks deals with the properties of the components. When we add such a block the first text is the name of the component, the second  tells us which property is active. Above the backgroundColor is active for ListPciker1. But we can see there is an arrow for selection here, and by pressing it we get all the available properties for the component as shown below for the ListPicker and Start_Program:

Properties_selection

Here you should notice that the components have different kind of properties and also the number of properties are different.  The block above is used to read the value of the property. But it is of course also possible to  change the value of a property. You must then use the Set value block:

Set_Listpicker_Background_ColorThe code above will change the BackgroundColor of ListPicker1 to red. Let’s look at the work area of the blocks editor. The blocks are in fact code:

Block_editor_Work_Area

We can see there are 8 blocks in the work area, and they are there to help on the way, and not leave you alone with an empty work area. It is important to know all this blocks are collapsed. This is done for two reasons. First to save workspace on the work area, and second to let you use these commands without having to know the code that lies behind work. If you are curious, just right-click one of the blocks and select Expand block:

Expand_Block

Now we will see the code for the procedure Wait_for_time_msecs:

Wait_for_msecs_Block

The two event blocks at the top take care of the bluetooth connection (to connect the phone to the NXT).  The last block Start_program is an event block that start when we press the button Start_Program. Right-click this block and select Expand block:

Expand_Start_Program

This block is in fact very simple and a good way to start learning how to program the NXT:

Start_Program_Click

But: “Where do I find these blocks?” you might ask.  The figure below will give you the answer:

Where_are_the_blocks

 To show you how to build this program I will delete all the blocks and start from scratch:

start_Scratch

So we must add the block MotorAC.MoveForwardIndefinitely. We find it under MotorAC:

MotorAC_Indef

We insert this block into the start_Program event. You can hear a clicking sound when it is in place. Now it looks like this:

MotorAC_Indef_Placed

We see a block is missing. It is the power. Power is a number from -100 to 100.. We want 100 here, and we find the block under Built-In/Math:

Number

We place this in the power part of the MotorAC.MoveForwardIndefinitely.  We left-click the number brick/block and type 100:

Number_inserted

The next block we need is Wait_for_time_secs. This block is one that is made specially for the NXT template and for that reason we must find it in Built-In/Procedures:

Procedure_menu

But what is wrong here? Where is the Wait_for_time_secs? Lets take out the Wait_for_time_msecs first:

msecs_inserted

To get Wait_for_secs we just press Wait_for_time_msecs to get a drop-down menu:

Waitfor_time_inserted

Now the block is changed to Wait_for_time_secs:

Wait_for_timeSec

So we insert a number block found in Built-In/Math to set the wait time (2 secs):

Number

Now it looks like this:

2Secs

The next command is MotorA.Stop. We find it here:

MotorA_Stop

We insert this one:

MotorAStopInserted

Next block Wait_for_rotation. This block is one that is made specially for the NXT template so we must find it in Built-In/Procedures:

Procedure_menu

We insert the block:

procedure_inserted

Now press the drop-down menu inside the block and select Wait_for_rotation:

Select_Wait_for_rotationNow it is correct:

Wait_for_time_doneFor Angle we insert the block  number (found in Built-In/Math) :

Number

We insert this and set the value to 1300:

Value_Set_to_1300

We need to select the motor port. The way we have this program we are using motor A and motor C. Since we have stopped motor A we want motor C to rotate 1300 degrees. Notice it says motorPortLetter. This means we must use a text block. We’ll find it here:

Text_block We insert this one and connect it to the  MotorPortLetter:

text_Block_inserted

In this text block we must enter the Motorport we want to use (A,B or C).  We are planning to use a two wheel car for this program, and use port A and C. Since we have already stopped port A we have to wait for port C to rotate 1300 degrees. Then the car will rotate 180 degrees. We left-click the text-block and enter the letter :

MotorportC

Now we want the NXT car to go back to its start point moving forward in 2 seconds. The block we now is exactly the same as the first one. We select this block by left-clicking it. Observe the yellow line around the block:

Selected_yellow

Now we press copy (CTRL+C) and then paste (CTRL+V):

CopyPasteBlock

Finally we place this block at the end of this event:

CopiedBlockPlaced

We now need to wait for two seconds. We can just copy and paste the earlier Wait_for_time_secs block. Here is the result:

Wait_for2_secs

Finally we must stop motor A and C. We use the block MotorAC.stop for this:

MotorAC_stop

We insert this one, and the program is finished:

MotorAC_stop_new

If you haven’t already worked it out, this program will make the NXT car drive forward for 2 seconds, turn 180 degrees, and return to the start point.

How to install the app on your phone

There are two ways to install the app on your phone, but here we will describe how to download the app using a barcode scanner. You will need to installed a barcode scanner if you don’t already have one. There are many options, but we recommended Barcode Scanner from ZXing Team (we found this one worked well, but there are plenty of other options).

screenshoot_press_to_install

After you have installed the barcode scanner on our phone, you can go back to App Inventor. From the top-right corner, select Package for Phone > Show Barcode:

show_Barcode

A progress bar will soon pop up on the screen:

Progress_Bar

After a while a barcode will appear on the screen:

Scan_Barcode

Scan this barcode with the  the downloaded barcode scanner:

Screenshot_OPen_Browser

 After a while the following window will appear on your phone:

 screenshot_download

This is just a warning and nothing be afraid of, so select OK. After the .APK file is downloaded tap on it in the notifications window on your phone:

Screenshot_download_Completed

This window will pop up on your screen:

screenshot_install

Just another warning. Select Install, and when the application is installed you should see something like this:

screenshot_Application_Instaleed

We select Open and our app will run:

screenshot_NXT_Template

Remember to pair your phone with the NXT

Just one little problem. It seems logical to press the connect button, but if you do so you might get a blank screen:

Screenshot_Blank_screen

So, what is wrong? The answer is easy.

You must pair the phone with the NXT brick so that your app will be able to communicate with it.

Remote controlled NXT

Most android phones on the market today have an built in orientation sensor. In App Inventor it is possible to use this feature in our program, and now we are going to create a program where we remote control a NXT car with our phone as shown in this video:

In App Inventor, the orientation sensor is a non-visible component that reports the following three values, in degrees:

Roll: 0 degree when the device is level, increasing to 90 degrees as the device is tilted up onto its left side, and decreasing to −90 degrees when the device is tilted up onto its right side:

use_of_orientation_sensor

Pitch: 0 degree when the device is level, increasing to 90 degrees as the device is tilted so its top is pointing down, then decreasing to 0 degree as it gets turned over. Similarly, as the device is tilted so its bottom points down, pitch decreases to −90 degrees, then increases to 0 degree as it gets turned all the way over.

Azimuth: 0 degree when the top of the device is pointing north, 90 degrees when it is pointing east, 180 degrees when it is pointing south, 270 degrees when it is pointing west, etc.

These measurements assume that the device itself is not moving. In this program wed want to use the tilt to decide whether the NXT car should turn left or right and the roll to decide whether the NXT car should move forward or backward.

When the car is moving straight forward or backward, the power of both motors are set to 100. So when the phone tilted up on the left side, we want the car to turn right, and therefore we want the motor on the the right side (i.e. Motor C) to decrease its speed, and as the phone is tilted up on the right side, we want the car to turn left, and therefore we want the motor on the left side (i.e. Motor A) to decrease its speed.

How to program the remote controlled car

To be able to program this remote controlled car, we have to add the orientation sensor to our program.

Here are a few hints to get you started.

First, the orientation sensor is in the Sensors palette:

Orientation_sensor_menu

This component is an invisible component.as shown below in the viewer:

Orientation_added

After this component is added, we can press the Blocks button to switch to the blocks editor:

press_blocks_Button

When we press this button the blocks editor open and we can see the blocks available in the NXT_template:

Open_Blcoks_editor

And we’ll leave the rest to you! Enjoy!

The following two tabs change content below.
Svein-Tore Narvestad

Svein-Tore Narvestad

I have used LEGO Mindstorms as a teacher since 1999, and have used it widely. For example, to measure noise in kindergartens, to have the students create lemonade blenders using small pumps connected to the NXT, and in process control with industrial equipment: pneumatics, industrial sensors, etc.

2 thoughts on “Create apps for NXT with MIT App Inventor

Comments are closed.