[筆記]Arduino實驗十四:ESP8266 @ Michael_Jheng的部落格

本單元使用的ESP8266 wifi模組接腳定義如下,

1. 實驗材料

ESP8266*1

USB TO TTL*1

直流電源模組*1

12V 1A電壓器*1

USB延長線*1

線材*1

2. 電路接線圖

燒錄程式模式:

在對ESP8266進行燒錄前,必須把GPIO0接地,才能藉由Arduino這軟體進行燒錄

燒錄完成後把GPIO0拿掉,重新開啟開源就能運轉

3. Arduino新增ESP8266開發板的設定

首先點擊檔案->編好設定

進入下方在"額外的開發板管理員網址",輸入

http://arduino.esp8266.com/stable/package_esp8266com_index.json

點選工具->開發板->開發板管理員

在搜尋欄輸入ESP8266,在下方選擇版本進行安裝

安裝完成後,點選工具->開發板,下方選擇Generic ESP8266 Module就設定完成

4. Arduino之ESP8266參考程式

此程式功能在接收從網站來的訊息,並回傳至該網站,如下所示,

#include <ESP8266WiFi.h> // 提供Wi-Fi功能的程式庫
#include <ESP8266WebServer.h> // 提供網站伺服器功能的程式庫
#include <ArduinoJson.h>

const char ssid[] = "wifi分享器 Id";
const char pass[] = "wifi分享器密碼";

char recArray[256],recCount=0;
String string="";

ESP8266WebServer server(80); // 宣告網站伺服器物件與埠號

void setup() {
Serial.begin(115200);
WiFi.begin(ssid, pass);

//若要指定IP位址，請自行在此加入WiFi.config()敘述。
WiFi.config(IPAddress(192,168,0,105), // IP位址
IPAddress(192,168,0,1), // 閘道（gateway）位址
IPAddress(255,255,255,0)); // 網路遮罩（netmask）

while (WiFi.status() != WL_CONNECTED) {
delay(500); // 等待WiFi連線
Serial.print(".");
}
Serial.println("");
Serial.print("WiFi connected, IP: ");
Serial.println(WiFi.localIP()); // 顯示ESP8266裝置的IP位址

// 處理GET或POST請求
server.on("/send", []() {
String message;

StaticJsonBuffer<500> jsonBuffer;
JsonObject& root = jsonBuffer.createObject();
for (uint8_t i = 0; i < server.args(); i++) {
root[server.argName(i)] = server.arg(i);
}
root.printTo(message);
Serial.println(message);
server.send(200, "application/json", message);
});

server.onNotFound([]() { // 處理「找不到指定路徑」的事件
server.send(404, "text/plain", "File NOT found!");
});

server.begin();
}

void loop() {
server.handleClient(); // 處理用戶連線
}

5. 網頁程式

此程式會發送訊息至ESP8266,並得到ESP8266回傳來的訊息,此程式有用到jquery與jquery ui,請參考

<html>
   <head>
       <title>Message</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <script src="./jquery-ui-1.12.1/jquery-3.2.1.min.js"></script>
       <script src="./jquery-ui-1.12.1/external/jquery/jquery.js"></script>
       <script src="./jquery-ui-1.12.1/jquery-ui.js"></script>
       <link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui.css">

       <script>
           $( function() {
               $( ".send button" ).click( function( event ) {
                   var message = $("input[name='message']").val();

                   $.ajax({
                       url: "./mysql.php",
                       method: 'GET',
                       data: 'message=' + message,
                       dataType: "json",
                       success: function (data, status) {
                           console.log(data);
                           alert(data.message);
                       }
                   });
               });
           });
       </script>
   </head>
   <body>

       <label class="send">
           <input type="text" id="message" name="message">
           <button>送出</button>
       </label>
   </body>
</html>

建立mysql.php,此php會使用CURL把資料傳出去,如下所示,

<?PHP
$message = $_GET['message'];

   $url = "http://192.168.0.105/send?message=$message";

   $ch = curl_init();
   curl_setopt($ch, CURLOPT_URL, $url);
   curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
   $output = curl_exec($ch);
   curl_close($ch);
   echo $output;

?>

5. 實驗結果

點擊工具->序列埠監控制視窗