最简单DIY基于ESP8266的智能彩灯②（在网页用按键和滑动条控制RGB灯）

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

第一篇：最简单DIY基于ESP8266的智能彩灯①（在网页用按钮点亮普通RGB灯）
第二篇：最简单DIY基于ESP8266的智能彩灯②（在网页用按键和滑动条控制RGB灯）

---

---

前言

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

---

一、最简单DIY基于ESP8266的智能彩灯②（在网页用按键和滑动条控制RGB灯）是什么？

    根据国内STM32芯片的价格已经飙到天价，daodanjishui要做的事就是把创作的重心放在国产芯片上，由于物联网时代的到来，万物互联，当然少不了wifi芯片，在嵌入式设备中基于成本等方面的考虑，ESP8266和ESP32芯片脱颖而出，该国产芯片雄起，并没有价格上涨。发展国家科学技术从我做起。虽然我不能制造国产芯片硬件，但是我可以针对大部分国产芯片编写物联网软件生态，下面引出正题。
    相比第一篇：最简单DIY基于ESP8266的智能彩灯①（在网页用按钮点亮普通RGB灯）的功能，第二篇的功能在第一篇的基础上，多增加了三个网页滚动条同时控制RGB彩灯。

优酷视频演示效果：https://v.youku.com/v_show/id_XNTEzOTY4MzI2NA==.html

直接看视频

最简单DIY基于ESP8266的智能彩灯②（在网页用滑动条控制RGB灯）

    ESP8266真正流行起来的时间要追溯到2018年，当时各大开源STM32开发板教程（包括正点原子，野火）都采用了外接ESP8266模块无线上网的方式，不过技术还不够好，云服务器还没有搭建成功，教程也没有写好，反而板载用的是ENC28J60以太网模块接网线上网，或者是用好点的DM9000芯片接网线上网，这两个有线的网卡都需要跑一个UIP或者是LWIP的协议才能上网，当时这两个有线网卡的教程相当丰富！！！诱惑我当时我也入坑了这两个有线网卡的程序，速度慢就不说了，还涉及一堆寄存器，指针，结构体，要用单片机另外的资源去控制这两个网卡，现在都忘记怎么用了，总之走了弯路。而且当时开发板用无线上网的方案国内基本上是用高级单片机STM32的串口发送AT指令控制ESP8266的，其实这样也浪费了ESP8266的资源，背诵了一大堆AT指令，到现在也忘记了。当时我还把正点原子关于ESP8266的帖子都看完去，也是收获不大，顶多自主设计了一款空中鼠标申请了一个软件著作权之后就停滞不前了。
    真正让我捣鼓ESP8266是这两年时间内，当时用安信可公司提供的eclipse 的SDK去开发ESP8266太过于繁琐，后面我才发现用arduino开发ESP8266就变得事半功倍了，不再需要AT指令了，取而代之的是Arduino随叫随到的开源库供我使用，到目前为止我都一直在用Arduino开发环境去开发ESP8266和ESP32，现在市面上一些智能家居都是用的ESP8266来做的，成本低很多。我现在针对电路城网站做出的物联网作品有：基于ESP32视频监控机械臂系统（上位机和下位机）、ESP8266彩灯矩阵系统（上位机和下位机）、ESP32国产物联网照相机系统（上位机和下位机）、ESP8266+Zigbee开源农业大棚监控系统（上位机和下位机）等等，打算都开源了，只不过写教程比较花时间，代码都已经写好的，例如现在智能灯系列的如下图所示：

以前用的都是RT5350做的网关或者是无线网卡，包括那个济南有人物联网用的就是RT5350的方案实现单片机串口转网络的方案，但是要明白RT5350是台湾联发科公司生产路由芯片，属于高端的芯片价格不便宜的，所以卖这些无线网卡的产品价格贵得离谱，不过它们的好处就是可以直接上网直接处理数据，还有上海的上海贝锐信息科技股份有限公司，主打产品就是内网映射花生棒，里面就用了RT5350！能让我们自己电脑开发的网站能让别人在公网上访问得到。
     现在广大程序爱好者感到困惑的是ESP8266或者是ESP32能否作为路由器芯片，能直接上网吗？能直接做网关吗？能代替Linux系统吗？能跟单片机通信吗？能下载资料存硬盘吗？能使用MQTT协议吗？能图传吗？能显示网页吗？能照相吗？让我的开源教程来答疑解惑，ESP32出生到现在不超过5年，但是现在应用相当广泛了，性能跟STM32F4差不多了，完全可以自给自足了。数数手指头我也有十年玩转嵌入式的经历了，试问谁能坚持一个兴趣十年，然后十年经验出一个教程卖十几块，购买我的开源软件就相当于支持国产。
    现在的ESP8266和ESP32属于能国产的芯片，上海乐鑫科技公司是这两个芯片原厂。在中美芯片之争的情况下，我希望自己能做几期开源项目采用国产芯片的方案来让广大开发者把注意力放在自家芯片上，发展和壮大本国的科学技术 ，暂时不考虑联发科或者树莓派之类的芯片软件方案，虽然这些跑Linux系统的芯片很好用很受欢迎，而且我是玩转ARM9比较早的一批玩家，对于RT5350这类跑Linux系统的芯片可以说学会爬行就直接可以学跑步了，不需要经过走路才能跑这个阶段。

二、使用步骤

1.准备硬件

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

芯片包装如下：

（2）购买普通RGB灯，这个到处都有卖的。

2.搭建Arduino开发环境

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

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

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

安装好之后你会发现开发板选项多了ESP8266这类的开发板。实在不行就找其他教程再试试了，没有必要一步一步教这个开发环境搭建。

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

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

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

（6）按照源码的IO口连接RGB灯，再点击下载

#define LAMP_PIN1 14 //R–D5
#define LAMP_PIN2 12 //G–D6
#define LAMP_PIN3 13 //B–D7

注意了灯的GND与单片机的GND相连。代码中生成三路PWM波控制三个RGB管脚对应的灯丝发光。

下载完成即可运行程序了。

3.准备一份webserver源码

因为要开发网页点灯，必须使用到嵌入式网页服务器，得益于Arduino的库，在安装好ESP8266开发环境之后，在Arduino IDE就有现成的源码供读者使用，初学者可以通过下载IDE自带的源码进行学习，这也是我一路走来的捷径分享给大家了。
源码路径如下图所示：（选了第一个源码）

/*
   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 
#include 
#include 
#include 

#ifndef STASSID
#define STASSID "your-ssid"
#define STAPSK  "your-password"
#endif

const char *ssid = STASSID;
const char *password = STAPSK;

ESP8266WebServer server(80);

const int led = 13;

void handleRoot() {
  digitalWrite(led, 1);
  char temp[400];
  int sec = millis() / 1000;
  int min = sec / 60;
  int hr = min / 60;

  snprintf(temp, 400,

           "\
  \
    \
    \
    \
  \
  \
    
Hello from ESP8266!
\
    
Uptime: %02d:%02d:%02d
\
    \
  \
",

           hr, min % 60, sec % 60
          );
  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 drawGraph() {
  String out;
  out.reserve(2600);
  char temp[70];
  out += ";
  out += "\n";
  out += "\n";
  int y = rand() % 130;
  for (int x = 10; x < 390; x += 10) {
    int y2 = rand() % 130;
    sprintf(temp, "\n", x, 140 - y, x + 10, 140 - y2);
    out += temp;
    y = y2;
  }
  out += "\n\n";

  server.send(200, "image/svg+xml", out);
}

void setup(void) {
  pinMode(led, OUTPUT);
  digitalWrite(led, 0);
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  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");
  }

  server.on("/", handleRoot);
  server.on("/test.svg", drawGraph);
  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) {
  server.handleClient();
  MDNS.update();
}

4.修改webserver源码

总的来说修改的地方还是很多的，改到面目全非了加入了不少的内容，才能让其功能完善。工程截图：

关键接收网络请求的代码，因为在网页提交表单，单片机需要响应网页的请求，这里我使用的字符串转化为整数的技巧将滚动条提交的表单转化为整型数字，这也是我自己摸索出来的：

/*****************************************************
 * 函数名称：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); 
     }else  if(wifis.equals("g")){     
      int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用
       Serial.println(wifis+" "+i);    
       analogWrite(LAMP_PIN2, i);     
     }else if(wifis.equals("b")){     
      int i=wifip.toInt();//在此把wifip转化成INT型数值,以备后续使用
       Serial.println(wifis+" "+i);    
       analogWrite(LAMP_PIN3, i); 
     }
   
    
    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);//在这里返回数据给客户端
}

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

三、运行与调试

（1）用手机测试软件和硬件，ESP8266下载程序完成之后自动重启，开启了一个名字叫：DNSServer example的热点没有密码，用手机wifi连上之后，在浏览器输入192.168.4.1就会进入下面的主页：

（2）开始测试，点击发送按钮：send 就会看到红色的字体，这是ESP8266给的反馈信息，根据这个知道机器是否响应了你的请求，这个反馈不知道有多少人都调不出来，同时看到灯变化了，红灯r亮度值是168，注意了，提交表单的时候页面不会跳转，市面上的软件方案有百分之八十的都会跳转，而我的没有，不信你可以试试页面上那个“提交表单指令测试”，体验一下跳转页面。所以我这个奇特的功能很容易改造为wifi遥控器，不过调试的遇到的麻烦还不如直接下载我的方案了，如下所示：

（3）然后继续红绿蓝三个灯丝合成组合的颜色效果，需要用手调节滑动条(这个滚动条在ESP8266里面实现不知道有多少人做不到，并且滚动的时候能实时响应和反馈回来，如果我设置下载门槛啊，人人都能有了)：

最大的亮度是1024，最小亮度是0，相当于熄灭，最漂亮的颜色比例的如下图所示（223行代码，不知道能值多少钱呢？）：

---

总结

    通过上面运行与调试状态良好，程序和硬件达到博文提出的要求，到此为止：浏览器网页滚动条无线点亮普通RGB灯就结束了。

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

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