Published May 18, 2017 © GPL3+

Control RGB LED by Dragging – Arduino 101 & App Inventor

This topic will teach you how to control a RGB LED on an Arduino 101 board with an Android device (MIT App Inventor).

IntermediateFull instructions provided3 hours17,029

Control RGB LED by Dragging – Arduino 101 & App Inventor

Things used in this project

Hardware components

Arduino 101

DFRobot RGB LED breakout

Jumper wires (generic)

Breadboard (generic)

DFRobot Gravity: IO Expansion Shield

Software apps and online services

Arduino IDE

App Inventor

Story

Introduction

This topic will teach you how to control a RGB LED on an Arduino 101 board with an Android device. We used App Inventor to make Android app because it is graphical (just like Scratch) and can easily build .apk installation file for almost any Android device. For who have no Android devices or schools, App Inventor has emulator for basic usage as well (hardware-related functions like sensors and Bluetooth is not available on emulator).

After this topic, you can attach more RGB LEDs or other display modules to achieve more astonishing effect. Try to build your own Philip HUE light bulb!

Note: This topic is using Arduino 101 board for its onboard BLE communication ability. If you are using earlier Bluetooth module like HC05 or HC06, you should use App Inventor’s BluetoothClient instead of BluetoothLE component in this topic.

Source code

Video

Let’s start

This topic will tell you how to get the pixel’s RGB intensity of where you touched, then send these data to Arduino 101 to control a RGB LED attached.

Hardware

We are using RGB LED (common cathode), please attach its R G B terminal to Arduino 101’s pin 9, 6 and 3 (~PWM of course), as show below. If yours is common anode, please refer to its data sheet and modify the circuit.

Software

Software can be divided into App Inventor and Arduino 101, please see sections below:

App Inventor

App Inventor is a graphical Android app browser-based IDE, please login with your gmail account: http://ai2.appinventor.mit.edu/. For more tutorials, please visit: http://www.appinventor.tw.

Designer

Please add components below to your project, numbers in parentheses means how many you have to add, for example Button(2) means there are two button components in your project. You don’t have to rename the component as we did, but for better readability we suggest you to rename components of the same type as different names.

Canvas(1): get touch point’s coordinates for RGB color intensity.

Button(2):

Btn_Connect: Ask BluetoothLE component to connect with specified BLE device when clicked.

Btn_DisConnect: Ask BluetoothLE component to disconnect with specified BLE device when clicked.

Sliders(3): Three sliders to represent the RGB value of touch point.

BluetoothLE(1): Send/ receive data through Bluetooth Low Energy protocol.

Clock(1): Ask BluetoothLE component to send data to Arduino 101 periodically.

Blocks

1. Initialize

Declare variables. addr is the BLE device(Arduino 101)’s hardware address, which is labeled at the back of your Arduino 101. r, g and b are numerical variables to save the RGB value of the touch point.

When your app is initializing (Screen1.Initialize event), we ask BluetoothLE component to StartScanning for available BLE devices and show related message on Screen Title.

2. Connect / Disconnect

When Btn_Connect is clicked, we ask BluetoothLE component to connect with specified BLE device (addr variable). Then set Btn_DisConnect to be enabled and Btn_Connect to be disabled. The reason here is simple: you can no way disconnect when you have nothing connected, vice versa. Finally show “Connected” message on the screen title.

On the other hand, when Btn_DisConnect is clicked, we ask BluetoothLE component to disconnect and set two buttons to the originally state for another connection.

3. Drag your finger to get the RGB or value of the touch point

In Ball.Dragged event, when this ball is dragged (means your finger tip’s location) will do things below:

A. Clear canvas.

B. Use GetPixelColor to show the color intensity of that touch point on where you touched canvas. This value is a quite big negative integer; in step D we will extract the real color value from this integer.

C. Move the Ball to where we’ve touched.

D. Use select list item with split to get the Red, Green and Blue value of where user has touched, the show the information on Lable. Use select list item and split color to extract it’s item #1, #2 and #3, then show the final R G B values on Label1.

4. Update slider

Next still in the Ball.Dragged event, we will update every Slider’s thumbPosition and r, g, b three variables’ value to canvas location’s color intensity where user has touched. We are ready to send data to Arduino 101!

If you feel that the code here is too tedious, you can make them into a procedure, which can make your screen more simplified and readable.

5. Send data back to App Inventor

Clock1 component will activate Clock.Timer event every second, which will first combine the red, green and blue value of the touch point together then send the combination result by BluetoothLE.WriteIntValue. For example (128, 34, 255) will be combined as 128034255, Arduino will divide them back to three independent integers. You can modify the TimerInterval value of Clock1 component in case to achieve a better operation experience.

Arduino 101

[source code] First in setup() function, a special library is included: <CurieBLE.h>(line 1), which is specially designed for Arduino 101’s Intel Curie chip. We’ve prepared all the settings for BLE (line 2~31). As for UUID, you can sue websites like UUID generator (https://www.uuidgenerator.net/) to create you own UUID. Please notice that UUID of service and characteristics are one-digit different.

In loop() function within the if (LEDStatus.written()) condition from line 53 to 67, we use incom = LEDStatus.value(); to get the integer value sent from App Inventor. Arduino will separate this integer into another 3 integer representing the RGB LED’s light intensity. Finally we use analogWrite() to control corresponding pins(line 63~65).

References

1. Arduino 101 product page

2. New $30 Sensor-Packed, Curie-Powered Arduino 101 | Make

3. Arduino 101 LED Blink with Android tutorial

#include <CurieBLE.h>
#include <stdlib.h>
#define LEDr 9
#define LEDg 6
#define LEDb 3

BLEPeripheral blePeripheral;  
//BLE Peripheral Device (the board you're programming)
BLEService ControlLED("19B10010-E8F2-537E-4F6C-D104768A1214"); 
//initialize a BLE Service

// BLE LED Switch Characteristic - custom 128-bit UUID, read and writable by central
BLEUnsignedIntCharacteristic LEDStatus("19B10011-E8F2-537E-4F6C-D104768A1214", BLERead | BLEWrite  );

int incom = 0;
int r, g, b ;

void setup() {
  Serial.begin(9600);

  // set advertised local name and service UUID:
  blePeripheral.setLocalName("ControlLED");
  blePeripheral.setAdvertisedServiceUuid(ControlLED.uuid());

  // add service and characteristic:
  blePeripheral.addAttribute(ControlLED);
  blePeripheral.addAttribute(LEDStatus);

  // begin advertising BLE Light service:
  blePeripheral.begin();

  Serial.println("BLE RGBLED control.");

  // set Light pin to output mode
  pinMode(LEDr, OUTPUT);
  pinMode(LEDg, OUTPUT);
  pinMode(LEDb, OUTPUT);
}

void loop() {
  // listen for BLE peripherals to connect:
  BLECentral central = blePeripheral.central();
  // if a central is connected to peripheral:
  if (central) {
    Serial.print("Connected to central: ");
    // print the central's MAC address:
    Serial.println(central.address());

    // while the central is still connected to peripheral:
    while (central.connected()) {
      //Serial.println(LEDStatus.written());
      if (LEDStatus.written())
      {
        incom = LEDStatus.value();//take 110225101 for exmaple
        r = incom / 1000000 ;//110
        g = (incom / 1000 - r * 1000) ; //110225-110000=225
        b = (incom - r * 1000000 - g * 1000) ; //110225101-110000000-2250000=101
        Serial.println(incom);
        Serial.println(r);
        Serial.println(g);
        Serial.println(b);  //show RGB data on serial monitor
        analogWrite(LEDr, r);
        analogWrite(LEDg, g);
        analogWrite(LEDb, b); //Light up LED
        delay(10);
      }
    }
    digitalWrite(LEDr, LOW);
    digitalWrite(LEDg, LOW);
    digitalWrite(LEDb, LOW);  //LED turn off
    delay(100);
  }

  // when the central disconnects, print it out:
  Serial.print(F("Disconnected from central: "));
  Serial.println(central.address());
}

Credits

CAVEDU Education

11 projects • 28 followers

We provide tutorials of robotics, Arduino, Raspberry Pi and IoT topics. http://www.cavedu.com

DFRobot

62 projects • 144 followers

Empowering Creation for Future Innovators

Control RGB LED by Dragging – Arduino 101 & App Inventor