Lesson 12: Using Buttons to Control RGB LEDs


Written by Jonathan Sim

You can find this lesson and more in the Arduino IDE (File -> Examples -> Andee). If you are unable to find them, you will need to install the Andee Library for Arduino IDE.

Works on iOS and Android
RGB LEDs, also known as tri-colour LEDs, have red, green and blue LEDs built into a single LED! You can adjust the intensity of each colour channel to produce a variety of colours!

In this lesson, I'll show you how you can use your smartphone to control the colour of your RGB LED using press-and-hold buttons:


Note: The code here applies only to common cathode RGB LEDs. Common cathode means that the three colour channels share a common GND pin. The wiring and coding will differ slightly if you use a common anode LED (i.e. three colour channels sharing a common power supply but different ground pins for each colour).

== Upgrade to the latest firmware

Annikken Andee for iOS - V2.3 (16 Mar 2016)

Annikken Andee U - V1.4 (16 Mar 2016) ==

This new upgrading will improve the button widget, now you can get you Arduino projects to respond faster when individual button is pressed.

See the difference in responsiveness with this demo Arduino sketch

Download example Here



Top of the Code

#include <SPI.h>
#include <Andee.h>

// We'll need 6 buttons to increase/decrease the red, green
// and blue channels of our RGB LED
AndeeHelper displayCurrentColour;
AndeeHelper buttonRup; // Buttons to adjust Red
AndeeHelper buttonRdown;
AndeeHelper buttonGup; // Buttons to adjust Green
AndeeHelper buttonGdown;
AndeeHelper buttonBup; // Buttons to adjust Blue
AndeeHelper buttonBdown;

// To get various colours from the RGB LED, we'll need to connect 
// the LED to pins capable of analog output. On the Arduino Uno,
// pins capable of analog output are Pins 3, 5, 6, 9, 10.
// Do not use Pins 8, 11, 12, 13 (Arduino Uno layout) as Andee 
// is using them. Strange things will happen if you do.
const int pinR = 6; // Red is connected to pin 6
const int pinG = 5; // Green is connected to pin 5
const int pinB = 3; // Blue is connected to pin 3

// We'll need to store the intensity levels of each channel
// Note: Analog output is only capable of producing a range from 0 to 255
int r = 0; // Red channel
int g = 0; // Green channel
int b = 0; // Blue channel

int resolution = 30; // Set the amount to increase/decrease for each button press
char colour[7] = "000000"; // The initial colour of our display


void setup()
  Andee.begin();  // Setup communication between Annikken Andee and Arduino
  Andee.clear();  // Clear the screen of any previous displays
  setInitialData(); // Define object types and their appearance
  pinMode(pinR, OUTPUT); // Set pins to output mode
  pinMode(pinG, OUTPUT);
  pinMode(pinB, OUTPUT);


Don't panic! The code below may seem very long, but they're just the same set of codes repeated over and over to define the various screen objects.

void setInitialData()
  displayCurrentColour.setId(0); // Our display box
  displayCurrentColour.setTitle("Current Colour");
  displayCurrentColour.setTitleColor(WHITE); // Set title to white
  displayCurrentColour.setTitleTextColor(TEXT_DARK); // Set title font to black
  displayCurrentColour.setData(colour); // Show the RGB colour code.

  buttonRup.setId(1); // Button to increase red level
  buttonRup.setTitle("R +");
  buttonRup.setColor(RED); // Set button to red
  buttonRup.requireAck(false); // You need this line to allow for multiple button presses

  buttonRdown.setId(2); // Button to decrease red level
  buttonRdown.setTitle("R -");
  buttonRdown.setColor(RED); // Set button to red
  buttonRdown.requireAck(false); // You need this line to allow for multiple button presses

  buttonGup.setId(3); // Button to increase green level
  buttonGup.setTitle("G +");
  buttonGup.setColor(GREEN); // Set button to green
  buttonGup.requireAck(false); // You need this line to allow for multiple button presses

  buttonGdown.setId(4); // Button to decrease green level
  buttonGdown.setTitle("G -");
  buttonGdown.setColor(GREEN); // Set button to green
  buttonGdown.requireAck(false); // You need this line to allow for multiple button presses

  buttonBup.setId(5); // Button to increase blue level
  buttonBup.setTitle("B +");
  buttonBup.setColor(BLUE); // Set button to blue
  buttonBup.requireAck(false); // You need this line to allow for multiple button presses

  buttonBdown.setId(6); // Button to decrease blue level
  buttonBdown.setTitle("B -");
  buttonBdown.setColor(BLUE);  // Set button to blue 
  buttonBdown.requireAck(false); // You need this line to allow for multiple button presses


void loop()
  // This is the most important chunk of code. Each analogWrite() statement sets the intensity
  // of each colour channel.
  analogWrite(pinR, r); 
  analogWrite(pinG, g); 
  analogWrite(pinB, b); 

  // Buttons used to adjust the colour channel intensity. We will employ
  // the press-and-hold button method to control the RGB LEDs
  if( buttonRup.getButtonPressCount() > 0 ) // Red button up will increase red intensity
    r = r+resolution; // Increase the intensity by a fixed amount (specified above)
    if(r>255) r = 255; // 255 is the max value. If it goes beyond that, set the value to 255.  
  if( buttonRdown.getButtonPressCount() > 0 ) // Red button down will decrease red intensity
    r = r-resolution; // Decrease the intensity by a fixed amount (specified above)
    if(r<1) r = 0; // 0 is the min value. If it goes under that, set the value to 0.     
  if( buttonGup.getButtonPressCount() > 0 ) // Green button up will increase green intensity
    g = g+resolution;
    if(g>255) g = 255;   
  if( buttonGdown.getButtonPressCount() > 0 ) // Green button down will decrease green intensity
    g = g-resolution;
    if(g<1) g = 0;      
  if( buttonBup.getButtonPressCount() > 0 ) // Blue button up will increase blue intensity
    b = b+resolution;
    if(b>255) b = 255;
  if( buttonBdown.getButtonPressCount() > 0 ) // Blue button down will decrease blue intensity
    b = b-resolution;
    if(b<1) b = 0;
  sprintf(colour, "%02X%02X%02X", r,g,b); // Convert to an RGB colour code string
  displayCurrentColour.setData(colour); // Show user the RGB colour code on the smartphone
  displayCurrentColour.update(); // Update screen
  delay(500); // Always leave a short delay for Bluetooth communication
comments powered by Disqus