Published January 7, 2019 © GPL3+

Internet Controlled LED Strip Using ESP32 + Arduino

Control an RGB LED strip using ESP32 hosting an HTTP server written in Arduino framework. Works in local network and through the internet.

BeginnerFull instructions provided3 hours60,264

Internet Controlled LED Strip Using ESP32 + Arduino

Things used in this project

Hardware components

Espressif ESP32S

Adafruit NeoPixel Ring: WS2812 5050 RGB LED

5V DC power supply

Software apps and online services

Arduino IDE

Husarnet client

Story

Introduction

In this tutorial I will show you how to create web browser controlled WS2812 LED strip using ESP32 and Arduino IDE.

ESP32 is running an HTTP server and each time you click a button the theme is changed. That HTTP server is accessible both through a local network and the internet.

By default 5 LED themes are available:

rainbow
white shine
red shine
only white
off

But you can easily add any theme you can imagine (and code :) ).

In the source code we use separate FreeRTOS tasks to handle HTTP server and LED strip theme - thanks to that code is clear, easy to understand and modify.

Preparing the hardware

Wiring is very simple:

1. Connect 5V DC power supply to your LED strip. LED strip used in this tutorial contains 60 pixels and one meter, and needs even 3.5 A / m. Depending on how many pixels are you going to use buy an appropriate 5V DC power converted.

2. Connect ESP32 to your LED strip:

LED strip contains only 3 input pins: +5V, GND and Din. ESP32 is powered from 3.3V that is obtained thanks to onboard LDO linear regulator. Connect your power supply to the LDO input pin - in my dev board it's called V5, but in your board it can be named differently. Connect LED strip data input pin Din to G12 pin on your board.

Preparing ESP32 firmware

LED strip will be controlled not only from a LAN, but also through the internet thanks to Husarnet. Husarnet provides modified ESP32-IDF - thanks to that you can use almost the same API as in standard Arduino package for ESP32. Husarnet also provides easy integration with Arduino IDE.

Now open Arduino IDE, and follow these instruction steps:

1. Install NeoPixelBus library in Arduino IDE:

Open Tools -> Manage Libraries
Search for NeoPixelBus by Makuna
Click Install button

2. Install Husarnet IDF for ESP32:

Open File -> Preferences
In a field Additional Board Manager URLs add this link:

https://github.com/husarnet/arduino-esp32/releases/download/1.0.4-1/package_esp32_index.json

3. Install ESP32 dev boards

Open Tools -> Board: "..." -> Boards Manager ...
Search for esp32-husarnet
Click Install button

We include here a modified fork (mainly IPv6 support related changes) of official Arduino core for ESP32 - https://github.com/husarnet/arduino-esp32 . If you had installed the original version before, it is recommended to remove all others Arduino cores for ESP32 that you had in your system.

4. Select ESP32 dev board:

Open Tools -> Board "..."
Select ESP32 Dev Module under ESP32 Arduino section

4. Run demo:

Clone the project code:

git clone https://github.com/DominikN/ESP32_ledstrip_webserver.git

Modify line 9 to setup number of pixels in your LED strip. The code is written to auto-scale LED theme deppending on number of pixels defined here.

// How many NeoPixels are attached to the Arduino?
#define NUMPIXELS      60

Modify lines 22 - 33 to add your Wi-Fi network credentials. That's comfortable to add more than one network credentials here - in case of moving your project to different physical destinations you will not need to reprogram your ESP32 each time.

// Add your networks credentials here
const char* ssidTab[NUM_NETWORKS] = {
 "wifi-network-1",
 "wifi-network-2",
 "wifi-network-3",
 "wifi-network-4"
};
const char* passwordTab[NUM_NETWORKS] = {
 "wifi-pass-1",
 "wifi-pass-2",
 "wifi-pass-3",
 "wifi-pass-4"
};

Connect input data pin of your LED strip to G12 pin of your ESP32 dev board
Upload project to your ESP32 board (deppending on your dev board you will need to press "BOOT" button, or short Pin0 or IO0 to GND while flashing)
In Arduino IDE open Tools -> Serial Monitor and wait until your ESP32 is connected to Wi-Fi network. After a few seconds you should see a similar link to this (default baudrate for Serial port in code is 115200):

[10009675] Visit 
https://app.husarnet.com/husarnet/fc94f91f5992989f83474cc8abf7329bf8ae7f3ee4a9xxxxyyyyzzzz 
to configure the device .

Copy that link and open it in your web browser
Name your device (eg. ledstrip), click Add to network and select Create new network - and also name it (eg. ledstripnet)

Open ledstripnet and left click ledstrip element
Select Make the Web UI public and click update button

In the Info column within ledstripnet network you should see Web UI button with a public available link to a control panel. Each time you will power your ESP32 board under that link you will have an access to a web UI to control your LED strip

5. (optional) Improvements - if you don't want to have any public available link to your ESP32 you will need to add your laptop to the "ledstripnet" network:

install Husarnet on your Linux device (https://docs.husarnet.com/getting-started/ ) and add that to your network
on your Linux device open a web browser and write an address to your ESP32 with 8000 port, eg. http://ledstrip:8000

Summary

Creating an internet accessible web user interface for your ESP32 is straightforward. That Wi-Fi module integrates a lot of RAM and Flash memory that together with FreeRTOS allows you to easily host an HTTP server controlling anything you want. LED strip is only a nice example :).

I hope you will enjoy this project! :)

ESP32_ledstrip_webserver.ino

#include <WiFi.h>
#include <NeoPixelBus.h>
#include <Husarnet.h>

// Which pin on the Arduino is connected to the NeoPixels?
#define PIN            12

// How many NeoPixels are attached to the Arduino?
#define NUMPIXELS      60

NeoPixelBus<NeoGrbFeature, Neo800KbpsMethod> strip(NUMPIXELS, PIN);

uint8_t red = 0;
uint8_t green = 0;
uint8_t blue = 0;

int j = 0;

#define NUM_NETWORKS 4

// Add your networks credentials here
const char* ssidTab[NUM_NETWORKS] = {
  "wifi-network-1",
  "wifi-network-2",
  "wifi-network-3",
  "wifi-network-4"
};
const char* passwordTab[NUM_NETWORKS] = {
  "wifi-pass-1",
  "wifi-pass-2",
  "wifi-pass-3",
  "wifi-pass-4"
};

HusarnetServer server(8000);

String header;

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

  strip.Begin();
  strip.Show();

  bool connectedSuccess = 0;
  for (int i = 0; i < NUM_NETWORKS; i++) {
    Serial.print("Connecting to ");
    Serial.println(ssidTab[i]);
    WiFi.begin(ssidTab[i], passwordTab[i]);
    for (int j = 0; j < 10; j++) {
      if (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
      } else {
        connectedSuccess = true;
      }
    }
    Serial.println("");
    if (connectedSuccess == true) {
      break;
    }
  }
  if (connectedSuccess == false) {
    Serial.println("WiFi network unreachable");
    while (1) {
      ;
    }
  }

  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  Husarnet.selfHostedSetup("default");
  // Husarnet.join(husarnetJoinCode, hostName); // alternative way, to clicking a link from a terminal. Visit app.husarnet.com -> network -> add element -> join code tab.
  Husarnet.start();

  server.begin();

  xTaskCreate(
    taskLED,          /* Task function. */
    "taskLED",        /* String with name of task. */
    10000,            /* Stack size in bytes. */
    NULL,             /* Parameter passed as input of the task */
    2,                /* Priority of the task. */
    NULL);            /* Task handle. */

  xTaskCreate(
    taskWifi,          /* Task function. */
    "taskWifi",        /* String with name of task. */
    10000,            /* Stack size in bytes. */
    NULL,             /* Parameter passed as input of the task */
    1,                /* Priority of the task. */
    NULL);            /* Task handle. */
}

void rainbow(int j) {
  int k = 0;
  int l = 0;
  int m = 0;

  for (int i = 0; i < NUMPIXELS; i++) {
    if ( ( i >= 0 ) && ( i < NUMPIXELS * 1 / 3 ) ) {
      red = 255 * k / (NUMPIXELS / 3);
      green = 0;
      blue = 255 - (255 * k / (NUMPIXELS / 3) );
      k++;
    }
    if ( ( i >= NUMPIXELS * 1 / 3 ) && ( i < NUMPIXELS * 2 / 3 ) ) {
      red = 255 - (255 * l / (NUMPIXELS / 3) );
      green = 255 * l / (NUMPIXELS / 3);
      blue = 0;
      l++;
    }
    if ( ( i >= NUMPIXELS * 2 / 3 ) && ( i < NUMPIXELS * 3 / 3 ) ) {
      red = 0;
      green = 255 - (255 * m / (NUMPIXELS / 3) );
      blue = 255 * m / (NUMPIXELS / 3);
      m++;
    }

    strip.SetPixelColor((i + j) % NUMPIXELS, RgbColor(red, green, blue));
  }

  strip.Show();
  delay(50);
}

void white_shine(int j) {
  int k = 0;
  int l = 0;
  int m = 0;

  for (int i = 0; i < NUMPIXELS; i++) {
    if ( ( i >= 0 ) && ( i < NUMPIXELS * 1 / 3 ) ) {
      red = 255 * k / (NUMPIXELS / 3);
      green = 255 * k / (NUMPIXELS / 3);
      blue = 255 * k / (NUMPIXELS / 3);
      k++;
    }
    if ( ( i >= NUMPIXELS * 1 / 3 ) && ( i < NUMPIXELS * 2 / 3 ) ) {
      red = 255 - (255 * l / (NUMPIXELS / 3) );
      green = 255 - (255 * l / (NUMPIXELS / 3) );
      blue = 255 - (255 * l / (NUMPIXELS / 3) );
      l++;
    }
    if ( ( i >= NUMPIXELS * 2 / 3 ) && ( i < NUMPIXELS * 3 / 3 ) ) {
      red = 0;
      green = 0;
      blue = 0;
      m++;
    }
    Serial.printf("\r\n[R,G,B] = [%d,%d,%d]", red, green, blue);
    strip.SetPixelColor((i + j) % NUMPIXELS, RgbColor(red, green, blue));
  }
  strip.Show();
  delay(40);
}

void red_shine(int j) {
  int k = 0;
  int l = 0;
  int m = 0;
  
  for (int i = 0; i < NUMPIXELS; i++) {
    if ( ( i >= 0 ) && ( i < NUMPIXELS * 1 / 3 ) ) {
      red = 255;
      green = 255 - 255 * k / (NUMPIXELS / 3);
      blue = 255 - 255 * k / (NUMPIXELS / 3);
      k++;
    }
    if ( ( i >= NUMPIXELS * 1 / 3 ) && ( i < NUMPIXELS * 2 / 3 ) ) {
      red = 255;
      green = (255 * l / (NUMPIXELS / 3) );
      blue = (255 * l / (NUMPIXELS / 3) );
      l++;
    }
    if ( ( i >= NUMPIXELS * 2 / 3 ) && ( i < NUMPIXELS * 3 / 3 ) ) {
      red = 255;
      green = 255;
      blue = 255;
      m++;
    }
    strip.SetPixelColor((i + j) % NUMPIXELS, RgbColor(red, green, blue));
  }
  strip.Show();
  delay(40);
}

void led_white()
{
  for (int i = 0; i < NUMPIXELS; i++) {
    red = 255;
    green = 255;
    blue = 255;
    strip.SetPixelColor((i + j) % NUMPIXELS, RgbColor(red, green, blue));
  }
  delay(5);
  strip.Show();
}

void led_off() {
  for (int i = 0; i < NUMPIXELS; i++) {
    red = 0;
    green = 0;
    blue = 0;
    strip.SetPixelColor((i + j) % NUMPIXELS, RgbColor(red, green, blue));
  }
  delay(100);
  strip.Show();
}


char* getModeName(uint8_t modeNo) {
  switch (modeNo) {
    case 0:
      return "rainbow";
    case 1:
      return "white shine";
    case 2:
      return "red shine";
    case 3:
      return "only white";
    case 4:
      return "off";
  }
  return "error";
}

uint8_t modeRGB = 0;
void taskLED( void * parameter )
{
  while (1) {
    switch (modeRGB) {
      case 0:
        rainbow(j++);
        break;
      case 1:
        white_shine(j++);
        break;
      case 2:
        red_shine(j++);
        break;
      case 3:
        led_white();
        break;
      case 4:
        led_off();
        break;
      default:
        rainbow(j++);
        break;
    }
    if (j >= NUMPIXELS) {
      j = 0;
    }
  }

  Serial.println("Ending task LED");
  vTaskDelete( NULL );
}

void loop() {
  while (1) {
    delay(1000);
  }
}

static const char* htmlHead = R"rawText(
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<style>
html { 
font-family: Helvetica; 
display: inline-block; 
margin: 0px auto; 
text-align: center;
}

.button { 
background: 
linear-gradient(to right, #FB6060 0%, #EC305D 100%);
border: none;
text-decoration: none;
margin: 2px;   
padding: 25px 25px; 
width: 300px; 
border-radius: 12px; 
color: white;
font-size: 30px; 
cursor: pointer;
}
</style>
</head>   
)rawText";
  
void taskWifi( void * parameter ) {


  
  while (1) {
    HusarnetClient client = server.available();

    if (client) {
      Serial.println("New Client.");
      String currentLine = "";
      Serial.printf("connected: %d\n", (int)client.connected());
      while (client.connected()) {

        if (client.available()) {
          char c = client.read();
          //          Serial.write(c);
          header += c;
          if (c == '\n') {
            if (currentLine.length() == 0) {
              client.println("HTTP/1.1 200 OK");
              client.println("Content-type:text/html");
              client.println("Connection: close");
              client.println();

              if (header.indexOf("GET /0") >= 0) {
                modeRGB = 1;
              }
              if (header.indexOf("GET /1") >= 0) {
                modeRGB = 2;
              }
              if (header.indexOf("GET /2") >= 0) {
                modeRGB = 3;
              }
              if (header.indexOf("GET /3") >= 0) {
                modeRGB = 4;
              }
              if (header.indexOf("GET /4") >= 0) {
                modeRGB = 0;
              }

              // Head
              client.println("<!DOCTYPE html><html>");
              client.println(htmlHead);
              // Body
              client.println("<body><h1>ESP32 Web RGB strip control</h1>");
              client.print("<p><a href=\"/");
              client.print(modeRGB);
              client.print("\"><button class=\"button\">");
              client.print(getModeName(modeRGB));
              client.println("</button></a></p>");
              client.println("</body></html>");

              client.println();
              break;
            } else {
              currentLine = "";
            }
          } else if (c != '\r') {
            currentLine += c;
          }
        }
      }

      header = "";

      client.stop();
      Serial.println("Client disconnected.");
      Serial.println("");
    }
  }
}

Credits

Dominik

11 projects • 72 followers

Internet Controlled LED Strip Using ESP32 + Arduino

Things used in this project

Hardware components

Software apps and online services

Story

Introduction

Preparing the hardware

Preparing ESP32 firmware

Summary

Code

ESP32_ledstrip_webserver.ino

Github

Credits

Dominik

Comments

Embed the widget on your own site

Internet Controlled LED Strip Using ESP32 + Arduino

Internet Controlled LED Strip Using ESP32 + Arduino

Things used in this project

Hardware components

Software apps and online services

Story

Introduction

Preparing the hardware

Preparing ESP32 firmware

Summary

Code

ESP32_ledstrip_webserver.ino

Github

Credits

Dominik

Comments

Related channels and tags