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

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

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

前言

????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  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物联网智能彩灯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~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(); 
  
}

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

三、运行与调试

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

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

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

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

总结

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

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

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