Pick any colour for an RGB lamp from the Arduino Cloud app

A colour wheel in the Arduino Cloud app sets the colour and brightness of an RGB LED inside a printed lamp shade. A party switch makes it cycle through the rainbow.
  • Level:Intermediate
  • Duration: 50 min
  • Ages 11+
  • Platform: ESP32

Tools for this lesson

Helpful for this build. Open a tool to see tips and more projects that use it.

Pick any colour for an RGB lamp from the Arduino Cloud app – EEMENTOR STEM™ lesson

A smart bulb that changes colour from your phone is just an RGB LED and a bit of internet. Arduino Cloud has a special variable type for it: the Colored light, which holds an on/off switch, a colour and a brightness. Its dashboard widget is a colour wheel. Turn it, and the LED in your printed lamp follows. A second switch starts a party mode that cycles slowly through the rainbow.

What you'll learn

  • How the Colored light variable stores colour as hue, saturation and brightness
  • How to turn that into red, green and blue for the LED
  • How to mix colours with PWM
  • How to run an animation without blocking the cloud connection

What you need

  • ESP32 board, expansion board and USB cable (ESP32 IoT Starter Kit)
  • RGB LED and 3 resistors, 220 Ω (ESP32 IoT Starter Kit)
  • An Arduino Cloud account and the ESP32 device from lesson 1
  • A 2.4 GHz Wi-Fi network
  • The printed parts from the 3D printing box below (lamp shade and base), or the cardboard version described there
  • Breadboard and jumper wires (ESP32 IoT Starter Kit)

Wiring

Breadboard wiring diagram: Pick any colour for an RGB lamp from the Arduino Cloud app
Breadboard view. Check each connection against the wiring table below.
From To
ESP32 GPIO 25 220 Ω resistor, then the RGB LED's red leg
ESP32 GPIO 26 220 Ω resistor, then the green leg
ESP32 GPIO 27 220 Ω resistor, then the blue leg
The longest leg (common cathode) GND

Set up Arduino Cloud

In Arduino Cloud, open Things, create a new Thing called Colour Lamp, link it to your ESP32 device and fill in its network settings. Then add these variables. Lesson 1 of this path shows each step with pictures in words.

Variable Type Permission Update
lamp Colored light Read & Write On change
party Boolean Read & Write On change

Open Dashboards, create a dashboard and add a Colored light widget (lamp) and a Switch (party), each linked to its variable. The same dashboard appears in the free Arduino IoT Remote app on your phone.

The sketch

Arduino Cloud writes the sketch's first version for you, with a thingProperties.h tab that lists your variables and a Secret tab with your Wi-Fi details and device key. In the Thing, open the Sketch tab, click Open full editor, replace the main sketch with the code below and upload. Leave the other tabs as they are.

#include "thingProperties.h"

const int RED_PIN = 25, GREEN_PIN = 26, BLUE_PIN = 27;
float partyHue = 0;
unsigned long lastStep = 0;

void setColour(uint8_t r, uint8_t g, uint8_t b) {
  analogWrite(RED_PIN, r);
  analogWrite(GREEN_PIN, g);
  analogWrite(BLUE_PIN, b);
}

// Show the lamp variable on the LED
void showLamp() {
  if (!lamp.getSwitch()) {
    setColour(0, 0, 0);
    return;
  }
  uint8_t r, g, b;
  lamp.getValue().getRGB(r, g, b);          // hue, saturation and brightness -> red, green, blue
  setColour(r, g, b);
}

void setup() {
  Serial.begin(115200);
  delay(1500);
  pinMode(RED_PIN, OUTPUT);
  pinMode(GREEN_PIN, OUTPUT);
  pinMode(BLUE_PIN, OUTPUT);

  initProperties();
  ArduinoCloud.begin(ArduinoIoTPreferredConnection);
  setDebugMessageLevel(2);          // connection messages in the Serial Monitor
  ArduinoCloud.printDebugInfo();
}

void loop() {
  ArduinoCloud.update();
  if (party && millis() - lastStep > 40) {  // move a little round the colour wheel
    lastStep = millis();
    partyHue = fmod(partyHue + 1.5, 360);
    uint8_t r, g, b;
    Color(partyHue, 100, lamp.getBrightness()).getRGB(r, g, b);
    setColour(r, g, b);
  }
}

void onLampChange() {
  Serial.printf("Hue %.0f, saturation %.0f, brightness %.0f\n", lamp.getHue(), lamp.getSaturation(), lamp.getBrightness());
  if (!party) showLamp();
}

void onPartyChange() {
  if (!party) showLamp();                   // back to the chosen colour
}

For reference, this is the thingProperties.h that Arduino Cloud creates from the variables above. Yours has your own device ID, and may use an older but equally valid style such as addProperty(led, READWRITE, ON_CHANGE, onLedChange).

// Code generated by Arduino Cloud (yours has your own device ID)
#include <ArduinoIoTCloud.h>
#include <Arduino_ConnectionHandler.h>

const char DEVICE_LOGIN_NAME[] = "YOUR_DEVICE_ID";
const char SSID[] = SECRET_SSID;              // from the Secret tab
const char PASS[] = SECRET_OPTIONAL_PASS;
const char DEVICE_KEY[] = SECRET_DEVICE_KEY;

void onLampChange();
void onPartyChange();

CloudColoredLight lamp;
bool party;

void initProperties() {
  ArduinoCloud.setBoardId(DEVICE_LOGIN_NAME);
  ArduinoCloud.setSecretDeviceKey(DEVICE_KEY);
  ArduinoCloud.addProperty(lamp, Permission::ReadWrite).onUpdate(onLampChange);
  ArduinoCloud.addProperty(party, Permission::ReadWrite).onUpdate(onPartyChange);
}

WiFiConnectionHandler ArduinoIoTPreferredConnection(SSID, PASS);

How it works

Arduino Cloud describes a colour the way painters do, with three numbers: the hue (where on the colour wheel, 0 to 360 degrees: 0 red, 120 green, 240 blue), the saturation (how strong the colour is, 0 is white) and the brightness (0 to 100). An LED needs red, green and blue instead. getRGB() does the conversion, and analogWrite() dims each colour of the LED with PWM.

The party mode moves the hue round the wheel by 1.5 degrees every 40 ms: a full rainbow takes about ten seconds. It uses millis() instead of delay(), so ArduinoCloud.update() still runs all the time and the switch reacts at once.

Try this next

  • Add a sunrise: the lamp fades from dark red to warm white over ten minutes when you switch it on.
  • Use the Schedule widget to switch the lamp on at sunset.
  • Make the party mode faster or slower with a Slider variable.

Troubleshooting

  • The device stays "Offline": open the Serial Monitor at 115200 baud. Check the Wi-Fi name and password in the Secret tab (2.4 GHz only) and that the secret device key is the one you saved when you added the device.
  • Compile error about a variable: the variable names in the sketch must match the ones in your Thing exactly, including capital letters. Rename the Thing's variable or the sketch's to match.
  • The colours are mixed up: your RGB LED's legs may be in another order. Swap the three pin numbers until red is red.
  • The LED is always on a bit: some LEDs have a common anode. Connect the long leg to 3V3 instead and use 255 - r and so on.
  • A printed part is too tight or too loose: printers differ by a few tenths of a millimetre. Sand or file a tight hole, and fix a loose part with a drop of hot glue or a strip of tape.

Build it yourself

Everything used in this lesson comes in one kit, with parts tested by our engineers.

ESP32 IoT Starter Kit | Arduino IDE Compatible | Free Tutorials $57.00

Shop the kit