ESP32 เว็บเซิร์ฟเวอร์พร้อม MPU-6050 Accelerometer และ Gyroscope (การแสดงวัตถุ 3 มิติ)
ในโครงการนี้ เราจะสร้างเว็บเซิร์ฟเวอร์ด้วย ESP32 เพื่อแสดงค่าที่อ่านได้จากมาตรความเร่ง MPU-6050 และเซ็นเซอร์ไจโรสโคป นอกจากนี้ เราจะสร้างการนำเสนอแบบ 3 มิติของการวางแนวเซ็นเซอร์บนเว็บเบราว์เซอร์ การอ่านจะอัปเดตโดยอัตโนมัติโดยใช้เหตุการณ์ที่เซิร์ฟเวอร์ส่ง และการแสดงภาพ 3 มิติจะได้รับการจัดการโดยใช้ไลบรารี JavaScript ที่เรียกว่า three.js บอร์ด ESP32 จะถูกตั้งโปรแกรมโดยใช้แกน Arduino
ในการสร้างเว็บเซิร์ฟเวอร์ เราจะใช้ไลบรารี ESPAsyncWebServer ที่ให้วิธีง่ายๆ ในการสร้างเว็บเซิร์ฟเวอร์แบบอะซิงโครนัสและจัดการเหตุการณ์ที่เซิร์ฟเวอร์ส่ง
ภาพรวมโครงการ
ก่อนที่จะไปที่โครงการ สิ่งสำคัญคือต้องร่างว่าเว็บเซิร์ฟเวอร์ของเราจะทำอะไร เพื่อให้เข้าใจได้ง่ายขึ้น
- เว็บเซิร์ฟเวอร์แสดงค่าไจโรสโคปของแกน X, Y และ Z
- ค่าไจโรสโคปจะอัปเดตบนเว็บเซิร์ฟเวอร์ทุก ๆ 10 มิลลิวินาที
- จะแสดงค่ามาตรความเร่ง (X, Y, Z) ค่าเหล่านี้อัปเดตทุก ๆ 200 มิลลิวินาที
- โมดูลเซ็นเซอร์ MPU-6050 ยังวัดอุณหภูมิด้วย ดังนั้นเราจะแสดงค่าอุณหภูมิด้วย อุณหภูมิจะอัปเดตทุกวินาที (1,000 มิลลิวินาที)
- การอ่านทั้งหมดได้รับการอัปเดตโดยใช้เหตุการณ์ที่เซิร์ฟเวอร์ส่ง
- มีการแสดงภาพ 3 มิติของเซ็นเซอร์ การวางแนวของวัตถุ 3 มิติจะเปลี่ยนไปตามการวางแนวของเซนเซอร์ ตำแหน่งปัจจุบันของเซ็นเซอร์คำนวณโดยใช้ค่าไจโรสโคป
- วัตถุ 3 มิติถูกสร้างขึ้นโดยใช้ไลบรารี JavaScript ที่เรียกว่า three.js ;
- มีสี่ปุ่มสำหรับปรับตำแหน่งของวัตถุ 3 มิติ:
- รีเซ็ตตำแหน่ง: ตั้งค่าตำแหน่งเชิงมุมเป็นศูนย์ในทุกแกน
- X: ตั้งค่าตำแหน่งเชิงมุม X เป็นศูนย์
- Y: ตั้งค่าตำแหน่งเชิงมุม Y เป็นศูนย์
- Z: ตั้งค่าตำแหน่งเชิงมุม Z เป็นศูนย์
ระบบไฟล์ ESP32
เพื่อให้โครงการของเราเป็นระเบียบและทำให้เข้าใจง่ายขึ้น เราจะสร้างไฟล์ที่แตกต่างกันสี่ไฟล์เพื่อสร้างเว็บเซิร์ฟเวอร์:
- รหัส Arduino ที่จัดการเว็บเซิร์ฟเวอร์
- ไฟล์ HTML: เพื่อกำหนดเนื้อหาของหน้าเว็บ;
- ไฟล์ CSS: เพื่อจัดรูปแบบหน้าเว็บ;
- ไฟล์ JavaScript: เพื่อตั้งโปรแกรมการทำงานของหน้าเว็บ (จัดการการตอบสนองของเว็บเซิร์ฟเวอร์ เหตุการณ์ และการสร้างวัตถุ 3 มิติ)
ไฟล์ HTML, CSS และ JavaScript จะถูกอัปโหลดไปยัง ESP32 SPIFFS (ระบบไฟล์) ในการอัปโหลดไฟล์ไปยังระบบไฟล์ ESP32 เราจะใช้ SPIFFS Uploader Plugin
MPU-6050 ไจโรสโคปและมาตรความเร่ง
MPU-6050 เป็นโมดูลที่มีมาตรความเร่งแบบ 3 แกนและไจโรสโคปแบบ 3 แกน
ไจโรสโคปวัดความเร็วในการหมุน (rad/s) – นี่คือการเปลี่ยนแปลงของตำแหน่งเชิงมุมเมื่อเวลาผ่านไปตามแนวแกน X, Y และ Z (การม้วน ระยะพิทช์ และการเอียง) ทำให้เราสามารถกำหนดทิศทางของวัตถุได้
มาตรความเร่งวัดความเร่ง (อัตราการเปลี่ยนแปลงความเร็วของวัตถุ) ตรวจจับวัตถุที่อยู่นิ่ง เช่น แรงดึงดูด (9.8m/s 2 ) หรือแรงไดนามิก เช่น แรงสั่นสะเทือนหรือการเคลื่อนไหว MPU-6050 วัดความเร่งเหนือแกน X, Y และ Z ตามหลักการแล้ว ในวัตถุที่อยู่นิ่ง ความเร่งเหนือแกน Z จะเท่ากับแรงโน้มถ่วง และควรเป็นศูนย์บนแกน X และ Y
การใช้ค่าจากมาตรความเร่งทำให้สามารถคำนวณมุมม้วนและพิทช์โดยใช้ตรีโกณมิติได้ แต่ไม่สามารถคำนวณการหันเหได้
เราสามารถรวมข้อมูลจากเซ็นเซอร์ทั้งสองเพื่อให้ได้ข้อมูลที่ถูกต้องเกี่ยวกับการวางแนวเซ็นเซอร์
แผนผัง – ESP32 พร้อม MPU-6050
สำหรับโครงการนี้ คุณต้องมีชิ้นส่วนต่อไปนี้:
- DevKitC V4 ESP32 Development Board
- GY-521 MPU6050 3 Axis Module
- Breadboard 830 Point MB-102
- Jumper wires
ต่อสาย ESP32 เข้ากับเซ็นเซอร์ MPU-6050 ตามที่แสดงในแผนภาพต่อไปนี้: ต่อขา SCL เข้ากับ GPIO 22 และขา SDA ไปที่ GPIO 21.
การเตรียม Arduino IDE
เราจะตั้งโปรแกรมบอร์ด ESP32 โดยใช้ Arduino IDE ดังนั้น ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งโปรแกรมเสริม ESP32 แล้ว
การติดตั้งไลบรารี MPU-6050
มีหลายวิธีในการอ่านค่าจากเซ็นเซอร์ ในบทช่วยสอนนี้ เราจะใช้ไลบรารี Adafruit MPU6050 หากต้องการใช้ไลบรารี นี้คุณต้องติดตั้ง ไลบรารี Adafruit Unified Sensor และ ไลบรารี Adafruit Bus IO
เปิด Arduino IDE ของคุณ แล้วไปที่ Sketch > Include Library > Manage Libraries ผู้จัดการห้องสมุดควรเปิดขึ้น
พิมพ์ “ adafruit mpu6050 ” ในช่องค้นหาและติดตั้งไลบรารี
จากนั้นค้นหา “ Adafruit Unified Sensor ” เลื่อนลงจนสุดเพื่อค้นหาไลบรารีและติดตั้ง
สุดท้าย ค้นหา “ Adafruit Bus IO ” และติดตั้ง
การติดตั้ง Async Web Server Libraries
ในการสร้างเว็บเซิร์ฟเวอร์ เราจะใช้ ไลบรารี ESPAsyncWebServer ไลบรารีนี้ต้องการไลบรารี AsyncTCP เพื่อให้ทำงานได้อย่างถูกต้อง คลิกลิงก์ด้านล่างเพื่อดาวน์โหลดไลบรารี
ไลบรารีเหล่านี้ไม่สามารถติดตั้งผ่าน Arduino Library Manager ดังนั้นคุณต้องคัดลอกไฟล์ไลบรารีไปยังโฟลเดอร์ Arduino Installation Libraries หรือใน Arduino IDE ของคุณ คุณสามารถไปที่ Sketch > Include Library > Add .zip Library และเลือกไลบรารีที่คุณเพิ่งดาวน์โหลด
กำลังติดตั้งไลบรารี่ Arduino_JSON
ในตัวอย่างนี้ เราจะส่งการอ่านเซ็นเซอร์ไปยังเบราว์เซอร์ในรูปแบบ JSON เพื่อให้ง่ายต่อการจัดการตัวแปร JSON เราจะใช้ ไลบรารี Arduino_JSON
คุณสามารถติดตั้งไลบรารีนี้ใน Arduino IDE Library Manager เพียงไปที่ Sketch > Include Library > Manage Libraries และค้นหาชื่อไลบรารีดังนี้: Arduino_JSON
ปลั๊กอินตัวอัปโหลดระบบไฟล์
เพื่อทำตามบทช่วยสอนนี้ คุณควรติดตั้งปลั๊กอิน ESP32 Filesystem Uploader ใน Arduino IDE ของคุณ หากคุณไม่ทำ ให้ทำตามบทช่วยสอนถัดไปเพื่อติดตั้ง:
การจัดระเบียบไฟล์ของคุณ
ในการสร้างเว็บเซิร์ฟเวอร์ คุณต้องมีไฟล์ที่แตกต่างกันสี่ไฟล์ ภาพร่าง Arduino ไฟล์ HTML ไฟล์ CSS และไฟล์ JavaScript ควรบันทึกไฟล์ HTML, CSS และ JavaScript ไว้ในโฟลเดอร์ชื่อ data ภายในโฟลเดอร์ร่าง Arduino ดังแสดงด้านล่าง:
คุณสามารถดาวน์โหลดไฟล์โครงการทั้งหมด:
การอัพโหลดรหัสและไฟล์
หลังจากใส่ข้อมูลรับรองเครือข่ายของคุณแล้ว ให้บันทึกรหัส ไปที่ Sketch > Show Sketch Folder และสร้างโฟลเดอร์ชื่อ data
Thanks!