Published October 12, 2020 © LGPL

WEB Controlled RGB LED with NodeMCU

Noepixel with WEB Server on NodeMCU

BeginnerFull instructions provided18 minutes4,085

Things used in this project

Hardware components

Espressif ESP8266 ESP-12E

NodeMCU ESP8266 Breakout Board

Resistor 10k ohm

Adafruit NeoPixel Ring: WS2812 5050 RGB LED

Story

So In order to set up a web server from which we can toggle Neopixel Strips or Ring, we need a NodeMCU connected with a Neopixel Strip according to this schematic.

I'm using my custom made WS2812B Breakout board which houses 6 LEDs, well you can use any Neopixel strip with this setup, you just need to change the pixel count according to your strip in code.

Material Required

ESP8266 NodeMCU or any ESP12F based Device
WS2812B Based RGB LED STRIP or Neopixel Strip
WIFI!

Also, I'm using a Custom WS2812B Strips which was designed in Orcad cadence and its samples were provided by JLCPCB, you can check them out if you want HIGH-Quality PCB service for Less price.

Wiring-

wiring is pretty straight forward, just connect the following

D4 of NodeMCU with Din of LED Strip
VCC to 3V of NodeMCU
GND to GND

Setting up-

The first thing we need to do is to upload the attached code to our nodeMCU setup and get the IP address from the serial monitor.

for that just copy the attached sketch, put in your WIFI credentials and upload the sketch to your board, then open the serial port at 115200 baud rate.

(if something isn't showing, just press reset button on your NodeMCU)

also, be sure to change these parameters according to your settings

SSID and Password

Pixel Count and Digital Pin

Now, copy the IP you receive in Google Chrome or any browser on your computer or whatever device you want. just remember this, the device on which you are putting that IP should be connected with the Router in the same network.

After putting the IP, you will be greeted with this web app.

now just click on the Color pellet and change whatever color you like.

and that is pretty much it.

check out my other post on a similar topic-

ESP12F Standalone Circuit

How to use WS2812B LED

Code

code

// Neopixel
#include <Adafruit_NeoPixel.h>

// ESP8266
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

// Webserver Config
const char *ssid = ""; //put your WIFI ssid in between " "
const char *password = ""; // and password too
ESP8266WebServer server ( 80 );

// Neopixel Config
#define NeoPIN 2 //D4 is 2
#define NUM_LEDS 6 //define number of leds in your strip, mine is 6 
int brightness = 150;
Adafruit_NeoPixel strip = Adafruit_NeoPixel(NUM_LEDS, NeoPIN, NEO_RGB + NEO_KHZ800);


const int led = 13;

void setup ( void ) {

  Serial.begin ( 115200 );

  // ##############
  // NeoPixel start
  Serial.println();
  strip.setBrightness(brightness);
  strip.begin();
  strip.show(); 
  delay(50);
  Serial.println("NeoPixel started");
  
  // #########
  // Webserver
  pinMode ( led, OUTPUT );
  digitalWrite ( led, 0 );
  
  WiFi.begin ( ssid, password );
  Serial.println ( "" );

  // Wait for connection
  while ( WiFi.status() != WL_CONNECTED ) {
    delay ( 500 );
    Serial.print ( "." );
  }

  Serial.println ( "" );
  Serial.print ( "Connected to " );
  Serial.println ( ssid );
  Serial.print ( "IP address: " );
  Serial.println ( WiFi.localIP() );

  if ( MDNS.begin ( "esp8266" ) ) {
    Serial.println ( "MDNS responder started" );
  }

  // what to do with requests
  server.on ( "/", handleRoot );
  server.onNotFound ( handleNotFound );
  server.begin();

  
  
  Serial.println ( "HTTP server started" );
}

void loop ( void ) {
  // waiting fo a client
  server.handleClient();
}


void handleRoot() {
  Serial.println("Client connected");
  digitalWrite ( led, 1 );
  
  // data from the colorpicker (e.g. #FF00FF)
  String color = server.arg("c");
  Serial.println("Color: " + color);
  // setting the color to the strip 
  setNeoColor(color);

  // building a website
  char temp[5000];
  int sec = millis() / 1000;
  int min = sec / 60;
  int hr = min / 60;
  char clr [7];
  color.toCharArray(clr, 7);
  snprintf ( temp, 5000,

"<!DOCTYPE html>\n<html>\n\
  <head>\n\
    <title>Esp8266 NeoPixel Controler</title>\n\
    <style>\
      body { background-color: #cccccc; font-family: Arial; Color: #008; }\
    </style>\n\
    <meta name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0\" />\n\
  </head>\n\
  <body>\n\
    <h1>R G B  Glasses BRO</h1>\n\
    <p>Uptime: %02d:%02d:%02d</p>\n\
    \n\
    <form action=\"\" name=\"pick\" method=\"post\">\n\
    <input type=\"color\" name=\"c\" value=\"%02d\" onchange=\"document.forms['pick'].submit();\" />\n\
    &nbsp;<span onclick=\"document.forms['pick'].submit();\" style=\"font-size:16pt;\"> CHANGE </span>\n\
    </form>\n\
    \n\
  </body>\
</html>",

    hr, min % 60, sec % 60, clr
  );
  server.send ( 200, "text/html", temp );
  digitalWrite ( led, 0 );
}

void handleNotFound() {
  digitalWrite ( led, 1 );
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += ( server.method() == HTTP_GET ) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";

  for ( uint8_t i = 0; i < server.args(); i++ ) {
    message += " " + server.argName ( i ) + ": " + server.arg ( i ) + "\n";
  }

  server.send ( 404, "text/plain", message );
  digitalWrite ( led, 0 );
}



void setNeoColor(String value){
  Serial.print("Setting Neopixel...");
  // converting Hex to Int
  int number = (int) strtol( &value[1], NULL, 16);
  
  // splitting into three parts
  int r = number >> 16;
  int g = number >> 8 & 0xFF;
  int b = number & 0xFF;
  
  // DEBUG
  Serial.print("RGB: ");
  Serial.print(r, DEC);
  Serial.print(" ");
  Serial.print(g, DEC);
  Serial.print(" ");
  Serial.print(b, DEC);
  Serial.println(" ");
  
  // setting whole strip to the given color
  for(int i=0; i < NUM_LEDS; i++) {
    strip.setPixelColor(i, strip.Color( g, r, b ) );
  }
  // init
  strip.show();
  
  Serial.println("on.");
}