论坛上有很多的博主写过该文章,在此我想分享下我在学习esp8266模块的WiFi小车的另外的做法。
本篇文章用到一点html的网页知识用于开发小车控制页面esp8266闪存文件系统
1、材料准备:L298n电机驱动模块,esp8266wifi模块,两节1860电池。
2、线路连接
3、网页控制页编写
网页主页面编写。
可能有人觉得没必要多编写一个页面,但是你想下要是我在别的地方需要这个esp8266模块这主页面的作用就来了,我们能在主页面之上编写其他控制网页的入口。这样我们只需将esp8266模块安装上就能使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主页面</title>
</head>
<body>
<table align="center" border="0" cellpadding="20" cellspacing="0">
<th>前往小车控制页面</th>
<tr>
<td>
<a href="car.html" target="_blank"><input type="submit" value="小车控制页面"></a>
</td>
</tr>
</table>
</body>
</html>
小车控制网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小车控制页面</title>
</head>
<body>
<table align="center" border="1" cellpadding="20" cellspacing="0">
<tr>
<td> </td>
<td>1
<!-- <a href="LED.html" target="_self"><input type="submit" value="前进"></a> -->
<form action="go-control" method="post"><input type="submit" value="前进"> </form>
</td>
</tr>
<tr>
<td>2
<!-- <a href="LED.html" target="_self"><input type="submit" value="左转"></a> -->
<form action="left-control" method="post"><input type="submit" value="左转"> </form>
</td>
<td>
<form action="stop-control" method="post"><input type="submit" value="停止"> </form>
</td>
<td>3
<!-- <a href="LED.html" target="_self"><input type="submit" value="右转"></a> -->
<form action="right-control" method="post"><input type="submit" value="右转"> </form>
</td>
</tr>
<tr>
<td> </td>
<td>4
<!-- <a href="LED.html" target="_self"><input type="submit" value="后退"></a> -->
<form action="back-control" method="post"><input type="submit" value="后退"> </form>
</td>
<td> </td>
</tr>
</table>
<table align="center" border="0" cellpadding="20" cellspacing="0">
<tr>
<td colspan="3">
<a href="index.html" target="_self"><input type="submit" value="返回主页面"></a>
</td>
</tr>
</table>
<br><br>
<table align="center" border="0" cellpadding="20" cellspacing="0">
<tr>
<td colspan="3">
<form action="LED-Control" method="post"><input type="submit" value="LED控制">
</td>
</tr>
</table>
</body>
</html>
esp8266闪存文件上传
就是将前面编写的网页上传到开发板
闪存方面太极创客有详细的介绍,我就不写了。
3-3-2 通过Arduino IDE向闪存文件系统上传文件 – 太极创客 (taichi-maker.com)
esp8266代码
在arduino IDE 上传该代码
#include <ESP8266WiFi.h> // 本程序使用ESP8266WiFi库
#include <ESP8266WiFiMulti.h> // 本程序使用ESP8266WiFiMulti库
#include <ESP8266WebServer.h> // 本程序使用ESP8266WebServer库
#include <FS.h> // 本程序使用SPIFFS库
unsigned int Motor_A_1A=D1; //控制A电机的PWM引脚 一定改成自己用的
unsigned int Motor_A_1B=D2;
unsigned int Motor_B_2A=D3; //控制A电机的PWM引脚 一定改成自己用的
unsigned int Motor_B_2B=D5; //本来是接D4引脚的但是板载led也是D4引脚冲突
ESP8266WiFiMulti wifiMulti; // 建立ESP8266WiFiMulti对象,对象名称是'wifiMulti'
ESP8266WebServer esp8266_server(80); // 建立网络服务器对象,该对象用于响应HTTP请求。监听端口(80)
void setup(){
Serial.begin(9600);
Serial.println("");
pinMode(LED_BUILTIN, OUTPUT); // 初始化NodeMCU控制板载LED引脚为OUTPUT
pinMode(Motor_A_1A, OUTPUT); //初始化NodeMCU控制板载d1引脚为OUTPUT 前进
pinMode(Motor_A_1B, OUTPUT); //初始化NodeMCU控制板载d1引脚为OUTPUT 左转
pinMode(Motor_B_2A, OUTPUT); //初始化NodeMCU控制板载d1引脚为OUTPUT 右转
pinMode(Motor_B_2B, OUTPUT); //初始化NodeMCU控制板载d1引脚为OUTPUT 后退
//通过addAp函数存储 WiFi名称 WiFi密码
wifiMulti.addAP("FAST_38D4", "asd123456789asd"); // 将需要连接的一系列WiFi ID和密码输入这里
wifiMulti.addAP("GDOUDZS", "DZS2018519"); // ESP8266-NodeMCU再启动后会扫描当前网络
wifiMulti.addAP("esp82661", "asd12345678"); // 环境查找是否有这里列出的WiFi ID。如果有
Serial.println("Connecting ..."); // 则尝试使用此处存储的密码进行连接。
int i = 0;
while (wifiMulti.run() != WL_CONNECTED) { // 在当前环境中搜索addAP函数所存储的WiFi
delay(1000); // 如果搜到多个存储的WiFi那么NodeMCU
Serial.print(i++); Serial.print('.'); // 将会连接信号最强的那一个WiFi信号。
}
// WiFi连接成功后将通过串口监视器输出连接成功信息
Serial.println('\n'); // WiFi连接成功后
Serial.print("Connected to "); // NodeMCU将通过串口监视器输出。
Serial.println(WiFi.SSID()); // 连接的WiFI名称
Serial.print("IP address:\t"); // 以及
Serial.println(WiFi.localIP()); // NodeMCU的IP地址
if(SPIFFS.begin()){ // 启动闪存文件系统
Serial.println("SPIFFS Started.");
} else {
Serial.println("SPIFFS Failed to Start.");
}
esp8266_server.on("/LED-Control", handleLEDControl); // 告知系统如何处理/LED-Control请求
esp8266_server.on("/go-control", handlego);
esp8266_server.on("/back-control", handleback);
esp8266_server.on("/left-control", handleleft);
esp8266_server.on("/right-control", handleright); //另建立四个移动函数
esp8266_server.on("/stop-control", handlestop);
esp8266_server.onNotFound(handleUserRequest); // 告知系统如何处理其它用户请求
esp8266_server.begin(); // 启动网站服务
Serial.println("HTTP server started");
}
void loop(){
esp8266_server.handleClient(); //处理用户请求
}
void forward()
{
digitalWrite(Motor_A_1A,HIGH);
digitalWrite(Motor_A_1B,LOW);
digitalWrite(Motor_B_2A,HIGH);
digitalWrite(Motor_B_2B,LOW);
}
void back()
{
digitalWrite(Motor_A_1A,LOW);
digitalWrite(Motor_A_1B,HIGH);
digitalWrite(Motor_B_2A,LOW);
digitalWrite(Motor_B_2B,HIGH);
}
void turnleft()
{
digitalWrite(Motor_A_1A,HIGH);
digitalWrite(Motor_A_1B,LOW);
digitalWrite(Motor_B_2A,LOW);
digitalWrite(Motor_B_2B,HIGH);
}
void turnright()
{
digitalWrite(Motor_A_1A,LOW);
digitalWrite(Motor_A_1B,HIGH);
digitalWrite(Motor_B_2A,HIGH);
digitalWrite(Motor_B_2B,LOW);
}
void pstop()
{
digitalWrite(Motor_A_1A,LOW);
digitalWrite(Motor_A_1B,LOW);
digitalWrite(Motor_B_2A,LOW);
digitalWrite(Motor_B_2B,LOW);
}
//小车前进
void handlego(){
forward();Serial.println("/*****小车前进*****/");
esp8266_server.sendHeader("Location", "/car.html"); //后面更改为/car.html
esp8266_server.send(303);
}
//小车后退
void handleback(){
back();Serial.println("/*****小车后退*****/");
esp8266_server.sendHeader("Location", "/car.html"); //后面更改为/car.html
esp8266_server.send(303);
}
//小车左转
void handleleft(){
turnleft();Serial.println("/*****小车左转*****/");
esp8266_server.sendHeader("Location", "/car.html"); //后面更改为/car.html
esp8266_server.send(303);
}
//小车右转
void handleright(){
turnright();Serial.println("/*****小车右转*****/");
esp8266_server.sendHeader("Location", "/car.html"); //后面更改为/car.html
esp8266_server.send(303);
}
void handlestop(){
pstop();Serial.println("/*****小车停止*****/");
esp8266_server.sendHeader("Location", "/car.html"); //后面更改为/car.html
esp8266_server.send(303);
}
// 处理/LED-Control请求
void handleLEDControl(){
bool ledStatus = digitalRead(LED_BUILTIN); // 此变量用于储存LED状态
ledStatus == HIGH ? digitalWrite(LED_BUILTIN, LOW) : digitalWrite(LED_BUILTIN, HIGH); // 点亮或者熄灭LED
esp8266_server.sendHeader("Location", "/car.html"); //后面更改为/car.html
esp8266_server.send(303);
}
// 处理用户浏览器的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";
}
文章借鉴太极创客,仅为学习用。