ESP8266和ESP32智能彩灯开发系列文章目录

第一篇：最简单DIY基于ESP8266的智能彩灯①（在网页用按钮点亮普通RGB灯）
第二篇：最简单DIY基于ESP8266的智能彩灯②（在网页用按键和滑动条控制RGB灯）
第三篇：最简单DIY基于ESP8266的智能彩灯③（在网页用按钮+滑动条+手机APP控制RGB灯）
第四篇：最简单DIY基于ESP8266的国产WS2812智能彩灯④（在网页用按钮点亮）

文章目录

ESP8266和ESP32智能彩灯开发系列文章目录
前言
一、最简单DIY基于ESP8266的国产WS2812智能彩灯④（在网页用按钮点亮）是什么？
二、使用步骤
- 1.准备硬件
- 2.搭建Arduino开发环境
- 3.修改（3.1）的源码变成我的代码
三、运行与调试
总结

前言

daodanjishui物联网核心原创技术之最简单DIY基于ESP8266的国产WS2812智能彩灯④（在网页用按钮点亮）。
市面上有各种开源智能彩灯控制程序出售，但是有复杂的有简单的，如果想快速入门用网页按键无线点亮国产WS2812RGB灯，这个方案会给你一个快捷高效的方案。

一、最简单DIY基于ESP8266的国产WS2812智能彩灯④（在网页用按钮点亮）是什么？

以前写的点灯程序都是直接点亮LED而已，例如本专栏的第一篇、第二篇和第三篇，没涉及到复杂的PWM或者是时序问题的。这次换了一个智能彩灯方案，采用国产芯片WS2812和WS2811实现智能彩灯调色，主控芯片采用国产ESP8266，支持国产从我做起，反对霸权主义，反对技术封锁，反对芯片垄断。现在很多建筑物墙上布置的彩灯就是这个系列的彩灯，这每一个彩灯里面是包含有WS2812芯片的，当这个彩灯数量达到一定级别的时候，炫酷的效果就出来了。为了学习这个彩灯，daodanjishui花血本在某宝买了33片8X8=64的WS2812矩阵彩灯，一个矩阵大概要20块，所以总价值20*33=660块，后期会将这些矩阵彩灯拼接起来加入图像处理和智能app客户端和电脑客户端去控制彩灯，在2021年新冠状病毒居家隔离过年的时候写了一批量代码出来。目前国内还没有关于WS2812彩灯的各种上位机和下位机和服务器全方位击破的开源教程，那么这里希望成为第一家。全家福如下图所示：

功能描述：最简单DIY基于ESP8266的智能彩灯①（在网页用按钮点亮普通RGB灯）当时用的是普通的RGB LED灯，里面是不带有芯片的，控制亮度用的是PWM波，控制颜色是通过控制三种颜色灯丝的PWM波比例。那么这次ESP8266调库用其IO口间接通过WS2812芯片控制LED，IO口通过单线归零码协议实现控制，至于这个协议怎么用，具体不需要深究，因为Arduino的WS2812库帮我们做好的驱动，我们直接调用函数驱动即可，这里用到的是FastLED这个库，假如真的想深究，等我发布STM32版本的WS2812项目吧。最后实现的效果是ESP8266创建热点，然后用户在其嵌入式主页控制彩灯的变化，这次点一盏灯，分别是WS2811和WS2812，其实代码都是通用的，点亮第一盏灯以后才能点亮更多的灯。下面是Arduino写的原创开源代码截图：

手机连上ESP6266热点之后，在浏览器打开嵌入式主页：

二、使用步骤

1.准备硬件

（1）购买ESP8266开发板：mini D1 wifi ESP-12F N ESP8266。

芯片包装如下：

（2）购买WS2812国产RGB灯或者模块。

2.搭建Arduino开发环境

（1）第一步下载Arduino IDE安装，双击下一步，下一步，直到完成，建议不要中文路径。

（2）下载ESP8266安装包插件，这是最方便的，如果在Arduino里面搜索安装，你会发现很慢，特别是在这个紧张的芯片之争的关键时期下,按照这个网址去下载：https://www.arduino.cn/thread-76029-1-1.html

（3）双击（2）下载的三个包中的一个，我双击安装的是第二个包，重启Arduino就可以安装好了。

安装好之后你会发现开发板选项多了ESP8266这类的开发板。实在不行就找其他教程再试试了，没有必要一步一步教这个开发环境搭建。
（3.1）导入FASTLED库，或者说是安装FASTLED库（自己百度如何安装即可）

可以打开一个红色箭头官方示例代码玩玩
主要修改一下参数：
#define LED_TYPE WS2811
#define COLOR_ORDER GRB
#define NUM_LEDS 64
第一个是RGB灯的型号，可以是2812或者2811
第三个是RGB灯的数量，我的设置为1

#include <FastLED.h>FASTLED_USING_NAMESPACE// FastLED "100-lines-of-code" demo reel, showing just a few
// of the kinds of animation patterns you can quickly and easily
// compose using FastLED.
//
// This example also shows one easy way to define multiple
// animations patterns and have them automatically rotate.
//
// -Mark Kriegsman, December 2014#if defined(FASTLED_VERSION) && (FASTLED_VERSION < 3001000)
#warning "Requires FastLED 3.1 or later; check github for latest code."
#endif#define DATA_PIN    3
//#define CLK_PIN   4
#define LED_TYPE    WS2811
#define COLOR_ORDER GRB
#define NUM_LEDS    64
CRGB leds[NUM_LEDS];#define BRIGHTNESS          96
#define FRAMES_PER_SECOND  120void setup() {delay(3000); // 3 second delay for recovery// tell FastLED about the LED strip configurationFastLED.addLeds<LED_TYPE,DATA_PIN,COLOR_ORDER>(leds, NUM_LEDS).setCorrection(TypicalLEDStrip);//FastLED.addLeds<LED_TYPE,DATA_PIN,CLK_PIN,COLOR_ORDER>(leds, NUM_LEDS).setCorrection(TypicalLEDStrip);// set master brightness controlFastLED.setBrightness(BRIGHTNESS);
}// List of patterns to cycle through.  Each is defined as a separate function below.
typedef void (*SimplePatternList[])();
SimplePatternList gPatterns = { rainbow, rainbowWithGlitter, confetti, sinelon, juggle, bpm };uint8_t gCurrentPatternNumber = 0; // Index number of which pattern is current
uint8_t gHue = 0; // rotating "base color" used by many of the patternsvoid loop()
{// Call the current pattern function once, updating the 'leds' arraygPatterns[gCurrentPatternNumber]();// send the 'leds' array out to the actual LED stripFastLED.show();  // insert a delay to keep the framerate modestFastLED.delay(1000/FRAMES_PER_SECOND); // do some periodic updatesEVERY_N_MILLISECONDS( 20 ) { gHue++; } // slowly cycle the "base color" through the rainbowEVERY_N_SECONDS( 10 ) { nextPattern(); } // change patterns periodically
}#define ARRAY_SIZE(A) (sizeof(A) / sizeof((A)[0]))void nextPattern()
{// add one to the current pattern number, and wrap around at the endgCurrentPatternNumber = (gCurrentPatternNumber + 1) % ARRAY_SIZE( gPatterns);
}void rainbow()
{// FastLED's built-in rainbow generatorfill_rainbow( leds, NUM_LEDS, gHue, 7);
}void rainbowWithGlitter()
{// built-in FastLED rainbow, plus some random sparkly glitterrainbow();addGlitter(80);
}void addGlitter( fract8 chanceOfGlitter)
{if( random8() < chanceOfGlitter) {leds[ random16(NUM_LEDS) ] += CRGB::White;}
}void confetti()
{// random colored speckles that blink in and fade smoothlyfadeToBlackBy( leds, NUM_LEDS, 10);int pos = random16(NUM_LEDS);leds[pos] += CHSV( gHue + random8(64), 200, 255);
}void sinelon()
{// a colored dot sweeping back and forth, with fading trailsfadeToBlackBy( leds, NUM_LEDS, 20);int pos = beatsin16( 13, 0, NUM_LEDS-1 );leds[pos] += CHSV( gHue, 255, 192);
}void bpm()
{// colored stripes pulsing at a defined Beats-Per-Minute (BPM)uint8_t BeatsPerMinute = 62;CRGBPalette16 palette = PartyColors_p;uint8_t beat = beatsin8( BeatsPerMinute, 64, 255);for( int i = 0; i < NUM_LEDS; i++) { //9948leds[i] = ColorFromPalette(palette, gHue+(i*2), beat-gHue+(i*10));}
}void juggle() {// eight colored dots, weaving in and out of sync with each otherfadeToBlackBy( leds, NUM_LEDS, 20);byte dothue = 0;for( int i = 0; i < 8; i++) {leds[beatsin16( i+7, 0, NUM_LEDS-1 )] |= CHSV(dothue, 200, 255);dothue += 32;}
}

（4）打开我的工程：双击打开，

一看就知道ESP8266创建一个AP热点供笔记本或者手机链接上去，没有密码的。
（5）配置开发板和串口信息

注意选择的是什么型号的开发板型号还有你自己开发板连上电脑之后是占用的是哪个串口号

（6）按照源码的IO口连接
观察源码管脚定义：
//国内开源ESP8266物联网智能彩灯4
//作者：daodanjishui
//时间:2021.6.3
#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <FastLED.h>
#define DATA_PIN 4 //灯带数据管脚–D2—GPIO4
#define LED_TYPE WS2812 //灯带类型
#define COLOR_ORDER GRB //颜色顺序
#define NUM_LEDS 1 //灯的数量
CRGB leds[NUM_LEDS]; //创建颜色对象
#define BRIGHTNESS 96 //亮度0~255
可以看出：灯带数据管脚–D2—GPIO4
下载完成即可运行程序了。

3.修改（3.1）的源码变成我的代码

总的来说修改的地方还是很多的，改到面目全非了加入了不少的内容，才能让其功能完善。全部源码（读者可以复制使用）：

//国内开源ESP8266物联网智能彩灯4
//作者：daodanjishui
//时间:2021.6.3
//QQ:
#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>#include <FastLED.h>
#define DATA_PIN    4    //灯带数据管脚--D2---GPIO4
#define LED_TYPE    WS2812   //灯带类型
#define COLOR_ORDER GRB     //颜色顺序
#define NUM_LEDS    1      //灯的数量
CRGB leds[NUM_LEDS];      //创建颜色对象
#define BRIGHTNESS          96  //亮度0~255const byte DNS_PORT = 53;
IPAddress apIP(192, 168, 4, 1);
DNSServer dnsServer;
ESP8266WebServer webServer(80); //网页函数，传入参数是服务器IP,返回的是网页字符串
//http://192.168.4.1/HandleVal?ssid=r&password=168
String  index_html(String WiFiAddr){return  String("")+"<html> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /"+
"<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">"+
"</head>"+
"<body>"+
"<h1>daodanjishui 经典物联网智能彩灯开源项目4</h1>"+
"<p></p> <form action=\"HandleVal\" method=\"\" name=\"\" >第一个参数是颜色首字母，第二个是亮度值0~255<br>"+
"<input type=\"text\" value=\"r\" name=\"ssid\" id=\"cmd\" size=\"10\" maxlength=\"20\">"+
"<input type=\"text\" value=\"168\" name=\"password\" id=\"cmd1\" size=\"10\" maxlength=\"20\">"+
"<input type=\"submit\" value=\"send\" ><br>"+
"<h2>daodanjishui 原创经典值得期待！</h2>"+
" </form>"+
"</body>"+
"</html>";
}void handleRoot() {webServer.send(200, "text/html", index_html("192.168.4.1")); //！！！注意返回网页需要用"text/html" ！！！Serial.println("用户访问了主页");
}#define LAMP_PIN 16
#define LAMP_PIN1 14  //R--D5
#define LAMP_PIN2 12  //G--D6
#define LAMP_PIN3 13  //B--D7void controlLamp(bool lampVal) {//点灯函数,GPIO16  -----D0pinMode(LAMP_PIN, OUTPUT);//设置为输出模式//digitalWrite(LAMP_PIN, lampVal);//控制IO端口Serial.printf("Turn lamp %s\n", lampVal ? "On" : "Off");
if(lampVal){for (int i = 0; i < 1024; i++) {//电平升高，从暗到明 analogWrite(LAMP_PIN, i); delay(2);}   }else{digitalWrite(LAMP_PIN, false);//控制IO端口/*for (int i = 1024; i >= 0; i--){//电平降低，从明到暗analogWrite(LAMP_PIN, i);delay(2); } */} }/****************************************************** 函数名称：HandleVal()* 函数说明：对客户端请求返回值处理* 参数说明：无
******************************************************/
void HandleVal()
{String wifis = webServer.arg("ssid"); //从JavaScript发送的数据中找ssid的值String wifip = webServer.arg("password"); //从JavaScript发送的数据中找password的值Serial.println(wifis);Serial.println(wifip);  //在这里处理接收到的数据if(wifis.equals("pwm")){     int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用Serial.println(i);    analogWrite(LAMP_PIN, i); }if(wifis.equals("r")){     int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用Serial.println(wifis+" "+i);         //analogWrite(LAMP_PIN1, i); FastLED.setBrightness(i);//设置对应的亮度leds[0]=CRGB::Red;//设置第一盏的颜色是红色FastLED.show();//显示颜色}else  if(wifis.equals("g")){     int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用Serial.println(wifis+" "+i);    //analogWrite(LAMP_PIN2, i); FastLED.setBrightness(i);//设置对应的亮度leds[0]=CRGB::Green;//设置第一盏的颜色是绿色FastLED.show();//显示颜色}else if(wifis.equals("b")){     int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用Serial.println(wifis+" "+i);    //analogWrite(LAMP_PIN3, i); FastLED.setBrightness(i);//设置对应的亮度leds[0]=CRGB::Blue;//设置第一盏的颜色是蓝色FastLED.show();//显示颜色}if(wifip.equals("on")){Serial.println("开灯");controlLamp(true);}else if(wifip.equals("off")){Serial.println("关灯");controlLamp(false);}else if(wifip.equals("data")){Serial.println("getdata");//在这里直接返回数据给客户端}String  cmd="ssid="+wifis+" password="+wifip+" is OK";  webServer.send(200, "text/plain", cmd);//在这里返回数据给客户端
}void setup() {Serial.begin(115200);WiFi.mode(WIFI_AP);WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));WiFi.softAP("DNSServer example");pinMode(LAMP_PIN1, OUTPUT);//设置为输出模式pinMode(LAMP_PIN2, OUTPUT);//设置为输出模式pinMode(LAMP_PIN3, OUTPUT);//设置为输出模式//initialize// tell FastLED about the LED strip configurationFastLED.addLeds<LED_TYPE,DATA_PIN,COLOR_ORDER>(leds, NUM_LEDS).setCorrection(TypicalLEDStrip);// set master brightness controlFastLED.setBrightness(BRIGHTNESS);//设置对应的亮度// modify TTL associated  with the domain name (in seconds)// default is 60 secondsdnsServer.setTTL(300);// set which return code will be used for all other domains (e.g. sending// ServerFailure instead of NonExistentDomain will reduce number of queries// sent by clients)// default is DNSReplyCode::NonExistentDomaindnsServer.setErrorReplyCode(DNSReplyCode::ServerFailure);// start DNS server for a specific domain namednsServer.start(DNS_PORT, "www.daodanjishui.com", apIP);// simple HTTP server to see that DNS server is workingwebServer.on("/HandleVal", HTTP_GET, HandleVal);//接收配网提交的参数和链接路由器,webServer.on("/", HTTP_GET,handleRoot);//显示主页webServer.onNotFound([]() {String message = "Hello daodanjishui!\n\n";message += "URI: ";message += webServer.uri();webServer.send(200, "text/plain", message);});webServer.begin();Serial.println("webServer is ok");
}void loop() {dnsServer.processNextRequest();webServer.handleClient(); }

源码工程请到最后面下载我工程源码，尊重原创，尊重劳动成果。

三、运行与调试

运行单片机创建热点，手机连上热点，浏览器输入192.168.4.1
登录主页

操作点灯即可，跟前三篇的操作类似。

下面是WS2811的模块显示效果：

下面是WS2812的模块显示效果：

总结

通过上面运行与调试状态良好，程序和硬件达到博文提出的要求，到此为止：浏览器网页无线点亮国产WS2812RGB灯和国产WS2811RGB灯就结束了，由于这个代码免费开源，所以我把异步提交get请求的代码改为刷新页面提交get请求的功能去掉了，感兴趣的读者可以看前三篇的内容。

如果是安装开发环境出了问题，那么请大家仔细上网搜寻解决问题的方案；如果是怀疑我代码写错了，那么是不可能的，代码我自己写，自己硬件测试。如果有更多的需求请私下找我交流，我缺的不是技术，而是一个奇特的想法或者创意······

最后附上本博文代码下载地址：https://www.cirmall.com/circuit/24660/
直接跳转

最简单DIY基于ESP8266的国产WS2812智能彩灯④（在网页用按钮点亮）相关推荐

最简单DIY基于ESP8266的智能彩灯⑦（APP通过彩虹调色板和WIFI控制WS2812彩灯）
ESP8266和ESP32智能彩灯开发系列文章目录第一篇:最简单DIY基于ESP8266的智能彩灯①(在网页用按钮点亮普通RGB灯) 第二篇:最简单DIY基于ESP8266的智能彩灯②(在网页用按键 ...
最简单DIY基于ESP8266的智能彩灯⑥（Android开发通过WIFI控制彩灯实现表白神器）
ESP8266和ESP32智能彩灯开发系列文章目录第一篇:最简单DIY基于ESP8266的智能彩灯①(在网页用按钮点亮普通RGB灯) 第二篇:最简单DIY基于ESP8266的智能彩灯②(在网页用按键 ...
最简单DIY基于ESP8266的智能彩灯②（在网页用按键和滑动条控制RGB灯）
ESP8266和ESP32智能彩灯开发系列文章目录第一篇:最简单DIY基于ESP8266的智能彩灯①(在网页用按钮点亮普通RGB灯) 第二篇:最简单DIY基于ESP8266的智能彩灯②(在网页用按键 ...
最简单DIY基于ESP8266的智能彩灯①（在网页用按钮点亮普通RGB灯）
ESP8266和ESP32智能彩灯开发系列文章目录第一篇:最简单DIY基于ESP8266的智能彩灯①(在网页用按钮点亮普通RGB灯) 文章目录 ESP8266和ESP32智能彩灯开发系列文章目录前 ...
最简单DIY基于ESP8266的智能彩灯③（在网页用按钮+滑动条+手机APP控制RGB灯）
ESP8266和ESP32智能彩灯开发系列文章目录第一篇:最简单DIY基于ESP8266的智能彩灯①(在网页用按钮点亮普通RGB灯) 第二篇:最简单DIY基于ESP8266的智能彩灯②(在网页用按键 ...
最简单DIY基于ESP8266的物联网智能小车①（webserver服务器网页简单遥控版）
ESP8266和ESP32物联网智能小车开发系列文章目录第一篇:最简单DIY基于ESP8266的物联网智能小车①(webserver服务器网页简单遥控版) 文章目录 ESP8266和ESP32物联网 ...
最简单DIY基于STM32单片机的WIFI智能小车设计方案
STM32库函数开发系列文章目录第一篇:STM32F103ZET6单片机双串口互发程序设计与实现第二篇:最简单DIY基于STM32单片机的蓝牙智能小车设计方案第三篇:最简单DIY基于STM32F ...
最简单DIY基于STM32单片机的蓝牙智能小车设计方案
STM32库函数开发系列文章目录第一篇:STM32F103ZET6单片机双串口互发程序设计与实现第二篇:最简单DIY基于STM32单片机的蓝牙智能小车设计方案文章目录 STM32库函数开发系列文 ...
最简单DIY基于STM32的远程控制电脑系统②（无线遥杆+按键控制）
STM32库函数开发系列文章目录第一篇:STM32F103ZET6单片机双串口互发程序设计与实现第二篇:最简单DIY基于STM32单片机的蓝牙智能小车设计方案第三篇:最简单DIY基于STM32F ...
最简单DIY基于ESP32CAM的物联网相机系统②（在JAVAWEB服务器实现图片查看器）
最简单DIY基于ESP32CAM的物联网相机系统系列文章目录第一篇:最简单DIY基于ESP32CAM的物联网相机系统①(用网页实现拍照图传) 第二篇:最简单DIY基于ESP32CAM的物联网相机系统 ...

最简单DIY基于ESP8266的国产WS2812智能彩灯④（在网页用按钮点亮）