workshop on smart-phone controlled 3d printed robot making · workshop on smart-phone controlled 3d...

Workshop on smart-phone controlled 3D printed robot making

Dr. Loretta Y.K. Choi

Mr. David C.M. Lee

(Special thanks to: Dr. T.W. Chim)

MakerLab, Department of Computer Science, HKU

November 5, 2016

Co-organized with

1

Today’s Schedule

• My Armor Bob Assembling (1 hr 15 mins)

• Demonstration (15 mins by David)

• Hands-on assembling (1 hr)

• Simple Coding Using App Inventor (45 mins)

• App Inventor coding (30 mins by Loretta)

• Hands-on apps installation & testing (15 mins)

2

Introduction to MakerLab

• http://makerlab.cs.hku.hk/

• MakerLab is an initiative launched by the Department of

Computer Science to bring together students of any discipline

who are interested in prototyping and making.

• Designs of MakerLab can be found at:

• http://www.thingiverse.com/hkucs-makerlab/designs

• https://www.youmagine.com/hkucs-makerlab/designs

3

Armor Bob Wiring

battery

On/off

switch

D2

D3 -> YR servo

D4 -> RR servo

D5 -> RL servo

D6 -> YL servo

D7

D8 -> HC-SR04 trigger pin

D9 -> HC-SR04 echo pin

D10

D11: Bluetooth state

D12: Dancing mode

rightmost pin: servo connectors

middle pin: 5V

leftmost pin: GND

3.3V

GND

Connect either D11 or D12 to 3.3V for the

corresponding state; if both set to GND,

Armor Bob will be in auto pilot modeD13 4

Servos

YR

RR

YLRL

Ultrasound Distance Senor HC-SR04

GND 5Vecho trigger

5

Controlling Armor Bob

• We will write an Android app using MIT App Inventor 2 to control

Armor Bob. App Inventor (for Android) is an open-source web

application to create software applications for the Android

operating system (OS).

1 Go to the site http://ai2.appinventor.mit.edu/ and

login using your Google account.

If you haven’t got a Google account, go to the site

http://www.google.com/, press login and then choose “Create

Account”.

2 Choose “New Project” to create a new

project. Then type the project name and

press “OK”.

6

App Inventor Work Area

Palette:Materials for

making your

application

Viewer: How your

application looks

like on the phone

screen

Components: All components

(including hidden

components) in the

project

Properties: Properties of each

component (you

can select and view

the properties of a

certain component)

This is where you switch from Designer

view (where you design the app interface)

to Blocks view (where you program the

app behaviour)

7

Let’s Start Now3 Choose “Start New Project” to

create a new project.

4 Then type the project name and

press “OK”.

8

Screen Layout

5 Drag a “ListPicker” from Palette to

Viewer and set its Properties as

follows:

BackgroundColor: Green

FontSize: 16

Height: 40 pixels

Width: Fill parent…

Text: Connect

Let’s add a button for connecting to the Armor Bob. Once the button is clicked, it

displays a list of choices for bluetooth devices to connect.

9

Screen Layout

6 Drag a “Button” from Palette to

Viewer and set its Properties as

follows:

BackgroundColor: Cyan

FontSize: 16

Height: 40 pixels

Width: Fill parent…

Text: On

Next, we add a button for turning on Armor Bob.

10

Screen Layout

7 Repeat this process

to add Button2 (Off),

Button3 (Forward),

Button4 (Backward),

Button5 (Left),

Button6 (Right) and

Button7 (Stand).

Configure them as in

the image.

Let’s add more buttons!

11

Screen Layout

Button2 (Off), Button3 (Forward), Button4 (Backward), Button5 (Left), Button6 (Right)

and Button7 (Stand) should only be visible when Bob is connected to the phone, so let’s

make the button invisible by default.

8 Repeat this process

to add Button2 (Off),

Button3 (Forward),

Button4 (Backward),

Button5 (Turn Left),

Button6 (Turn Right)

and Button7 (Stand).

Configure them as in

the diagram.

12

Bluetooth Component

Our mobile app will connect to Armor Bob via Bluetooth. Armor Bob will

be the Bluetooth client in the mobile app.

9 Drag “Connectivity | BluetoothClient”

from Palette to Viewer

Note that this BluetoothClient will not

appear in Viewer but can be found in

Components

13

Coding the Bluetooth Connection

Let’s first program the actions for setting up a Bluetooth connection. We would

like the user to be able to choose from a list of Bluetooth devices and connect

to Armor Bob. Once Armor Bob (a Bluetooth device) is connected, we will need

to make all the 7 action buttons visible to the user.

10 Choose “Blocks” to switch to the

coding view

11 Select “ListPicker1” and construct the

program as in the diagram below.

Note that blocks about a certain

component will appear when you

select the component.14

Code to Control Armor Bob

The Arduino board on Armor Bob has been preloaded with a program which performs actions

upon receiving different characters:

• When it receives ‘a’, it will go forward.

• When it receives ‘b’, it will go left.

• When it receives ‘c’, it will stop.

• When it receives ‘d’, it will go right.

• When it receives ‘e’, it will go backward.

• When it receives ‘f’, it will be switched on.

• When it receives ‘g’, it will be switched off.

Therefore, from our mobile app, we just need to send

the corresponding character when the user clicks a button.The Arduino code for Armor Bob can be found at:https://github.com/hkucs-makerlab/my-armor-bob

15

Code to Control Armor Bob

12 Add the logic for all 7 buttons as in

the diagram.

Basically, we just send out a

character when a button is clicked.

16

Installing the app on your mobile device

13 Generate the *.apk file

14 Copy the *.apk to your Android via USB cable for installation

Remember to change the security settings of your Android phone

to allow the installation of the app17

Armor Bob in Action!

15 Pair your mobile phone

with Armor Bob.

16 Run your app, connect

to Armor Bob and put it

in action!

18