Published October 3, 2016 © Apache-2.0

Blynk Board - everything LED!

Use the Blynk app to control the RGB LED, the onboard LED, and the LED expansion from your phone.

BeginnerProtip1 hour5,661

Things used in this project

Hardware components

SparkFun Blynk Board - ESP8266

Adafruit NeoPixel Ring: WS2812 5050 RGB LED

Software apps and online services

Blynk

Story

The Blynk board comes with a blue LED onboard, a WS2812 RGB LED (also known as a neopixel) onboard, and an expansion for even more LEDs!

Brighten and dim the blue onboard LED

Let's start by building a simple app to brighten and dim the blue onboard LED. First, make sure the default firmware is loaded on your board (it ships with this) and your phone is connected to your board.

The Blue LED is associated with Digital Pin 4. Add a slider (I've chosen Slider L, or large) and select D4. You can leave the default value range (0-255) or you can change it to any numbers that make sense to you (0-10?) Press the triangle to send to your board. You can now control the onboard blue LED with your slider!

1 / 2

Control and brighten the RGB onboard LED

Now, let's add in the RGB LED. No need to remove your blue LED from the app unless you want to. Add the ZERGBA!

1 / 3

The ZERGBA is the widget that lets you control the RGB LED's color by sliding your finger across a multicolored zebra.

To Split or To Merge?

You'll see two options on your ZERGBA - split or merge. Which one your choose depends what other widgets you're going to add, and whether you want to control brightness, color, or both.

When you choose merge, you control all the LEDs from one virtual port. In the default firmware, this port is V0. Choosing split gives you slightly more control. You're able to select the red, green and blue LEDs that make up the RGB LED individually. Or you can select "merge" and control each of the LEDs that make up the RG from a separate ZERGBA. Refer to the default firmware to see which virtual pins are being used to write which RGB values. Here, I've added one ZERGBA for each RGB value. Interesting...

Notice that controlling the LEDs individually (split) overrides controlling the LEDs from a single pin (merge).

Here, I've added a slider on each individual LED that makes up the RGB LED. When I do this, the ZERGBA on pin V0 no longer works.

1 / 2

Q. What happens if you add a single slider to your RGB LED (V0)? Will it control the color or the brightness?

A. It will control the color.

The brightness in the default firmware is controlled by virtual pin 15 (V15). Try adding a slider to it to control the RGB LED's brightness. Ouch! That RGB LED can get REALLY BRIGHT!

Control more LEDS!

OK, now we're ready to control a bunch more LEDs on the expansion header.

The 3 pin expansion can control an LED ring, like this one, or an LED strip, like this one. These can all be powered directly from the board's 3.3V power out, although the LEDs may not reach their maximum brightness.

1 / 3 • 60 pixel LED ring from Adafruit

Plug your LED strip or ring into the expansion header.

The expansion header's configuration: 3.3V, GND, DOUT

The RGB LED and the expansion are both on digital Pin 4. Now test out your strip!

Make sure you have Adafruit's neopixel library downloaded and installed. Try loading one of the example sketches from the neopixel library, like strandtest. Enter the pin number (4) and number of neopixels in your strip.

#define PIN 4 
#define NUMPIXELS      18

Be sure to count the onboard neopixel as well. For instance, my strip has 17 neopixels, so I use 18 as the total number. Whoa! Flashy lights!

Whoa! Flashy lights!

Now say that you want to control your strip via the ZERGBA on your phone, or one of the sliders you've configured. With your LED strip still plugged in, upload the default firmware again and try to control RGB LED from the ZERGBA. Does it work?

For me, running the LED strip from the firmware was frustrating, because it seemed like sometimes it worked and sometimes it didn't. The default firmware attempts to query the number of LEDs using rgb.numPixels(); but it seems like it doesn't always get a good read. Even hardcoding the number of pixels into the sketch, by declaring #define NUMPIXELS 18 and then replacing rgb.numPixels(); with NUMPIXELS didn't always work.

I managed to get the ZERGBA with the LED strip working by writing my own Arduino sketch.

Now you can make your own phone controlled RGB lights! Awesome!

Code

everything Blynk LED

/******************************************************************************

This file supports LED experiments

Development environment specifics:
Arduino IDE 1.6.7
SparkFun BlynkBoard - ESP8266
******************************************************************************/
#include <ESP8266WiFi.h>
#include <BlynkSimpleEsp8266.h>
#include <Ticker.h>
#include <Adafruit_NeoPixel.h>

//////////
// WiFi //
////////// // Enter your WiFi credentials here:
const char WiFiSSID[] = "WiFiNetworkName";
const char WiFiPSWD[] = "WiFiPassword";

///////////
// Blynk //
///////////             // Your Blynk auth token here
const char BlynkAuth[] = "0a1b2c3d4e5f";

////////////////////////////////////
// Blynk Virtual Variable Mapping //
//////////////////////////////////// //
#define RGB_VIRTUAL               V0 
#define BUTTON_VIRTUAL            V1 
#define RED_VIRTUAL               V2 
#define GREEN_VIRTUAL             V3 
#define BLUE_VIRTUAL              V4 

#define RGB_RAINBOW_VIRTUAL       V9 

#define RGB_MAX_BRIGHTNESS_VIRTUAL V15
#define RGB_STRIP_NUM_VIRTUAL     V29 

#define NUMPIXELS      18
#define DEFAULT_MAX_BRIGHTNESS 32
uint8_t blinkCount = 0; // Timer iteration counter
bool rgbSetByProject = false;

//////////////////////////
// Hardware Definitions //
//////////////////////////
const int LED_PIN = 5;
const int RGB_PIN = 4;
Adafruit_NeoPixel rgb = Adafruit_NeoPixel(18, RGB_PIN, NEO_GRB + NEO_KHZ800);
void setLED(uint8_t red, uint8_t green, uint8_t blue);

//////////////////////////
// LIGHT VALUES
//////////////////////////
byte blynkRed = 0; // Keeps track of red value
byte blynkGreen = 0; // Keeps track of green value
byte blynkBlue = 0; // Keeps track of blue value
unsigned int rgbMaxBrightness = DEFAULT_MAX_BRIGHTNESS;

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

  pinMode(LED_PIN, OUTPUT);
  digitalWrite(LED_PIN, LOW); // Turn off blue LED
  rgb.begin(); // Set up WS2812
  setLED(0, 0, 32); // LED blue

  // Initialize Blynk, and wait for a connection before doing anything else
  Serial.println("Connecting to WiFi and Blynk");
  Blynk.begin(BlynkAuth, WiFiSSID, WiFiPSWD);
  while (!Blynk.connected())
    Blynk.run();
  Serial.println("Blynk connected!");
  setLED(0, 32, 0); // LED green
}

void loop()
{
  updateBlynkRGB();
}

/* 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
 0 Experiment 0: zeRGBa                0
 0 Widget(s):                          0
 0  - zeRGBa: Merge, V0                0
 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 */


void updateBlynkRGB(void)
{
  
  // Show the new LED color:  
  for (int i=0; i<rgb.numPixels() ; i++)
    rgb.setPixelColor(i, rgb.Color(map(blynkRed, 0, 255, 0, rgbMaxBrightness), 
                                   map(blynkGreen, 0, 255, 0, rgbMaxBrightness),
                                   map(blynkBlue, 0, 255, 0, rgbMaxBrightness)));
  rgb.show();
}

bool firstRGBWrite = true; // On startup

BLYNK_WRITE(RGB_VIRTUAL)
{
  // RGB widget may send invalid buffer data. If we try to read those in
  // the ESP8266 crashes. At a minimum, for valid data, the buffer 
  // length should be >=5. ("0,0,0" ?)
  if (param.getLength() < 5)
    return;
  
  blynkRed = param[0].asInt();
  blynkGreen = param[1].asInt();
  blynkBlue = param[2].asInt();

  
  if (!firstRGBWrite)
  {
    // Set all attached pixels (usually it'll only be 1)
    updateBlynkRGB();
  }
  else
  {
    firstRGBWrite = false;
  }
}

void setLED(uint8_t red, uint8_t green, uint8_t blue)
{
  rgb.setPixelColor(0, rgb.Color(red, green, blue));
  rgb.show();
}

Credits

Monica Houston

78 projects • 455 followers

I don't live on a boat anymore.

Blynk Board - everything LED!

Things used in this project

Hardware components

Software apps and online services

Story

Brighten and dim the blue onboard LED

Control and brighten the RGB onboard LED

Control more LEDS!

Schematics

RGB LED connected to the Blynk board

Code

everything Blynk LED

Credits

Monica Houston

Comments

Embed the widget on your own site

Blynk Board - everything LED!

Blynk Board - everything LED!

Things used in this project

Hardware components

Software apps and online services

Story

Brighten and dim the blue onboard LED

Control and brighten the RGB onboard LED

Control more LEDS!

Schematics

RGB LED connected to the Blynk board

Code

everything Blynk LED

Credits

Monica Houston

Comments

Related channels and tags