Control RGB LED by Dragging

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

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.

Hardware components:

Arduino 101& Genuino 101 *1

DFRobot RGB LED breakout *1

Jumper wires (generic)*1

Breadboard (generic) *1

DFRobot Gravity: IO Expansion Shield *1

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:

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://ai2.appinventor.mit.edu/. 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.

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 BluetoothLEcomponent to StartScanning for available BLE devices and show related message on Screen Title.

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 BluetoothLEcomponent to disconnect and set two buttons to the originally state for another connection.

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.

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(same as arduino uno)!

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.

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.

#include <p>#include 
#define LEDr 9
#define LEDg 6
#define LEDb 3</p><p>BLEPeripheral blePeripheral;  
//BLE Peripheral Device (the board you're programming)
BLEService ControlLED("19B10010-E8F2-537E-4F6C-D104768A1214"); 
//initialize a BLE Service</p><p>// BLE LED Switch Characteristic - custom 128-bit UUID, read and writable by central
BLEUnsignedIntCharacteristic LEDStatus("19B10011-E8F2-537E-4F6C-D104768A1214", BLERead | BLEWrite  );</p><p>int incom = 0;
int r, g, b ;</p><p>void setup() {
  Serial.begin(9600);</p><p>  // set advertised local name and service UUID:
  blePeripheral.setLocalName("ControlLED");
  blePeripheral.setAdvertisedServiceUuid(ControlLED.uuid());</p><p>  // add service and characteristic:
  blePeripheral.addAttribute(ControlLED);
  blePeripheral.addAttribute(LEDStatus);</p><p>  // begin advertising BLE Light service:
  blePeripheral.begin();</p><p>  Serial.println("BLE RGBLED control.");</p><p>  // set Light pin to output mode
  pinMode(LEDr, OUTPUT);
  pinMode(LEDg, OUTPUT);
  pinMode(LEDb, OUTPUT);
}</p><p>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());</p><p>    // 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);
  }</p><p>  // when the central disconnects, print it out:
  Serial.print(F("Disconnected from central: "));
  Serial.println(central.address());
}</p>