How to Control an RGB LED Using Arduino and Bluetooth Module

by jorgeider in Circuits > Arduino

540 Views, 0 Favorites, 0 Comments

How to Control an RGB LED Using Arduino and Bluetooth Module

F8GXBSKKTYDLECF.png

This project aims to control the colors of an RGB LED through a smart phone and a HC-06 Bluetooth module.

Introduction

fig-10.png

In this tutorial we are going to create a project to control the colors of an RGB LED through the smart phone via Bluetooth. In this project we will use only six colors through buttons, however, you can use three sliders, so that each slider represents an LED color (Red, Green and Blue), and the three colors combined will generate all the possible colors that an LED RGB can make available. In our case, when clicking on a button the corresponding color will be shown in a Layout component, and the value in decimals of that color in a label. In addition, a value from 1 to 6 will be sent to the Arduino Bluetooth. After receiving the information, the Arduino will transmit the information to the LED to light up the corresponding color. We will show step by step the diagrams of the project and their proper connections, as well as the codes, both in Kodular and Arduino.

Now let's see what components we need to carry out our project:

Necessary material:

• 1 Arduino Uno (recommended) or compatible.

• 1 Protoboard.

• 1 RGB LED

• 3 220 Ohm resistors.

• 1 HC-06 Bluetooth Module.

• 1 9V battery and its respective connector.

• Some jumpers

You can buy these products at the following links:

· Arduino Uno: https://amzn.to/3lHKUAS

· Protoboard: https://amzn.to/3lGTGyQ

· Bluetooth HC-06: https://amzn.to/3AnQ09c

· LEDs: https://amzn.to/3rZvd96

· Battery 9V: https://amzn.to/3fINUcf

· 9V Battery Support: https://amzn.to/3itJ7NG

· Jumpers: https://amzn.to/2X6oZcj

Component Images:

components.png

These are the images of the components described above:

RGB LED pinout (from left):

 

•        Red

•        Ground

•        Green

•        Blue


HC-06 Bluetooth Module pinout (from left):

•        RX

•        TX

•        GND

•        VCC


Connecting the Components:

fig-5a.png

Make the connections according to the diagram above:

The Arduino Code (Sketch):

Having made all the connections, let's now see the Arduino code. To do this, run the Arduino IDE and type the following code:


1.     /*

2.     Project – How to Control an RGB LED Using Arduino and Bluetooth HC-06.

3.     Author: Prof. Jorge Eider F. da Silva.

4.     Date: September/2021.

5.     */

6.     // Set the pins for the RGB LED.

7.     int redPin = 8; // Set pin 8 to the red LED.

8.     int greenPin = 9; // Set pin 9 to the green LED.

9.     int bluePin = 10; // Set pin 10 to blue LED.

10. //

11. int t;

12. // Function to generate the colors.

13. void setColor(int color1, int color2, int color3)

14. {

15.   digitalWrite(redPin, color1);

16.   digitalWrite(greenPin, color2);

17.   digitalWrite(bluePin, color3);

18. }

19. //

20. void setup()

21. {

22. // Start the serial connection.

23.    Serial.begin(9600);

24.  // Set LED pins as output.

25.    pinMode(redPin, OUTPUT); // Set the red LED as output.

26.    pinMode(greenPin, OUTPUT); // Set the green LED as output.

27.    pinMode(bluePin, OUTPUT); // Set the blue LED as output.

28. }

29. //

30. void loop()

31. {

32. // Read a Bluetooth value if available.

33.   if (Serial.available()) {

34.     t = Serial.read();

35.     Serial.println(t);

36.   }

37. // If the value of t is 1, the red LED lights up.

38.   if (t == 1) {

39.     setColor(255, 0, 0);

40. // Print the Red color on the Monitor.

41.     Serial.println("Color: Red");

42.   }

43. // If the value of t is 2, the green LED lights up.

44.   if (t == 2) {

45.     setColor(0, 255, 0);

46. // Print the Green color on the Monitor.

47.     Serial.println("Color: Green");

48.   }

49. // If the value of t is 3, the blue LED lights up.

50.   if (t == 3) {

51.     setColor(0, 0, 255);

52. // Print the Blue color on the Monitor.

53.     Serial.println("Color: Blue");

54.   }

55. // If the value of t is 4, the yellow LED lights up.

56.   if (t == 4) {

57.     setColor(255, 255, 0);

58. // Print the Yellow color on the Monitor.

59.     Serial.println("Color: Yellow");

60.   }

61. // If the value of t is 5, the brown LED lights up.

62.   if (t == 5) {

63.     setColor(128, 0, 0);

64.  // Print the Brown color on the Monitor.

65.    Serial.println("Color: Brown");

66.   }

67. // If the value of t is 6, the purple LED lights up.

68.   if (t == 6) {

69.     setColor(255, 0, 255);

70. // Print the Purple color on the Monitor.

71.     Serial.println("Color: Purple");

72.   }

73. }


Save this file with the name: KodularLEDRGBluetooth, or download the file from the link:

www.simuladosetutoriais.com/sketches/KodularLEDRGBBluetooth-English.ino


How to upload the code to Arduino:

1.     Unplug the Bluetooth module (if connected).

2.     Disconnect the battery plug (if connected).

3.     Connect the USB cable (computer to Arduino).

4.     In the Arduino IDE, click on the Tools menu and choose the port for the connection.

5.     Click on the second icon: Upload, to upload the code.

6.     Once this is done, the process of loading the code to Arduino will be carried out. If there is any problem with the load, the line with the error will be highlighted. Find out what it is, fix and reload the code.

7.     If the code has loaded without any problem, disconnect the USB cable from the Arduino, it is no longer needed.


The App on Kodular:

fig-7b.png

Now let's make our App on Kodular:

Now let's see how to create our project's application. For this, we have two steps:

•        The Layout

•        The Code


Let's see how to create our Layout:

1.     Run Kodular (creator.kodular.io). If you don't have an account yet, create one.

2.     On the main screen, click on the Create project option.

3.     In the window that appears, enter the name of your project. In our case: KodularLEDRGBBluetoothEnglish.

4.     On the next screen. Do not make any changes. Click Finish.

5.      Once this is done, the Kodular editor will be shown with all its components and a sample of a cell phone in the center. It is on this cell that we will place our application components and configure their properties.


So here we go:

In the left column are all the components that exist in Kodular. To use them just click and drag to the inside of the cell phone picture. The All Components column is where the components that were added to the project are located. At the moment there is only the Screen1 component, which is the main screen.

We need to change the title of this screen to the name of our app, ie LEDRGBBluetooth-English.


For that:

1.     In the properties column, in the Title field, type: LEDRGBBluetooth-English.

2.     Change the Align Horizontal property to: Center – 3. This will make all components that are placed on the mobile screen to be centered.

3.     In the Palette column, under the User Interface category, select and drag the List Picker component to the phone. It will allow us to select the list of Bluetooth devices available on our mobile.

4.     Use the small pencil in the All Components column and change the name of this component to: lpSelectBT.


5.     In the Properties column for that component, change the following properties:

·        Check the text box: Font Bold.

·        Font Size for: 20.

·        Height: 40px.

·        Width: 60%.

·        Image: load an image in the shape of a button.

·        Text: Connect.

·        Text Color: Blue.

 

6.     In the Palette column, in the User Interface category, select and drag the Label component to the phone. Use the small pencil in the All Components column and change the name of this component to: lblMessage. Change the following properties:

·        Check the text box: Font Bold.

·        Font Size for: 16.

·        Text: Message.

·        Text Alignment: Center: 1.

·        Text Color: Blue.

 

7.     In the Palette column, in the Layout/General category, select and drag the Horizontal Arrangement component to the phone. Change the name of this component to: layoutOrgHorizontal1. Change the following properties:

·        Align Horizontal: Center: 3.

·        Background Color: Red.

·        Height: 30px.

·        Width: Fill Parent.

 

8.     In the Palette column, in the User Interface category, select and drag the Label component to the phone. Use the small pencil in the All Components column and change the name of this component to: lblValueColor. Change the following properties:

·        Check the text box: Font Bold.

·        Font Size for: 18.

·        Text: 0.

·        Text Alignment: Center: 1.

·        Text Color: White.

 

9.     In the Palette column, in the Layout/General category, select and drag the Table Arrangement component to the mobile. Change the name of this component to: layoutTable. Change the following properties:

·        Columns: 2.

·        Rows: 3.

 

10. In the Palette column, under the User Interface category, select and drag six Button components into the layout. Change the names of these components to: btnRed, btnGreen, btnBlue, btnYellow, btnBrown and btnPurple. Change the following properties for all of them:

·        Background Color: Red, Green, Blue, Yellow, Brown and Purple.

·        Check the text box: Font Bold.

·        Font Size for: 14.

·        Width: 80px.

·        Text: Red, Green, Blue, Yellow, Brown and Purple.

·        Text Color: White.

 

11. In the Palette column, in the Layout/General category, select and drag the Horizontal Arrangement component to the phone. Change the name of this component to: layoutOrgHorizontal2. Change the following properties:

·        Align Horizontal: Center: 3.

·        Background Color: Blue.

·        Height: 20px.

·        Width: Fill Parent.

 

12. In the Palette column, in the Layout/General category, select and drag the Horizontal Arrangement component to the phone. Change the name of this component to: layoutColors. Change the following properties:

·        Align Horizontal: Center: 3.

·        Background Color: Black.

·        Height: 80px.

·        Width: 80px.

 

13. In the Palette column, under the User Interface category, select and drag the Button component into the layout. Use the small pencil in the All Components column and change the name of this component to: btnDisconnect. Change the following properties:

·        Check the text box: Font Bold.

·        Font Size for: 18.

·        Height: Automatic.

·        Width: 45%.

·        Image: Insert an image in the shape of a rectangular button. See the project example.

·        Text: Disconnect.

·        Text Alignment: Center: 1.

·        Text Color: White.


To finish our layout:

14. In the Palette column, in the Connectivity category, select and drag the Bluetooth Client component to the mobile phone (this component will not be seen on the mobile phone), only in the All Components category.

15. Change the name of this component to: btClient.

Once that's done, the layout of our application should look like image above:


The Code on Kodular:

Now, let's look at the code for our app:

Once we've finished the layout, let's now look at how to create the code and make our app workable.

For that:

1.     Click on the Blocks button (right side of the screen).

2.      On the Blocks screen, create the blocks according to Kodular-Code file attached:

Downloads

How the Project Works:

fig-17.png

Now let's see how the Project works:

1.     Initially connect the Bluetooth module in the proper position according to Step 3.

2.     Connect the battery to the Arduino. Once this is done, the Bluetooth module LED should be blinking.

3.     Open the Companion app and click the Scan QR Code option.

4.     In the Kodular Editor, click on Test à Connect to companion menu.

5.     A window with a QR Code will be shown, as shown in Figure 17.


1.     Move the cell phone closer to the QR Code shown.

2.     After processing, a copy of the Editor app will be transferred to your mobile.

3.     In the app, click the Connect button to show the list of available devices. Select the HC-06 module.

4.     If the connection is successful, the Bluetooth LED will be on permanently (not blinking), and the Message label will change its text to “Connected”.

5.     When clicking on one of the buttons, the motor shaft should change position according to the selected button.

6.     If the Bluetooth LED starts blinking again, the connection has been lost for some reason. In that case, perform step 8 again.

7.     If the Disconnect button is clicked, the connection will be terminated and the Message label will change its text to “Disconnected”.


And here we finish our project. See the video in the next step.


If you want to know more projects with Arduino, see our ebooks on the subject:

In Portuguese:

Como Construir um Carro Robótico de 3 Rodas com App Inventor e Arduino via Bluetooth

https://amzn.to/2VFIs2w

In English:

How to Build a 3-Wheel Robotic Car with App Inventor and Arduino via Bluetooth (English Edition)

https://amzn.to/3yyeImO

Kodular - Componentes: Volume 1

https://amzn.to/3Cqzck4

Kodular - Componentes: Volume 2

https://amzn.to/3fISiIa

Arduino para Iniciantes

https://amzn.to/3Aftwau

Programando Com o Arduino – 12 Projetos

https://amzn.to/3ywLZPu

Arduino Sensores – 36 Projetos

https://www.simuladosetutoriais.com/Livros/livros-arduino36.html


Any questions about the project, please use the following contacts:

e-mail: jorge.eider@gmail.com

WhatsApp: (55)(084) 999-411990.

Site: www.simuladosetutoriais.com

Good Luck.



Video From the Project

Download the video to see how the project works: