MIT Arduino Workshop

Date : 24/4/2015
Time: 5PM-8PM
Venue: Microcomputer Lab

SEE R&D Department

 What is MIT Arduino???

MIT Arduino is the combination of Arduino and Android.

 What is Arduino???
An Arduino is a microcontroller than can be programmed
to process inputs and outputs between the device and
external components connected to it.
 What is Android???
Android is the name of the mobile operating system made
by American company; Google. It most commonly comes
installed on a variety of smartphones and tablets from a
host of manufacturers offering users access to Googles
own services like Search, YouTube, Maps, Gmail and more.
 Register For MIT APP Inventor 2

Click here!
There are two versions of
MIT APP Inventor, which are
MIT APP Inventor1 and
MIT APP Inventor2.
We are using the new version
MIT APP Inventor2.
After you click the App Inventor, you will be directed to
a new page and ask to login in your Gmail account.

So you must have a least one

registered Gmail account.
Accept the Terms of Service

Click here!
When completed registration, you will
be directed to the following page.
Now, by using your android phone go Google Play
search for MIT AI2 Companion and install it.
Now, let install for Arduino Software into your
computer.

You can always go to Arduino main

website to download latest version
of software for free.
Arduino Installation

Click I Agree
Arduino Installation

Click Next
Arduino Installation

Click Install
Final installation step

Now wait one or two minutes

to finish installation. Then,
click Close.
Let Begin with Building Android App
Click Start new project, then enter Project
Name as MyPaint or My_Paint.

Reminder:
The Project Name cant has space in between. Only
characters like alphabets, numbers and _ are allowed
 Basic Introduction
Project Name

Allow user to add/remove more screen

Allow user to change

the properties of
components used

At here allow user to choose

any kind of components
to insert in your app
(just click and drag it
into Viewer (Screen 1)
 My Paint App
We will start building our first simple app.
Once you have completed building this app, you will be able to:
1. Understand basic structures and working principles of MIT App Inventor
2. Draw circle
2. Draw line
3. Change colour of line and circle
4. Save drawing
5. Take photo with using build-in camera inside your phone
 My Paint App
Click & drag

Here will show the

item that you have
insert into the
viewer.

Change both setting

to fill parent.
Put it here
On the top-right corner, click at the Blocks to
go into the drag and drop programming page.

Click here!

When you click Canvas1,

a list of programming block will appear
Basic Programming Knowledge

These error are caused by incomplete Programming Building Block

By clicking the alert button will display the cause of error.

Always alert about the notification at here.

There are total of 3 errors occur.
To delete, just drag the block
that are not using into the
recycle bin at here.
Programming block just like you play
Jigsaw Puzzle

Complete pair (no error)

Match
Only same pattern edge
can match with one another
 First, we will be making an app to
draw a circle.

Change name to CircleSize

get x and get y

can be obtained by pointing
mouse cursor into x and y

Click and drag

programming block
 Let Try Our first Simple App

Click here!

This will pop out!

Let open your MIT App Inventor 2

Software in your android phone. Then,
choose scan QR code. You will be
entering your app in a moment. Enjoy!
 Let learn some theory!

Coordinate system Each primary value of 8 bits with values of 0255 Pixel(Raster Image)
Let Enhance Our App!

Rename Clear_Button

Change text to Clear

Now, you can clear your drawing!

Add this programming block

to clear your canvas
Add more functions into the app

1. From Layout, find then add

HorizontalArrangement

2. Add 3 buttons into the

square box
Change the name of buttons under
components list
Change the display name of buttons

Change colour of the buttons background

Set the Width to Fill parent

Rename the display

Add Slider to change the CircleSize

1. Change the MaxValue to 100

2. Set MinValue to 0
3. Set ThumbPosition to 50
Complete Overview
 Let make it happen!!!

Now you can try your app

by connecting to android device.
Boring of drawing circle only???

Now you are able draw line

and circle.
 Want to save your work?
Tasks:
1. Create a button for Saving option.
2. Click and drag TinyDB under Storage section.
3. Click and drag Notifier under User Interface.
4. Go to Blocks, drag When Button.Click block, Call TinyDB.store value block, Hints:
Call Canvas.SaveAs and Text block.
4. After saving action, give notification to user (drag Call Notifier block
and Text block).

Optional:
1. Create a button to take photo.
2. Set the image as background of canvas.
3. When you are shaking your phone will clear your canvas into a new one and vibrate too.

Ask tutors to assist.

Solution
 Solution

OR

The saved picture can be found in your sd card directory

Solution (Optional)
Solution (Optional)
Solution (Optional)
 Arduino + Bluetooth + Android + LED

We will start building our second app (interaction between hardware and
software).
Once you have completed building this app, you will be able to:
1. Understand basic structures and working principles of MIT App Inventor
and Arduino
2. Control Arduino output using Android through Bluetooth
3. Make simple wireless control over LED turning on/off
Arduino + Bluetooth Circuit Connection
This the connection for your Bluetooth to Arduino

REMINDER: PLEASE CONNECT THE

VCC AND GND CORRECTLY
Let us begin with MIT App first

1. As usual, create a new project

with name BluetoothLEDControl

2. Drag all the components out, as

listed in the Components panel

3. When you are finished, it will look

like the picture on the left.
Label1 setting
ListPicker1 Setting
Button1 Setting
Screen1 Setting
Canvas1 Setting
 Button2, Button3 and
HorizontalArrangement1 Setting
Programming your Bluetooth LED Control App
Programming your Bluetooth LED Control App
Programming your Bluetooth LED Control App

Now, you can control your LED with your phone

Wait, still need to program Arduino.
 Arduino code
#include <SoftwareSerial.h>
SoftwareSerial BT(10, 11);
// creates a "virtual" serial port/UART
// connect BT module TX to D10
// connect BT module RX to D11
// connect BT Vcc to 5V, GND to GND
int ledPin = 13; // to declare Pin 6 in arduino is used to connect LED
int number; // to declare variable number as integer

void setup()
{
pinMode(ledPin, OUTPUT); // to declare ledPin as output so that arduino can send data to the Pin 6
BT.begin(9600); // set the data rate for the SoftwareSerial port
}
void loop()
{
if (BT.available( )) // if Bluetooth is available
{
number=(BT.read()); // set the byte send from Bluetooth to arduino
if (number==1) // if the number receive is 1 (test condition)
digitalWrite(ledPin, HIGH); // make LED light up

if (number==0) // if the number receive is 0 (test condition)

digitalWrite(ledPin, LOW); // make LED turn off
}
}
 Task

Add a button to the initial app that you have just made, let the button function
as when it click it will call the LED to blinking. You need to add a few lines of
codes in your Arduino program too.

Ask tutors to assist.

Solution
 Solution
#include <SoftwareSerial.h>
SoftwareSerial BT(10, 11);
// creates a "virtual" serial port/UART
// connect BT module TX to D10
// connect BT module RX to D11
// connect BT Vcc to 5V, GND to GND
int ledPin = 13; // to declare Pin 6 in arduino is used to connect LED
int number; // to declare variable number as integer

void setup()
{
pinMode(ledPin, OUTPUT); // to declare ledPin as output so that arduino can send data to the Pin 6
BT.begin(9600); // set the data rate for the SoftwareSerial port
}
void loop()
{
if (BT.available( )) // if Bluetooth is available
{
number=(BT.read()); // set the byte send from Bluetooth to arduino
if (number==1) // if the number receive is 1 (test condition)
digitalWrite(ledPin, HIGH); // make LED light up

if (number==0) // if the number receive is 0 (test condition)

digitalWrite(ledPin, LOW); // make LED turn off

if (number==2)
{
while(number==2||number==-1){ // while the number receive is 2 or -1 (-1 is due to when android is not sending any data)
digitalWrite(ledPin, HIGH);
delay(1000);
digitalWrite(ledPin, LOW);
delay(1000);
number=(BT.read()); //always get the number receive to ready to terminate the loop when android send data to this loop
}
}
}
}
Arduino + Android + Bluetooth + Potentiometer

We will start building third app (interaction between hardware and software).
Once you have completed building this app, you will be able to:
1. Understand basic structures and working principles of MIT App Inventor
and Arduino
2. Receive Arduino output using Android through Bluetooth
3. Make simple wireless receiver over getting data from potentiometer
Read data from Arduino then
send to Android
Circuit connection for potentiometer with Arduino

Note: The previous Bluetooth

Connection still remain the
same as previous
 Theory that make you come in handy
when programming
map(value, fromLow, fromHigh, toLow, toHigh)
Example: map( x, 0, 1000, 0, 10)
Re-maps a number (x) from one range (0 till 1000) to another (0 till 10). That is,
a value of fromLow would get mapped to toLow, a value of fromHigh to toHigh,
values in-between to values in-between, etc.

A/D converter
The Arduino has a circuit inside called an analog-to-digital converter that reads
this changing voltage and converts it to a number between 0 and 1023.
Example: 0 V is 0, 3.3V is 678, 5V is 1023
Bluetooth + Arduino + Potentiameter
MIT App

1. As usual, create a new project

with name BluetoothPOT

2. Drag all the components out, as

listed in the Components panel

3. When you are finished, it will look

like the picture on the left.
Change all the setting as follow
 MIT Programming
Set up Bluetooth Connection
 MIT Programming
Get data from Arduino
 Arduino Code
#include <SoftwareSerial.h>
SoftwareSerial BT(10,11);

int readPOT = A0; // declare variable name as readPOT and set to pin A1 in arduino (must be a
analog IN port)
int x=0; // declare a variable name as x and set it value to 0

void setup(){
BT.begin(9600); // initialize Bluetooth serial communication
pinMode(readPOT, INPUT); // declare readPOT as input mean to get data from external sensor
or hardware
}
void loop(){
x=analogRead(readPOT); // set the variable x to the value get from readPOT
BT.print(" "); // send a spacing into the android " "
BT.print(x); // send the x data which is also the readPot data to android
delay(1000); // let arduino wait for 1s which also mean stop operation for 1s
}
 Another version of doing it

This version is using map function to display the number from 0-255. In this version,
it is receiving Number instead of text. So in Arduino coding, need to use BT.Write
instead of BT.print. (BT.print is for text) & (BT.write is for number)
 Arduino Code
#include <SoftwareSerial.h>
SoftwareSerial BT(10,11);

int readPOT = A0; // declare variable name as readPOT and set to pin A1 in arduino (must be a
analog IN port)
int x=0; // declare a variable name as x and set it value to 0

void setup(){
BT.begin(9600); // initialize Bluetooth serial communication
pinMode(readPOT, INPUT); // declare readPOT as input mean to get data from external sensor or
hardware
}
void loop(){
x=analogRead(readPOT); // set the variable x to the value get from readPOT
x = map (x, 0,1023, 0,255); // to change the value of x in range of 0-1023 to 0-255
BT.write(x); // send the x data which is also the readPot data to android
delay(1000); // let arduino wait for 1s which also mean stop operation for 1s
}
Now, we will build our simple game app
We will start building our simple mini game app.
Once you have completed building this app, you will be able to:
1. Understand basic structures and working principles of MIT App Inventor
2. Make simple animated motion
3. Set up nice background and give some decoration to your app
4. Add sound effect
Little things need to know beforehand
Pikachu & Pokeball App

To begin with making new app,

click Projects>>Start new project

Then, enter Project name as

PikachuGetPokeball.

Once you have finished, you will see

a new workspace.
Insert all the libraries files

Click Upload File to upload all the files.

Drag and drop all the requested components

1. We will begin will putting

Horizontal Arrangement
2. Put Label into the empty
square box
3. Put two Button beside the
Label inside square box
Change name 4. Change the name of the
Label and Button, simply
by click Rename below
Rename ScoreLable Display

1. By clicking ScoreLabel, then in

Text rename Score: 0
2. Change Text Alignment to Center
3. Change Width to Fill parent
Rename StartButton & ResetButton Display

1. By clicking StartButton, then in

Text rename Start
2. Change Shape to rounded
3. Change Width to Fill parent
4. By using same procedure change
the display of ResetButton
Insert Canvas into the Viewer
Insert 2 ImageSprite
Insert Picture into Canvas & ImageSprite

1. Click at Canvas1, then click at

BackgroundImage
2. Then select Background.jpg
3. Click at Pokeball, then click at
Picture
4. Then select Pokeball.png
5. Click at Width and Height to
set pixel with value of 30
6. Do the same for Pikachu
Add 3 more components

1. Under the Palette Panel, find

TextToSpeech, Clock and Sound
2. Drag all the components into the
Viewer
3. Click at the Sound and add the
Source with pika.mp3
Let Go into Programming

To interchange

All the components that you

have added previously located at here

All the library files located at here

First, we will make an animated Pikachu
When you are done just,
point your mouse to the
programming block and
click collapse block.
Why? Later you will know

Connect your android phone to

Al Companion see the effect
We make the Pikachu movable

Now point your finger at Pikachu

The drag it around.
Make the Pokeball to move

Why the Pokeball cant bounce back?

Dont worry, we will make it bounce later!
Pokeball bounce off the edge
Pokeball bounce off Pikachu
To count the Score

Notice that this block has been created previously,

so you need to find back this block and add it
Make the Pokeball only stop bouncing
when it reach the bottom

Notice that this block already created previously

You need to add a few more code into it.
Reset Everything
Now you know why we need to collapse the
block to make it look simple and nice

When you are done, there will be total

of 9 blocks
 You might be wonder why when click
Start will has the word Game Over

To fix it just need to add this into your StartButton

 Sound effect!!!
Tasks:
1. Whenever Pikachu get the Pokeball, it will say Pika.
2. When the Pokeball touch the bottom side, it will say Oh no, Pokeball
broken, blah la la lah.

Ask tutors to assist!

Solution
Last of all, how to save the app into your
phone?

Click Build then choose first

One for direct save into your phone.
Second, will save it to your computer.
 Thank you!
See you next time!