Detailed Practical guide about how to control RGB LED using Arduino and Android

This a detailed practical guide about how to control RGB LED connected to Arduino using an Android app. Discover how to integrate Arduino and Android and how to develop an Android app that exchanges data with Arduino

This Arduino tutorial describes how to integrate Arduino and Android to control RGB LED. The target of this Arduino project is describing how to build a DIY IoT RGB LED controlled by a smartphone. This is an interesting topic because it mixes two ecosystems together and you can apply this Arduino IoT project in different scenarios.  First of all, this project teaches how to integrate Arduino and Android so that they exchange data.  Even if this tutorial describes how to control LEDs connected to Arduino using an Android App, you can apply it for different scenarios where it is necessary to control other kinds of peripherals (as motors, servo and so on). Even if this Arduino project can be considered an IoT project tutorial for beginners it has several applications.

I’m sure, you have seen RGB strip LEDs controlled by an Android app, well using this tutorial and connecting to Arduino a LED strips instead of a single RGB Led we can obtain the same result.

In more details, what we want to obtain building this Arduino IoT project, is developing an Android app that controls the LEDs connected to Arduino changing their color. The Android app acts as front-end, using this app an user can select the LEDs color as it happens in the commercial applications.

To make things working there are several steps:

1. Creating an Android app so that we can select the color we want.
2. Sending data to Arduino. The data is built by the three color values (Red, Green, Blue).
3. Developing an Arduino app that accepts connections from the Android app and controls the RGB Led controller

First of all, if you are new to the Internet of things project, you should read Internet of things project with Arduino and Android, so that you get introduced to IoT projects.

The final result is shown in the video below:

Control LED project overview: Integrating Arduino and Android

Before digging into the project details, it is useful to have an overview of this Arduino IoT project:

In the picture below, the Android app connects using HTTP connection to the Arduino device that controls the Led.

In a previous post we talked about how to turn on and off a led connected to Arduino using Android app, now it is time to make things a little more complex.
To build this project, we need:

Android side:

• Colour picker View
• Http client that sends data

Arduino side:

• HTTP server to get data
• Simple JSON parser
• RGB led handler

Now we know what to do let’s start.

Android app with a color picker to select the RGB LED color

To control RGB LED, the first step is creating an Android color picker UI so that the user can pick the color to turn on the Arduino led (RGB). Let us start with the final Android UI result:

To create this interface we used an interesting open source project called Color Picker. This component is very easy to use.

At the first step, we create the main layout based on Android Floating Action Button:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
                xmlns:app="http://schemas.android.com/apk/res-auto" 
                xmlns:tools="http://schemas.android.com/tools" 
                android:layout_width="match_parent" 
                android:layout_height="match_parent" 
                android:paddingBottom="@dimen/activity_vertical_margin" 
                android:paddingLeft="@dimen/activity_horizontal_margin" 
                android:paddingRight="@dimen/activity_horizontal_margin" 
                android:paddingTop="@dimen/activity_vertical_margin" 
                app:layout_behavior="@string/appbar_scrolling_view_behavior" 
                tools:context="com.survivingwithandroid.rgbcontroller.MainActivity" 
                tools:showIn="@layout/activity_main">	 	 
   <TextView android:layout_width="wrap_content" 
             android:layout_height="wrap_content" 
             android:text="Control Arduino RGB Led" 
             android:layout_centerInParent="true" 
             android:textSize="25sp"/>	 	 
   <TextView android:layout_width="wrap_content" 
             android:layout_height="wrap_content" 
             android:layout_alignParentBottom="true" 
             android:layout_alignParentLeft="true" 
             android:layout_marginLeft="5dp" 
             android:id="@+id/msg"/>	 	 
</RelativeLayout>

As a result, when the user presses the FAB the app has to show the Color picker dialog:

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
  setSupportActionBar(toolbar);
  ......

  FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
  fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
      // Handle FAB click event
    }
  }
}

It is time to show the Color picker dialog that will control RGB led in the onClick method:

ColorPickerDialogBuilder
.with(MainActivity.this)
.setTitle("Choose RGB color")
.initialColor(Color.WHITE)
.wheelType(ColorPickerView.WHEEL_TYPE.FLOWER)
.lightnessSliderOnly()
.density(12)
.setOnColorSelectedListener(new OnColorSelectedListener() {
   @Override
   public void onColorSelected(int selectedColor) {
     // Nothing to do...
   }
 })
.setPositiveButton("ok", new ColorPickerClickListener() {
  @Override
  public void onClick(DialogInterface dialog, 
               int selectedColor, Integer[] allColors) {
   int r = (selectedColor >> 16) & 0xFF;
   int g = (selectedColor >> 8) & 0xFF;
   int b = (selectedColor >> 0) & 0xFF;
   Log.d("RGB", "R [" + r + "] - G [" + g + "] - B [" + b + "]");
   sendColor(r,g,b);
  }
})
.setNegativeButton("cancel", new DialogInterface.OnClickListener() {
  @Override
  public void onClick(DialogInterface dialog, int which) {
  }
})
.build()
.show();

As you can see this component is very simple to use, when the user clicks OK button the app extracts the Red, Green and Blue component and sends it to Arduino.

Android HTTP client to send data to Arduino

To send data to Arduino from the Android app, it is necessary to create a simple HTTP client that sends Red, Green and Blue component as JSON string.

Arduino will use this information to control RGB LED. The Android HTTP client is very simple and it is based on OkHttp.

 
private void sendColor(int r, int g, int b) {
  Log.d("RGB", "Sending data to Arduino....");
  Request req = new Request.Builder() .url(URL)
      .post( RequestBody.create(JSON, createJSON(r,g,b)) )
      .build();

  tv.setText("Sending data to Arduino...");
  client.newCall(req).enqueue( new Callback() {

  @Override
  public void onFailure(Call call, IOException e) { // Handle call failure }

  @Override 
  public void onResponse(Call call, Response response) throws IOException {
    // OK Response...inform the user }
  });
} 

where createJSON method is very simple:

private String createJSON(int r, int g, int b) {
  return "{\"color\": [" + r + "," + g + "," + b + "]}"; 
}

..it returns the three colors values. The Android app is completed, as you can see with a few lines of code we created a nice Android app that will control RGB LED connected to Arduino.

How to connect and control RGB LEDs connected to Arduino: circuit

Now the Android client side is ready, therefore it is time to build the Arduino sketch so that it is possible to control LEDs connected to Arduino. This tutorial uses common anode RGB LED, that means the Vcc is connected to the anode. If you use a common cathode led the cathode must be connected to the ground. The Arduino sketch is shown below:

The three led pins are connected to Arduino PWM using a 300-ohm resistance.

That’s all, the “hardware” part is ready to be used. If you want to test the Arduino LED to know if everything works correctly you can write a simple sketch to check if the Arduino RGB is working properly. In the diagram above, the ethernet shield is not shown to simplify the diagram. Of course, to connect Arduino to Internet is necessary to have an ethernet shield or a WI-FI shield. This tutorial uses the ethernet shield. You can extend this project controlling a LEDs strip.

Arduino HTTP Server

In addition to the “hardware” part, Arduino has to accept HTTP connection because the Android client sends data (the RGB values) using HTTP. Therefore, it is necessary to build a simple HTTP server that parses the incoming requests and extracts the values. In the setup method of the sketch, we initialize the Arduino PINs to control the RGB LED and the ethernet IP.

 void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
  // Pin mode
  pinMode(redPin, OUTPUT);
  pinMode(bluePin, OUTPUT);
  pinMode(greenPin, OUTPUT);
  Serial.print("Ready...");
  // Ethernet.begin(mac, ip);
  server.begin();
  Serial.println("Begin...");
} 

Finally, it is time to accept incoming requests and parse them.

Accept HTTP request and Parse the JSON message using Arduino

To parse the HTTP request and extract data, we can use this piece of code:

void loop() {
  EthernetClient client = server.available(); // Is there a client (Our Android smartphone)
  if (client) {
   // Let's start reading
   boolean isLastLine = true;
   boolean isBody = false;
   header = "";
   reqData = "";
   int contentLen = 0;

   Serial.print("Client connected!");
   while (client.connected()) {
     if (client.available()) {
      // Read data
      char c = client.read();

     if (contentSize == contentLen) {
       Serial.println("Body ["+reqData+"]");
       // Extract the JSON string like [r,g,b]
       int pos1 = reqData.indexOf("[");
       int pos2 = reqData.lastIndexOf("]");

     // Parse the string looking for ,
     String colors = reqData.substring(pos1 + 1, pos2);
     Serial.println("Colors ["+colors+"]");
     int idx1 = colors.indexOf(',');
     int idx2 = colors.indexOf(',', idx1+1);
     int idx3 = colors.indexOf(',', idx2+1);
     String sRed = colors.substring(0, idx1);
     String sGreen = colors.substring(idx1 + 1, idx2);
     String sBlue = colors.substring(idx2 + 1, idx3);

     // Convert the Red, Green and Blue string values to int
    int red = sRed.toInt();
    int green = sGreen.toInt();
    int blue = sBlue.toInt();

   // Set the RGB led color according to the values sent by the Android client
   setColor(red, green,blue);

   // Create the response to client
   client.println("HTTP/1.1 200 OK");
   client.println("Content-Type: text/html");
   client.println("Connection: close");
   client.println();
   // send web page
   client.println("");
   client.println(""); delay(1);
   break; 
  }

  if (c == '\n' && isLastLine) {
    isBody = true;
    int pos = header.indexOf(CONTENT_LENGTH_TXT);
    String tmp = header.substring(pos, header.length());
    //Serial.println("Tmp ["+tmp+"]");
    int pos1 = tmp.indexOf("\r\n");
    String size = tmp.substring(CONTENT_LENGTH_TXT.length(), pos1);
    Serial.println("Size ["+size+"]");
    contentSize = size.toInt();
  }

  if (isBody) {
   reqData += c;
   contentLen++;
  }
  else {
    header += c;
  }

  if (c == '\n' ) {
   isLastLine = true;
  }
  else if (c != '\r' ) {
    isLastLine = false;
  }

 }
}

 // Close connection
 Serial.println("Stop..");
 client.stop();
 }
}

The source code seems to be complex but it is very simple if you look at it carefully. It is always an HTTP Arduino server.
The last part is setting the Arduino led color:

void setColor(int red, int green, int blue) {
  #ifdef COMMON_ANODE
  red = 255 - red;
  green = 255 - green;
  blue = 255 - blue;
  #endif

  analogWrite(redPin, red);
  analogWrite(bluePin, green);
  analogWrite(greenPin, blue);
}

Notice that if we use a common anode, we have to invert the values.

Conclusion

At the end of this post, you know how to send data from Android app to Arduino and how to control  LED lights connected to Arduino remotely from an Android app. In other words, Android app remotely controls the Arduino board that in turn is the Arduino led controller.  There are other ways to exchange data with Arduino: one method is based on Arduino Rest API. This project is useful because it teaches how to exchange data between Arduino and Android app. In this scenario, the Android app controls an RGB Led connected to Arduino, anyway this project can be further extended and it is possible to control other kinds of peripherals. Once you know how to control a simple RGB LED from Android you can further extend the project implementing a DIY cloud lamp that can be controlled using your smartphone.