l

P R O T E U S
WITH
M I T A P P

I N V E N T O R
(1-DIGIT UP COUNTER)
WHAT IS A MIT APP MIT APP EDITOR CREATING THE SIMULATING
INVENTOR? INTERFACE APP THE COUNTER
 INTRODUCTION

After discussing Proteus, its installation, user interface, and circuit

simulation, we will discuss MIT App Inventor. MIT App Inventor is a web-
based tool that helps create handy mobile apps for beginners in app
programming. We will focus on the basic procedures of creating an app in MIT
App Inventor in this module. We will also implement it in controlling our
circuits in Proteus Software.

WHAT IS MIT APP INVENTOR?

Figure 1: MIT App Inventor Logo.

MIT App Inventor is an online tool used in creating mobile apps that
applies "What You See is What You Get" (WYSIWYG) editor functionalities,
which cater to Android and iOS. In this web tool, we can design our app's
desired interface and program it using Block Programming, which is very
interesting and helpful to beginners in programming.
 While we create and edit our app on our
computer, we can simultaneously see and
check our ongoing project on our smartphone
through the MIT AI2 Companion App.
Figure 2: MIT AI2 Companion App Logo.

MIT APP EDITOR INERFACE

The MIT App Inventor's main interface offers two primary editors:
The Design Editor and the Block Editor.

The Design Editor manages

Design Editor the desired project's user
interface or visuals. In this editor,
we will select the elements and
interface. And then drag and drop
them on the Viewer section. In
this section, we can see the
projection of the device screen,
on which we are planning to
install the app. We can also
Figure 3: MIT App Inventor change the size of the screen,
Design Editor.
whether phone size, tablet size,
or monitor size.
 The Design Editor is composed of several sub-sections: the Palette,
Components, Media, and Properties. The elements and components of the app
interface are in the Palette. These elements and components dragged in the
Viewer section were listed in the Components section. We can edit their
properties in the Properties section. Media files that are uploaded are in the
Media section.

Figure 4: Elements and Components List in Palette.

 Block Editor

Figure 5: MIT App Block Editor.

The Block Editor programs the

app's mechanism. Here, we can drag
programmed logic blocks and arrange
them like a puzzle in the Viewer
section. The blocks are color-coded
according to their functions.

Figure 6: Different Programmed Blocks.

 GETTING STARTED WITH MIT APP INVENTOR

To start creating an app in MIT App inventor, we must first follow these steps:

STEP 1

Open your browser, then go to the website https://appinventor.mit.edu.

STEP 2

Go to Resources, then click Get Started.

STEP 3

Click the link http://ai2.appinventor.mit.edu/ .

.

STEP 4

Before accessing the website, you will need to sign in to your Google Account.
STEP 5

Read and accept the Terms of Service. To do this, just press

"I accept the terms of service!".

STEP 6

After accepting the terms of

service, the main website of MIT App
Inventor will show. To start a new
project, click New Project, then write
your desired project name. After this,
the MIT App Inventor Design Editor
Interface will show.
SIMULATING PROTEUS CIRCUIT
(1-DIGIT UP COUNTER) USING MIT APP INVENTOR

STEP 1

Determine the main functions or mechanisms needed to be controlled

by the app. In our Proteus circuit, which is the 1-Digit Asynchronous Up
Counter, manual signal triggering is required. It means that for us to count
from 0 to 9, we need to press the push button, which gives a pulse signal to
the Decade Counter. This manual signal triggering is the primary function we
need to create in our app.

STEP 2

Add Bluetooth Module and Arduino in the Proteus Circuit. These two
modules would serve as the gateway for command of our Up Counter circuit.
• Remove the Push Button on our Proteus circuit.
• Select and Add the Bluetooth HC-05 Module and Arduino.
• Connect the TXD and RXD pins of the Bluetooth Module to pins 0
and 1 of the Arduino, respectively.
• Connect Pin 14 of the Decade Counter to one of the pins in
Arduino. You can select from pin 2 to pin 7. In this demo, we will
use Pin 6.
•
STEP 3

After modifying the Proteus circuit, go to the MIT App Inventor

website ( http://ai2.appinventor.mit.edu/ ). Click New Project, write
your desired project name, and click OK.
 STEP 4

On the Design Editor, click the "Screen" in the components section. Then,
edit the layout of the screen using the properties listed in the Properties
section. Select also the size of the device.

STEP 5

Enter the app label by clicking the option Label in the Palette section,
located in the User Interface Tab. Drag it on the Viewer section, and then
edit the app label using the Properties section. You can edit font size, font
style, color, and alignment in the Properties section.
STEP 6

Add List Picker in the Viewer section. This List Picker will
display the available Bluetooth Devices for the app. Drag it on
the Viewer section, then edit it on the Properties section. Then,
write "Select Bluetooth Connection" as the label.
STEP 7

Add a button in the Viewer section. This button will serve as the
disconnection button once we connect to a Bluetooth device. Edit it on the
Properties section, and label it Disconnect. Since this button must only
show up once the device is connected, we must not make it visible.
Uncheck the Visible checkbox in the Properties section.
STEP 8

Add a Bluetooth icon on the viewer. Download first a Bluetooth logo

or icon online. Then go to the Media section, select Upload File. Click
Choose File, then browse the location of the image, then select OK. In the
User Interface tab, click Image then drag it on Viewer. In the Properties,
click Picture, then select the uploaded file. Adjust the sizing of the image
depending on your desired size.
STEP 9

Add another button in the Viewer section. This button would serve as
the manual trigger button that would make the counter count up. Edit its
properties in the Properties section, and label it Count Up.

You can also add other designs

in your app layout, such as images.
Just upload your media files in the
Media section, and edit the screen in
the Properties.
 STEP 10
Click the Connectivity Tab in the Palette section. Select and
drag Bluetooth client in the Viewer.

PROGRAMMING THE APP

Go to the Block Editor, STEP 1

then click ListPicker1. The
ListPicker1 is involved in
showing the list of available
Bluetooth devices. After
clicking, a list of program
blocks will show. Click When
ListPicker1. Before Picking
block.
STEP 2

Click the ListPicker1 and select set ListPicker1.elements to

block, then attach it to the When ListPicker1. Before Picking.
 STEP 3
Click the Bluetooth client, then select
BluetoothClient1.AddressesAndNames. Drag
and connect it on the right of set
ListPicker1.elements to block. These blocks
would allow the app to show the available
Bluetooth devices before we pick a
connection.

STEP 4
Click ListPicker1, then this time, click When ListPicker1.After Picking block.
Drag it in the Viewer. Then click the ListPicker1, click set ListPicker1.Selection
to block, connect it to the When ListPicker1.After Picking block. After that, click
the Bluetooth client, then select call BluetoothClient.Connect/Address and
connect it to the set ListPicker1.Selection to clock. Click ListPicker1, then select
ListPicker1.Selection" and connect it to call BluetoothClient. Connect/Address
block. These blocks would allow the app to pick and call the Bluetooth module
of the Proteus circuit.
 STEP 5
Once the app connects to a device, we must make the Disconnect button
or Button 1 visible. This mechanism would allow the app user to disconnect the
device once they finished simulating the Proteus circuit. Click the Logic button
in the Blocks section, and then select the if/then block. Place it before the call
BluetoothClient. Connect/Address block. This block must be connected beside
the "if" part. Then, click Button 1, then select "set Button1.Visible to", then
attach it beside the "then" part of the "if/then" block. Click the Logic in Blocks
section, select True, then connect it beside the set Button1.Visible to block.

STEP 6

The function of Button 1 or Disconnect Button is to disconnect the device

to the Bluetooth Module. To allow disconnection, click Button 1, then select
when Button1.Click / do block. Then go to Bluetooth Client, then select call
BluetoothClient1.Disconnect, and connect it on the when Button1.Click / do
block. Since we are disconnected, Button 1 needs to be invisible. To make this
happen, go to Button 1, then select set Button1.Visible to block, then place it
under the BluetoothClient1.Disconnect block. Go to Logic in Blocks section,
then choose False, and connect it to the set Button1.Visible to block.
 STEP 7

Button 2 is the Count Up button. This button is responsible for sending the
command signal for the Proteus circuit. For every click on this button, the
Proteus counter would count up. We need to program this button to send signal
on our Proteus circuit. Click Button 2, then select when Button1.Click / do block.
Then go to Bluetooth Client, then select call BluetoothClient1.SendText, then
attach a Text block, then write "1" on that block. This block would allow every
click of the Count Up button to send the command "1" to the Proteus circuit.
DOWNLOADING THE APP

On the options bar

above the MIT App Website
screen, click Build. Then click
Android App (apk). Wait for
the compilation process.

Upon finishing the compilation, open your MIT AI2

Companion App, then scan the QR Code provided by the
website. You will be redirected to Google Playstore, click
Download, and then install.
PROGRAMMING THE ARDUINO

The Bluetooth HC-05 Module in the Proteus circuit will receive the
signal of command from the app that we have created, and the Arduino
module would be the one to interpret this signal. We need to program the
Arduino for the Proteus circuit to count up when we use the app.

STEP 1

Open the Arduino IDE.

If you do not have one, you
can download it online, then
create New Sketch.

STEP 2

Set up you're your Arduino by writing

Serial.begin(9600) on the void setup.
Then, we need to set the pin connected to
the clock signal pin of the Decade
Counter. This pin was pin 6. Write
pinMode (6, OUTPUT).
STEP 3

Program the void loop. Set if statements. Set the string command
equals to Serial.read(), which is the received message from the
Bluetooth module. In our app, if we click Count Up, the app will send
the text 1. We need to program the Arduino with the instruction that
for every command received, pin 6 of Arduino would be HIGH then
would be LOW again, thus creating a signal pulse. To accomplish this,
we will set an if statement indicating that the Pin 6 would be HIGH,
then would be LOW after several milliseconds.

STEP 4

Click Verify to check if there is an error in the code. Then click the
Sketch on the Menu bar, then click Export Compiled Library. Open the
Sketch Folder to check the location of the sketch file, which should be
in .hex or .ino format.
STEP 5

After coding, we will now upload our code. First, open your Proteus
circuit, then double-click the Arduino module. Click the folder icon
beside the Program File box. Find the location of the .hex or .ino file of
your Arduino code. Click the file and then click Open, and then OK.
 SIMULATING THE CIRCUIT
USING MIT APP INVENTOR

Open the Proteus Circuit. STEP 1

Since the pinMode of the
Arduino was initially HIGH in
pin 6, we need to place an
inverter between the Clock A
pin and the pin 6. The inverter
is necessary because the Up
Counter requires no initial
signal flow in the Clock A pin.
Otherwise, the timer would
start at 1.

STEP 2

Click the play

button on the lower
left part of the
screen to simulate
the circuit.
 STEP 3

Turn on the Bluetooth

Connection of the Laptop/PC of the
Proteus circuit. Then, open the
smartphone/device on which you
have downloaded the app. Open
your device's Bluetooth, then open
the app.

STEP 4

Click Select Bluetooth

Connection, then click the
discoverable Bluetooth name of
the PC/Laptop of the Proteus
circuit. The disconnect button
would show up you have
successfully connected.
STEP 5

Once connected, we can now test the app. If you press the Count
Up button, the counter in the Proteus would count up from 0 to 9 and
would go back again to 0 after 9. The speed of counting depends on
the speed of pressing the Count Up button.
 POP-UP QUIZ
Multiple Choices
1.) It is a web tool where we can design easy to create apps and applies "What You See is What You
Get" (WYSIWYG) editor functionalities.
a. TinkerCAD c. Visual Studio
b. Adobe Photoshop d. MIT App Inventor
2.) What type of programming is used by MIT App Inventor?
a. Ladder Programming c. Block Programming
b. Stair Programming d. Pool Programming
3.) What app allows us to download our created app in MIT App Inventor?
a. Proteus c. Arduino IDE
b. MIT AI2 Companion d. Google Music
4.) A component module designed and widely used for wireless serial communications.
a. Bluetooth c. Decade Counter
b. Arduino d. 7-Segment Display
5.) An interface of MIT App Inventor used in editing the app's user interface?
a. Block Editor c. Arduino Editor
b. Design Editor d. Media Editor

Answer Key

1. D
2. C
3. B
4. A
5. B
UNIT D 2467 URDANETA RD, MAKATI, METRO
MANILA, PHILIPPINES

[email protected]
+(02)8370 1811

www.facebook.com/erovoutika