8.10 Android Application - RGB LED Operation via Arduino and Bluetooth

The objective of this project is to develop an Android application capable of manipulating the hue of an RGB LED through a smartphone using Bluetooth technology.

This Android application will be constructed utilizing a complimentary web-based platform known as MIT App Inventor 2. The project presents an excellent opportunity to gain familiarity with the interfacing of an Arduino with a smartphone.

Required Components

In this project, we need the following components.

It’s definitely convenient to buy a whole kit, here’s the link:

Name

ITEMS IN THIS KIT

LINK

ESP32 Starter Kit

320+

ESP32 Starter Kit

You can also buy them separately from the links below.

COMPONENT INTRODUCTION

PURCHASE LINK

ESP32 WROOM 32E

BUY

ESP32 Camera Extension

-

Breadboard

BUY

Jumper Wires

BUY

Resistor

BUY

RGB LED

BUY

1. Creation of the Android Application

The Android application will be fashioned using a free web application known as MIT App Inventor. MIT App Inventor serves as an excellent starting point for Android development, owing to its intuitive drag-and-drop features allowing for the creation of simplistic applications.

Now, let’s begin.

  1. Here is the login page: http://ai2.appinventor.mit.edu. You will require a Google account to register with MIT App Inventor.

  2. After logging in, navigate to Projects -> Import project (.aia) from my computer. Subsequently, upload the control_rgb_led.aia file located in the path esp32-starter-kit-main\c\codes\iot_10_bluetooth_app_inventor.

    ../../_images/10_ble_app_inventor1.png
  3. Upon uploading the .aia file, you will see the application on the MIT App Inventor software. This is a pre-configured template. You can modify this template after you have familiarized yourself with MIT App Inventor through the following steps.

    ../../_images/10_ble_app_inventor2.png
  4. In MIT App Inventor, you have 2 primary sections: the Designer and the Blocks.

    ../../_images/10_ble_app_inventor3.png
  5. The Designer allows you to add buttons, text, screens, and modify the overall aesthetic of your application.

    ../../_images/10_ble_app_inventor2.png
  6. Subsequently, you have the Blocks section. The Blocks section facilitates the creation of bespoke functions for your application.

    ../../_images/10_ble_app_inventor5.png
  7. To install the application on a smartphone, navigate to the Build tab.

    ../../_images/10_ble_app_inventor6.png
    • You can generate a .apk file. After selecting this option, a page will appear allowing you to choose between downloading a .apk file or scanning a QR code for installation. Follow the installation guide to complete the application installation.

    • If you wish to upload this app to Google Play or another app marketplace, you can generate a .aab file.

2. Upload the code

  1. Build the circuit.

    ../../_images/rgb_pin.jpg

    The RGB LED comprises 4 pins: the elongated pin is the common cathode pin, typically connected to GND; the pin to the left of the longest pin represents Red; and the two pins on the right symbolize Green and Blue.

    ../../_images/2.3_color_light_bb.png
  2. Subsequently, connect the ESP32-WROOM-32E to your computer using a USB cable.

    ../../_images/plugin_esp32.png
  3. Open the iot_10_bluetooth_app_inventor.ino file situated in the esp32-starter-kit-main\c\codes\iot_10_bluetooth_app_inventor directory, or copy the code into the Arduino IDE.

  4. Upon selecting the appropriate board (ESP32 Dev Module) and port, click the Upload button.

3. App and ESP32 Connection

Ensure that the application created earlier is installed on your smartphone.

  1. Initially, activate Bluetooth on your smartphone.

    ../../_images/10_ble_mobile1.png
  2. Navigate to the Bluetooth settings on your smartphone and find ESP32RGB.

    ../../_images/10_ble_mobile2.png
  3. After clicking it, agree to the Pair request in the pop-up window.

    ../../_images/10_ble_mobile3.png
  4. Now open the recently installed Control_RGB_LED APP.

    ../../_images/10_ble_mobile4.png
  5. In the APP, click on Connect Bluetooth to establish a connection between the APP and ESP32.

    ../../_images/10_ble_mobile5.png
  6. Select the xx.xx.xx.xx.xx.xx ESP32RGB that comes up. if you changed SerialBT.begin("ESP32RGB"); in the code, then just select the name of your setting.

    ../../_images/10_ble_mobile6.png
  7. If you have been waiting for a while and still can’t see any device names, it may be that this APP is not allowed to scan surrounding devices. In this case, you need to adjust the settings manually.

    • Long press the APP icon and click on the resulting APP Info. If you have another method to access this page, follow that.

      ../../_images/10_ble_mobile8.png
    • Navigate to the Permissions page.

      ../../_images/10_ble_mobile9.png
    • Locate Nearby devices, and select Always to allow this APP to scan for nearby devices.

      ../../_images/10_ble_mobile10.png
    • Now, restart the APP and repeat steps 5 and 6 to successfully connect to Bluetooth.

  8. Upon successful connection, you will automatically return to the main page, where it will display connected. Now you can adjust the RGB values and change the color of the RGB display by pressing the Change Color button.

    ../../_images/10_ble_mobile7.png