ESP8266從點(diǎn)燈到APP遙控小車（三）——組裝小車，0代碼開(kāi)發(fā)APP控制小車
所需組件
- ESP8266開(kāi)發(fā)板
- 已配置好的Arduino IDE環(huán)境(配置傳送門(mén))
- 數(shù)據(jù)線
- L298N電機(jī)驅(qū)動(dòng)模塊
- 12V電池組（電源）
- 充電寶
- 小車車身及零件（傳送門(mén)）
一、小車所需組件
1.ESP8266-NodeMCU 開(kāi)發(fā)板
ESP8266 是一款適用于物聯(lián)網(wǎng)和家庭自動(dòng)化項(xiàng)目的 Wi-Fi 模塊。
?ESP8266-NodeMCU是一個(gè)開(kāi)源硬件開(kāi)發(fā)板，由于它允許您像使用 Arduino 一樣控制輸入和輸出，且附帶ESP8266 Wi-Fi 模塊，支持WIFI功能，所以在物聯(lián)網(wǎng)（IOT）領(lǐng)域，Arduino開(kāi)發(fā)板最大的對(duì)手之一就是ESP8266-NodeMCU開(kāi)發(fā)板。
2.L298N電機(jī)驅(qū)動(dòng)模塊
為什么要使用電機(jī)驅(qū)動(dòng)模塊？
?單片機(jī)的IO口只能提供幾毫安到十幾毫安的電流，而絕大部分設(shè)備工作需要電流都較大，遠(yuǎn)遠(yuǎn)大于這個(gè)值，比如電機(jī)工作所需的電流，因此用單片機(jī)來(lái)控制這些設(shè)備就需要將電流放大，所以要用驅(qū)動(dòng)電路甚至驅(qū)動(dòng)設(shè)備。
本次使用的L298N電機(jī)驅(qū)動(dòng)模塊
- 采用L298N雙橋直流電機(jī)驅(qū)動(dòng)芯片
- 工作電壓范圍5V-35V，如果需要從模塊內(nèi)取電，則供電范圍為7V-35V
- 峰值輸出電流2A
- 每個(gè)通道有一個(gè)使能輸入端
- 可以驅(qū)動(dòng)兩個(gè)直流電機(jī)或者一個(gè)四線步進(jìn)電機(jī)
這里我們需要用的是12V供電，供電GND，邏輯輸入，輸出A和輸出B（使能暫時(shí)不用，這部分是用來(lái)進(jìn)行PWM輸出的，可以進(jìn)行調(diào)速）
邏輯輸入：IN1和IN2為一組，對(duì)應(yīng)OutA（輸出A）；IN3和IN4為一組，對(duì)應(yīng)OutB（輸出B）。
（IN1,IN2,IN3,IN4接ESP8266單片機(jī)的對(duì)應(yīng)引腳，輸出A和輸出B接兩個(gè)電機(jī)，即可實(shí)現(xiàn)單片機(jī)控制電機(jī)，IN1和IN2控制A，IN3和IN4控制B）
3.12V電池組(電源)
(這邊建議順便把充電線也買了)
4.小車車身及零件
由于是簡(jiǎn)單入門(mén)實(shí)踐，所以先整了個(gè)最便宜的練練手——>車身及零件傳送門(mén)
二、小車組裝及接線（直接上手）
1.車身組裝
略，直接觀看商家的教程即可
2.組件接線（電源正負(fù)千萬(wàn)不能接反，紅正黑負(fù)）
不用充電寶，也可以考慮用2 節(jié) AA 紐扣電池給 ESP8266 供電。
ESP8266的工作電壓為3V~3.6V，建議的電壓為3.3V
| L298N | ESP8266開(kāi)發(fā)板 |
|---|---|
| IN1 | D5 |
| IN2 | D6 |
| IN3 | D7 |
| IN4 | D8 |
| GND | GND |
對(duì)應(yīng)的IO口：
D5->14 ,D6->12 ,D7->13 ,D8->15
3.組裝完畢效果圖
我這邊比較劍走偏鋒了，鋰電池組手動(dòng)焊接組裝的，為了安全，大家還是按規(guī)矩來(lái)
三、控制源碼
1.思路分析
?①在上一章節(jié)《搭建http網(wǎng)絡(luò)服務(wù)器，實(shí)現(xiàn)網(wǎng)頁(yè)點(diǎn)燈》中，我們已經(jīng)學(xué)會(huì)使用ESP8266開(kāi)發(fā)板搭建http網(wǎng)絡(luò)服務(wù)器，實(shí)現(xiàn)了網(wǎng)頁(yè)點(diǎn)燈，以及課后作業(yè)中實(shí)現(xiàn)了多個(gè)按鈕來(lái)回點(diǎn)燈
?②以上是通過(guò)搭建http網(wǎng)絡(luò)服務(wù)器，當(dāng)有http的get或post請(qǐng)求去訪問(wèn)相應(yīng)的服務(wù)器路徑時(shí)，服務(wù)器就會(huì)監(jiān)聽(tīng)到并調(diào)用相應(yīng)的函數(shù)執(zhí)行對(duì)應(yīng)的功能，實(shí)現(xiàn)點(diǎn)燈或者返回資源
③因此，我們只需要設(shè)置不同的服務(wù)器路徑（如，/up，/down，/left，/right）并監(jiān)聽(tīng)和調(diào)用函數(shù)實(shí)現(xiàn)相應(yīng)功能（前進(jìn)，后退，左轉(zhuǎn)，右轉(zhuǎn)）即可
2.源碼展示
/**********************************************************************
項(xiàng)目名稱/Project : ESP8266APP遙控小車
程序名稱/Program name : ESP8266car
程序目的/Purpose : 使用ESP8266搭建http網(wǎng)絡(luò)服務(wù)器，開(kāi)發(fā)APP進(jìn)行控制
項(xiàng)目作者/Author : ArsenLupin
***********************************************************************/
#include <ESP8266WiFi.h> // 本程序使用 ESP8266WiFi庫(kù)
#include <ESP8266WebServer.h> // ESP8266WebServer庫(kù)
// WiFi
const char *ssid = "A"; // 連接的wifi名稱
const char *password = "123456789"; // WiFi密碼
//創(chuàng)建一個(gè)變量led來(lái)存放需要控制的引腳號(hào)
int led = 2;
//創(chuàng)建WiFi對(duì)象
WiFiClient espClient;
//創(chuàng)建網(wǎng)絡(luò)服務(wù)器對(duì)象，該對(duì)象用于響應(yīng)HTTP請(qǐng)求，監(jiān)聽(tīng)端口（80）
ESP8266WebServer webserver(80);
//處理相應(yīng)請(qǐng)求的回調(diào)函數(shù)
void handleRoot();
void handleLEDPost();
void handleLEDGet();
void handleNotFound();
//控制小車的請(qǐng)求回調(diào)函數(shù)
void handleLEDGetUp();
void handleLEDGetDown();
void handleLEDGetLeft();
void handleLEDGetRight();
void handleLEDGetStop();
void setup(void){
Serial.begin(115200); // 設(shè)置窗口波特率，啟動(dòng)串口通訊
pinMode(led, OUTPUT); //引腳2為輸出模式
//控制小車的引腳
pinMode(14, OUTPUT);
pinMode(12, OUTPUT);
pinMode(13, OUTPUT);
pinMode(15, OUTPUT);
WiFi.begin(ssid, password); //連接WiFi
Serial.println("Connecting ...");
// WiFi.status()表示的是當(dāng)前WiFi連接狀況，while會(huì)讓W(xué)iFi一直連接成功才跳出
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
//當(dāng)WiFi連接成功，打印連上的WiFi名稱和esp8266的ip地址
Serial.print("\nConnected to ");
Serial.println(WiFi.SSID());
Serial.print("ESP8266-ip:");
Serial.println(WiFi.localIP());
//創(chuàng)建web服務(wù)
webserver.on("/",handleRoot); //監(jiān)聽(tīng)根目錄，調(diào)用回調(diào)函數(shù)
//監(jiān)聽(tīng)ip地址下的/hello目錄,匿名函數(shù)回調(diào)請(qǐng)求內(nèi)容，狀態(tài)碼200表示請(qǐng)求成功，返回text類型下的plain類型內(nèi)容
webserver.on("/hello",[](){webserver.send(200,"text/plain","hello");});
//監(jiān)聽(tīng)/LED,監(jiān)聽(tīng)post請(qǐng)求
webserver.on("/LED",HTTP_POST,handleLEDPost);
//監(jiān)聽(tīng)/led,監(jiān)聽(tīng)get請(qǐng)求
webserver.on("/led",HTTP_GET,handleLEDGet);
//監(jiān)聽(tīng)小車的訪問(wèn)目錄，監(jiān)聽(tīng)get請(qǐng)求，調(diào)用相應(yīng)函數(shù)
webserver.on("/up",HTTP_GET,handleLEDGetUp);
webserver.on("/down",HTTP_GET,handleLEDGetDown);
webserver.on("/right",HTTP_GET,handleLEDGetRight);
webserver.on("/left",HTTP_GET,handleLEDGetLeft);
webserver.on("/stop",HTTP_GET,handleLEDGetStop);
//當(dāng)找不到目錄時(shí),匿名函數(shù)返回提示
webserver.onNotFound(handleNotFound);
//啟動(dòng)web服務(wù)
webserver.begin();
//告知用戶網(wǎng)絡(luò)服務(wù)功能已經(jīng)啟動(dòng)
Serial.println("HTTP esp8266-Webserver started");
}
void loop(void){
//檢查http訪問(wèn),處理客戶端連接
webserver.handleClient();
}
//處理根目錄訪問(wèn)的回調(diào)函數(shù)
void handleRoot() {
String HTML="<!DOCYPYE html>\
<html>\
<head><meta charset='utf-8'></head>\
<body>你好！ESP8266的web服務(wù)器歡迎您！\
<form action=\"/led\"><input type=\"submit\" value=\"Get led\"></form>\
<form action=\"/LED\" method=\"POST\"><input type=\"submit\" value=\"Post LED\"></form>\
</body>\
</html>";
webserver.send(200, "text/html", HTML);
}
//處理Get訪問(wèn)/LED目錄的回調(diào)函數(shù)
void handleLEDGet() {
digitalWrite(led,!digitalRead(led));// 改變LED的點(diǎn)亮或者熄滅狀態(tài)
webserver.send(200,"text/html","Led is Change.");
}
//處理Get訪問(wèn)/up目錄的小車前進(jìn)函數(shù)
void handleLEDGetUp() {
digitalWrite(14,LOW);
digitalWrite(12,HIGH);
digitalWrite(13,LOW);
digitalWrite(15,HIGH);
webserver.send(200,"text/html","Car is up.");
}
//處理Get訪問(wèn)/down目錄的小車后退函數(shù)
void handleLEDGetDown() {
digitalWrite(14,HIGH);
digitalWrite(12,LOW);
digitalWrite(13,HIGH);
digitalWrite(15,LOW);
webserver.send(200,"text/html","Car is Down.");
}
//處理Get訪問(wèn)/left目錄的小車左轉(zhuǎn)函數(shù)
void handleLEDGetLeft() {
digitalWrite(14,HIGH);
digitalWrite(12,LOW);
digitalWrite(13,LOW);
digitalWrite(15,HIGH);
webserver.send(200,"text/html","Car is Left.");
}
//處理Get訪問(wèn)/right目錄的小車右轉(zhuǎn)函數(shù)
void handleLEDGetRight() {
digitalWrite(14,LOW);
digitalWrite(12,HIGH);
digitalWrite(13,HIGH);
digitalWrite(15,LOW);
webserver.send(200,"text/html","Car is Right.");
}
//處理Get訪問(wèn)/stop目錄的小車停止函數(shù)
void handleLEDGetStop() {
digitalWrite(14,LOW);
digitalWrite(12,LOW);
digitalWrite(13,LOW);
digitalWrite(15,LOW);
webserver.send(200,"text/html","Car is stop.");
}
//處理Post訪問(wèn)/LED目錄的回調(diào)函數(shù)
void handleLEDPost() {
digitalWrite(led,!digitalRead(led)); // 改變LED的點(diǎn)亮或者熄滅狀態(tài)
webserver.sendHeader("Location","/"); // 跳轉(zhuǎn)回頁(yè)面根目錄
webserver.send(303); // 發(fā)送Http相應(yīng)代碼303 跳轉(zhuǎn)
}
// 設(shè)置處理404情況的函數(shù)'handleNotFound'
void handleNotFound(){
webserver.send(404, "text/plain", "404: Not found"); // 發(fā)送 HTTP 狀態(tài) 404 (未找到頁(yè)面) 并向?yàn)g覽器發(fā)送文字 "404: Not found"
}
3.代碼擴(kuò)展部分
相比于之前的網(wǎng)頁(yè)點(diǎn)燈，以下是具體增加的代碼部分
設(shè)置控制小車的引腳
//控制小車的引腳
pinMode(14, OUTPUT);
pinMode(12, OUTPUT);
pinMode(13, OUTPUT);
pinMode(15, OUTPUT);
設(shè)置小車的訪問(wèn)目錄以及觸發(fā)的相應(yīng)回調(diào)函數(shù)（這里全采用了get請(qǐng)求，這樣APP控制比較方便）
//監(jiān)聽(tīng)小車的訪問(wèn)目錄，監(jiān)聽(tīng)get請(qǐng)求，調(diào)用相應(yīng)函數(shù)
webserver.on("/up",HTTP_GET,handleLEDGetUp);
webserver.on("/down",HTTP_GET,handleLEDGetDown);
webserver.on("/right",HTTP_GET,handleLEDGetRight);
webserver.on("/left",HTTP_GET,handleLEDGetLeft);
webserver.on("/stop",HTTP_GET,handleLEDGetStop);
完善控制小車的具體函數(shù)功能（有時(shí)，因?yàn)殡姍C(jī)的接線不一樣，函數(shù)功能還是要根據(jù)實(shí)際情況來(lái)編寫(xiě)）
//處理Get訪問(wèn)/up目錄的小車前進(jìn)函數(shù)
void handleLEDGetUp() {
digitalWrite(14,LOW);
digitalWrite(12,HIGH);
digitalWrite(13,LOW);
digitalWrite(15,HIGH);
webserver.send(200,"text/html","Car is up.");
}
//處理Get訪問(wèn)/down目錄的小車后退函數(shù)
void handleLEDGetDown() {
digitalWrite(14,HIGH);
digitalWrite(12,LOW);
digitalWrite(13,HIGH);
digitalWrite(15,LOW);
webserver.send(200,"text/html","Car is Down.");
}
//處理Get訪問(wèn)/left目錄的小車左轉(zhuǎn)函數(shù)
void handleLEDGetLeft() {
digitalWrite(14,HIGH);
digitalWrite(12,LOW);
digitalWrite(13,LOW);
digitalWrite(15,HIGH);
webserver.send(200,"text/html","Car is Left.");
}
//處理Get訪問(wèn)/right目錄的小車右轉(zhuǎn)函數(shù)
void handleLEDGetRight() {
digitalWrite(14,LOW);
digitalWrite(12,HIGH);
digitalWrite(13,HIGH);
digitalWrite(15,LOW);
webserver.send(200,"text/html","Car is Right.");
}
//處理Get訪問(wèn)/stop目錄的小車停止函數(shù)
void handleLEDGetStop() {
digitalWrite(14,LOW);
digitalWrite(12,LOW);
digitalWrite(13,LOW);
digitalWrite(15,LOW);
webserver.send(200,"text/html","Car is stop.");
}
四、0代碼開(kāi)發(fā)APP控制小車
這部分我們采用長(zhǎng)按和松開(kāi)的方式來(lái)控制小車
實(shí)現(xiàn)原理：
長(zhǎng)按時(shí)，發(fā)送相應(yīng)的get請(qǐng)求，調(diào)用相應(yīng)的函數(shù)即可；松開(kāi)時(shí)，同理發(fā)送停止命令的get請(qǐng)求，調(diào)用停止函數(shù)
1.登錄MIT App Inventor
MIT App Inventor網(wǎng)頁(yè)版?zhèn)魉烷T(mén)
打開(kāi)后，來(lái)到登錄界面，選擇QQ登錄即可
2.創(chuàng)建項(xiàng)目
點(diǎn)擊項(xiàng)目，選擇新建項(xiàng)目
當(dāng)前的新項(xiàng)目
3.添加Web客戶端組件
在左側(cè) “組件面板” 點(diǎn)擊 “通訊連接” ，長(zhǎng)按選擇 “Web客戶端” ，拖拽到手機(jī)的空白頁(yè)即可
4.添加標(biāo)簽文本框，展示主題和創(chuàng)作人
此時(shí)，在右側(cè) “組件列表” 中選擇我們的標(biāo)簽文本，在 “組件屬性” 中，根據(jù)自己想法修改相應(yīng)的參數(shù)
我的修改及效果如下：
添加創(chuàng)作人同上
5.添加文本輸入框（用來(lái)獲取ESP8266的web服務(wù)器訪問(wèn)地址）
根據(jù)自己的想法，調(diào)節(jié)右側(cè)中文本輸入框的相應(yīng)參數(shù)
我的參數(shù)及效果圖：
6.添加表格，實(shí)現(xiàn)兩行三列存放按鈕
調(diào)節(jié)屬性參數(shù)
拖入4個(gè)按鈕
對(duì)第一個(gè)按鈕進(jìn)行重命名和參數(shù)修改
“重命名”第一個(gè)按鈕
修改第一個(gè)按鈕的參數(shù)
效果圖如下：
其他的按鈕參照第一個(gè)來(lái)修改即可，以此類推
為了協(xié)調(diào)一點(diǎn)，我的 “左轉(zhuǎn)” 和 “右轉(zhuǎn)” ，寬度比例設(shè)置為32
為了讓它顯得更協(xié)調(diào)一點(diǎn)，我在方向鍵上面插入了一個(gè)空表格來(lái)占位
7.邏輯設(shè)計(jì)——按鈕觸發(fā)功能
在右側(cè)，選擇邏輯設(shè)計(jì)
進(jìn)入邏輯設(shè)計(jì)界面后，以第一個(gè)按鈕up（前進(jìn)）為例
先選出當(dāng)按鈕up被按壓時(shí)的拼圖
被按壓時(shí)，獲取Web客戶端網(wǎng)址
拖動(dòng)合并拼圖
進(jìn)行網(wǎng)址拼接，獲取完整的訪問(wèn)路徑
拼接ESP8266的服務(wù)器ip
拼接相應(yīng)的訪問(wèn)路徑/up
拼接好后，進(jìn)行Get請(qǐng)求
在ESP8266的http網(wǎng)絡(luò)服務(wù)器中已經(jīng)設(shè)置好了，當(dāng)通過(guò)Get請(qǐng)求訪問(wèn)相應(yīng)的路徑時(shí)，會(huì)調(diào)用相應(yīng)的函數(shù)，實(shí)現(xiàn)對(duì)應(yīng)的功能
當(dāng)up按鈕松開(kāi)時(shí)
其他按鈕的邏輯設(shè)計(jì)，如上同理可得：
8.打包apk，導(dǎo)出項(xiàng)目
這里有兩種下載APP的方式，我選擇的是第一種：下載到手機(jī)
等待進(jìn)度條
掃描下載即可
9.完整APP界面展示
可在文本輸入框中修改192.168.x.x變成想要訪問(wèn)的Web服務(wù)器ip地址，如192.168.201.22
10.APP遙控小車測(cè)試
手機(jī)開(kāi)啟一個(gè)2.4GHz的熱點(diǎn)（也可以電腦開(kāi)一個(gè)熱點(diǎn)，手機(jī)和開(kāi)發(fā)板都連上同一個(gè)就行），WiFi的名稱和密碼根據(jù)自己的代碼進(jìn)行設(shè)置，
我這里使用手機(jī)熱點(diǎn)，WiFi名稱：A，密碼：123456789
// WiFi
const char *ssid = "A"; // 連接的wifi名稱
const char *password = "123456789"; // WiFi密碼
在電腦上獲取ip地址后，在APP的輸入框中輸入，此時(shí)可換插到充電寶，開(kāi)始測(cè)試
測(cè)試視頻：
總結(jié)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-798869.html
這輛小車實(shí)屬簡(jiǎn)陋之作，重心偏移了，所以運(yùn)動(dòng)時(shí)會(huì)有一定的偏差，但整體上反應(yīng)速度還行，局域網(wǎng)內(nèi)可玩（哭笑）文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-798869.html
到了這里，關(guān)于ESP8266從點(diǎn)燈到遙控小車（三）——組裝小車，0代碼開(kāi)發(fā)APP控制小車的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
