# WiFi ESP8266 ### WiFi module ESP8266 ### Introduction โมดูลนี้ใช้ ESP-WROOM-02D ซึ่งเป็นโมดูลทางการของ ESP8266EX มี QSPI Flash 4MB โมดูลได้รับการรับรองด้วย FCC ในสหรัฐอเมริกา CE-RED ในยุโรป TELEC ในญี่ปุ่นและ KC ในเกาหลีใต้ โมดูลนี้เปิดโอกาสให้ผู้ใช้เขียนโปรแกรมเองได้ ไม่ใช่โมดูลส่งข้อมูลโปร่งแสง (transparent transmission module) ง่ายๆ อย่างเดียว ### Module Functions โมดูลรวมวงจรดาวน์โหลดอัตโนมัติและโมดูลสื่อสารอยู่ในโมดูลนี้ วงจรดาวน์โหลดอัตโนมัติหมายถึงการแนะนำอย่างเป็นทางการในการใช้ 2 ตัวขับแบบ S8050 เพื่อรับสัญญาณ RTS และ DTR จาก downloader แบบ CH340C และเรียกใช้ลำดับการดาวน์โหลด ### Assembly เชื่อมต่อกับ NyBoard: ![](https://3127300255-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fdocs%2F-MX5in6n7A0W1Y5xGIQc%2F-MX5irviyPdr2PsEbkor%2F0.jpeg?generation=1617168141572643\&alt=media) อัปโหลดสคริปต์ผ่าน USB downloader: ![](https://3127300255-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fdocs%2F-MX5in6n7A0W1Y5xGIQc%2F-MX5irvjW_RDxOjLCyP5%2F1.jpeg?generation=1617168141596850\&alt=media) ## Development Environment Settings เราใช้ Arduino เป็นสถานที่พัฒนาโปรแกรม (Development Environment) ### 2.1 Add ESP8266 source to the board manager ![](https://3127300255-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fdocs%2F-MX5in6n7A0W1Y5xGIQc%2F-MX5irvkUJ5_1r1gD3K3%2F2.png?generation=1617168141547390\&alt=media) ![](https://3127300255-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fdocs%2F-MX5in6n7A0W1Y5xGIQc%2F-MX5irvlJePFPtyyeWCT%2F3.png?generation=1617168141572772\&alt=media) URL：. ให้วาง URL ลงในการตั้งค่าเพิ่มเติมของบอร์ดพัฒนาใน Arduino preferences. จากนั้นเปิด "Board Manager" และกรอก ESP8266 หรือ 8266 เพื่อค้นหาแพ็กเกจสนับสนุนบอร์ด: ![](https://3127300255-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fdocs%2F-MX5in6n7A0W1Y5xGIQc%2F-MX5irvmPFfuEya3p5AG%2F4.png?generation=1617168141629841\&alt=media) ดาวน์โหลด package ESP8266 โดย ESP8266 Community ครับ ### Configuration of the Module หลังจากดาวน์โหลด package แล้ว เราเลือก ESP8266 Board (เวอร์ชันปัจจุบัน: 2.74) -> Generic ESP8266 Module. ![](https://3127300255-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fdocs%2F-MX5in6n7A0W1Y5xGIQc%2F-MX5irvo7f6leOeV6h63%2F6.png?generation=1617168141549058\&alt=media) ![](https://3127300255-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fdocs%2F-MX5in6n7A0W1Y5xGIQc%2F-MX5irvpVY5VMod57KQ7%2F7.png?generation=1617168141550638\&alt=media) ขั้นตอนต่อไปคือการตั้งค่าพารามิเตอร์ดังนี้: | Parameters | Settings | | ------------- | --------------------------------------------------------------- | | Builtin Led | 2 | | Upload Speed | 921600（Auto-negotiation during downloading, 115200 is too slow） | | CPU Frequency | 160MHz | | Flash Size | 4MB | | Reset Method | DTR reset | | lwIP variant | V2 Lower memory | | Erase Flash | Only sketch | ![](https://3127300255-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fdocs%2F-MX5in6n7A0W1Y5xGIQc%2F-MX5irvqPyTY6gEBKGRf%2F8.png?generation=1617168141562220\&alt=media) ### Download Test หลังจากที่เราตั้งค่าเสร็จแล้ว เราใช้โปรแกรม "Blink" ของ Arduino เพื่อทดสอบโมดูล ESP8266 เปิดโปรเจกต์ Blink และทำการกำหนดค่าบอร์ดพัฒนา จากนั้นเสียบโมดูลลงในอินเตอร์เฟสการแก้ไขข้อผิดพลาดของโมดูลสื่อสารแบบ USB และดาวน์โหลดตัวอย่าง Blink เมื่อเทียบกับ Arduino UNO จะมีเวลาในการคอมไพล์ที่นานขึ้นเล็กน้อย หลังจาก Linking เสร็จแล้ว ความคืบหน้าในการดาวน์โหลดจะแสดงเป็นเปอร์เซ็นต์: ![](https://3127300255-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fdocs%2F-MX5in6n7A0W1Y5xGIQc%2F-MX5irvs91y6flRguFm3%2F10.png?generation=1617168141552677\&alt=media) "โค้ด Blink" ใช้พื้นที่แฟลชขนาด 257KB และ SRAM ขนาด 26.8KB ## Download WiFi Firmware Project URL： ไฟล์โปรเจ็กต์ประกอบด้วย 3 ไฟล์: * ESP8266WiFiController.ino: โค้ดสคริปต์อาดูโน่ที่มีโค้ดเซิร์ฟเวอร์สำหรับคอนโทรล * mainpage.h: หน้าต้อนรับ (html) อยู่ในรูปแบบ char array * actionpage.h: หน้าควบคุมการทำงาน (html) อยู่ในรูปแบบ char array โปรดใส่ไฟล์เหล่านี้ลงในโฟลเดอร์ชื่อ "ESP8266WiFiController" แล้วเปิดไฟล์ ino และดาวน์โหลดไปยังโมดูล WiFi ESP8266 ## How to Use หลังจากโปรแกรมถูกดาวน์โหลดลงในโมดูล WiFi แล้ว เราขอแนะนำให้ทดลองรันโปรแกรมด้วย USB downloader เพื่อให้สามารถเช็คผลลัพธ์ที่ออกมาจากโปรแกรมได้ผ่าน Arduino serial monitor อย่างแม่นยำ เปิดแอปสแกน WiFi ของสมาร์ทโฟนของคุณแล้วค้นหาจุดเข้าถึงที่มีชื่อว่า "Bittle-AP" ที่ไม่ได้เข้ารหัสข้อมูล แล้วเชื่อมต่อกับมัน ![](https://3127300255-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQ6a951Q6Jn1Zzt5Ajr%2F-MYsGrlObZCu2Rq_KPG-%2F-MYsH0LHNxDN2eFNxVzR%2Fimage.png?alt=media\&token=ea832895-e7f8-44ad-8c3e-ca33d70a5c8f) {% hint style="info" %} ถ้าสมาร์ทโฟนของคุณตั้งค่าการเชื่อมต่อเครือข่ายโดยอัตโนมัติ จะตัดการเชื่อมต่อของ "Bittle-AP" เนื่องจากไม่มีการเชื่อมต่ออินเทอร์เน็ต สมาร์ทโฟนของคุณอาจเชื่อมต่อกับ Wi-Fi ที่มีการเชื่อมต่ออินเทอร์เน็ต หรือแม้แต่ใช้ข้อมูลเคลื่อนที่ของคุณด้วย {% endhint %} แอพของคุณอาจกระโดดไปยังหน้า "WiFiManager" โดยอัตโนมัติเมื่อเชื่อมต่อกับ "Bittle-AP" ![](https://3127300255-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQ6a951Q6Jn1Zzt5Ajr%2F-MYsGrlObZCu2Rq_KPG-%2F-MYsHKUHaeNZD3QmAJHW%2Fimage.png?alt=media\&token=3041aed3-975a-4edd-92b7-1964591eaeb1) หากไม่ได้รับการเชื่อมต่อกับ "Bittle-AP" โดยอัตโนมัติ โปรดเปิดเบราว์เซอร์ของคุณแล้วป้อน 192.168.4.1 เพื่อเข้าสู่หน้าการกำหนดค่าการเชื่อมต่อ WiFi ด้วยตัวเอง ![](https://3127300255-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQ6a951Q6Jn1Zzt5Ajr%2F-MYsGrlObZCu2Rq_KPG-%2F-MYsH6pfYGtJbdNy5suF%2Fimage.png?alt=media\&token=d4904c78-832c-49e3-8735-69e5e30349e7) ที่หน้าเว็บไซต์ WiFiManager, โมดูลไร้สายของ Bittle จะค้นหา SSID ของ WiFi ที่อยู่ใกล้เคียงทั้งหมดและแสดงผลให้เห็น หลังจากคลิกที่ SSID ของ WiFi ของคุณและใส่รหัสผ่าน Bittle จะเชื่อมต่อกับเครือข่ายนี้ก่อน ![](https://3127300255-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQ6a951Q6Jn1Zzt5Ajr%2F-MYsGrlObZCu2Rq_KPG-%2F-MYsHBHbR-VlnnJKV4J_%2Fimage.png?alt=media\&token=fc802926-fcb3-4759-a739-67a9b76bdccd) เมื่อ Bittle เชื่อมต่อกับ WiFi ได้สำเร็จ มันจะพิมพ์ที่อยู่ IP ที่ได้รับจาก DHCP ผ่านพอร์ตช่องต่อออกแสดงผล คุณยังสามารถกำหนดที่อยู่ IP คงที่ใน Arduino ได้เช่นกัน ![](https://3127300255-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQ6a951Q6Jn1Zzt5Ajr%2F-MYsGrlObZCu2Rq_KPG-%2F-MYsHFIqgjL8YagL5iPo%2Fimage.png?alt=media\&token=c35dfe14-a466-435e-a9d1-1192e6ecea48) กรอกที่อยู่ไอพีของโมดูล WiFi เพื่อควบคุม Bittle ผ่าน WiFi ได้แล้ว! ## About the Sample Code โค้ดตัวอย่างเป็นตัวอย่างเว็บเซิร์ฟเวอร์ที่เรียบง่าย ประกอบด้วย 2 หน้า HTML โดยจะเก็บไว้ใน 2 ไฟล์ส่วนหัวในรูปแบบของค่าคงที่ข้อความ (string constants) เพื่อลดการเรียกใช้ฟังก์ชั่น client.print อย่างต่อเนื่อง ### 3.1 Set Up the WiFi Networks ก่อนที่เราจะเริ่มต้นเว็บเซิร์ฟเวอร์ของเรา เราควรตั้งค่า WiFi เพื่อเชื่อมต่อกับเครือข่าย LAN (Local Area Network) ของคุณ ในอดีตเราใช้การป้อนชื่อและรหัสผ่าน WiFi ในโปรแกรม แต่มันไม่สะดวกเมื่อเราต้องเปลี่ยนแวดวงเครือข่าย เราใช้ไลบรารี WiFi manager เพื่อกำหนดค่าข้อมูล WiFi ผ่านเว็บไซต์ ``` // WiFiManager WiFiManager wifiManager; // Start WiFi manager, default gateway IP is 192.168.4.1 wifiManager.autoConnect("Bittle-AP"); ``` ### 3.2 Web server สร้างเว็บเซิร์ฟเวอร์ใหม่และกำหนดพอร์ต 80 (พอร์ตเซิร์ฟเวอร์ HTTP ที่ใช้งานมาก) ``` ESP8266WebServer server(80); ``` ### 3.3 Configure 3 HTTP service handler ฟังก์ชันการตอบกลับ HTTP ใช้สำหรับการจัดการคำขอ HTTP ที่เข้ามา ``` void handleMainPage() { //Serial.println("GET /"); server.send(200, "text/html", mainpage); } void handleActionPage() { //Serial.println("GET /actionpage"); server.send(200, "text/html", actionpage); } ``` ฟังก์ชัน handleMainPage และ handleActionPage จะตอบกลับสถานะ 200 (OK) และรหัส HTML เพื่อให้กับเบราว์เซอร์ของคุณ (client) ที่ส่ง HTTP requests เข้ามา. ``` void handleAction(){ String argname = server.arg("name"); if(argname == "gyro"){ // gyro switch Serial.print("g"); } … ``` ฟังก์ชั่น HandleAction ต่างจาก HandleMainPage และ HandleActionPage นิดหน่อย โดยเป็นการประมวลผลคำขอ HTTP ที่มีการส่งพารามิเตอร์ โดยเมื่อพารามิเตอร์เป็น "gyro" ฟังก์ชั่นจะส่งคำสั่งไปยังพอร์ตซีเรียลของโมดูล WiFi ("g" เปิดการใช้งาน IMU) เพื่อให้ Bittle ของเราดำเนินการตามคำสั่งนั้นๆ พารามิเตอร์ "gyro" นี้สร้างและส่งผ่านอย่างไร เนื่องจากเราส่งคำขอ HTTP พร้อมค่าไปยังเซิร์ฟเวอร์: ``` http：//IP address or DomainName/action?name=gyro ``` เซิร์ฟเวอร์แยกวิเคราะห์พารามิเตอร์การดำเนินการตามฟังก์ชันและแก้ไขว่าชื่อคือ "gyro" เราสามารถพิมพ์ URL นี้โดยตรงในเบราว์เซอร์และดำเนินการด้วยคีย์บอร์ดได้เลย วิธีที่พบบ่อยกว่าคือการเพิ่มลิงก์ไปยังปุ่ม "Walk" ในหน้าเว็บเพจ ActionPage โดยเมื่อกดปุ่ม gyro URL ด้านบนจะถูกส่งไปยังโฮสต์ การกำหนดปุ่ม Walk ที่สมบูรณ์ครบวงจรดังนี้: ``` ``` หลังจากแยกวิเคราะห์พารามิเตอร์ "name" แล้ว เราจะส่ง actionpage อีกครั้ง ``` server.send(200, "text/html", actionpage); ``` เราผูกเมธอดผู้จัดการกับ URL ที่สอดคล้องกัน ``` server.on("/", handleMainPage); server.on("/actionpage", handleActionPage); server.on("/action", handleAction); ``` ### 3.4 Start the Web Server ``` server.begin(); Serial.println("HTTP server started"); ``` ### 3.5 Handle Client Requests ``` void loop(void){ server.handleClient(); } ``` ## More Ways Playing the WiFi Module เมื่อเทียบกับ ATMega328P บน NyBoard ESP8266 มีทรัพยากรด้านฮาร์ดแวร์และซอฟต์แวร์มากกว่า คุณสามารถทำการทดลองได้มากขึ้นด้วยมัน Connect your Bittle to IoT platforms with HTTP restful APIs. MQTT and node-red. OTA with WiFi. Make ESP8266 a strong co-processor for NyBoard for motion data fusion.