ESP8266和ESP32智能彩灯开发系列文章目录
第一篇：最简单DIY基于ESP8266的智能彩灯①（在网页用按钮点亮普通RGB灯）
第二篇：最简单DIY基于ESP8266的智能彩灯②（在网页用按键和滑动条控制RGB灯）
第三篇：最简单DIY基于ESP8266的智能彩灯③（在网页用按钮+滑动条+手机APP控制RGB灯）
第四篇：最简单DIY基于ESP8266的国产WS2812智能彩灯④（在网页用按钮点亮）
第五篇：最简单DIY基于ESP8266的智能彩灯⑤(用C#调色板UI通过串口控制WS2812彩灯)
文章目录
前言
daodanjishui物联网核心原创技术之最简单DIY基于ESP8266的智能彩灯⑤(用C#调色板UI通过串口控制WS2812彩灯)。
市面上有各种开源智能彩灯上位机程序出售，但是有复杂的有简单的，如果想快速入门用C#图形化界面通过串口点亮国产WS2812RGB灯，这个方案会给你一个快捷高效的方案。
一、最简单DIY基于ESP8266的智能彩灯⑤(用C#调色板UI通过串口控制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创建热点，然后用户在其嵌入式主页控制彩灯的变化，这次点64盏WS2812灯。下面是Arduino写的原创开源代码截图，截图中用了64个彩灯：
这次软件UI设计采用C#语言，设计使用的VS2013 集成开发环境开发上位机，使用Arduino IDE开发ESP8266程序，ESP8266采用一个IO口与WS2812通信，控制8*8=64盏灯的颜色，同时保留网页点灯的功能，可以网页点灯和电脑C# UI点灯同时控制，一般人还真的写不出来这样的效果。因为有可能会冲突的。该设计是：最简单DIY基于ESP8266的国产WS2812智能彩灯④（在网页用按钮点亮）的升级版，保留原来功能上增加了新的功能。
硬件使用了：ESP-12F D1开发板和WS2812彩灯矩阵。手机连上ESP6266热点之后，在浏览器打开嵌入式主页：
运行效果如下：
B站视频如下:
最简单DIY基于ESP8266的智能彩灯⑤（用C#调色板UI通过串口控制WS2812彩灯）
视频地址是：https://www.bilibili.com/video/BV1af4y1M7QC?t=0.0
二、使用步骤
1.准备硬件
（1）准备ESP8266开发板：[mini D1 wifi ESP-12F N ESP8266]。
芯片包装如下：
（2）准备WS2812国产RGB灯板，注意是8*8=64个灯。
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灯的数量，我的设置为64，与上一期不一样的数量
#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 120
void setup() {
delay(3000); // 3 second delay for recovery
// tell FastLED about the LED strip configuration
FastLED.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 control
FastLED.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 patterns
void loop()
{
// Call the current pattern function once, updating the 'leds' array
gPatterns[gCurrentPatternNumber]();
// send the 'leds' array out to the actual LED strip
FastLED.show();
// insert a delay to keep the framerate modest
FastLED.delay(1000/FRAMES_PER_SECOND);
// do some periodic updates
EVERY_N_MILLISECONDS( 20 ) { gHue++; } // slowly cycle the "base color" through the rainbow
EVERY_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 end
gCurrentPatternNumber = (gCurrentPatternNumber + 1) % ARRAY_SIZE( gPatterns);
}
void rainbow()
{
// FastLED's built-in rainbow generator
fill_rainbow( leds, NUM_LEDS, gHue, 7);
}
void rainbowWithGlitter()
{
// built-in FastLED rainbow, plus some random sparkly glitter
rainbow();
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 smoothly
fadeToBlackBy( 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 trails
fadeToBlackBy( 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++) { //9948
leds[i] = ColorFromPalette(palette, gHue+(i*2), beat-gHue+(i*10));
}
}
void juggle() {
// eight colored dots, weaving in and out of sync with each other
fadeToBlackBy( 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物联网智能彩灯5
//作者：daodanjishui
//时间:2021.11
#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 64 //灯的数量
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~255
const 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--D7
void controlLamp(bool lampVal) {//点灯函数,GPIO16 -----D0
pinMode(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 configuration
FastLED.addLeds<LED_TYPE,DATA_PIN,COLOR_ORDER>(leds, NUM_LEDS).setCorrection(TypicalLEDStrip);
// set master brightness control
FastLED.setBrightness(BRIGHTNESS);//设置对应的亮度
// modify TTL associated with the domain name (in seconds)
// default is 60 seconds
dnsServer.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::NonExistentDomain
dnsServer.setErrorReplyCode(DNSReplyCode::ServerFailure);
// start DNS server for a specific domain name
dnsServer.start(DNS_PORT, "www.daodanjishui.com", apIP);
// simple HTTP server to see that DNS server is working
webServer.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();
}
//因为涉及到串口通信，还需要加入串口接收的程序。
//方法一：阻塞了wifi功能
byte r, g, b; //串口助手输入举例：ffffff 注意不要加回车换行之类的,一定要以十六进制发送,显示的是白色
//ff0000红色;00ff00绿色;0000ff蓝色,绝对不能发送ff这种两位十六进制的数
//arduino一共接收三次,第一次取出1个字节的数据给r分量
while(!Serial.available());
r = Serial.read();
while(!Serial.available());
g = Serial.read();
while(!Serial.available());
b = Serial.read();
myRGBcolor.r=r;//设置分量
myRGBcolor.g=g;//设置分量
myRGBcolor.b=b;//设置分量
Serial.println("RGB:");
fill_solid(leds,NUM_LEDS,myRGBcolor);//设置蓝色分量
FastLED.setBrightness(168);//设置对应的亮度
FastLED.show();//显示颜色
//控制亮度的代码如下：
if(wifis.equals("Brightness")){
int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用
Serial.println(wifis+" "+i);
FastLED.setBrightness(i);//设置对应的亮度
FastLED.show();//显示颜色
}
源码工程请到最后面下载我工程源码，尊重原创，尊重劳动成果。
C#代码截图如下：
三、运行与调试
详情请看B站视频，主要的思路就是：C#采集软件UI上鼠标点击的颜色通过串口传输给单片机ESP8266，单片机收到信息之后解析颜色然后控制灯板显示响应的颜色出来。同时嵌入式网页也可以接受网页的请求控制彩灯颜色的变化。
总结
通过上面运行与调试状态良好，程序和硬件达到博文提出的要求，到此为止：浏览器网页无线点亮国产WS2812RGB灯和国产WS2811RGB灯就结束了，制作物联网智能彩灯需要持之以恒的努力和创新的想象力，支持原创请大家去下载我原创的代码。
如果是安装开发环境出了问题，那么请大家仔细上网搜寻解决问题的方案；如果是怀疑我代码写错了，那么是不可能的，代码我自己写，自己硬件测试。如果有更多的需求请私下找我交流，我缺的不是技术，而是一个奇特的想法或者创意······
最后附上本博文代码下载地址：https://gf.bilibili.com/item/detail/1107806114
直接跳转
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
