MIT App Inventor Codi Bot: Complete: Level: Advanced
MIT App Inventor Codi Bot: Complete: Level: Advanced
MIT App Inventor Codi Bot: Complete: Level: Advanced
90
Complete mins
Level: advanced
This tutorial combines all the previous tutorials together. Here,
you can interact with all Codi Bot functions, including LEDs, wings
and sounds.
● source .ino / source .aia
Function description
This project will show you how to control all Codi Bot functions with
App Inventor through a BLE connection.
Hardware
Please follow this building guide to assemble your Codi Bot.
App Inventor
Now log in to your App Inventor account and create a new project
or directly import this aia file.
Since this app is the combination of the previous three, this tutorial
will not go into very much detail. But you are certainly can follow this
tutorial to build the app step by step.
Designer
1. We need to import two extensions from this URL:
● Bluetooth low energy:
http://iot.appinventor.mit.edu/assets/resources/edu.mit.ap
pinventor.ble.aix
● MT7697pin:
http://iot.appinventor.mit.edu/assets/resources/edu.mit.ap
pinventor.iot.mt7697.aix
2. Add a BluetoothLE component to your project, we will use it to
send commands to Codi Bot through Bluetooth connection.
3. Add seven MT7697Pin components to your project. Set their
BluetoothDevice properties to BluetoothLE1 and rename them
as table below:
MT7697_LeftWingServo servo 2
MT7697_RightWingServo servo 7
Wing (Designer)
10. Add a Label to show message, rename it to
"Label_Wing" and set Text to "Wing control".
11. Add two Buttons for wing actions. Rename them to
"Button_WingFlap" and "Button_Home". Set FontSize to 20
and Text to "Flap" and "Home".
12. Add a HorizontalArrangement component, set Width to
Fill parent, then put components of Step 11 into it.
13. Add two labels to show messages. Rename them to
"Label_LeftWing" and "Label_RightWing". Set their Text to
"Left Wing (0 outward- 90 backward) " and "Right Wing (180
outward - 90 backward) ".
14. Add a slider to control left wing position. Rename it to
"Label_LeftWing". Set MinValue to 0, MaxValue to 90, Width
to Fill parent and ColorLeft to Green.
15. Add a slider to control right wing position. Rename it to
"Label_RightWing". Set MinValue to 90, MaxValue to 180,
Width to Fill parent and ColorLeft to Purple.
16. Add a VerticalArrangement component, set Width to Fill
parent, then add components from Step 13 to 15 into it.
17. Wing section finishes as below:
LED (Designer)
18. Add a Label to show message, rename it to "Label_LED"
and set Text to "RGB LED & Wing LED".
19. Add four buttons for RGB LED actions. Rename them to
"Button_LED_R", "Button_LED_G", "Button_LED_B" and
"Button_RGB_Random". Set Text to "R", "G", "B", and
"Random"; Width to 30 percent; and FontSize to 20.
20. Add two more buttons for wing LEDs actions. Rename
them as "Button_LED_LeftWing" and
"Button_LED_RightWing". Set Text to "L" and "R", Width to
30 percent and FontSize to 20.
21. Add a TableArrangement component, set Width to Fill
parent, Columns to 3 and Rows to 2. Then add the
components from Step 19 to 20 into it.
22. Add three sliders to control red/green/blue light intensity
of RGB LED. Rename them to "Slider_LED_R",
"Slider_LED_G" and "Slider_LED_B". Set ColorLeft to Red,
Green and Blue; Set MinValue to 0, MaxValue to 255 and
Width to Fill parent.
23. Add a VerticalArrangement component, set Width to Fill
parent, then add components of Step 22 into it.
24. LED section finishes as below:
Sound (Designer)
25. Add a Label to show message, rename it to
"Label_Sound" and set Text to "Sound”.
26. Add eight buttons to make sounds. Rename them to
"Button_C", "Button_D", "Button_E", "Button_F", "Button_G",
"Button_A", "Button_B" and "Button_C2". Text to "C", "D",
"E", "F", "G", "A", "B" and "C’ ". Set Width to 25 percent and
FontSize to 20.
27. Add a TableArrangement component, set Width to Fill
parent, Columns to 4 and Rows to 2. Then add the
components of Step 26 into it.
28. Sound section finishes as below:
Not all the functions of previous tutorials are included here, for
instance specifying sound frequency and time duration. However, you
can always tinker with this app and add as many App Inventor
components as you like.
Blocks
Let’s take a look at our blocks step by step. Notice this time we have
a different connection approach than with previous projects. We use
ListPicker to select available BluetoothLE device instead of a
specified device.
Similar to Designer, we use the same structure to guide you to finish
the blocks needed for this project.
Connection (Blocks)
1. Initialize app and scan for nearby Bluetooth devices
In Screen1.Initialize event, we ask BluetoothLE component to
scan for BLE devices nearby (BluetoothLE1.StartScanning).
If any devices are found (BluetoothLE1.DeviceFound event),
we put these devices into ListPicker.
3. BLE Connected
When connected successfully (BluetoothLE.Connected event),
we will see related messages on several components, hide the
ListPicker and show other components. This is because if we
send Bluetooth commands without connecting to something first,
it may cause error.
LED (Blocks)
Here we are going to control the LEDs with buttons and sliders, as
we did in the Codi Bot LED tutorial.
9. Button to control RGB LED
These three buttons are used to control the red, green and blue
colors of the RGB LED. For the red light, we use
MT7697_LED_R.Write method. Value 255 turns on the red light;
and value 0 turns it off. Please finish the other two button events
in a same manner.
10. Button to control the green and purple wing LEDs
These two buttons are used to control the LEDs of both wings.
The idea is the same as in the previous step.
11. Button to randomize the RGB LED color
We can also randomize the RGB LED color. When
Button_RGB_Random is pressed, we use a loop (for each) to
replace the RGBLEDColor_list variable content with a random
number from 0 to 250. Then we control the corresponding color
and slider thumb position with this variable.
12. Sliders to fine tune the RGB LED color
When the slider is dragged, we control the corresponding color
by slider thumb position.
Sound (Blocks)
Here we can play different notes with buttons, which are exactly
the same with the Codi Bot Sound tutorial.
13. Buttons to make sounds of different notes
We have eight buttons here. Each of them will tell the buzzer
inside the Codi Bot to make a different note. For example, when
Button_C is pressed (Button_C.Click event), we use a
MT7697Buzzer.Buzz method to make a sound of Note C by
specifying the frequency as 262 and the duration as 200
(milliseconds). Please finish the other seven button events in the
same manner.
Arduino IDE and sketch
Make sure your computer has Arduino IDE installed and LinkIt 7697
SDK and driver are ready. If not, please check out this Codi Bot
Standalone tutorial.
Click the magnifier icon at the up-right corner of Arduino IDE. You
should see a message in the pop-up window. The
[XX:XX:XX:XX:XX:XX] 12-digit string is the Bluetooth address of your
LinkIt 7697. We will choose the device of this address in our app.
Tips
Make sure your LinkIt 7697 is running correctly. And install App
Inventor project on your Android phone by clicking Build / App
(provide QR code for .apk), this will show a QR code for the .apk file
of this project. Use MIT AI2 Companion to scan this QR code,
download the app, and install it.
Open Codi Bot app (Fig 1.) and click Connect ListPicker. You’ll see a
list of available Bluetooth devices (Fig 2). In general, the first item is
the Codi Bot where "F9:3D:00:2B:88:8C" is the Bluetooth address of
my Codi Bot. Click it and your phone will try to connect with the Codi
Bot, If it connects successfully, you will see your app like in Fig 3.
Click Mode ListPicker to choose which mode you want to play with:
Wing, LED or Sound (Fig. 4). Choose one to interact with your Codi
Bot (Fig 5 to Fig 7). Remember to click the Disconnect button when
you finish with this project.
Fig 1. Initial screen Fig 2. Select available Bluetooth device