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


สำหรับโครงการนี้ คุณต้องมีชิ้นส่วนต่อไปนี้:

  1. DevKitC V4 ESP32 Development Board
  2. GY-521 MPU6050 3 Axis Module
  3. Breadboard 830 Point MB-102
  4. 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

One thought on “การแสดงวัตถุ 3 มิติ ด้วย ESP32”

Leave a Reply

Your email address will not be published. Required fields are marked *

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save