文章
文章用户商铺文档圈子网址导航供求信息

基于ESP8266-01和Arduino的物联网实例

释放双眼，带上耳机，听听看~！

简介

今天，我们将构建一个通过网络进行控制的设备，用户可以通过wifi远程控制他/她的设备。我们将通过ESP8266-01 wifi模块以及Arduino板（任何型号都能很好地完成工作）来制作这个设备。让我们开始吧！

步骤一 材料准备

硬件准备：

arduino nano R3

espressif ESP8266 ESP-01

双通道继电器模块

led 面包板 条线

1k电阻两个

2.2k电阻一个

软件准备：

microsoft visual studio

arduino IDE

autodesk eagle[/content_hide]

步骤二 原理说明

ControlPanel

我们将构建一个简单的网页，用户通过控制任何系统中的电器。构建网页，我们将使用：

  • HTML
  • CSS
  • jQuery

嵌入式硬件

网页向ESP8266-01发送一些指令，ESP8266-01作为连接到Arduino板的Web服务器。根据传入的数据，Arduino板将采取一些操作，如打开灯泡，关闭电视，在这部分，我们将使用：

  • Arduino的
  • ESP8266-01

ESP8266-01入门

正如我们之前所说，我们需要把我们的Arduino板连接到互联网，但Arduino Nano暂时不具备这个功能。因此，我们将使用ESP8266-01 wifi模块为我们的小型Arduino板添加wifi功能。

关于ESP wifi模块有很多型号，我应该选哪一款？！好吧，几乎所有的ESP系列wifi模块都能很好地完成工作，但每个都有自己的功能和规格。我希望您可以查看每个规格和功能，以选择最适合您需求的产品。

基于ESP8266-01和Arduino的物联网实例

根据我的需要，我发现ESP8266-01是最合适的。它在制造商社区非常有名。因此，它有一个非常可靠的在线社区，您可以找到几乎所有这个令人敬畏的小模块面临的问题或问题的答案。此外，它的价格非常便宜。

它非常容易与Arduino板一起使用，因为它的串行wifi模块可以通过串行通信与Arduino板通信。它有一个内置的微控制器，这意味着你可以在一个组合中将它作为一个独立的微控制器和wifi模块使用，这是非常酷的。它内置了两个GPIO。让我们仔细看看这个模块。

基于ESP8266-01和Arduino的物联网实例
  • VCC：连接到+ 3.3V电源。不要用5V电源连接它会损坏。
  • GND：-ve引脚，将其连接到电路的地。
  • CH_PD：芯片使能引脚 – 高电平有效。将其连接到逻辑值HIGH以允许模块启动。
  • RST：芯片复位引脚 – 低电平有效，当它拉低时复位模块。
  • GPIO0，GPIO2：通用输入/输出引脚。
  • Tx：连接到微控制器（Arduino）的Rx以建立串行通信。
  • Rx：连接到微控制器（Arduino）的Tx以建立串行通信。

ESP8266-01配置

正如我们之前所说，ESP8266-01模块通过串行通信与Arduino板通信，这意味着我们需要将它与Arduino的串行引脚0,1（Tx，Rx）连接。但问题是这些引脚会很忙，因为我们将使用Arduino串行监视器和ESP8266-01进行调试。因此，我们需要找到另外两个串行通信引脚，以便与ESP8266-01一起使用。

幸运的是，Arduino让这很容易。有一个名为“ SoftwareSerial ” 的库，它开发用于允许Arduino的其他数字引脚上的串行通信，使用软件来复制功能。例如，通过使用该库，我可以将引脚2,3（SoftwareSerial）设置为Rx和Tx以及引脚0,1（硬件串行）。

只要传输速度低于19,200波特，“SoftwareSerial” 库就能很好地工作。但是，这里有一个小问题！ESP8266-01 wifi模块来自工厂编程，以115,200波特的速度通信，这在“SoftwareSerial”库中以某种方式很难进行通信。因此，我们需要重新编程我们的wifi模块，将通信速度设置为9600波特，这对“SoftwareSerial”库非常有用。为此，我们将使用一些“AT命令”。

更改ESP8266-01通讯速度

第一步：将空程序上传到Arduino板

基于ESP8266-01和Arduino的物联网实例

在此步骤中，我们将空代码上传到Arduino板。只是为了确保Arduino板在后台执行没有任何东西。

第二步：将ESP8266-01与Arduino板连接

基于ESP8266-01和Arduino的物联网实例

要重新配置ESP8266-01并更改通信速度（波特率），我们使用AT命令。简单地说，AT命令是用于控制调制解调器，移动电话，蓝牙模块，wifi模块，GSM模块的一些指令。

通过这些命令，我​​们可以获得有关我们的手机或GSM模块的基本信息，如制造商名称，型号，IMEI等。“AT”是“ATtention”的缩写，它被称为AT命令，因为每个命令都会启动用“AT”。“AT”前缀不是命令本身的一部分，它只是告诉模块命令的开始。

一些重要的AT命令

基于ESP8266-01和Arduino的物联网实例

命令编号“4” 取决于您的ESP8266-01固件版本，如果此命令不起作用AT+CIOBAUD= 请尝试此操作AT+UART_DEF=,8,1,0,0

第1步：打开串行监视器

基于ESP8266-01和Arduino的物联网实例

步骤2：将通信速度设置为115,200波特

基于ESP8266-01和Arduino的物联网实例

正如我们之前所说，ESP来自制造商，其编程为以115,200波特的速度进行通信。因此我们需要首次将Arduino通信速度设置为115,200 ，然后才会更改。此外，您应该选择“两个NL和CR” 。

步骤3：发送“AT”并等待响应，以确保ESP模块听到您的声音。

基于ESP8266-01和Arduino的物联网实例

第4步：现在，更改ESP8266-01通信速度

基于ESP8266-01和Arduino的物联网实例

我的ESP8266-01模块加载的固件是1.6。这个命令AT+UART_DEF=,8,1,0,0对我很有用。如果它不适合你，试试这个AT+CIOBAUD=。如果它以“OK” 响应，那么您的ESP模块通信波特率从115,200 波特变为9600 波特。恭喜！

基于ESP8266-01和Arduino的物联网实例

让我们将串行监视器通信速度更改回9600并再次发送“AT”以查看ESP模块是否能够以新的速度（9600）听到我们的声音。

基于ESP8266-01和Arduino的物联网实例

看！它正在工作。ESP8266-01现在可以9600波特率而不是115,200波特率与Arduino板通信。

现在，让我们尝试连接Wifi网络

基于ESP8266-01和Arduino的物联网实例

按Enter键后，ESP8266-01将搜索此网络并与之连接。如果该过程成功，它将返回此

WIFI CONNECTED

WIFI GOT IP

此时，我们成功地将ESP8266-01的通信速度从115,200波特改为9600波特。现在，我们需要构建用户将用来控制其家用电器的控制面板（Web Page）。所以，让我们建立它！

什么是互联网？

实际上，互联网是埋在地下的电线，它可以是光纤，铜线，甚至是卫星，但互联网只是一根电线。连接到该电线的任何两台计算机都可以通信。如果计算机直接连接到该线路，则称为服务器，如果它没有直接连接到该线路，则称为客户端。

服务器：是一台运行特定操作系统（如Apache）的特殊计算机，这台特殊的计算机在其磁盘驱动器上保存了一些网页，文件和数据库。任何连接到互联网的服务器都有一个独特的IP地址，如172.217.171.228 ，IP地址就像一个电话号码，可以帮助人们轻松找到对方。由于该IP地址对于人类来说并不容易记住。所以，我们只是给它起了一个名字google.com （域名）。

客户端：它是一台类似于您和我每天使用的计算机，它通过互联网服务提供商（ISP）间接连接到互联网，并且它还具有唯一的IP地址。

工作场景

简单地说，它首先是从谷歌浏览器（客户端）发送的请求，如谷歌浏览器，Firefox，并以从网络服务器收到的响应结束。

您从计算机（客户端）在浏览器中输入网站URL makesomestuff.org ，然后此浏览器向网站服务器发送请求主机网站，然后网络服务器返回包含HTML页面或任何其他文档格式的响应到浏览器显示它。

确切地说，这就是我们今天在项目中需要做的事情。我们需要从Web浏览器（客户端）向ESP8266-01（Web服务器）发送请求，这两个请求都连接到同一本地网络。此请求包含一些数据，告诉Arduino如何打开或关闭灯泡。那么，让我们构建网页！

构建网页

要构建我们的网页，我们必须处理HTML，CSS，Javascript。如果你以前从未听说过这些名字，请不要担心我找到了你。

HTML：代表“超文本标记语言”我们用它来构建任何网页主结构。就像添加一些按钮，图像，段落，标题，表格和更多元素一样。它由一系列元素组成，告诉浏览器如何显示网页内容。这些元素由称为标签的东西代表。

基于ESP8266-01和Arduino的物联网实例

CSS：它代表级联样式表。在构建网页主结构之后，你需要让这个结构看起来不错，这里有CSS来制作一些样式。它是一种描述HTML元素样式的语言。它由一些选择器和减速块组成。

基于ESP8266-01和Arduino的物联网实例

Javascript：它是一种编程语言，我们将用它来使网页更具交互性，例如添加一些动画，地图，它允许我们在网页上制作一些复杂的东西。主要是，我们今天将使用它从客户端（网络浏览器）向网络服务器（ESP8266-01）发送HTTP请求，以采取一些操作，如打开或关闭灯泡。

基于ESP8266-01和Arduino的物联网实例

构建网页结构

为了便于理解即将到来的解释，我建议阅读这篇很酷的HTML简介。

基于ESP8266-01和Arduino的物联网实例

我们看到我们的控制面板非常简单，它包含两个标题，每个标题具有不同的大小，一个图像，两个按钮用于打开LED，第二个用于关闭LED。

      
<html>      
<head>      
    <title>Smart Home Systemtitle>      
head>      
<body>      
    <h1> Smart Home Control Panelh1>                                     
    <h4>Sorry But I'm a Meme Addict!h4>      
    <img src="dogMeme.jpg" width="400px" height="400px">      
    <br>      
    <button id="111" class="button">LAMP ONbutton>      
    <br>      
    <button id="110" class="button">LAMP OFFbutton>      
body>      
html>

代码说明

  • <！DOCTYPE html>：声明定义此文档是HMTL5文档。
  • ：HTML页面的根元素。
  • ：元素包含有关页面的元信息。
  • ：element指定文档的标题。此标题显示在网页浏览器选项卡上。
  • ：element包含可见的网页内容。

：element定义一个大元素。

：element定义一个较小的标题。当标题值减小时，字体减少。

  • ：element将图像添加到网页。要显示的图像应位于同一项目文件夹中。
  • ：将光标前进到新行。
  • ：元素为页面内容添加一个按钮。

每个按钮都是我们网页中非常重要的两个属性id，以及class属性。我们将讨论为什么我们将这两个值分配给Jquery代码解释中的按钮。

设置网页的样式

为了便于理解即将到来的解释，我建议阅读这篇很酷的CSS简介。

现在，网页看起来更好（不是太多xD）我们给它一个很酷的绿色背景颜色，我们使页面内容居中对齐，我们更改标题字体颜色和字体系列，使网页更生动。我们使用CSS来完成所有这些样式的东西。

码

 <html> <head> <title>Smart Home Systemtitle> head> <body style="background-color: seagreen; color: seashell; text-align: center;"> <h1> Smart Home Control Panelh1> <h4>Sorry But I'm a Meme Addict!h4> <img src="dogMeme.jpg" width="400px" height="400px"> <br> <button style="margin: 10px;" id="111" class="button">LAMP ONbutton> <br> <button style="margin:10px;" id="110" class="button"> LAMP OFFbutton> body> html>

代码说明

我们添加了一些代码行，以使我们的网页看起来更好。我们增加了style="background-color: seagreen; color: seashell; text-align: center;"内部身体标记，使所有网页内容在页面的中心，并设置背景色，以海藻绿也设置字体颜色贝壳。

此外，我们style="margin: 10px;"在两个按钮标签内添加了围绕每个按钮四边的10像素边距。

向Web服务器发送请求

为了便于理解即将到来的解释，我建议阅读这篇很酷的Jquery简介。

现在，在构建我们的网页结构和样式之后，我们需要为我们之前在网页中添加的两个按钮添加一些功能。我们需要当用户点击“LAMP ON”按钮时，他/她的浏览器向服务器发送包含一些唯一数据的请求（ESP8266-01）这个独特的数据告诉Arduino打开灯。当用户点击它时第二个按钮“LAMP OFF”同样的事情，浏览器会向服务器发送包含一些唯一数据的请求（ESP8266-01）这个独特的数据告诉Arduino要关灯。我们来看看代码吧。

 <html> <head> <title>Smart Home Systemtitle> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">script> head> <body style="background-color: seagreen; color: seashell; text-align: center;"> <h1> Smart Home Control Panelh1> <h4>Sorry But I'm a Meme Addict!h4> <img src="dogMeme.jpg" width="400px" height="400px"> <br> <button style="margin: 10px;" id="111" class="button">LAMP ONbutton> <br> <button style="margin:10px;" id="110" class="button"> LAMP OFFbutton> <script> //starting Javascript.  $(".button").click(function () { //if any button from the ".button" class is clicked  var p = $(this).attr('id'); //get this button id and store it inside the "p" variable.  pin: p //a dictionary contains the button id to get sent to the web server.  $.get("http://192.168.1.4:80/", { //then send a get request to the web server"http://192.168.1.4:80/" (":80" means port number 80) with some data in a form of dictionary {pin: p} which is the butoon id. IMPORTANT NOTE: DON'T FORGET TO CHANGE THE IP ADDRESS WITH YOUR ESP8266 NEW IP ADDRESS.  pin: p }); }); script> body> html>

代码说明

首先，我们需要在代码中导入Jquery库。所以，我们在head标签中添加了这一行。

所有的魔力都发生在这个有趣的部分。

  "hljs-comment">//starting Javascript.  $(".button").click(function () { //if any button from the ".button" class is clicked  var p = $(this).attr('id'); //get this button id and store it inside the "p" variable.  pin: p //a dictionary contains the button id to get sent to the web server.  $.get("http://192.168.1.4:80/", { //then send a get request to the web server"http://192.168.1.4:80/" (":80" means port number 80) with some data in a form of dictionary {pin: p} which is the butoon id. IMPORTANT "hljs-doctag">NOTE: DON'T FORGET TO CHANGE THE IP ADDRESS WITH YOUR ESP8266 NEW IP ADDRESS.  pin: p }); }); script>
  • "color: rgb(119, 119, 119); background-color: rgb(242, 242, 242);">$(".button").click(function () {

当用户单击与“按钮” 类关联的任何按钮时，触发以下功能。

  • "color: rgb(119, 119, 119); background-color: rgb(242, 242, 242);">var p = $(this).attr('id');

获取单击的按钮属性“id”的值并将其存储在“p” 变量中。

  • "color: rgb(119, 119, 119); background-color: rgb(242, 242, 242);">pin: p

将变量“p”值放在字典中（键值），它的键是“pin”，值是“p”变量值。

  • "color: rgb(119, 119, 119); background-color: rgb(242, 242, 242);">$.get("http://172.20.10.11:80/", { pin: p });});

然后，向网络服务器发送GET请求，其IP地址为“172.20.10.11”。此GET 请求包含按下属性id 的值。

“ql-align-justify”>如果用户按下“LAMP ON”按钮，该id值将为111，因此GET请求头将包含一些数据，如此引脚= 111 。看下一个数字！

在另一侧，如果用户按下“LAMP OFF”按钮，则请求将包含此数据pin = 110 。

代码逻辑

我知道你现在问他为什么他特意选择了111 和110 ？好的，Lemme回答你的问题。实际上，数字111 和110 分为两部分。

  • 第一部分：前两个数字在两种情况下都是“11”，它指的是我需要控制的负载连接的Arduino引脚号。
  • 第二部分：第三个数字在1和0之间变化，具体取决于点击的按钮。它指的是引脚状态（ON或OFF）。

“ql-align-justify”>在Arduino代码中，我们将接收这些数据并将这两个部分彼此分开并将每个部分保存在一个不同的变量中，"color: rgb(119, 119, 119); background-color: rgb(242, 242, 242);">pinNumber第一部分保存在变量中，第二部分保存在变量中"color: rgb(119, 119, 119); background-color: rgb(242, 242, 242);">pinState，然后我们将编写这一简单的代码行来控制连接负载"color: rgb(119, 119, 119); background-color: rgb(242, 242, 242);">digitalWrite(pinNumber, pinState);

"color: rgb(119, 119, 119); background-color: rgb(242, 242, 242);">连接负载

“ql-align-justify”>现在，我们需要将负载与Arduino板连接起来进行控制。在连接任何高压设备（如空调或电视机）之前，我们需要测试我们的电路和代码以及LED之类的低压电路，以确保一切正常。这是接线图

接线非常简单，我们将LED正极连接到Arduino数字引脚11，通过1k欧姆电阻将负极连接到GND。

“ql-align-justify”>

Arduino代码

#include  //including the SoftwareSerial library will allow you to use the pin no. 2,3 as Rx, Tx.  SoftwareSerial esp8266(2,3); //set the Rx ==> Pin 2; TX ==> Pin3.  #define serialCommunicationSpeed 9600 // <========= define a constant named "serialCommunicationSpeed" with a value 9600. it referes to the Software and hardware serial communication speed(baud rate).  #define DEBUG true //make a constant named "DEBUG" and it's value true. we will use it later.  int redLED =12; //assign a variable named "redLED" with an integer value 12, it refers to the pin which the red LED is connected on.  int blueLED =11; //assign a variable named "blueLED" with an integer value 11, it refers to the pin which the blue LED is connected on.  void setup() { pinMode(redLED,OUTPUT); //set the pin number 12 as an output pin.  pinMode(blueLED,OUTPUT); //set the pin number 11 as an output pin.  digitalWrite(redLED,LOW); //turn the red LED off at the beginning of the program.  digitalWrite(blueLED,HIGH); //turn the blue LED on at the beginning of the program.  Serial.begin(serialCommunicationSpeed); //begin the Hardware serial communication (0, 1) at speed 9600.  esp8266.begin(serialCommunicationSpeed); //begin the software serial communication (2, 3) at speed 9600.  InitWifiModule(); //call this user-defined function "InitWifiModule()" to initialize a communication between the ESP8266 and your access point (Home Router or even your mobile hotspot).  digitalWrite(blueLED,LOW); //after finishing the initialization successfully, turn off the blue LED (just an indicator).  } void loop() //our main program, some fun are about to start)  { if(esp8266.available()) //if there's any data received and stored in the serial receive buffer, go and excute the if-condition body. If not, dont excute the if-condition body at all.  { if(esp8266.find("+IPD,")) //search for the "+IPD," string in the incoming data. if it exists the ".find()" returns true and if not it returns false.  { delay(1000); //wait 1 second to fill up the buffer with the data.  int connectionId = esp8266.read()-48; //Subtract 48 because the read() function returns the ASCII decimal value. And 0 (the first decimal number) starts at 48. We use it to convert from ASCI decimal value to a character value.  esp8266.find("pin="); //Advance the cursor to the "pin=" part in the request header to read the incoming bytes after the "pin=" part which is the pinNumer and it's state.  int pinNumber = (esp8266.read()-48)*10; //read the first Byte from the Arduino input buffer(i.e. if the pin 12 then the 1st number is 1) then multiply this number by 10. So, the final value of the "pinNumber" variable will be 10.  pinNumber = pinNumber + (esp8266.read()-48); //read the second Byte from the Arduino input buffer(i.e. if the pin number is 12 then the 2nd number is 2) then add this number to the first number. So, the final value of the "pinNumber" variable will be 12.  int statusLed =(esp8266.read()-48); //read the third byte from the Arduino input buffer. then save it inside the "statusLed" variable. At any case, it will be 1 or 0.  digitalWrite(pinNumber, statusLed); //then turn the LED at "pinNumber" on or off depending on the "statusLed" variable value.  Serial.println(connectionId); //print the "connectionId" value on the serial monitor for debugging purposes.  Serial.print(pinNumber); //print the "pinNumber" value on the serial monitor for debugging purposes.  Serial.print(" "); //print some spaces on the serial monitor to make it more readable.  Serial.println(statusLed); //print the "statusLed" value on the serial monitor for debugging purposes.  String closeCommand = "AT+CIPCLOSE="; //close the TCP/IP connection.  closeCommand+=connectionId; //append the "connectionId" value to the string.  closeCommand+="rn"; //append the "rn" to the string. it simulates the keyboard enter press.  sendData(closeCommand,1000,DEBUG); //then send this command to the ESP8266 module to excute it.  } } } /****************************************************************************************************************************************************************************************** * Name: sendData * Description: this Function regulates how the AT Commands will ge sent to the ESP8266. * * Params: command - the AT Command to send * - timeout - the time to wait for a response * - debug - print to Serial window?(true = yes, false = no) * * Returns: The response from the esp8266 (if there is a reponse) */ String sendData(String command, const int timeout, boolean debug) { String response = ""; //initialize a String variable named "response". we will use it later.  esp8266.print(command); //send the AT command to the esp8266 (from ARDUINO to ESP8266).  long int time = millis(); //get the operating time at this specific moment and save it inside the "time" variable.  while( (time+timeout) > millis()) //excute only whitin 1 second.  { while(esp8266.available()) //is there any response came from the ESP8266 and saved in the Arduino input buffer?  { char c = esp8266.read(); //if yes, read the next character from the input buffer and save it in the "response" String variable.  response+=c; //append the next character to the response variabl. at the end we will get a string(array of characters) contains the response.  } } if(debug) //if the "debug" variable value is TRUE, print the response on the Serial monitor.  { Serial.print(response); } return response; //return the String response.  } /****************************************************************************************************************************************************************************************** * Name: InitWifiModule * Description: this Function gives the commands that we need to send to the sendData() function to send it. * * Params: Nothing. * * Returns: Nothing (void). */ void InitWifiModule() { sendData("AT+RSTrn", 2000, DEBUG); //reset the ESP8266 module.  //delay(1000);  sendData("AT+CWJAP="PUT YOUR SSID","PUT YOUR PASSWORD"rn", 2000, DEBUG); //connect to the WiFi network.  delay (3000); sendData("AT+CWMODE=1rn", 1500, DEBUG); //set the ESP8266 WiFi mode to station mode.  delay (1000); sendData("AT+CIFSRrn", 1500, DEBUG); //Show IP Address, and the MAC Address.  delay (1000); sendData("AT+CIPMUX=1rn", 1500, DEBUG); //Multiple conections.  delay (1000); sendData("AT+CIPSERVER=1,80rn", 1500, DEBUG); //start the communication at port 80, port 80 used to communicate with the web servers through the http requests.  }

代码说明

代码是非常简单的，我们实现了两种不同的功能"color: rgb(119, 119, 119); background-color: rgb(242, 242, 242);">InitWifiModule()和"color: rgb(119, 119, 119); background-color: rgb(242, 242, 242);">sendData()

该"color: rgb(119, 119, 119); background-color: rgb(242, 242, 242);">sendData()功能作业调节AT命令如何会被发送到ESP8266-01模块。

该"color: rgb(119, 119, 119); background-color: rgb(242, 242, 242);">InitWifiModule()功能的工作就是提供"color: rgb(119, 119, 119); background-color: rgb(242, 242, 242);">sendData()AT命令，我们需要发送到ESP8266-01功能。

在"color: rgb(119, 119, 119); background-color: rgb(242, 242, 242);">loop()函数中我们读取收入HTTP请求标头并搜索“+ IPD”，这意味着请求已成功到达，然后我们读取引脚值，如果用户点击“LAMP ON”，它将为“111”如果用户单击“LAMP OFF”按钮，则按钮和“110”。

别忘了把你的wifi SSID 和密码放在Arduino代码行中。103"color: rgb(119, 119, 119); background-color: rgb(242, 242, 242);">sendData("AT+CWJAP="PUT YOUR SSID","PUT YOUR PASSWORD"rn", 2000, DEBUG);

“ql-align-justify”>有关更多代码说明，请阅读代码中的注释，它已有详细记录

这个怎么运作

“ql-align-justify”>将代码上传到Arduino板后，打开串行监视器并读取ESP模块正在发送的响应。

“ql-align-justify”>“color: rgb(135, 145, 145); background-color: rgb(255, 255, 255);”>在程序开始时，如果您在页面末尾看到类似上图的“color: rgb(135, 145, 145); background-color: rgb(255, 255, 255);”>“OK” “color: rgb(135, 145, 145); background-color: rgb(255, 255, 255);”>，则意味着ESP8266-01模块已成功连接到您的wifi（接入点）并获得了IP和MAC地址。现在，你可以打开你的花哨的网页，并尝试控制一些东西?

“ql-align-justify”>“color: rgb(135, 145, 145); background-color: rgb(255, 255, 255);”>但是，如果您在页面末尾看到类似上图的“color: rgb(135, 145, 145); background-color: rgb(255, 255, 255);”>“FAIL” “color: rgb(135, 145, 145); background-color: rgb(255, 255, 255);”>或“color: rgb(135, 145, 145); background-color: rgb(255, 255, 255);”>“ERROR” “color: rgb(135, 145, 145); background-color: rgb(255, 255, 255);”>，则表示您的ESP模块由于某些原因无法连接到您的wifi（接入点），请尝试检查是否输入适合您网络的SSID和密码。

添加高压负载

“ql-align-justify”>在我们测试了我们的代码并确保一切都像魅力一样，我们需要用高压负载替换这个无聊的LED，如空调，电视或灯泡。但是为了控制所有这些高压电器，我们必须处理继电器。

步骤三 电路搭建

步骤四 编写程序

步骤五 验证结果

添加高压负载

在我们测试了我们的代码并确保一切都像魅力一样，我们需要用高压负载替换这个无聊的LED，如空调，电视或灯泡。但是为了控制所有这些高压电器，我们必须处理继电器。

“ql-align-center”>继电器的原因是什么？好的，继电器是一个机械开关，通过给线圈通电来打开或关闭。它主要用于使用低功率信号（5V或0V）控制高功率电路。因此，我们可以控制高功率设备，如空调或AC灯，仅通过5V或0V信号打开或关闭它。哪个太棒了

“ql-align-center”>“color: rgb(135, 145, 145); background-color: rgb(255, 255, 255);”>双通道继电器模块有两个控制引脚（IN1，IN2），这些引脚应连接到两个Arduino数字引脚，以控制两个线圈的状态，关闭或打开负载电路。

在继电器模块的另一侧，COM（公共端）应连接到负载的一端。负载的另一端连接到NC（常闭）或NO（常开），如果连接到NO，负载保持在触发前断开，反之亦然。

“ql-align-center”>接线图

如您所见，我们使用双通道继电器模块，使我们能够控制两个不同的交流负载。我们连接的第一继电器在数字输出11脚（Arduino的）和第二继电器，以（Arduino的）数字输出引脚12

“ql-align-center”>我们将对我们的网页进行一些小修改，我们将添加另外两个按钮（ON和OFF）来控制第二个连接的负载。

"ql-syntax" spellcheck="false">      
"hljs-tag"><"hljs-name">html>      
"hljs-tag"><"hljs-name">head>      
    "hljs-tag"><"hljs-name">title>Smart Home Systemtitle>      
    "hljs-tag"><"hljs-name">script "hljs-attr">src="hljs-string">"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">script>      
head>      
"hljs-tag"><"hljs-name">body "hljs-attr">style="hljs-string">"background-color: seagreen; color: seashell; text-align: center;">      
    "hljs-tag"><"hljs-name">h1> Smart Home Control Panelh1>                                     
    "hljs-tag"><"hljs-name">h4>Sorry But I'm a Meme Addict!h4>      
    "hljs-tag"><"hljs-name">img "hljs-attr">src="hljs-string">"dogMeme.jpg" "hljs-attr">width="hljs-string">"400px" "hljs-attr">height="hljs-string">"400px">      
    "hljs-tag"><"hljs-name">br>      
    "hljs-tag"><"hljs-name">button "hljs-attr">style="hljs-string">"margin: 10px;" "hljs-attr">id="hljs-string">"111" "hljs-attr">class="hljs-string">"button">Blue LED ONbutton>      
    "hljs-tag"><"hljs-name">button "hljs-attr">id="hljs-string">"110" "hljs-attr">class="hljs-string">"button">Blue LED OFFbutton>      
    "hljs-tag"><"hljs-name">br>      
    "hljs-tag"><"hljs-name">button "hljs-attr">style="hljs-string">"margin:10px;" "hljs-attr">id="hljs-string">"121" "hljs-attr">class="hljs-string">"button"> Red LED ONbutton>      
    "hljs-tag"><"hljs-name">button "hljs-attr">id="hljs-string">"120" "hljs-attr">class="hljs-string">"button">Red LED OFFbutton>      
    "hljs-tag"><"hljs-name">script>                                                        "hljs-comment">//starting Javascript.      
        $("hljs-string">".button").click("hljs-function">"hljs-keyword">function () {                            "hljs-comment">//if any button from the ".button" class is clicked      var p = $(this).attr('id');                             //get this button id and store it inside the "p" variable.      
            pin: p                                                  "hljs-comment">//a dictionary contains the button id to get sent to the web server.      
            $.get("hljs-string">"http://192.168.1.4:80/", {                       "hljs-comment">//then send a get request to the web server"http://192.168.1.4:80/" (":80" means port number 80) with some data in a form of dictionary {pin: p} which is the butoon id. IMPORTANT "hljs-doctag">NOTE: DON'T FORGET TO CHANGE THE IP ADDRESS WITH YOUR ESP8266 NEW IP ADDRESS.      
            pin: p      
            });      
        });      
    script>      
body>      
html>

这个怎么运作

就像上次试用一样，您将Arduino代码上传到主板（如果尚未上传）并打开串行监视器并确保您的ESP模块已成功连接到您的接入点并获得IP和MAC地址。

“ql-align-center”>然后打开你的花哨的网页，开始控制你的东西?

故障排除

如果您的ESP模块已成功连接到您的接入点，但单击网页按钮时不会执行任何操作

  • 确保从端口80（HTTP）从Web浏览器发送请求。例：

"color: rgb(119, 119, 119); background-color: rgb(242, 242, 242);">$.get("http://192.168.1.4:80/"

  • 确保您的PC或笔记本电脑和ESP模块连接到同一个接入点。
  • 在Jquery代码中，确保您编写了正确的ESP模块IP地址。
  • 确保连接Arduino数字引脚11和12的负载。
  • 不要忘记在任何更改或修改后保存网页代码文件，并在任何代码修改生效后在Web浏览器中重新加载网页。

最后

我们完了！在今天的教程中，我们学习了如何使用HTML，CSS和jquery构建一个简单的Web页面。此外，我们还学习了如何从基于Web的控制面板无线控制AC负载，以及如何在Arduino板上使用真棒ESP8266-01 Wifi模块。

[zrz_file link="https://static.qutaojiao.com/wp-content/uploads/2019/09/608ed76404ccd0e5.txt" name="源码" code=""]

给TA打赏
共{{data.count}}人
人已打赏
arduinoESP-12ESP8266物联网
Arduino免费项目

通过web控制灯泡

2019-9-10 21:10:46

Arduino免费项目

基于RFID制作的安全储物柜

2019-10-28 22:19:16

猜你喜欢

Arduino UNO+esp8266+MQ-2+DHT11

03.4k
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

  • 扫码进入公众号

  • 扫码咨询管理员

返回顶部
'); })();