ARDUINO PROGRAMMING WITH

MIT APP INVENTOR

Learn with Tutorial Guide

Copyright © By Ramesh Sanjai

All rights reserved. No part of this publication may be reproduced, distributed, or transmitted in any
form or by any means, including photocopying, recording, or other electronic or mechanical methods,
without the prior written permission of the publisher.

Table of Contents
Introduction3
Tutorial 1: LED Control using Mobile App5
Tutorial 2: LED Control by Speech Recognition19
Tutorial 3: Control a Servo Motor24
Tutorial 4: Operating Multiple Servo Motors31
Tutorial 5: RGB Slider37
Tutorial 6: RGB Colour Picker45
Tutorial 7: Temperature Data to Android51
Tutorial 8: Android Remote Control Robot57
 Chapter 1: Introduction

ABOUT MIT APP INVENTOR

Designed by engineers from Massachusetts Institute of Technology, MIT
App Inventor converts complex text-based language into a scratch-based drag
and drop model that help students with the introduction to android app
development. The simple graphic user interface of the tool helps everyone to
develop their own app, letting the user harness almost all the sensors and all
the functionality of a mobile phone at once.

ABOUT ARDUINO
Developed in Italy, Arduino is an open-source prototyping board designed in
a way that it can easily be used by beginners with no software or hardware
experience. Arduino can be used to design objects that can control actuators
such as lights, motors, display units, etc or respond to different environmental
or similar parameters through sensors. Arduino is one of the most common
platforms being used worldwide, and is used to create a variety of things (and
projects) such as robots, medical instruments, games, sculptures, etc.
Arduino is particularly popular among designers, artists and people who
don’t need any deep understanding of programming, software development
or hardware prototyping; for its easy-to-use and prototyping nature. Apart
from artists and designers, Arduino has also gained great popularity among
engineers due to its sophisticated yet elegant design. Arduino is a
combination of both hardware and software, most commonly used with 8-bit
microcontroller, ATMega328P. This combination of hardware and software
lets the user to create projects that can control and sense the physical world.
Being open-source, Arduino has a huge community of developers, enabling
everyone to communicate, network, and help each other to solve various
problems faced amongst themselves. To program Arduino, the integrated
development environment (Arduino IDE) comes with many example codes to
help the user to understand Arduino better and start programming the same
without any hassle.
Through this document we will look into various projects using Arduino
connected with Android App on a Smart Phone via Bluetooth. The first
tutorial explains the basics of MIT App Inventor and how to start making
apps using the same.

INSTALLING ARDUINO UNO

To install Arduino, visit arduino.cc and download the latest IDE from the
downloads section. The IDE is available for Windows, Mc and Linux.
Without Arduino IDE and Arduino USB driver, one cannot program the
Arduino.
 Tutorial 1: LED Control Using Mobile App

Things you need,

• Arduino Board
• HC-05 or HC-06 Bluetooth Module
• LEDs
• Android Based Smart Phone
To start with the project, we need to create a mobile application using MIT
App Inventor Tool. MIT App Inventor is free of cost, but it needs a Gmail
account to save your app.
Visit http://ai2.appinventor.mit.edu and login/sign up using your Gmail ID
and Password. Once the user login with his Gmail account, the website will
ask you to accept the terms of service. Accept the terms of services and a
Welcome to App Inventor message will appear on the home screen as shown
below.

If you want, you can take the survey asked, or just click Take Survey Later or
Never Take Survey and your home screen will appear showing previously
made apps (if any) or a blank list in case of a fresh account.
Click on Start New Project on the top left corner. A dialog box will appear
asking for a Project Name. Specify a suitable name for the app in the text

box.

Remember the project name cannot contain any special characters or spaces.
In this tutorial, the project is named ass LED_CONTROL.
On clicking OK, an entry with the app name will be created in the list and the
main window to start app designing will appear.
The window has multiple blocks, described below,
1. Component Palette – It has almost all the components to harness
different sensors and other tools in the app. It has different sections including
User Interface, Layout, Media, Drawing and Animation, Maps, Sensors,
Social, Storage, Connectivity, LEGO MINDSTORMS, Experimental, and
Extensions. We will be using all of these with time in different tutorials.
2. Viewer – This displays the layout of your app. One can pick
components from the palette and can place on the screen shown as per his/her
design.
3. Component List – Whatever components the user pick from palette and
place it on the viewer, they are listed in the component palette. We can
rename the components (for our ease in use further) or delete them from this
section.
4. Properties – Properties tab give different properties of the displayed
screen or the selected component to personalize each part of the app as per
designer.
5. Designer/Blocks – This is a toggle switch that helps the user to toggle
between Design window (present window) or to the blocks window where we
set up background instructions for the app to run.
Further, there are options to add or remove multiple screens, change the
screen under use, etc. Now let us continue with the tutorial and start
designing our app.
To start with, it’s always easy to design the layout using a Table
Arrangement with no borders. To setup a table arrangement, go to Layout tab
in Palette and drag-n-drop Table Arrangement to the view window.
As soon as the table arrangement is in the viewer and is selected, its
properties are visible in the properties tab on the right.
Set the number of columns and rows to 2, and reset Width to Fill Parent.
Using “Fill Parent” option, the width of the table will be equal to the width of
display screen.
Now we need a list picker, to see the name of Bluetooth devices available in
the surrounding and select the one which we want to use. In palette, go to
User Interface tab, pick ListPicker and drop it in the very first row in the
viewer screen.
The ListPicker is visible on the viewer screen and its properties are available
to modify in the properties tab. You can change the image on the button, size,
text on the button, text colour, button colour, etc. We have changed the name
of ListPicker to Bluetooth.
Also, we have changed the width to 100 percent to fit the button in the
display area completely.
Now, put a text label from User Interface menu just below the button and
remove the text on it. This will be used to display messages like Bluetooth is
connected, LED is on, etc.
Now, add two more buttons in the second row, and rename them to ON and
OFF from their properties as shown below.
Now the basic design layout for the app is done, but we need to add some
invisible components in the app too. The invisible components are sensors
and other tools from the palette that can be used in the app.
In this app, we need a Clock and a Bluetooth Client. The clock will use
phone’s clock to give instant time, and bluetooth client will activate and
control phone’s bluetooth.
You can add clock from the Sensors tab and BluetoothClient from the
Connectivity tab of the component’s palette. Both will be displayed below
the screen in the viewer section.
Now we are ready to design the back-end of our mobile app. Now toggle
from Display screen to Blocks section from top right corner. A new window
will appear with two sections.
The left side is the list of blocks specific to the components that we added in
our app and other generally used blocks to complete the application, and in
the right is an empty screen where the blocks are connected in the fashion to
define the working of the complete application. This is also known as the
back-end of the mobile app.
Now to start with, lets define the functionality of list picker. The list picker
will display the list of available bluetooth devices in the surrounding, and
when the user has picked the device to connect with, the bluetooth will
connect to that particular device.
So, in the blocks section, go to ListPicker1 and drag when
ListPicker1.BeforePicking to the Viewer section. Scroll down in the same
menu and put set ListPicker1.elements in the middle section of BeforePicker
block as shown below. Now go to BluetoothClient1 and drag
BluetoothClient1.AddressesAndNames right next to elements block of
listpicker in viewer section.

Once the Addresses and names of available bluetooth devices has been
displayed in the listpicker, the user will select the device that needs to be
connected. After selecting the device, the bluetoothclient will connect to that
particular device.
To do so, go to ListPicker1 in Blocks section and pick when
ListPicker1.AfterPicking block to the viewer section. Now to connect to the
device, go to Control in Blocks section and drag an if section in the do area of
AfterPicking block. Using the BluetoothClient, select call
BluetoothClient1.Connect block and provide ListPicker1.Selection as the
address to the same. In then part of the if block, do as shown in the figure
below.

Now, using the Clock block, we will set a timer using block when
Clock1.timer to define text for the textbox we setup. If the bluetooth is
connected, the textbox will show Connected, else it will say not connected.
Using an if-else block (pick if block from Control section, click on gear in the
blue box and add else in the block too), we will define the display inside
textbox as shown below. This will be our third set like the rest two above.
The pink text block can be found with in Text section of blocks.

Now, final steps for completing the app, we need to define the working for
ON and OFF Buttons that we set in the design module. These buttons will
turn the LED on and off respectively. To do the same, we will send an “on”
message from ON button and an “off” message from the OFF button to
Arduino via bluetooth. To do the same, go to button1 section in Blocks
(Button1 is the ON button), and select the block when Button1.click and set it
up with call BluetoothClient1.sendtext. Set the text to “on” using text block.
Repeat the same for OFF button. Final block will be as shown below,
With this, we have completed the back end of our mobile app as well. Final
look at the blocks defined for the mobile app is shown on the next page.
To build your final mobile app and get it installed in phone, go to Build on
the top and select App (save .apk to my computer) or App (provide QR code
for .apk). APK is the format in which android mobile apps are saved for
installation.

The first option will generate a QR code, one can scan it to download the app
in their phone. The second option will save the file in computer. The user can
mail the app or just connect his/her phone to the computer and get the app in
the phone.
Once you select either of the two options, the app will start compiling. This
may take a minute or two depending on the size of the mobile app. Once the
app is copied to your phone, click on the icon and install it. The phone may
show a warning that apps from unknown sources need permission. Go to
settings, and allow apps from unknown sources to install.
With this you have completed building your app. Now we need to design the
circuit to connect with the bluetooth and for the same, you will need an
Arduino UNO (or any other compatible variant), bluetooth module, LED,
Breadboard and connecting wires.
First, connect HC-05 bluetooth module’s VCC to 5V on Arduino and GND to
GND. Power the arduino and the bluetooth should be visible in the list in
bluetooth settings. Pair your smart phone with HC-05 the password asked is
usually 1234 or 0000.
Now design the circuit as shown below,

Connect HC-05 bluetooth module as follows,

VCC �� Arduino 5V
GND �� Arduino GND
 Rx �� Arduino D2
Tx �� Arduino D3
Connect LED’s positive leg on Pin D13 and negative leg to GND or ground.
The is the complete circuit for the tutorial. Next step is to write the program
to activate bluetooth module, let it connect with a mobile phone, and turn
LED on/off depending upon the message received from the mobile phone.
First of all, HC-05 Bluetooth Module works using Serial Interface, and since
Arduino’s Serial pins (D1 and D0) are busy interfacing with computer, we
need to make a different pair of Rx-Tx using Software Serial. To do the same,
in program, write,
#include <SoftwareSerial.h>
SoftwareSerial BT(2, 3); //Here the object for Serial port is named as BT, D2 is Rx and D3 is
Tx

Now, to start with, we need to initialize bluetooth, serial monitor and digital
pin to control LED. To do so,
void setup()
{
pinMode(13, OUTPUT);//Defining Pin D13 as OUTPUT for LED
Serial.begin(9600); //Activating Serial Monitor
BT.begin(9600); //Activating Bluetooth
}

Now, the final step is to wait for bluetooth to receive any message, read the
message and control the LED accordingly.

void loop()
{
String msg; //Variable to store received message
while(BT.available())
{
char data = BT.read(); //Reading incoming string bitwise
msg = msg+data; //Connecting each bit to form message
}
 if(msg.length > 0) //If there is a message
{
Serial.println(msg); //Display message on computer
if(msg == “on”)
{
digitalWrite (13, HIGH); //LED On
}
else if (msg == “off”)
{
digitalWrite (13, LOW); //LED Off
}
}
}

Upload the above code to Arduino using Arduino IDE and open Serial
Monitor from Tools -> Serial Monitor. Connect your phone’s bluetooth with
bluetooth module, and using the app, you will be able to control your LED.
Parallely, the Serial monitor will display the received string from the app.
Hence, summarizing the final code,
#include <SoftwareSerial.h>
SoftwareSerial BT(2, 3);
void setup()
{
pinMode(13, OUTPUT);//Defining Pin D13 as OUTPUT for LED
Serial.begin(9600); //Activating Serial Monitor
BT.begin(9600); //Activating Bluetooth
}
void loop()
{ String msg; //Variable to store received message
while(BT.available())
{
char data = BT.read(); //Reading incoming string bitwise
msg = msg+data; //Connecting each bit to form message
}
if(msg.length > 0) //If there is a message
{
Serial.println(msg); //Display message on computer
if(msg == “on”)
{
digitalWrite (13, HIGH); //LED On
}
else if (msg == “off”)
{
digitalWrite (13, LOW); //LED Off
}
}
}

Tutorial 2: Control LED by Speech Recognition

In the previous tutorial, we used simple buttons to turn an LED on or off. In
this tutorial, we will work upon how we can use speech recognition in mobile
app and use the same to control an LED. For this project, the Arduino Code
and circuit will remain the same, only the app will be made again.
To start with, the app will use mobile’s microphone to collect the speech, and
using Google’s translation services pre-installed in phone to translate your
spoken words into text and transmit the same to Arduino via Bluetooth. The
Arduino then compares the message to control the LED. To start making app,
go to https://ai2.appinventor.mit.edu and follow the below steps,

First, create a new app. In this tutorial we have named the app
LED_SPEECH_CONTROL. You can name it whatever you want. Now
designing the layout of mobile app, the way we did in the previous app, first
we will place a ListPicker from User Interface Tab to list the available
Bluetooth devices.
The label on ListPicker is changed to Bluetooth, with its width being Fill
Parent to stretch it throughout the screen’s width.
Now, we place a label to show if the Bluetooth is connected or not. To do the
same, pick Label from User Interface and place it below ListPicker1. Again,
stretch the same to Fill Parent in Width, change its alignment to Center:1 and
remove the text from properties.to look the app more elegant.
Now to give some space between the next button (which will be used to
initiate Microphone and listen to the user), drag horizontal arrangement in
between from Layout Tab. Remove tick on Visible from properties tab. This
horizontal arrangement is only being used to give some space between the
next button and ListPicker. Now place a button below the horizontal
arrangement, and change the text on button to “Press to Talk”. You can also
add an image to the button from Image section of properties of the button, to
add a picture of mic or something similar. In this case, we haven’t put
anything as an image on the button.
Add a label below the button, centre align it and remove the text on it from
properties. You can change further properties as per your app’s layout. This
label will be used to present what did the user said on microphone.
Now, we need to add the invisible components to our app. Add a Bluetooth
Client from Communication tab, Speech Recognizer from Media tab and
Clock from Sensors tab of the palette section in the mobile app. With this,
your mobile app’s front design is complete. Now we will start with the back
end, and complete the block design of the app in the next step.

To start with block designing, toggle to the Blocks part of the app first. To
start with, first of all, we need to pick the Bluetooth device to connect with
from the ListPicker, connect to the device using Bluetooth Client and show
the message that the device is connected or not using Label1. Similar blocks
will be placed for this functioning as we discussed in tutorial 1. Below is the
block diagram of the specified steps,
The first block, when ListPicker1.BeforePicking lists the name and address
of all available Bluetooth devices in the surrounding, second block, when
ListPicker1.AfterPicking helps the user to pick the device he/she wants to
connect with and using call BluetoothClient1.Connect with Address block,
the mobile app connects with the selected device.
In the third block above, the status of connection is displayed using Label1 so
that the user can know if their Bluetooth device is connected or not.
Now we need to activate the speech recognizer when the button is pressed,
receive the audio, and using speech recognizer, convert the same into text. To
do the same, we use when Button1. Click block to detect if the button is
pressed and activate speech recognizer using call
SpeechRecognizer1.GetText block.

Add the above blocks to initiate the speech recognizer and get the text from
speech. Now we need to present the text on label. But even before presenting
the text received on label, we need to remove the text received previously
printed on the label, and then present the new text on it. To do the same, we
use when SpeechRecognizer1.BeforeGettingText block and set Label2.text
block to fix a blank text in it as shown below,

Using the above block, the label is cleared as soon as the button is pressed
and Speech Recognizer is enabled to present the new text received.
Now to present text received, we use when
SpeechRecognizer1.AfterGettingText Block along with Label2.text block to
present the results of text received from speech. Just after showing the text on
the label, the same is also sent to Arduino via Bluetooth using call
BluetoothClient1.SendText block. Below is the final block for this particular
step.

The above block will now display the speech received on label 2 and send the
text to Arduino via Bluetooth. Now build the app, generate the APK file as
explained earlier, and install the app in your mobile phone. Now, using the
same circuit and program made in previous tutorial, we can test the app for its
working. Below is the final block diagram for the app.
 Tutorial 3: Control a Servo Motor
In this tutorial, we will understand how a servo motor operates and how we
can rotate it to a particular angle using a slider in our mobile app. For this
project, we will need the following components,
1. Arduino Uno
2. Breadboard
3. Servo Motor
4. Bluetooth Module HC-05
5. Connecting Wires
Now to start with, we will first make the mobile app, its front as well as back
end and then start with the circuit for Arduino to control the servo through
Bluetooth. To start with, log in to https://ai.appinventor.mit.edu using your
google account and start a new project. Name the new project whatever suits
you. We have named the app SINGLE_SERVO_CONTROL. The very first
step again is now to put a ListPicker and a Label from User Interface palette
in your mobile app so that the list of available Bluetooth devices can be
shown in the list, and the status of Bluetooth connectivity can be presented on
the label.

Don’t forget to change the properties of Label (text aligning to centre,

removing text from the label and width of both label and ListPicker).
Now to give some space between the Bluetooth ListPicker and design of
control for servo motors, we will place a Horizontal Arrangement and make it
invisible. Place another label below the horizontal arrangement and rename it
to SERVO CONTROL. Change the alignment to centre and width to parent
fill.
Below the SERVO CONTROL label, we will place all the controls for servo.
We will be using 5 buttons to directly turn the servo motor to an angle of 0,
45, 90, 135 and 180 degrees. Along with the 5 buttons, we will also add a
slider to our design which will be used to move to any particular angle and
the exact angle will be displayed on another label. To start with, put another
horizontal arrangement below the SERVO CONTROL Label and put 5
buttons in it as shown below. Replace the text with the 5 angle values as

specified earlier.
Now pick a slider from User Interface palette, place it below the horizontal
arrangement and set the minimum and maximum values to 0 and 180 degrees

respectively.
You can also place a label below the slider to present the angle to which the
slider is moved so that the user can find out the precise control as well. Now
place all the invisible components, Bluetooth Client from Communication
Palette and Clock from Sensor Palette to the mobile app.
With this, the front end of your mobile app is complete, and now we will start
with the back end of the app, placing all the blocks in position to make the
app functional. To start with, shift to Blocks window of MIT App Inventor.
Very first step is similar to what we did in previous two tutorials. Using
ListPicker to display all the available Bluetooth devices and their addresses,
selecting the device, connecting to a particular Bluetooth device and
presenting the present status of our Bluetooth connectivity. To do the same,
we will use similar blocks as we used earlier. Final block diagram for this
particular section of app is shown below.

Now the second section of the app, SERVO CONTROL needs to be made
functional with blocks. We have 5 buttons to provide control to and a slider.
To control the slider, we will use when Slider1.PositionChanged block to
control the slider, change the text on label to the present value of slider, and
send the same as a number to our Bluetooth device using call
BluetoothClient1.Send1ByteNumber block. Below is the final block diagram
for the same.

This block will check for the Slider’s position change, update the label as per
the position of slider, and send the data as 1 Byte number to the connected
Bluetooth device. The Round function in between round offs the position
value to nearest integer value. Round block can be found in Math Column of
blocks tab.
Now the five buttons can be controlled using when Button1.Click, to send the
values 0, 45, 90, 135 and 180 to the Arduino via Bluetooth. Below is the
block diagram for the same.
The above blocks will send the angle value with respect to the button to
Arduino via Bluetooth as well as update the label below to the pressed value
of angle. With this the app development for this tutorial is complete. Now
you can build the app using the Build Menu, copy the app setup to your
mobile phone and install the same. Next step in this tutorial is to design the
circuit. The circuit is somewhat similar to the previous circuit in Tutorial 1 or
2. You have to connect HC-05 Bluetooth module as follows,
VCC �� Arduino 5V
GND �� Arduino GND
Rx �� Arduino Pin 2
Tx �� Arduino Pin 3
Further, we need to connect a servo motor. Connection for the same are as
follows,
Servo VCC �� Arduino 5V
Servo GND �� Arduino GND
Servo DAT �� Arduino Pin 9

Below is the circuit diagram for this tutorial.

Now to program Arduino for controlling servo motor with Bluetooth, below
is the code for the same. The code has been explained within comments
throughout the program.
#include <SoftwareSerial.h>
#include <Servo.h>

SoftwareSerial BT(2, 3); //For Bluetooth, Rx at 2 and Tx at 3

Servo S1; //Defining object for Servo. S1 will be used to
//specifiy servo 1
void setup()
{
S1.attach(9); //Initiating servo and defining pin
Serial.begin(9600); //Activating Serial Monitor
BT.begin(9600); //Activating Bluetooth
}

void loop()
{
 while(BT.available())
{
int angle = BT.read(); //Reading incoming data from BT
Serial.println(angle); //Print on Serial Monitor
S1.write(angle); //Rotate Servo
}
}
Upload the above code to the Arduino, and using the app we created, we can
control the movement of servo motor easily.
 Tutorial 4: Operating Multiple Servo Motors

In previous tutorial, we controlled a single servo using our mobile app. Now
we will update the mobile app in a way that it can control 5 servos together
using different sliders for each servo motor. To start with the project, we will

re-establish our mobile app.

Login to https://ai.appinventor.mit.edu and sign in using your Gmail account.
Create a new project, name the project MULTI_SERVO_CONTROL.
To design the front end, you will need to do the following,

1. Add a ListPicker to list Bluetooth devices and connecting with

them.
 2. Add a label to define the status of Bluetooth connectivity.
3. Add a horizontal arrangement to give some space.
4. Add 5 Sliders one after another to control 5 different servos.
5. Add Bluetooth Client and Clock as invisible components of app.
Also set the minimum and maximum values of 5 sliders as follows,
Slider 1: Min Val – 1000 and Max Val – 1180
Slider 1: Min Val – 2000 and Max Val – 2180
Slider 1: Min Val – 3000 and Max Val – 3180
Slider 1: Min Val – 4000 and Max Val – 4180
Slider 1: Min Val – 5000 and Max Val – 5180

Now to start with the back end of the mobile application, we start with the
similar method as previous tutorials for connecting Bluetooth and updating
status on label1 of the app as shown below.
Now, we need to add the functioning for 5 sliders for different servo motors.
To do so, we use the same block method for servo as we used in the previous
tutorial. We will make separate block for each slider and send data to
Arduino via Bluetooth as shown below. We have used call
BluetoothClient1.Send2ByteNumber to send data to Arduino. Sending 2-byte
data will help us differentiate between different sliders on Arduino end.
With this, the back end for the mobile app has been done. You can build the
app and install it in your smart phone from the build menu. Now we will start
with designing the circuit for 5 different servos and connecting them with
Arduino.
For circuit, we will be using Arduino Pins 5, 6, 9, 10 and 11. All these pins
are PWM (pulse width modulation) pins and hence can give analog output to
control the servo motor.
Below is the circuit diagram we will be using,
We recommend an external power supply to control 5 servos because lower
power consumption won’t make the project work.
Now since the Arduino is receiving a 2-byte number, the first byte defines
which servo we need to rotate. To initiate 5 servos and Bluetooth module, we
write the below code,
#include <SoftwareSerial.h>
#include <Servo.h>

SoftwareSerial BT(2, 3); //For Bluetooth, Rx at 2 and Tx at 3

Servo S1, S2, S3, S4, S5; //Defining objects for 5 servo
void setup()
{
S1.attach(5);
S2.attach(6);
S3.attach(9);
S4.attach(10);
S5.attach(11);
Serial.begin(9600); //Activating Serial Monitor
BT.begin(9600); //Activating Bluetooth
 }

Now to detect if Bluetooth has received 2 bytes or not, and to initiate the
functioning for all 5 servos, we continue the code in loop function as shown
below,
void loop()
{
while(BT.available()>=2) //Check for receiving of 2 bytes
{
int d1 = BT.read(); //Reading first bit
int d2 = BT.read(); //Reading second bit
int data = (d2*256)+d1; //Adding 2 bytes to form one number
Serial.println(data);
if(data>=1000 && data<=1180)
{
int tempdata = data;
tempdata = map(tempdata, 1000, 1180, 0, 180);
S1.write(tempdata);
}

if(data>=2000 && data<=2180)

{
int tempdata = data;
tempdata = map(tempdata, 2000, 2180, 0, 180);
S2.write(tempdata);
}
if(data>=3000 && data<=3180)
{
int tempdata = data;
tempdata = map(tempdata, 3000, 3180, 0, 180);
S3.write(tempdata);
}
if(data>=4000 && data<=4180)
 {
int tempdata = data;
tempdata = map(S4, 4000, 4180, 0, 180);
S4.write(tempdata);
}
if(data>=5000 && data<=5180)
{
int tempdata = data;
tempdata = map(tempdata, 5000, 5180, 0, 180);
S5.write(tempdata);
}
}
}
With this, your code is complete. Upload the code to Arduino, complete the
circuit and the circuit is ready to be tested. Open your app, connect the
Bluetooth and you can see all five servos operating with the 5 sliders in
mobile app.
 Tutorial 5 – RGB Colour Slider

In this tutorial, we will work upon controlling an RGB (Red-Green-Blue)

LED and will try to build different colours with variation in percentage of
Red, Green and Blue through a slider on our mobile application.
To start with this project, we will be needing the following components,
1. RGB LED
2. Arduino UNO
3. Connecting Wires

4. HC-05 Bluetooth Module

Red, Green and Blue are known as the fundamental colours, and with their
mixture in different proportions leads to formation of all other colours in a
palette. By varying the power transmitted to each LED separately, we define
the percentage of red, green or blue, forming a new colour.
To start with the mobile app, login to the app inventor tool, and create a new
project. Now, we first set up the basic requirements to connect Bluetooth as
we did in previous projects. To do the same, put a ListPicker, change text to
BLUETOOTH, adjust width and other parameters of the ListPicker. Then add
a label to the app to show the status of Bluetooth connectivity and then to
give some space, place a Horizontal Arrangement from Layout section.
Now after setting up the basic requirements for the Bluetooth connectivity of
our mobile app. Further we need to add a Canvas and three different sliders
each for Red, Green and Blue. Canvas can be found from Drawing and
Animation Palette. Place it in the Horizontal Arranged placed for spacing.
These sliders will work in similar fashion as they did in the previous tutorial.
The three sliders are placed in a tabular arrangement (from Layout palette)
with 3 rows and 2 columns. We placed three sliders in second column of each
row along with the title for each slider, Red, Green and Blue in the first
column of each row.
Change their minimum and maximum values to 0 and 255 for Red Slider, 0
and 255 for Blue Slider & 0 and 255 for Green Slider so that the three sensors
can be easily detected in the Arduino section.
Now add all the invisible components, including Bluetooth Client from
connectivity tab, Clock from Sensors tab and we will need an Activity Starter
from Connectivity tab again. Below is the final layout of the mobile app we
have completed.
With the front end of our mobile app is complete and we need to start with
the back end. So, toggle to the BLOCKS section of the app and start with the
similar method as earlier, installing Bluetooth connectivity. Below are the
blocks we need to setup for connecting with the Bluetooth.

Using the block, when ListPicker1.BeforePicking to list the available

Bluetooth devices and their addresses for the user to select. After this, use
second block when ListPicker1.AfterPicking to let the mobile device connect
with the HC-05 Bluetooth Module for connectivity and further process.
Using the timer sensor from Clock1 and Label1 we placed, the status of
Bluetooth connectivity is displayed on the mobile app as well.
The activity starter will check for the Bluetooth connected or not and will
change the colour on the canvas as per the variations in the three sliders
named red, green and blue.
To set a colour on the canvas, you have to define the R-G-B values varied on
a scale of 0 to 255 each. For Red, the values will be 255-0-0, for Green it will
be 0-255-0 and for Blue, it will be 0-0-255. Now, initially the canvas has
been set to white colour with the help of Activity Starter.
To do the same, we have to arrange the following blocks,

In the above blocks, when the screen is initialized (detected using the block
when Screen1.Initialize) the action
android.bluetooth.adapter.action.REQUEST_ENABLE and the activity is
initialized. The three sliders at left most corner makes a colour as per the
three values mentioned for each slider. Screen1.Initialize block can be found
inside the Screen1 palette.
Now to send the data to the Arduino from mobile device via Bluetooth, we
use when Slider1. PositionChanged block. Along with sending the value of
each slider, we need to change the colour on the mobile app screen as well.

The above block checks for the Slider1’s thumb position, change the colour
of slider, and making the background colour of Canvas1 using the three
values of Slider. Now the mobile application will check for the Bluetooth
connectivity, and if the device is connected, the value of slider 1, added with
1000 (to determine the slider 1 at the Arduino end) is sent to the Arduino.
Similarly, we make the similar blocks for slider 2 and slider 3 as shown
below with adding value of 2000 and 3000 respectively.
With this, the design of mobile app is complete. Now we start with making
the circuit at the Arduino end and implement the program to make this
tutorial work.
For Arduino circuit, you will be needing the following components,
1. Arduino UNO
2. HC-05 Bluetooth Module
3. RGB LED
4. Connecting Wires.

Below is the final circuit,

The RGB LED comes in two different types, namely common cathode and
common anode. Common cathode has a common GND pin and 3 different
power pins for Red, Green and Blue. Common Cathode turns on white when
all three pins are set at 255. While, common anode has a common VCC pin
and 3 different ground pins for 3 different colours, turns on white when all
three pins are fed ground. In this case, we are using a common cathode RGB
LED.
The three pins of RGB LED are connected to the three PWM pins, namely 9,
10 and 11.
Below is the code for Arduino that needs to be implemented.

#include <SoftwareSerial.h>
SoftwareSerial BT(2, 3); //For Bluetooth, Rx at 2 and Tx at 3

void setup()
{
pinMode(9, OUTPUT); //Pin for Red
pinMode(10,OUTPUT); //Pin for Green
pinMode(11,OUTPUT); //Pin for Blue
//Setting all the pins to LOW
digitalWrite(9, LOW);
digitalWrite(10, LOW);
digitalWrite(11, LOW);
Serial.begin(9600); //Activating Serial Monitor
BT.begin(9600); //Activating Bluetooth
}

void loop()
{
while(BT.available()>=2) //Check for receiving of 2 bytes
{
int d1 = BT.read(); //Reading first bit
int d2 = BT.read(); //Reading second bit
int data = (d2*256)+d1; //Adding 2 bytes to form one number
Serial.println(data);
if(data>=1000 && data<=1255)
{
int red = data;
red = map(red, 1000, 1255, 0, 255);
analogWrite(9, red);
delay(10);
}
if(data>=2000 && data<=2255)
 {
int green = data;
green = map(green, 2000, 2255, 0, 255);
analogWrite(10, green);
delay(10);
}

if(data>=3000 && data<=3255)

{
int blue = data;
blue = map(blue, 3000, 3255, 0, 255);
analogWrite(10, blue);
delay(10);
}
}
}

The code is similar to what we did for multiple servo motors, and hence can
easily be understood. The three colour slider values are determined separately
using the first byte that is 1000, 2000 and 3000 added in the values of the
slider.
 Tutorial 6: RGB Colour Picker

In the previous tutorial we used three different sliders placed in a row to

control the colour to glow on the Red-Green-Blue LED. In this tutorial, we
will pick an existing image and use the same to pick the colour to be
displayed on the LED.
To start with the same, we will need the Bluetooth connectivity first. For this
we will start with placing a ListPicker to list the available Bluetooth devices
in the surrounding. For a change this time, we have placed two buttons in a
tabular arrangement with 1 row and 2 columns. The left column will be used
to Connect the Bluetooth device and the right column is used to Disconnect
the Bluetooth device. Below the same, we place a label to show the
connectivity status.
Now Put a canvas from Drawing and Animation below the label to present
the image picked. Set the height of canvas to 250 pixel and width to fill
parent as shown as below.
Now place a horizontal arrangement below Canvas1. Place an Image Picker
from Media palette to the horizontal arrangement, and another Canvas right
next to image picker in the horizontal arrangement as shown below.

Now we need labels to represent X and Y axis, R-G-B values and separate
values for different values of red, green and blue components of the pixel
chosen. The labels are arranged in a way to make it look elegant.
Now we place the three invisible components to the app, namely, Clock from
sensor palette, Activity Starter and Bluetooth Client from Connectivity
Palette.
With this, our app layout is complete, and now we need to start with the
backend of the mobile application. To start with the backend design, toggle to
BLOCKS section.
We first need to place two global variables from Variable blocks named as
colorpicked and previouscolor and set their initial values to anything.
Now we initialize the first screen, call the ActivityStarter1 with Action to
android.bluetooth.adapter.action.REQUEST_ENABLE.
Set all the blocks as shown below,

Now, when we touch certain part of the image, the values of red, green and
blue components will be extracted and displayed in label 4, 5 and 6. To do
the same, we prepare the following block,

Above blocks will separate the three colour components from the selected
point on image at canvas1 and display their values on label 4, 5 and 6. Also,
the colour is displayed on canvas2. Now when we drag finger around the
image the text on labels need to be updated according to the new position. To
do so, just replace when Canvas1.TouchDown block with when
Canvas1.dragged block and the rest remains the same.
Below is the final look of above specified block,

Now we need to set up image picking using ImagePicker1, connect the

Bluetooth using ListPicker and Connect button and give functionality to
Disconnect button. Below are the blocks to do the same.
With this we complete our mobile app as well. The Arduino circuit and
program for this tutorial stays the same as the previous tutorial (RGB Colour
Slider).
 Tutorial 7: Temperature Data to Android

Till now, in previous tutorials, we have been working on getting data from
Android device to Arduino. In this tutorial, now we will transfer data from
Arduino to Android device. In this tutorial, we will transfer the present
temperature data to our android device, and as per the data received, we will
highlight Hot, Cold or Moderate.
To start with, we will initiate designing the front end of our mobile app. First
of all, we need to add Bluetooth connectivity to our device. To do the same,
we will follow the usual method,
1. Add a ListPicker to the app, change its width and text on it to
Bluetooth.
2. Add a label below ListPicker to present the current status of Bluetooth
connectivity.
3. Add a horizontal arrangement to leave some space before we add
further parts of application.

Below is the layout for connectivity,

Now, we need to add two more labels below the horizontal Arrangement, one
to show the received information and the other to show hot, cold or moderate
message. To do the same, add two labels, change their width to fill parent,
remove text and change their alignment to Centre.
Now we need to add the invisible components. We need to add Activity
Starter and Bluetooth Client from Connectivity tab of palettes and Clock
from sensors tab of palettes.
Below is the final layout of our mobile application.
With this, our layout for mobile application is ready, and we will start with
back end design for the same.
Now we need to initiate the screen, call the action using Activity starter, start
the activity and display initial temperature to zero. This is similar to what we
did in earlier tutorials. Similarly, we will list available Bluetooth devices and
their addresses in the ListPicker. After picking from the list, we need to
connect the Bluetooth device selected, and display the status on Label.
Below are the blocks to do the same,

The above block will help the user to connect to the Bluetooth device, and in
case, the Bluetooth is not connected, Activity Starter will remind the user to
enable Bluetooth and connect to the device.
All the conditional blocks with and can be found in Logic Tab of Palette, and
all the comparison blocks can be found in Math tab.
With this, our mobile application is complete, and now we start with the
development of Arduino circuit and program. For this project, we will be
needing the following,
1. Arduino Uno
2. HC-05 Bluetooth Module
3. RGB LED
4. LM35 Temperature
5. Connecting Wires
The final circuit for the project is shown below,
Below is the final program to be uploaded to Arduino,

#include <SoftwareSerial.h>

SoftwareSerial BT(2, 3); //For Bluetooth, Rx at 2 and Tx at 3

const int tempSensor = A0;

void setup ()
{
pinMode (tempSensor, INPUT);
pinMode (9, OUTPUT);
pinMode (10, OUTPUT);
pinMode (11, OUTPUT);
Serial.begin (9600);
BT. begin (9600);
}

void loop ()
{
float temp = analogRead (tempSensor);
temp = temp * 0.48828125; // (5*1000)/1024
Serial.println (temp);
BT.println (temp);
if (temp <= 30)
{
digitalWrite (9, HIGH);
digitalWrite (10, LOW);
digitalWrite (11, LOW);
}
if (temp > 30 && temp <= 36)
{
digitalWrite (9, LOW);
 digitalWrite (10, HIGH);
digitalWrite (11, LOW);
}
if (temp > 36)
{
digitalWrite (9, LOW);
digitalWrite (10, LOW);
digitalWrite (11, HIGH);
}
}

With this the Arduino program is complete. You need to upload the same to
the Arduino board and the test the program for its functionality.
The data from LM35 is displayed on the Serial monitor and is transferred to
the Android device via Bluetooth. Also, with the change in temperature, the
RGB LED changes colour with the following conditions,
Case 1: When the temperature is below 30, it means the environment is Cold
and LED turns green.
Case 2: When the temperature is between 31 and 36, the temperature is
pleasant, and blue LED turns on.
Case 3: When the temperature is above 36, the temperature is warm, and the
LED turns red.
 Tutorial 8: Android Remote Control Robot

Up till now, we tested different functionalities of MIT App Inventor, created

various simple test projects in past 7 tutorials. Now, we will work upon
developing a mobile app-controlled robot using Arduino and MIT App
Inventor.
For this project, we will be needing the following components,
1. Arduino UNO
2. HC-05 Bluetooth Module
3. DC Motor
4. 9V Power Supply
5. Chassis
6. L293D Motor Driver Controller
To start with, we will first make the mobile app, its front end and then the
back end, followed by the circuit diagram and program for Arduino. To start
with the mobile app, first log in to https://ai2.appinventor.mit.edu and start a
new project. Now, we as always, we will first add the Bluetooth connectivity
to the app using a ListPicker and a label to display the status of Bluetooth
connectivity. Below is the final layout for the same.
Now, we need to add five buttons to define the five movements, namely
forward, backward, left, right and stop.
These 5 buttons are arranged in a way, that the app should look elegant. So,
we used Centre alignment on screen, put a button first at the centre for
forward, then a horizontal arrangement, to show three buttons for left, stop
and right and then another button at the bottom.
To centre align all the buttons, click on Screen in Components tab and
change alignment in properties tab to centre.
With this, our app layout is complete. Add all the invisible components,
Bluetooth Client from connectivity palette and Clock from Sensors palette.
Now, we will start with the back end of the mobile application. Toggle to the
Blocks section and start with adding Bluetooth functionality to the mobile
app. Similar to what we did in previous tutorials, we will list all the available
Bluetooth devices and their addresses in ListPicker, connect with the
Bluetooth, check for the connectivity and display the status on a label. The
blocks for the same are shown below,

Now, we need to add functionality for 5 buttons we placed, and make the app
working. To do the same, we will send commands, forward, backward, left
and right. Below are the blocks for the same.
With this our mobile application is complete. You can build the app and
install the same in your phone. Now we need to start with Arduino circuit and
its program.
For circuit of the robot, we need to arrange two motors and a caster wheel on
a chassis/plastic or metal plate, connect it with motor driver IC L293D and
connect a Bluetooth module with Arduino UNO using connecting wires.
Below is the final circuit for our project,
Connect all the components as shown above. Be careful with the connections
of L293D and if possible, put a small aluminium sheet on top of it to absorb
the heat dissipation.
Now, to program the Arduino, below is the final program,
#include <SoftwareSerial.h>
SoftwareSerial BT(2, 3); //For Bluetooth, Rx at 2 and Tx at 3

const int m1p1 = 9;

const int m1p2 = 10;
const int m2p1 = 11;
const int m2p2 = 12;
void setup ()
{
pinMode (m1p1, OUTPUT);
pinMode (m1p2, OUTPUT);
pinMode (m2p1, OUTPUT);
pinMode (m2p2, OUTPUT);
Serial.begin (9600);
BT. begin (9600);
}
void loop ()
{
while (BT. available () > 0)
{
char c = BT.read(); //Reading input from Bluetooth
data = data + c; //creating full strings
}
if(data.length() > 0)
{
Serial.println(data);
if(data == “forward”)
{
digitalWrite(m1p1, HIGH);
digitalWrite(m1p2, LOW);
digitalWrite(m2p1, HIGH);
digitalWrite(m2p2, LOW);
delay(100);
}
if(data == “back”)
{
digitalWrite(m1p1, LOW);
digitalWrite(m1p2, HIGH);
digitalWrite(m2p1, LOW);
digitalWrite(m2p2, HIGH);
delay(100);
}
if(data == “stop”)
{
digitalWrite(m1p1, LOW);
digitalWrite(m1p2, LOW);
digitalWrite(m2p1, LOW);
 digitalWrite(m2p2, LOW);
delay(100);
}
if(data == “left”)
{
digitalWrite(m1p1, HIGH);
digitalWrite(m1p2, LOW);
digitalWrite(m2p1, LOW);
digitalWrite(m2p2, HIGH);
delay(100);
}
if(data == “right”)
{
digitalWrite(m1p1, LOW);
digitalWrite(m1p2, HIGH);
digitalWrite(m2p1, HIGH);
digitalWrite(m2p2, LOW);
delay(100);
}
}
}
With this, the program is complete. You just need to upload the code to
Arduino and test the robot for its working.