asynchronous web controlled thermostat

ESP32 Web ที่ควบคุมอุณหภูมิแบบอะซิงโครนัส

โครงการนี้ออกมาจากการสนทนาที่ฉันมีกับ Yves Bourdon บนฟอรัมการสอนแบบสุ่ม Nerd Lab Forum เกี่ยวกับวิธีการใช้งานเว็บอินเตอร์เฟสที่ได้รับการปรับปรุงเพื่อควบคุม ESP32 โดยไม่จำเป็นต้องโหลดหน้าทั้งหมดหรือส่งแบบฟอร์ม กล่าวอีกนัยหนึ่งความคิดที่นี่คือการดำเนินการตามคำขอแบบอะซิงโครนัสจากเบราว์เซอร์ไคลเอนต์เพื่อสอบถามไมโครคอนโทรลเลอร์เกี่ยวกับสถานะของข้อมูลที่จะแสดงและจากนั้นทำการอัปเดตท้องถิ่นของส่วนต่อประสานผู้ใช้ทันทีที่ได้รับข้อมูลที่ได้รับจาก ESP32

มีเทคนิคหลายอย่างที่จะบรรลุสิ่งนี้รวมถึงการใช้ WebSockets ซึ่งฉันชอบวิธีการดั้งเดิมที่พึ่งพา AJAX อย่างไรก็ตาม Yves ต้องการที่จะเข้าใจวิธีการใช้เทคนิคนี้กับ Ajax นี่คือจุดประสงค์ของโครงการนี้ อีกคนหนึ่งจะตามมาเพื่อแสดงให้เห็นถึงวิธีการดำเนินการกับ WebSockets ...

ภาพรวมโครงการ

ในการตอบคำขอเริ่มต้นของ YVES สำหรับเทอร์โมสตัทที่เชื่อมต่อฉันเลือกที่จะตั้งค่าวงจรที่ค่อนข้างง่ายด้วย ESP32 และเซ็นเซอร์อุณหภูมิ DHT11 (แต่เซ็นเซอร์ใด ๆ สามารถทำงานได้) ฉันยังเพิ่ม LED เพื่อระบุด้วยแฟลชช่วงเวลาที่ Navigator สอบสวน ESP32 เพื่อรับอุณหภูมิปัจจุบัน และส่วนต่อประสานผู้ใช้เพื่อควบคุม ESP32 เข้ากันได้กับเบราว์เซอร์ที่ทันสมัย โดยเฉพาะอย่างยิ่งในสมาร์ทโฟน:

เว็บอินเตอร์เฟสช่วยให้ผู้ใช้สามารถปรับช่วงอุณหภูมิของเทอร์โมสตัท ทันทีที่หนึ่งในเกณฑ์มีการเปลี่ยนแปลงคำขอ HTTP แบบอะซิงโครนัสจะถูกส่งไปยัง ESP32 เพื่อจัดเก็บช่วงอุณหภูมิใหม่ในหน่วยความจำ EEPROM ด้วยวิธีนี้หาก ESP32 จะรีสตาร์ทด้วยเหตุผลใดก็ตาม (หลังจากความล้มเหลวของพลังงาน) เทอร์โมสตัทจะเริ่มต้นด้วยช่วงอุณหภูมิที่บันทึกไว้ล่าสุด ปุ่ม Reboot ช่วยให้คุณสามารถทดสอบคุณสมบัตินี้ได้โดยการเริ่มต้นคำสั่ง esp32

ทุกครั้งที่มีการอ่านอุณหภูมิปัจจุบันอินเทอร์เฟซจะได้รับการปรับปรุงอย่างโปร่งใสโดยไม่จำเป็นต้องโหลดหน้าใหม่ และการแสดงอุณหภูมิจะปรับให้เข้ากับสถานการณ์โดยอัตโนมัติโดยการเปลี่ยนสีเพื่อระบุว่าทุกอย่างเรียบร้อยหรือถ้าคุณอยู่นอกช่วงที่ได้รับอนุญาต ข้อผิดพลาดในการอ่านบนเซ็นเซอร์สามารถเกิดขึ้นได้ จอแสดงผลจะคำนึงถึงสิ่งนี้:

การอ่านเบื้องต้น

เพื่อให้เข้าใจอย่างถ่องแท้ว่าเรากำลังทำอะไรอยู่ที่นี่ฉันขอแนะนำให้คุณดูบทช่วยสอนต่อไปนี้เกี่ยวกับการสอนแบบสุ่ม Nerd:

ESP32/ESP8266 เว็บเซิร์ฟเวอร์เทอร์โมสทัท - เอาต์พุตควบคุมตามอุณหภูมิ

หากคุณไม่คุ้นเคยกับการใช้ Spiffs ฉันขอแนะนำให้คุณอ่านบทช่วยสอนนี้ด้วย:

เว็บเซิร์ฟเวอร์ ESP32 โดยใช้ SPIFFS (SPI Flash File System)

ชิ้นส่วนที่ต้องการ

• 1 esp32
• เซ็นเซอร์อุณหภูมิ 1 DHT11
• 1 LED
• 2 ตัวต้านทาน (220 Ωและ 4.7 kΩ)

แผนภาพการเดินสายและ pinouts

• GPIO23 เชื่อมต่อกับขั้วบวกของ LED
• แคโทดของ LED เชื่อมต่อกับพื้นผ่านตัวต้านทาน 220 Ω
• GPIO32 เชื่อมต่อกับพินข้อมูลของเซ็นเซอร์อุณหภูมิ DHT11
• DHT11 ถูกดึงขึ้นบนพินข้อมูลด้วยตัวต้านทาน 4.7 kΩ

รหัส

ฉันพัฒนารหัสของฉันด้วยโปรแกรมแก้ไขรหัส Paltformio IDE และ Visual Studio ดังนั้นโปรแกรมหลักเรียกว่า main.cpp และตั้งอยู่ในไดเรกทอรี src หากคุณใช้ Arduino IDE คุณจะต้องย้ายโปรแกรมนี้ไปยังรูทของโครงการและเปลี่ยนชื่อเป็นเช่นนี้:

 mv src/main.cpp esp32-asynchronous-web-controlled-thermostat.ino

โครงสร้างรหัส

รหัสแบ่งออกเป็นสามไดเรกทอรี:

• src มีรหัส C ++ เพื่อรวบรวมและอัปโหลดไปยัง ESP32
• data มีรหัสแหล่งอินเทอร์เฟซผู้ใช้เว็บเพื่ออัปโหลดไปยัง ESP32 Spiffs
• scss มีซอร์สโค้ดของแผ่นสไตล์ CSS ในรูปแบบ SCSS

ส่วนต่อประสานผู้ใช้เว็บจะถูกเก็บไว้ในระบบไฟล์หน่วยความจำ ESP32 Flash เป็น 5 ไฟล์แยกต่างหาก:

• index.html (โครงสร้างอินเตอร์เฟส)
• index.css (เค้าโครงกราฟิกของอินเทอร์เฟซ)
• index.js (โปรแกรมการจัดการอินเตอร์เฟสแบบไดนามิก)
• D7MR.woff2 (ตัวอักษรที่ใช้สำหรับจอแสดงผลตัวเลข)
• favicon.ico (ไอคอนเล็ก ๆ สำหรับเบราว์เซอร์)

เว็บอินเตอร์เฟสถูกจัดรูปแบบกราฟิกโดย CSS Stylesheet ซอร์สโค้ดเขียนในรูปแบบ SCSS (Sassy CSS) และรวบรวมโดยใช้โปรแกรม sass เพื่อรับไฟล์ CSS ดูเว็บไซต์ Sass อย่างเป็นทางการเพื่อเรียนรู้เพิ่มเติม

โดยทั่วไปไวยากรณ์ SCSS อยู่ใกล้กับ CSS มาก หากคุณต้องการแก้ไขไฟล์ต้นฉบับคุณจะต้องติดตั้งเครื่องมือ sass และคอมไพล์ไฟล์ CSS อีกครั้งดังนี้:

 sass -t compressed --sourcemap=none --update scss:data

แต่คุณสามารถแก้ไขไฟล์ CSS ได้โดยตรงหากคุณไม่ต้องการติดตั้งเครื่องมือเพิ่มเติม

การใช้งาน AJAX

ฉันเสนอเทคนิคสองอย่างที่นี่เพื่อใช้การแลกเปลี่ยนแบบอะซิงโครนัสระหว่างเบราว์เซอร์ไคลเอนต์และเว็บเซิร์ฟเวอร์ที่ทำงานบน ESP32:

• วิธีการคลาสสิกที่ใช้วัตถุ XMLHttpRequest ของ JavaScript
• วิธีการที่ทันสมัยกว่าที่ใช้โปรโตคอล async/รอคอยของ JavaScript

ดังนั้นคุณมีทางเลือกที่จะใช้อย่างใดอย่างหนึ่ง

ฉันได้แสดงความคิดเห็นอย่างรอบคอบเกี่ยวกับรหัสทั้งหมดเพื่อให้คุณเข้าใจได้ง่ายขึ้น อย่าลังเลที่จะมาถามคำถามในฟอรัมโดยตอบโพสต์นี้ที่ทุ่มเทให้กับโครงการ

การให้เครดิต

• โดยเฉพาะอย่างยิ่งฉันอยากจะขอบคุณ ฉัน No Dev ผู้แต่งห้องสมุด ESP32AsyncWebserver ที่ยอดเยี่ยมซึ่งทำให้ชีวิตของเราง่ายขึ้นมากเมื่อเราต้องการโต้ตอบกับ ESP32 ผ่านเว็บแอปพลิเคชัน

• ฉันขอขอบคุณ Keshikan สำหรับแบบอักษร Mini Mini Dseg7 Modern Mini ของเขาที่ฉันใช้สำหรับจอแสดงผลดิจิตอลของอินเทอร์เฟซ