ESP8266WiFi小车制作

论坛上有很多的博主写过该文章,在此我想分享下我在学习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";
}

 

文章借鉴太极创客,仅为学习用。

  • 2
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值