Basics project 107i Building an app to control LED with MIT App Inventor 2


Basics: Project 107i

Project name: Building an app to control LED with MIT App Inventor 2

Tags: MIT App Inventor 2, LED, Bluetooth, LED control

Attachments: BluetoothLED.aia, BluetoothLED.apk, ArduinoBluetoothLEDcontrol sketch, led101.jpg, led102.jpg

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 a simple app to control LED with the MIT App Inventor 2 software. BluetoothLED is an app that you can build in a very short time. We will create some buttons that will turn the LED ON/OFF.

We assume that you have read our previous projects about MIT App Inventor 2.

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 BluetoothLED. Click on OK button. Your project will be saved.

start new project
LED control

3.Go to Designer editor tab.

4.Select components to design your app. To use a component Label1 in your app, you need to click and drag it from the User Interface palette onto the Viewer in the middle of the Designer.

LED control

5. A ListPicker is a button that, when clicked on, displays a list of texts for the user to choose among. To use a component ListPicker1 in your app, you need to click and drag it from the User Interface palette onto the Viewer in the middle of the Designer. To change the text for the ListPicker1, in the Properties pane, click on the Text field and replace “Text for ListPicker1” with “Choose device to connect to”.

LED control
LED control
LED control

6. If we want to align the text and buttons on Screen1, change it’s title name – select Screen1 in the Components and go to Properties Screen1. Select in AlignHorizontal field – Center 3, scrollable -tick on box, in the Title field change “Screen1” to “Bluetooth LED control“.

LED control

7.Select Label1 component and go to the Properties Label1. In the Text field change “text for Label1” to default text “Not connected”. Change in the TextColor color to red.

LED control

8.To use a component Canvas1 in your app, you need to click and drag it from the Drawing and Animation palette onto the Viewer in the middle of the Designer.

LED control

9. To upload the default background image select Canvas1 component and go to the Properties Canvas1. In BackgroundImage field click on None.., then click on Upload file, then click on Choose file and look for led101,jpg file (LED off) which is attached on the beginning of this project, select this file and click on Open, OK.

LED control
LED control

We need to add another picture of LED – led102.jpg (LED ON) to our Android app. Go to Media and click on UploadFile button. Then click on ChooseFile button, find and select led102.jpg. Click on Open button and then click on OK button. This file will be uploaded to Android app project.

LED control

10. To use a components Button1 and Button2 in your app, you need to click and drag it from the User Interface palette onto the Viewer in the middle of the Designer. Select Button1 component and go to the Properties Button 1. Change BackgroundColor field – green, FontSize field -20, FontBold – tick on box, Shape – rounded, Text field – LED ON.

LED control
LED control

Select Button2 component and go to the Properties Button 2. Change BackgroundColor field – red, FontSize field -20, FontBold – tick on box, Shape – rounded, Text field – LED OFF.

LED control

11. Optional. You can add your Label2 and TextBox1.

LED control
LED control

12. Under Palette, click on the Sensor drawer and drag out a Clock component and place it in the Viewer. Wherever you drop it, it will appear in the area at the bottom of the Viewer marked Non-visible components.

LED control

13. Under Palette, click on the Connectivity drawer and drag out a BluetoothClient component and place it in 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 control

14. 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 the Blocks button in the upper right of your screen to go to the Blocks Editor.

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

LED control
LED control

13. Click the BluetoothClient1 drawer and drag the call BluetoothClient1.Send1ByteNumber number command block and connect it to the “do” section of the when Button1.Click block. The blocks connect together like puzzle pieces and you can hear a clicking sound when they connect.

14. Click the BluetoothClient1 drawer and 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 control

15. 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 50 will be sent) – Arduino receive it as 2.

LED control

16. From Canvas1 drawer drag out set Canvas1.BackgroundImage to blocks and attach to event handlers.

LED control

17. From Blocks Built-in, Text drawer drag out the text string blocks and attach to set Canvas1.BackgroundImage to blocks.

LED control

18. From ListPicker1 drawer drag out when ListPicker1.BeforePicking do and when ListPicker1.AfterPicking do event handler blocks and drop them in the Viewer.

LED control

19. From ListPicker1 drawer drag out set ListPicker1.Elements to block and attach it to when ListPicker1.BeforePicking do event handler block.

LED control

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

LED control

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

LED control

22. From BluetoothClient1 drawer drag out call BluetoothClient1.Connect address block and attach it to if part of the if then block.

LED control

23. From ListPicker1 drawer drag out ListPicker1.Selection block and attach it to call BluetoothClient1.Connect address block.

LED control

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

LED control

25. From BluetoothClient1 drawer drag out BluetoothClient1.AddressesAndNames block and attach it to set ListPicker1.Elements to block.

LED control

26. From Clock1 drawer drag out when Clock1.Timer do event handler block and drop it in the Viewer.

LED control

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

LED control

28. From BluetoothClient1 drawer drag out BluetoothClient1.IsConnected block and attach it to the “if” part of the if then block.

LED control

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

LED control

30. From Label1 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 control

31. 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 control

32.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 control

33. The final Blocks diagram should be like that.

LED control

34. 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 control

35. Upload this package to your Android device (smartphone, tablet) and install. Open the BluetoothLED app.

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 ArduinoBluetoothLEDcontrol sketch (attached on the begining of the project description).
  6. Verify and upload the ArduinoBluetoothLEDcontrol 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 BluetoothLED app changed too). If you press the LED OFF button on your smartphone the LED will turn OFF (you will see that the picture of LED in BluetoothLED app changed too).
  8. Congrats!!!You have made it!!

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 “BluetoothLED” app, test if you’ve made all the connections correctly. How you can do that? Simply enter numbers (‘1′, ‘2′) 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 simple app to control LED with the MIT App Inventor 2 software.

We have learned 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.

AcoptexCom

Has one comment to “Basics project 107i Building an app to control LED with MIT App Inventor 2”

You can leave a reply or Trackback this post.
  1. ปั๊มไลค์ - 2020 June 2 Reply

    Like!! I blog frequently and I really thank you for your content. The article has truly peaked my interest.

Leave a Reply

Your email address will not be published.