一、基础版点亮小灯

(1)介绍: 通过Arduino点亮ESP8266开发板中自带的小灯,实现控制小灯的亮灭。

(2)硬件搭建: ESP8266通过连接数据线插入电脑的USB接口中,如图所示:

在这里插入图片描述

(3)软件程序:

#include<ESP8266WiFi.h>
#include<ESP8266WiFiMulti.h>
#include<ESP8266WebServer.h>

ESP8266WiFiMulti wifiMulti;       //建立ESP8266WiFiMulti的对象,对象名为wifiMulti
ESP8266WebServer esp8266_server(80);  //建立ESP8266WebServer的对象,对象名为esp8266_server;这里表明设置ESP8266为服务器

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);   //启动串口监视

  pinMode(LED_BUILTIN,OUTPUT);    //使能LED管脚

  
  wifiMulti.addAP("ssid1","password");      //启动连接wifi
  wifiMulti.addAP("ssid2","password"); 
  Serial.println("Connecting ..."); 

  int i =0;
  while(wifiMulti.run() != WL_CONNECTED){     //判断wifi是否连接成功

    delay(1000);
    Serial.print(i++);
    Serial.print(' ');
  }

  //wifi连接成功后的串口信息
  Serial.println('\n');
  Serial.print("Connected to");
  Serial.println(WiFi.SSID());        //WiFi.SSID()函数表示连接WiFi的名字
  Serial.print("IP Adress is:");
  Serial.println(WiFi.localIP());     //WiFi.localIP()函数表示连接WiFi的IP地址

  //开始启动网络服务程序
  esp8266_server.begin();
  esp8266_server.on("/",HTTP_GET,handleRoot);     //起始页面
  esp8266_server.on("/LED",HTTP_POST,handleLED);  //跳转到这个页面控制电灯
  esp8266_server.onNotFound(handleNotFound);      //跳转失败页面


  Serial.println("HTTP esp8266_server started");//  告知用户ESP8266网络服务功能已经启动
}

void loop() {
  // put your main code here, to run repeatedly:
  esp8266_server.handleClient();      // 处理http服务器访问,它的主要作用之一是检查有没有设备通过网络向NodeMCU发送请求 
}

//server响应中调用的各个函数
void handleRoot(){      //让页面显示Toggle Led按键,点击按钮将会跳转/LED页面。这里简单的写了个页面,通过send函数发送请求的页面
  
  esp8266_server.send(200,"text/html","<form action=\"/LED\" method=\"POST\"><input type=\"submit\" value=\"Toggle LED\"></form>");
  
}

void handleLED(){

  digitalWrite(LED_BUILTIN,!digitalRead(LED_BUILTIN));    //当小灯为低电平时使其变高,当小灯为高电平时使其变低,从而控制小灯的亮灭
  esp8266_server.sendHeader("Location","/");              //跳转回页面的根目录
  esp8266_server.send(303);                               // 发送Http相应代码303 跳转 
  
}

void handleNotFound(){

  esp8266_server.send(404,"text/plain","Connected unsuccessed,please try again.");
}

(4)效果展示图:
前端页面的开关按键,点击按键将会控制小灯的亮灭
在这里插入图片描述
小灯被点亮图:

在这里插入图片描述


二、进阶版的点亮小灯——改造你身边的台灯

(1)介绍: 理论运用于实际。通过基础班的点亮小灯,了解了其基本原理后,我们将理论运用于实际,点亮你身边的台灯。这一次我们通过闪存文件系统,将前端代码上传到ESP8266中的闪存中直接使用。

(2)硬件搭建: 所需要的硬件材料有:①ESP8266-nodeMCU、②5V低电平触发继电器和一个有线台灯。如图所示:

在这里插入图片描述

其中,引脚接入:
①ESP8266与继电器的引脚接法(左边是ESP8266的引脚,右边是继电器的引脚):

GND->GND;
3v3->Vcc;
D4(注:LED_BUILTIN为D4引脚)->IN;

在这里插入图片描述

②继电器与台灯接法:
将台灯的线剪段,台灯里面的线有3条线(有些只有2条线),其中有一条线是白线,这是开关的控制线,可以不用管他,只接黑线和红线就好了。两头的黑线分别接到继电器的COM和NO口上,红线部分中的铜丝则相互缠在一起,具体接法如图所示:

在这里插入图片描述

(3)软件程序:
这里准备使用闪存系统,将前端代码部分上传到nodeMCU中。
注意data文件夹(存放html代码的文件)要与Arduino项目放在同一文件夹中。
在这里插入图片描述
然后打开Arduino程序,打开工具按钮选择ESP8266 Sketch Updater将data资源上传到开发板的闪存系统中。

在这里插入图片描述
注意:这个选项是需要安装下载好 Arduino-ESP8266闪存文件插件程序后才有的,如果不知道怎么下载安装,可以参考太极创客官网的安装教程(这是一个教学物联网的团队,强烈推荐小白学习)——太极创客闪存插件安装教程

前端页面代码:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
	<title>LED_handle2</title>
</head>

<body>
<center>
<div id="demo">
<h1>以下按钮可控制ESP8266开发板引脚</h1>
 <br>
  <button type="button" onclick="sendData(1)">点亮 LED</button>
  <button type="button" onclick="sendData(0)">关闭 LED</button><br>
</div>

<div>
    LED引脚状态 : <span id="LEDState">NA</span><br>
</div>
<br><br>

<script>
function sendData(led) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("LEDState").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "setLED?LEDstate="+led, true);
  xhttp.send();
}
 
</script>
</center>
</body>
</html>

Arduino代码:

#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>
#include <ESP8266WebServer.h>
#include <FS.h>

ESP8266WiFiMulti wifiMulti;     // 建立ESP8266WiFiMulti对象,对象名称是 'wifiMulti'

ESP8266WebServer esp8266_server(80);    // 建立网络服务器对象,该对象用于响应HTTP请求。监听端口(80)

void setup() {
  Serial.begin(9600);          // 启动串口通讯
  Serial.println("");

  pinMode(LED_BUILTIN, OUTPUT);   // 初始化NodeMCU控制板载LED引脚为OUTPUT
  digitalWrite(LED_BUILTIN, HIGH);// 初始化LED引脚状态
  
  wifiMulti.addAP("HONOR V30 PRO", "12345678"); // 将需要连接的一系列WiFi ID和密码输入这里
  wifiMulti.addAP("ssid_from_AP_2", "your_password_for_AP_2"); // ESP8266-NodeMCU再启动后会扫描当前网络
  wifiMulti.addAP("ssid_from_AP_3", "your_password_for_AP_3"); // 环境查找是否有这里列出的WiFi ID。如果有
  Serial.println("Connecting ...");                            // 则尝试使用此处存储的密码进行连接。

  //等待连接WiFi过程中
  int i = 0;  
  while (wifiMulti.run() != WL_CONNECTED) { // 尝试进行wifi连接。
    delay(1000);
    Serial.print(i++); Serial.print(' ');
  }
  
  // WiFi连接成功后将通过串口监视器输出连接成功信息 
  Serial.println('\n');
  Serial.print("Connected to ");
  Serial.println(WiFi.SSID());              // 通过串口监视器输出连接的WiFi名称
  Serial.print("IP address:\t");
  Serial.println(WiFi.localIP());           // 通过串口监视器输出ESP8266-NodeMCU的IP

  if(SPIFFS.begin()){                       // 启动闪存文件系统
    Serial.println("SPIFFS Started.");
  } else {
    Serial.println("SPIFFS Failed to Start.");
  }     
 
  esp8266_server.on("/setLED", handleLED); 
  esp8266_server.onNotFound(handleUserRequest); // 处理其它网络请求

  // 启动网站服务
  esp8266_server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {
  esp8266_server.handleClient();
}


void handleLED() {
 String ledState = "OFF";
 String LED_State = esp8266_server.arg("LEDstate"); //参考xhttp.open("GET", "setLED?LEDstate="+led, true);
 Serial.println(LED_State);
 
 if(LED_State == "1"){
  digitalWrite(LED_BUILTIN,LOW); //LED 点亮
  ledState = "ON"; //反馈参数
 } else {
  digitalWrite(LED_BUILTIN,HIGH); //LED 熄灭
  ledState = "OFF"; //反馈参数
 }
 
 esp8266_server.send(200, "text/plain", ledState); //发送网页
}

// 处理用户浏览器的HTTP访问
void handleUserRequest() {         
     
  // 获取用户请求资源(Request Resource)
  String reqResource = esp8266_server.uri();
  Serial.print("reqResource: ");
  Serial.println(reqResource);
  
  // 通过handleFileRead函数处处理用户请求资源
  bool fileReadOK = handleFileRead(reqResource);

  // 如果在SPIFFS无法找到用户访问的资源,则回复404 (Not Found)
  if (!fileReadOK){                                                 
    esp8266_server.send(404, "text/plain", "404 Not Found"); 
  }
}

bool handleFileRead(String resource) {            //处理浏览器HTTP访问

  if (resource.endsWith("/")) {                   // 如果访问地址以"/"为结尾
    resource = "/index.html";                     // 则将访问地址修改为/index.html便于SPIFFS访问
  } 
  
  String contentType = getContentType(resource);  // 获取文件类型
  
  if (SPIFFS.exists(resource)) {                     // 如果访问的文件可以在SPIFFS中找到
    File file = SPIFFS.open(resource, "r");          // 则尝试打开该文件
    esp8266_server.streamFile(file, contentType);// 并且将该文件返回给浏览器
    file.close();                                // 并且关闭文件
    return true;                                 // 返回true
  }
  return false;                                  // 如果文件未找到,则返回false
}

// 获取文件类型
String getContentType(String filename){
  if(filename.endsWith(".htm")) return "text/html";
  else if(filename.endsWith(".html")) return "text/html";
  else if(filename.endsWith(".css")) return "text/css";
  else if(filename.endsWith(".js")) return "application/javascript";
  else if(filename.endsWith(".png")) return "image/png";
  else if(filename.endsWith(".gif")) return "image/gif";
  else if(filename.endsWith(".jpg")) return "image/jpeg";
  else if(filename.endsWith(".ico")) return "image/x-icon";
  else if(filename.endsWith(".xml")) return "text/xml";
  else if(filename.endsWith(".pdf")) return "application/x-pdf";
  else if(filename.endsWith(".zip")) return "application/x-zip";
  else if(filename.endsWith(".gz")) return "application/x-gzip";
  return "text/plain";
}

(4)效果展示:

前端页面图:

在这里插入图片描述

小灯效果图:
在这里插入图片描述


三、更进阶版的点亮小灯——通过语音控制来控制台灯的亮灭

(1)介绍: 通过点灯·blinker手机APP,实现对台灯的语音控制。

(2)硬件搭建: 和二中的进阶板点亮小灯一样,需要ESP8266-nodemcu、5v低电平触发继电器和台灯。一下就不具体详细介绍了。

(3)软件程序: 手机下载点灯·blinker,通过这个APP可以实现手机控制和语音控制台灯的亮灭。如果你的手机有小爱同学、天猫精灵和小米的语音助手的话,更能直接通过这些语音助手直接唤醒台灯的亮灭。没有这些语音助手的话,则需要通过打开点灯APP中的语音功能来控制。具体的操作步骤我就不在这里书写了,可以直接参考其官网的操作文档,跟着官网的步骤一步一步来就可以操作了——点灯·blinker官网

在这里插入图片描述
在这里插入图片描述

(4)效果展示: 通过语音控制台灯的亮灭

在这里插入图片描述

四、资源代码:

上述三个小项目的资源代码我将上传到GitHub和gitee上,有需要程序的伙伴们可以去那里下载。
github仓库
gitee仓库


五、参考学习资料:

(1)太极创客官网
(2)点灯·blinker官网
(3)Arduino中文社区

更多推荐