ESP32 Tutorial 54/55 - Set WS2812 LED Strip Color over Wifi | SunFounder's ESP32 IoT Learnig kit

In this video we learn how to set the color of RGB LED Strip over Wifi using ESP32. Full code is explained.

Topics in this lesson

Use Chapters from timeline or click on the time

00:00 Introduction
2:01 Introduction to the project
3:09 Docs
3:47 RGB color explained
7:47 Wiring
8:40 Arduino code for WS2812 with WIFI explained
19:35 Selecting ESP32 board and COM port in Arduino IDE
21:17 Controlling LED Strip over wifi demo

/*
 * Display temperature on Browswer screen using DHT11, DHT22 with ESP32
 * 
 * Written by Ahmad Shamshiri on Dec 18, 2023
 * 
 ESP32 Tutorial 54/55 - Set WS2812 LED Strip Color over Wifi | SunFounder's ESP32 IoT Learnig kit
Watch video instruction for this code on YouTube https://youtu.be/J_UFHk_T9aE
Resource page for this lesson and code:
http://robojax.com/course3
Tutoril by https://youTube.com/@robojax
 * 
 * I have combined DHT library of Adafruit with ESP8266 WebServer both links 
 * Adafruit DHT library on GitHub: https://github.com/adafruit/DHT-sensor-library
 * and 
 * ESP8266 on GitHub : https://github.com/esp8266/Arduino
 * 
   Copyright (c) 2015, Majenko Technologies
   All rights reserved.

Redistribution and use in source and binary forms, with or without modification,
   are permitted provided that the following conditions are met:

* * Redistributions of source code must retain the above copyright notice, this
     list of conditions and the following disclaimer.

* * Redistributions in binary form must reproduce the above copyright notice, this
     list of conditions and the following disclaimer in the documentation and/or
     other materials provided with the distribution.

* * Neither the name of Majenko Technologies nor the names of its
     contributors may be used to endorse or promote products derived from
     this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
   ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
   WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
   DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
   ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
   (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
   LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
   ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
   (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
   SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/

#include <Adafruit_NeoPixel.h> // Include the Adafruit NeoPixel library

#define LED_PIN 13 // NeoPixel LED strip
#define NUM_LEDS 8 // Number of LEDs
// Create an instance of the Adafruit_NeoPixel class
Adafruit_NeoPixel strip = Adafruit_NeoPixel(NUM_LEDS, LED_PIN, NEO_GRB + NEO_KHZ800);

//initial color of LED strip
int valueR = 178;//from 0 to 255 for Red
int valueG = 27;//from 0 to 255 for Green
int valueB = 84;//from 0 to 255 for Blue

bool showSerialData = false;
String theColorR, theColorG, theColorB;
String theColor ="ff0000";

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>

const char *ssid = "dars";
const char *password = "hhhhhhhhhhh";

WebServer server(80);

void showColorPicker() {
  String page = "<!DOCTYPE html>\n";
  page +="<html>\n";
  page +="<body>\n";
  page +="<div style=\"zoom: 300%;\">\n";
  page +="<h2>Robojax RGB Color picker</h2>\n";
  page +="<p id=\"result\"></p>\n";
  page +="<form action=\"/color\">\n";
  page +="  <label for=\"favcolor\">Select your favorite color:</label>\n";
  page +="  <input type=\"color\" id=\"favcolor\" name=\"favcolor\" value=\"#";  
  page += theColor;
  page +="\"><br><br>\n";
  page +="   <input type=\"submit\" value=\"Set Color\" />\n";  
  page +="</form> \n</div>\n";
  page +="</body>\n";
  page +="<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'p3plzcpnl505844'},{'dcenter':'p3'},{'cp_id':'10073302'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>\n";
 
  server.send(200,  "text/html", page);

}

//from https://stackoverflow.com/questions/44683071/convert-string-as-hex-to-hexadecimal
uint64_t StrToHex(const char* str)
{
  return (uint64_t) strtoull(str, 0, 16);
}

void getColor(){

// server.send(200, "text/plain", message);

if(server.argName(0) == "favcolor")
  {
    String newColor = String(server.arg(0));//get the GET ardument 0 and convert it to string
    theColor = newColor.substring(1);//remove the # sybmot from the begining of color like #B2a48d
    theColorR = newColor.substring(1, 3);//extract B2 from  #B2a48d for example
    theColorG = newColor.substring(3, 5);//extract a4 from  #B2a48d for example
    theColorB = newColor.substring(5, 7);//extract 8d from  #B2a48d for example
    
    valueR = StrToHex(theColorR.c_str());//convert String to HEX for R
    valueG = StrToHex(theColorG.c_str());//convert String to HEX for G
    valueB = StrToHex(theColorB.c_str());//convert String to HEX for B    
    if(showSerialData)
    {
      Serial.print("valueR: ");
      Serial.println(valueR);
      Serial.print("valueG: ");
      Serial.println(valueG);
      Serial.print("valueB: ");
      Serial.println(valueB );  
    }
   
  }

showColorPicker();//make sure the color picker is shown
  //server.send(200, "text/plain", message);

}

void setColor()
{
  for (int i = 0; i < NUM_LEDS; i++) {
    strip.setPixelColor(i, valueR, valueG, valueB); // Set the color of the i-th LED to red
    strip.show(); // Update the LED strip with the new colors
    delay(10); // Wait for 100 milliseconds
  }
}//

void noConnection()
{
   for (int i = 0; i < NUM_LEDS; i++) {
    strip.setPixelColor(i, 255, 45, 0); // Set the color of the i-th LED to red
    strip.show(); // Update the LED strip with the new colors
    delay(50); // Wait for 100 milliseconds
  }

delay(200);
   for (int i = NUM_LEDS-1; i >=0; i--) {
    strip.setPixelColor(i, 0, 255, 180); // Set the color of the i-th LED to red
    strip.show(); // Update the LED strip with the new colors
    delay(50); // Wait for 100 milliseconds
  }    
}

void handleNotFound() {
  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);

}

void setup_wifi() {
  delay(10);
  // We start by connecting to a WiFi network
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");

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

Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("Open: http://");
  Serial.print(WiFi.localIP());
  Serial.println(" to read temperature");

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

}

void setup(void) {

Serial.begin(115200);

strip.begin(); // Initialize the NeoPixel strip
  strip.show(); // Set initial color to black

setup_wifi();

server.on("/", showColorPicker);//show the main page with color picker
  //server.on("/color", setColor);//changes teh color on WS2812 RGB LED

server.on("/color", HTTP_GET, getColor);

server.on("/inline", []() {
    server.send(200, "text/plain", "this works as well");
  });
  server.onNotFound(handleNotFound);
  server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {
  //Robojax.com 
    while (WiFi.status() != WL_CONNECTED) {
      setup_wifi();
    }

server.handleClient();
  //showColorPicker();
  setColor();
  delay(300);// change this to larger value (1000 or more) if you don't need very often reading
  // Robojax.com code for ESP32 and DHT11 DHT22  
}


 
ESP32 Tutorial 54/55 - Set WS2812 LED Strip Color over Wifi | SunFounder's ESP32 IoT Learnig kit
Watch video instruction for this code on YouTube https://youtu.be/J_UFHk_T9aE
Resource page for this lesson and code:
http://robojax.com/course3
Tutoril by https://youTube.com/@robojax