Basics project 107v Building RGB LED Control app with MIT App Inventor 2

Basics: Project 107v

Project name: Building RGB LED Control app with MIT App Inventor 2

Tags: MIT App Inventor 2, Android, RGB LED control, Arduino, Arduino Uno

Attachments: RGBLEDControl sketch, RGBLEDControl.apk, RGBLEDControl.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 2 pcs (1pc 1 KOhm and 1 pc 2KOhm)

7. Smartphone with Android OS

8. RGB LED module 1 pc

General

We will learn how to build RGB LED Control app with MIT App Inventor 2.

This Android app will control the color of RGB LED with a smartphone via Bluetooth.

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.

Understanding the RGB LEDs

You can read more 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

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.

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

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 Button (Button1) component, drop it into the Viewer which is in the middle of the Designer;
2. From User Interface Pallete, click and drag out Label (Label1) component, drop it into the Viewer;
3. From User Interface Pallete, click and drag out three Slider (Slider1,Slider2,Slider3) components, drop them into the Viewer;
4. From User Interface Pallete, click and drag out Button (Button2) component, drop it into the Viewer;
5. From User Interface Pallete, click and drag out ListPicker (ListPicker2) component, drop it into the Viewer;
6. From User Interface Pallete, click and drag out Label (Label2) component, drop it into the Viewer;
7. 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;
8. 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.

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, Scrollable – selected, Title to RGB LED Control;
2. Click on Button1 component, change Width to 100 pixels, Height to 100 pixels, Text to empty, BackgroundColor to White;
3. Click on Label1 component, change Text to LED color, FontSize to 16;
4. Click on Slider1 component, change ColorLeft to Red, ColorRight to Light Grey, Width to 80 percent, MaxValue to 255, MinValue to 0, ThumbPosition to 0;
5. Click on Slider2 component, change ColorLeft to Green, ColorRight to Light Grey, Width to 80 percent, MaxValue to 255, MinValue to 0, ThumbPosition to 0;
6. Click on Slider3 component, change ColorLeft to Blue, ColorRight to Light Grey, Width to 80 percent, MaxValue to 255, MinValue to 0, ThumbPosition to 0;
7. Click on Button2 component, change Text to Change color, FontBold – selected, FontSize to 20, Shape – rounded;
8. Click on ListPicker1 component, change Text to Connect Bluetooth, FontBold – selected, FontSize – 16,Shape – rounded ;
9. Click on Label1 component, change Text to Not Connected, TextColor to Red, FontBold – selected.

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.

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

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

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

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

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

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

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

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

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

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

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

18. From Blocks Built-in Logic drawer drag out the not block.

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.

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”.

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.

30. Let’s initialize global variables red_value, green_value, blue_value equal 0. From Blocks Built-in Variables drawer drag out three initialize global name to blocks into the Blocks Viewer area. Give the names, instead of the name, – red_value, green_value, blue_value.

31.From Blocks Built-in Math drawer drag out three number blocks and add them to global variables’ blocks.

32.From Slider1 component-specific drawer drag out the when Slider1.PositionChanged do even handler block and drop it in the Blocks Viewer area. Do the same with Slider2 and Slider3 components.

33. Point on red_value and drag out set global red_value to block and add as shown below. Do the same with green_value and blue_value.

34.Point on Thumb position and drag out the get ThumbPosition blocks. Add them as shown below.

35.From Button2 component-specific drawer drag out the when Button2.Click do event handler block and drop it in the Blocks Viewer area.

36.From Button1 component-specific drawer drag out the set Button1.BackgroundColor to block and add it to the when Button2.Click do block.

37.From Blocks Built-in Colors drawer drag out the make color block and add as shown below.

38. Point on the red_value and drag out the get global red_value block and add as shown below. Do the same with green_value and blue_value.

39. We need to create the global variable for our color message. From Blocks Built-in Variables drawer drag out three initialize global name to blocks into the Blocks Viewer area. Give the name – colorMessage.

40.From Blocks Built-in Text drawer drag out the text string block and add as shown below. Give the name – R255G255B255.

41.From Blocks Built-in Control drawer drag out the if then block and add as shown below.

42.Duplicate and add BluetoothClient1.IsConnected block to “if” part as shown below.

43.Point on colorMessage and drag out three set global colorMessage to blocks and add as shown below.

44.From Blocks Built-in Text drawer drag out the three text string blocks and three join blocks, add them as shown below. Give the names to text string blocks – R, G, B.

45.Point on red_value and drag out the get global red_value and add as shown below. Do the same for green_value and blue_value.

46.From BluetoothClient1 component-specific drawer drag out three call BluetoothClient1.SendText txt blocks and add them as shown below.

47.From colorMessage drag out the three get global colorMessage blocks and add them as shown below.

48. The final Blocks diagram should be like that.

49. 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.

50. Upload this package to your Android device (smartphone, tablet) and install. Open the “RGB LED Control” app.

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

You can read more about installation here:

Basics: Project 107b How to install emulator for MIT App Inventor 2

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 RGBLEDControl sketch (attached on the beginning of the project description).
6. Verify and upload the RGBLEDControl sketch to your Adruino Uno board.
7. Move the sliders and click on Change color button to set your RGB LED color to the selected color.
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.
• If you can not find bluetooth module – make sure that you have paired your smartphone with your bluetooth module. Go to your bluetooth settings and search for the available devices. Your bluetooth module device should appear (it’s often called: linvor, HC-06, HC-04, HC-05 …). Pair with it.
• If your Android app is connected to your bluetooth module, it should display the “Connected” message. Otherwise, press the “Connect Bluetooth” to establish a bluetooth communication.

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 learnt how to build RGB LED Control app with MIT App Inventor 2.

Project files

Attached on the beginning of this project description