ค้นหาบทความที่นี่

บทความทั้งหมด

[ESP32 ตอนที่ 7] ESP32 OTA Update (ตอนที่ 2)

6 ปีที่ผ่านมา

โดย เจ้าของร้าน

จากตอนที่แล้วเราได้อัพโหลดผ่าน WiFi กัน แต่เป็นการสั่งอัพโหลดผ่านทาง ArduinoIDE คือเขียนเสร็จแล้วก็อัพขึ้นเลย แต่หากเราเอาชิ้นงานไปให้คนอื่นใช้ ซึ่งคนนั้นเขียนโปรแกรมไม่เป็น และไม่มีตัว ArduinoIDE เราก็ต้องเขียนโปรแกรมให้เสร็จแล้วส่งเป็นไฟล์เพื่อให้คนนั้นไปอัพโหลดโปรแกรมใหม่ จะทำยังไงตรงนี้เราจะอาศัยการทำงานโดยทำให้ตัว ESP32 เป็น Web Server แล้วเขียนหน้าเว็บฝังเอาไว้ (การใช้งาน Web Server เคยเขียนไว้ในชุด ESP8266 คลิกอ่านที่นี่) เมื่อเราโยนไฟล์ไปให้ใครก็ตามที่มี ESP32 ที่ต้องการอัพเดทหรือเปลี่ยนโปรแกรมใหม่ คนนั้นก็แค่เปิด Browser ขึ้นมาไม่ว่าจะเป็น IE Firefox Chrome Opera Safari อะไรก็ได้ แล้วใส่ IP Adderss ของ ESP32 แล้วกดอัพโหลดไฟล์โค้ดที่เราส่งให้เข้าไป แค่นี้ก็จบแล้ว ส่วนจะทำแบบไหนไปดูกันเลยครับ

สำหรับตัวโปรแกรมที่ใช้ เราจะใช้ Examples ที่อยู่คู่กับของบทที่แล้ว นั่นคือ OTAWebUpdater สามารถเปิดขึ้นมาได้จาก File > Examples > ArduinoOTA > OTAWebUpdater ซึ่งจะมีโค้ดตามด้านล่างนี้

เหมือนบทที่แล้วครับ โค้ดเริ่มต้นนี้เราจะต้องอัพโหลดผ่านทางสาย USB ซะก่อน เป็นเหมือนโปรแกรมเริ่มต้นอันแรกสุด อัพโหลดเสร็จลองเช็คว่าตัว ESP32 Server ของเราทำงานได้ดี หน้าเว็บเราโอเค โดยการเปิด Browser ขึ้นมา (คอมพิวเตอร์ต้องต่อ WiFi วงเดียวกับ ESP32) ในช่อง Address Bar ให้ใส่ IP Address ของ ESP32 (สามารถเปิดดูได้จาก Serial Monitor โดยกด EN ที่บอร์ด 1 ครั้งเพื่อรีสตาร์ทบอร์ดใหส่วนแรกทำงาน และ IP Address นี้อาจเปลี่ยนค่าได้) หรือวิธีที่ง่ายกว่านั้นคือใส่เป็น mDNS ลงไปเลย เนื่องจากเราเขียนโค้ด mDNS ไว้ ในตัวอย่างนี้ตั้งค่า mDNS ไว้คือ esp32 จึงใส่ค่า http://esp32.local ลงไปใน Address Bar (เรื่อง mDNS เขียนไว้ในบทความชุด ESP8266 คลิกอ่านได้ที่นี่) หากทุกอย่างถูกต้อง บนจอจแสดงหน้า Login ขึ้นมา

บนจอจะมีหน้าให้ใส่ User ID และ Password ให้ใส่ดังนี้ User ID ใส่ admin และ Password ใส่ admin กดปุ่ม Login จะเข้าสู่หน้า Server Index ซึ่งเป็นหน้าที่เอาไว้ใช้อัพโหลดไฟล์ เท่านี้ก็แสดงว่าตัว ESP32 ของเราพร้อมใช้งานแล้ว

ขอย้อนไปในขั้นตอนที่หน้า Login เราสามารถเปลี่ยน User ID และ Password ได้โดยการหาโค้ดบรรทัดด้านล่างนี้(อยู่ในส่วนของหน้า Login ถ้าใช้โค้ดด้านบนจะอยู่บรรทัดที่ 54) แล้วเปลี่ยนค่าภายในเครื่องหมาย ' ' ได้ตามต้องการ (ตรงที่ไฮไลท์สีแดงในภาพ)

ลองเขียนโปรแกรมใช้งานดูครับ โปรแกรมนั้นคือไฟกระพริบ เป็นอะไรที่ง่ายและเร็วเหมาะสำหรับการทดลองที่สุดแล้วครับ ซึ่งการเขียนโปรแกรมนี้ก็เหมือนกับตอนที่แล้ว คือต้องมีโค้ดตัวนี้เป็น Base ในการเขียนเพื่อให้ใช้ OTA ได้ จากนั้นอยากให้ทำงานอะไรบ้างก็เขียนเพิ่มลงไปครับ โค้ดนี้จะเขียนโปรแกรมให้ไฟกระพริบทุกๆ 1 วินาที ตามนี้เลยครับ

สำหรับการอัพโหลดโปรแกรมด้วยการทำ Web Server OTA นี้จะต่างจากการทำผ่าน ArduinoIDE OTA นิดนึง เราต้องทำเป็นไฟล์ Binary (นามสกุล .bin) ก่อนนะครับ แล้วจึงนำไฟล์ Binary นี้ไปอัพโหลดผ่าน Web Server OTA ลงบนบอร์ด
เหตุผลที่ต้องทำเช่นนี้เพราะในระบบดิจิตอลอิเล็กทรอนิกส์ คอมพิวเตอร์รวมถึง Arduino หรือ ESP32 ของเรานี้ด้วย มันจะทำงานด้วยเลขฐานสองเท่านั้น โค้ดที่เราเขียนนี้มันไม่สามารถเข้าใจได้ มันจะเข้าใจเฉพาะชุดข้อมูลที่เป็น 1001100001110101 อะไรแบบนี้เท่านั้น ซึ่งหากเราใช้วิธีการอัพโหลดผ่านทาง ArduinoIDE เวลาเรากดอัพโหลด ตัวโปรแกรมจะมีการ Complier ก่อนทุกครั้ง การคอมไพล์นี้แหละครับมันคือขั้นตอนการเปลี่ยนภาษา C++ ที่เราเขียนให้เปลี่ยนเป็น Binary แล้วจึงเข้าสู่ขั้นตอน Upload แต่หากเราใช้ Web Server OTA มันเป็นการยัดไฟล์ใส่ไปใน ESP32 โดยตรง ฉะนั้นหากนำไฟล์ .ino ของ Arduino ไปใส่ย่อมไม่ได้ จึงต้องสร้างไฟล์ Binary ขึ้นมาก่อนโดยการคลิกที่ Sketch > Export complied binary ตัว ArduinoIDE จะทำการคอมไพล์ และสร้างไฟล์ Binary ขึ้นมา

เมื่อคลิกไปแล้วก็จะมีการคอมไพล์ มีแถบสีเขียวขึ้นมา ก็ให้รอจนแถบเขียวเต็มและขึ้นว่า Done compiling ตามปกติ จากนั้นไปดูในโฟลเดอร์ที่เราเซฟโปรแกรมนี้ไว้ (ค่าปกติของ ArduinoIDE จะเซฟที่ Documents/Arduino) จะมีไฟล์นามสกุล .bin เพิ่มขึ้นมา เราจะใช้ไฟล์นี้แหละไปอัพโหลดผ่าน Web Server

ตรงนี้บางเครื่องไฟล์ .bin อาจเป็นรูปกระดาษสีขาวเปล่าๆก็ไม่เป็นไรนะครับไม่ต้องสนใจ(ที่เป็นแบบนี้เพราะผู้เขียนใช้ Notepad++ เป็นโปรแกรมเริ่มต้นในการเปิด .bin ซึ่งปกติ Windows จะไม่ค่อยอยากให้เรายุ่งกับ .bin ในเครื่องเท่าไร เพราะไฟล์ระบบของเครื่องเป็น .bin มีเยอะมาก) เราสามารถก็อปปี้ ตัด ลาก ไฟล์ตัวนี้ของเราไปใส่แฟลชไดร์ แนบส่งเมล์หรืออะไรก็แล้วแต่เลยครับมันเป็นไฟล์ที่ระบบดิจิตอลอ่านออกแล้ว
ทีนี้เราจะยัดมันลงไปใน ESP32 เปิดเบราเซอร์ของราขึ้นมา ใส่ IP Address ของเจ้า ESP32 ลงไป Login ด้วย Username Password ลงไป เมื่อขึ้นหน้า Server Index กด Choose file จะมีหน้าต่างเด้งขึ้นมาให้เลือกไฟล์ ก็ไปหาไฟล์ .bin ของเรา เก็บไว้ตรงไหนก็คลิกเลือกเปิดมันขึ้นมา

กด Update รอทำการอัพโหลดไฟล์ โดยจะมีความคืบหน้าที่ progress ว่าเสร็จกี่เปอร์เซ็นต์แล้ว(อาจใช้เวลาเล็กน้อย) เมื่อครบ 100% ตัว ESP32 ของเราก็พร้อมใช้งานตามโปรแกรมที่เขียนลงไปแล้วครับ

ขอย้อนไปโปรแกรมที่เราใช้กระพริบไฟ จะเห็นว่าได้ใช้คำสั่ง millis ทำการจับเวลาแทนการ Delay (เรื่องการใช้ millis นี้อาจผ่านตากันมาบ้าง ยังไงแล้วเดี๋ยวจะเขียนเล่าภายหลังครับ) เนื่องจาก delay นั้นจะทำการหยุดโปรแกรมไว้ตรงนั้น หากเราเรียกหน้าเว็บในตอนที่โปรแกรมมันหยุดเพราะคำสั่ง Delay อยู่ มันจะเรียกหน้าเว็บขึ้นมาไม่ได้ เพราะไม่ได้เจอคำสั่ง server.handleClient() ที่เป็นคำสั่งทำงาน Web Server นั่นเอง เพื่อหลีกเลี่ยงปัญหาตรงนี้จึงใช้ millis จับเวลา แทนการใช้ Delay หน่วงเวลาครับ
มาถึงตอนท้าย ทำไมมันยาวจัง ทำไมมันยาวกว่าทุกตอน คิดว่าน่าจะจบเรื่องการทำ Web Server OTA แล้วครับ หวังว่าทุกท่านจะพอเข้าใจบ้างและนำไปใช้งานกันได้ ส่วนตอนต่อไปนะเป็นเรื่องอะไรติดตามกันต่อนะครับ

คลิกที่นี่เพื่อดาวน์โหลดโค้ดตัวอย่าง
คลิกที่นี่เพื่ออ่านบทความต่อไป

esp32, IoT, Internet of Things, Learning, tutorial