Basics project 107o Building LED controller app with MIT App Inventor 2


Basics: Project 107o

Project name: Building LED controller app with MIT App Inventor 2

Tags: MIT App Inventor 2, LED, Bluetooth, LED controller, Arduino, Arduino Uno

Attachments: LEDcontroller sketch, MIT2_LED.png, MIT2_LED1.png, LEDcontroller.apk, LEDcontroller.aia

In this project, you needed these parts :

1.Arduino Uno R3 1 pc (you can also use the other version of Arduino)

2. Arduino IDE ( you can download it from here  )

3.Jumper cables (F-M, M-M)

4.Breadboard 1pc

5.Bluetooth modules HC-05 or HC-06 1 pc

6.Resistor 3 pcs (1pc 220 Ohm, 1pc 1 KOhm and 1 pc 2KOhm)

7. Smartphone with Android OS

8. LED (red or any color) 1 pc

General

We will learn how to build LED controller app with the MIT App Inventor 2. This project is from our new Ebook Building Android Apps for Arduino with MIT App Inventor 2.

In this project we are going to create an Android app that turns an LED on and off. We will learn how to:

  • Make a simple design with buttons, listpicker, images and labels
  • Build the blocks that send information to the Arduino to turn an LED on and off
  • Program the Arduino to receive the information from the app
  • Test your app in real time while building it

Understanding Arduino Uno

You can read more about it here.

Understanding the bluetooth modules HC-05 and HC-06

You can read about them here.

Signals and connections of bluetooth modules HC-05 and HC-06

You can read about them here.

Signals and connections of Arduino Uno

You can read more about it here.

Wiring

LED control
LED control

Step By Step instruction

1.Building the Android app with MIT App Inventor 2

1.Go to appinventor.mit.edu and click on Create Apps! orange button.

create apps

2.Click on Start new project and give your project a name. You can name it as LEDController. Click on OK button. Your project will be saved.

start new project
LED controller

3.Go to Designer editor tab. We need to design the appearance of our app first.

4.Select components:

  1. From User Interface Pallete, click and drag out Image component, drop it into the Viewer which is in the middle of the Designer;
  2. From User Interface Pallete, click and drag out two Button components, drop them into the Viewer;
  3. From Layout Pallete, click and drag out TableArrangement component, drop it into the Viewer;
  4. From User Interface Pallete, click and drag out Label component, drop it into the Viewer;
  5. From User Interface Pallete, click and drag out ListPicker component, drop it into the Viewer;
  6. From Sensors Pallete, click and drag out Clock component, drop it into the Viewer. Wherever you drop it, it will appear in the area at the bottom of the Viewer marked Non-visible components. It provides the instant in time using the internal clock on the phone. It can fire a timer at regularly set intervals and perform time calculations, manipulations, and conversions;
  7. From Connectivity Palette, click and drag out BluetoothClient component, drop it into the Viewer. Wherever you drop it, it will appear in the area at the bottom of the Viewer marked Non-visible components. Use BluetoothClient to connect your device to other devices using Bluetooth. This component uses the Serial Port Profile (SPP) for communication.
LED controller
LED controller
LED controller

5. Adjust components properties. You will need to click on each component from Components pane and change the properties of component in the Properties pane:

  1. Click on Screen1 component, change AlignHorizontal to Center, AlignVertical to Center, Title to LED Controller;
  2. Click on Button1 component, change Width to Fill Parent, Text to LED ON, TextColor to White, BackgroundColor to Grey, FontBold – selected, FontSize to 20, Shape – rounded;
  3. Click on Button2 component, change Width to Fill Parent, Text to LED OFF, TextColor to White, FontBold – selected, FontSize to 20, Shape – rounded;
  4. Click on Label1 component, change Text to Not Connected, TextColor to Red, FontBold – selected;
  5. Click on ListPicker1 component, change Text to Not Connected, TextColor to Red, FontBold – selected;
  6. Click on Image1 component, change Picture from None… to MIT2_LED.png. Click on None.., then click on Upload file, then click on Choose file and look for MIT2_LED.png file (you need to download it, it is attached on the beginning of this project), select this file and click on Open, OK.
LED Controller
LED controller
LED controller
LED controller
LED controller
LED Controller

6. Go to Blocks editor tab. So far you have been arranging your app’s screen and components in the Designer, which is in a web browser window. To start programming the behavior of the app, you need to go to the Blocks editor. Click on Blocks button in the upper right of your screen to go to the Blocks Editor.

LED Controller

7. On the left side of the Blocks Editor, click the Button1 component-specific drawer to open it. Drag and drop the when Button1.Click event handler block in the Blocks Viewer area (the open area on the right). Do the same with Button2 component-specific drawer.

LED controller
LED Controller

8. Click the BluetoothClient1 component-specific drawer and drag the call BluetoothClient1.Send1ByteNumber number command block and connect it to the “do” section of the when Button1.Click block. Click with right mouse button on the call BluetoothClient1.Send1ByteNumber number command block and choose Duplicate from menu. Drag the call BluetoothClient1.Send1ByteNumber number command block and connect it to the “do” section of the when Button2.Click block. The blocks connect together like puzzle pieces and you can hear a clicking sound when they connect.

LED Controller
LED Controller
LED Controller

9. From Blocks Built-in Math drawer drag out number blocks and attach to command blocks. If you click on Button1 your Android device will send byte 49 through Bluetooth and your Arduino receive it as 1 according to ASCII table, if you click on Button2 (byte 48 will be sent) – Arduino receive it as 0.

LED Controller

10.We add another picture of LED – MIT2_LED1.png to our Android app. Go to Media and click on UploadFile button. Then click on ChooseFile button, find and select MIT2_LED1.png (you need to download it, it is attached on the beginning of this project) . Click on Open button and then click on OK button. This file will be uploaded to Android app project.

LED Controller

11. From Image1 component-specific drawer drag out set Image1.Picture to blocks and attach to event handlers.

LED Controller

12. From Blocks Built-in Text drawer drag out the text string blocks and attach to set Image1.Picture to blocks. Button1 component is when LED is ON and Button2 component is when LED is OFF. We assign corresponding pictures MIT2_LED1.png and MIT2_LED.png to these Button components.

13. From ListPicker1 component-specific drawer drag out when ListPicker1.BeforePicking do and when ListPicker1.AfterPicking do event handler blocks and drop them in the Viewer.

LED Controller

14. From ListPicker1 component-specific drawer drag out set ListPicker1.Elements to block and attach it to when ListPicker1.BeforePicking do event handler block.

LED Controller

15. From BluetoothClient1 component-specific drawer drag out BluetoothClient1.AddressesAndNames block and attach it to set ListPicker1.Elements to block.

LED controller

16. From Blocks Built-in Control drawer drag out the if then block and attach to when ListPicker1.AfterPicking do event handler block.

LED Controller

17.From BluetoothClient1 component-specific drawer drag out call BluetoothClient1.Connect address block and attach it to if part of the if then block.

LED Controller

18. From ListPicker1 component-specific drawer drag out ListPicker1.Selection block and attach it to call BluetoothClient1.Connect address block.

LED Controller

19. From ListPicker1 component-specific drawer drag out set ListPicker1.Elements to block and attach it to “then” part of the if then block.

LED Controller

20. From BluetoothClient1 component-specific drawer drag out BluetoothClient1.AddressesAndNames block and attach it to set ListPicker1.Elements to block.

LED Controller

21. From Button1 component-specific drawer drag out set Button1.Background color to block and attach it to when Button1.Click do block. Do the same with Button2 component.

LED Controller

22. From Block Built-in Colors drawer drag out color block (red and green) and attached as shown below.

LED Controller

23. From Clock1 component-specific drawer drag out when Clock1.Timer do event handler block and drop it in the Viewer.

LED Controller

24. From Blocks Built-in Control drawer drag out two if then blocks and attach to when Clock1.Timer do event handler block.

LED Controller

25. From BluetoothClient1 component-specific drawer drag out BluetoothClient1.IsConnected block and attach it to the “if” part of the if then block.

LED Controller

26. From Blocks Built-in Logic drawer drag out the not block and attach it as shown below.

LED Controller

27. From Label1 component-specific drawer drag out set Label1.Text to and set Label1.TextColor to blocks and attached them to “then” part of the if then blocks.

LED Controller

28. From Blocks Built-in Text drawer drag out two text string blocks and attach to set Label1.Text to blocks. So when the Bluetooth client is connected we have the text of Label1 set to “Connected”, otherwise – “Not connected”.

LED Controller

29.The last step is to set the colors of Label1 text depending of the status of connection. From Blocks Built-in,Colors drawer drag out red and green color blocks and attach them to the set Label1.TextColor to blocks as shown below.

LED Controller

30. The final Blocks diagram should be like that.

LED Controller

31. To have an app running without being connected to MIT App Inventor 2, you must “package” the app to produce an application package (apk file). To “package” the app to install on your device or to send to someone else, click the Build tab at the top of the screen. Select App (save to my computer) to download the app to your computer as an apk file.

LED Controller

32. Upload this package to your Android device (smartphone, tablet) and install. Open the LED Controller app.

33. You can also use Emulator to check the “LED Controller” app. You need to install MIT App Inventor 2 emulator, launch aiStarter. Go to Connect and select Emulator.

LED controller
LED Controller
LED Controller
LED Controller
LED Controller

You can read more about installation here:

2.Uploading the sketch to Arduino Uno

  1. Do wiring.
  2. Install and open Arduino IDE.
  3. Plug your Adruino Uno board into your PC and select the correct board and com port.
  4. Open up Arduino Serial monitor and set your baud to 9600 baud. The HC-05 or HC-6 expects commands to include a carriage return and newline characters (\r\n). You can add these automatically in the serial monitor by selecting “Both NL & CR” at the bottom of the window. You can also enter them manually in the form AT\r\n.
  5. Power off the bluetooth module or remove the RX and TX cables before verifying and uploading the LEDcontroller sketch (attached on the beginning of the project description).
  6. Verify and upload the LEDcontroller sketch to your Adruino Uno board.
  7. If you press the LED ON button on your smartphone the LED will turn ON (you will see that the picture of LED in the “LED Controller” app changed). If you press the LED OFF button on your smartphone the LED will turn OFF (you will see that the picture of LED in the “LED Controller” app changed).
  8. Congrats!!!You have made it!!
LED controller

Troubleshooting

  • You need to remove the RX and TX cables when you’re uploading the sketch to your Arduino.
  • Sometimes people connect the TX from the bluetooth module to the TX of the Arduino Uno – it’s wrong and won’t work. Make sure you connect it properly, the TX into RX and the RX into the TX.
  • If the HC-05 or HC-06 Bluetooth Module asks for a password -it is 1234.
  • Before testing the “LED Controller” app, test if you’ve made all the connections correctly. How you can do that? Simply enter numbers (‘1′, ‘0′) into your serial monitor and your LED should be turning on and off.

Do you have any questions? Leave a comment down below!

Thanks for reading. If you like this project probably you might like our next ones, so please support us by subscribing our blog and donating.

Summary

We have successfully built the LED Controller app with the MIT App Inventor 2.

AcoptexCom

Leave a Reply

Your email address will not be published.