ESP8266 และ Visuino: DHT11 เว็บเซิร์ฟเวอร์อุณหภูมิและความชื้น: 12 ขั้นตอน

2025 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2025-01-23 15:12

โมดูล ESP8266 เป็นตัวควบคุมแบบสแตนด์อโลนราคาประหยัดที่ยอดเยี่ยมพร้อม Wi-Fi ในตัว และฉันได้จัดทำ Instructables จำนวนหนึ่งเกี่ยวกับพวกเขา

DTH11/DTH21/DTH22 และ AM2301 เป็นเซ็นเซอร์ Arduino แบบอุณหภูมิและความชื้นรวมกันที่ได้รับความนิยมอย่างมาก และฉันได้สร้าง Instructables จำนวนมากด้วย รวมถึง Instructable บน Remote Thermometer และ Humidity Sensor ที่มี 2 ESP8266 เชื่อมต่อกันบนเครือข่าย Wi-Fi ส่วนตัวของพวกเขา

ในคำแนะนำนี้ ฉันจะแสดงให้คุณเห็นว่าคุณสามารถสร้างเว็บเซิร์ฟเวอร์อุณหภูมิและความชื้นด้วย ESP8266 และ DHT11 ได้อย่างไร และเชื่อมต่อกับเครือข่าย Wi-Fi ที่มีอยู่ของคุณจากอุปกรณ์หลายเครื่องด้วยเว็บเบราว์เซอร์

ขั้นตอนที่ 1: ส่วนประกอบ

1. บอร์ด OneNodeMCU ESP8266 (ฉันใช้รุ่น NodeMCU 0.9 แต่รุ่นอื่นๆ หรือแม้แต่ ESP-12 หรือ ESP-01 แบบสแตนด์อโลนก็ใช้ได้)
2. หนึ่งโมดูลเซ็นเซอร์ DHT11 ที่ฉันได้รับจากเซ็นเซอร์ราคาถูก 37 ชุด
3. 3 สายจัมเปอร์หญิง-หญิง

ขั้นตอนที่ 2: เชื่อมต่อ DHT11 กับ NodeMCU ESP8266 Module

1. ต่อสายไฟ (สายสีแดง) กราวด์ (สายสีดำ) และข้อมูล (สายสีเทา) เข้ากับโมดูล DHT11 (ภาพที่ 1 แสดงโมดูลเซ็นเซอร์ DHT11 2 ประเภท อย่างที่คุณเห็นหมุดอาจแตกต่างกันไป ดังนั้น โปรดเชื่อมต่ออย่างระมัดระวัง!)
2. เชื่อมต่อปลายอีกด้านของสายกราวด์ (สายสีดำ) เข้ากับพินกราวด์ของโมดูล ESP8266 (ภาพที่ 2)
3. เชื่อมต่อปลายอีกด้านของสายไฟ (สายสีแดง) เข้ากับพินเพาเวอร์ 3.3V ของโมดูล ESP8266 (ภาพที่ 2)
4. เชื่อมต่อปลายอีกด้านหนึ่งของสายข้อมูล (สายสีเทา) เข้ากับขาดิจิตอล 2 ของโมดูล ESP8266 (ภาพที่ 3)
5. ภาพที่ 4 แสดงตำแหน่งกราวด์ กำลังไฟ 3.3V และพินดิจิทัล 2 พินของ NodeMCU 0.9

ขั้นตอนที่ 3: เริ่ม Visuino และเลือกประเภทบอร์ด ESP8266

ในการเริ่มต้นเขียนโปรแกรม Arduino คุณจะต้องติดตั้ง Arduino IDE จากที่นี่:

โปรดทราบว่ามีข้อบกพร่องที่สำคัญบางอย่างใน Arduino IDE 1.6.6

ตรวจสอบให้แน่ใจว่าคุณติดตั้ง 1.6.7 หรือสูงกว่า มิฉะนั้น Instructable นี้จะไม่ทำงาน!

หากคุณยังไม่ได้ทำตามขั้นตอนในคำแนะนำนี้เพื่อตั้งค่า Arduino IDE เป็นโปรแกรม ESP 8266

ต้องติดตั้ง Visuino: https://www.visuino.com ด้วย

1. เริ่ม Visuinoas ที่แสดงในภาพแรก
2. คลิกที่ปุ่ม "เครื่องมือ" บนส่วนประกอบ Arduino (ภาพที่ 1) ใน Visuino
3. เมื่อไดอะล็อกปรากฏขึ้น ให้เลือก "NodeMCU ESP-12" ดังแสดงในภาพที่2

ขั้นตอนที่ 4: ใน Visuino: ตั้งชื่อโฮสต์และจุดเข้าใช้งาน

อันดับแรก เราต้องกำหนดค่าโมดูลให้เชื่อมต่อกับจุดเข้าใช้งานที่มีอยู่และกำหนดชื่อโฮสต์ให้กับโมดูล เพื่อให้เราสามารถค้นพบบนเครือข่ายได้

1. ใน Object Inspector ให้ขยายคุณสมบัติ “Modules” จากนั้นขยายคุณสมบัติย่อย “WiFi”
2. ใน Object Inspector ตั้งค่าของคุณสมบัติ "HostName" เป็น "dht11server" (ภาพที่ 1)
3. ใน Object Inspector ให้ขยายคุณสมบัติย่อย “AccessPoints” ของ “WiFi” และคลิกที่ปุ่ม "…" ถัดจากค่าของมัน (ภาพที่ 2)
4. ในตัวแก้ไข "AccessPoins" เลือก "WiFi Access Point" ในมุมมองด้านขวา จากนั้นคลิกที่ปุ่ม "+" ทางด้านซ้ายเพื่อเพิ่มจุดเชื่อมต่อ (ภาพที่ 2)
5. ใน Object Inspector ตั้งค่าของคุณสมบัติ "SSID" เป็น SSID ของ Wi-Fi Hotspot (Access Point) ของคุณ (ภาพที่ 4)
6. หาก Wi-Fi Hotspot (Access Point) ของคุณต้องใช้รหัสผ่าน ใน Object Inspector ให้ตั้งรหัสผ่านเป็นค่าของคุณสมบัติ "Password" (ภาพที่ 4)
7. ปิดกล่องโต้ตอบ "AccessPoints"

ขั้นตอนที่ 5: ใน Visuino: เพิ่มซ็อกเก็ตเซิร์ฟเวอร์ TCP/IP สำหรับการสื่อสาร

ต่อไปเราต้องเพิ่มซ็อกเก็ตเซิร์ฟเวอร์ TCP/IP สำหรับการสื่อสาร

1. ใน Object Inspector ให้คลิกที่ปุ่ม "…" ถัดจากค่าของคุณสมบัติย่อย "Sockets" ของ WiFi (ภาพที่ 1)
2. ในตัวแก้ไข Sockets เลือก “เซิร์ฟเวอร์ TCP/IP” จากนั้นคลิกที่ปุ่ม "+" (ภาพที่ 2) เพื่อเพิ่มหนึ่งรายการ (ภาพที่ 3)
3. ปิดกล่องโต้ตอบ "ซ็อกเก็ต"

ขั้นตอนที่ 6: ใน Visuino: เพิ่ม DTH11 และองค์ประกอบข้อความที่จัดรูปแบบด้วย 2 ช่องสัญญาณอะนาล็อก

ในการควบคุมและอ่านอุณหภูมิและความชื้นจาก DHT11 เราจำเป็นต้องเพิ่มส่วนประกอบใน Visuino

เรายังต้องสร้างหน้าเว็บจากข้อมูล หน้านี้เป็นเพียงเอกสารข้อความ HTML ดังนั้นเราจึงสามารถใช้องค์ประกอบข้อความที่จัดรูปแบบเพื่อสร้างได้

1. พิมพ์ "dht" ในช่อง Filter ของ Component Toolbox แล้วเลือกส่วนประกอบ "Humidity and Thermometer DHT11/21/22/AM2301" (ภาพที่ 1) แล้ววางลงในพื้นที่ออกแบบ
2. พิมพ์ "form" ในช่อง Filter ของ Component Toolbox จากนั้นเลือกองค์ประกอบ "Formatted Text" (ภาพที่ 2) แล้ววางลงในพื้นที่ออกแบบ
3. คลิกที่ปุ่ม "เครื่องมือ" ขององค์ประกอบ FormattedText1 (ภาพที่ 3)
4. ในตัวแก้ไข Elements เลือก Analog Element ทางด้านขวา และคลิก 2 ครั้งที่ปุ่ม "+" ทางด้านซ้าย (ภาพที่ 4) เพื่อเพิ่ม 2 รายการ (ภาพที่ 5)
5. ปิดตัวแก้ไข "องค์ประกอบ"

ขั้นตอนที่ 7: ใน Visuino: ตั้งค่าข้อความที่จัดรูปแบบสำหรับการตอบกลับของเซิร์ฟเวอร์

เราจำเป็นต้องระบุข้อความ HTML ที่จะสร้างขึ้นเมื่อเว็บไคลเอ็นต์เชื่อมต่อกับเซิร์ฟเวอร์

เราจะระบุการเชื่อมต่อที่จะปิดหลังจากข้อมูลที่ฉันส่ง และจะสั่งให้เบราว์เซอร์เชื่อมต่อใหม่ (รีเฟรช) หลังจาก 5 วินาทีโดยเพิ่ม "รีเฟรช: 5" ลงในเอกสาร วิธีนี้หน้าเว็บจะรีเฟรชทุกๆ 5 วินาที

1. ในพื้นที่ออกแบบ เลือกคอมโพเนนต์ FormattedText1 (ภาพที่ 1)
2. ใน Object Inspector เลือกคุณสมบัติ "Text" และคลิกที่ปุ่ม "…" ถัดจากค่าของมัน (ภาพที่ 1)
3. ในประเภทตัวแก้ไข "ข้อความ":"HTTP/1.1 200 ตกลง""ประเภทเนื้อหา: ข้อความ/html""การเชื่อมต่อ: ปิด""รีเฟรช: 5""""""""""อุณหภูมิ: %0""ความชื้น: %1""""""(ภาพที่ 2) %0 จะถูกแทนที่ด้วยค่าจาก AnalogElement1 และ %1 จะถูกแทนที่ด้วยค่าจาก AnalogElement2
4. คลิกที่ปุ่ม OK เพื่อปิดกล่องโต้ตอบ

ขั้นตอนที่ 8: ใน Visuino: เชื่อมต่อ DHT11 Component

1. เชื่อมต่อพินเอาต์พุต "Temperature" ของส่วนประกอบ HumidityThermometer1 กับพิน "In" ของ AnalogElement1 ของส่วนประกอบ FormattedText1 (ภาพที่ 1)
2. เชื่อมต่อพินเอาต์พุต "ความชื้น" ของส่วนประกอบ HumidityThermometer1 กับพิน "ใน" ของ AnalogElement2 ของส่วนประกอบ FormattedText1 (ภาพที่ 2)
3. เชื่อมต่อพิน "เซนเซอร์" ของส่วนประกอบ HumidityThermometer1 กับพินอินพุต "ดิจิตอล" ของช่อง "ดิจิตอล[2]" ของส่วนประกอบ Arduino (ภาพที่ 3)

ขั้นตอนที่ 9: ใน Visuino: เพิ่มและเชื่อมต่อ Edge Detect Component

เราจำเป็นต้องส่งข้อความ HTML ทุกครั้งที่มีการเชื่อมต่อใหม่ ก่อนที่เราจะส่ง เราต้องรอสักครู่เนื่องจากเว็บเบราว์เซอร์ต้องส่งคำขอก่อนที่จะคาดหวังผลลัพธ์ ในการทำเช่นนั้น เราจะใช้คอมโพเนนต์การหน่วงเวลาที่เชื่อมต่อกับพิน "เชื่อมต่อแล้ว" ของซ็อกเก็ตเซิร์ฟเวอร์ TCP/IP

1. พิมพ์ "delay" ในช่อง Filter ของ Component Toolbox จากนั้นเลือกส่วนประกอบ "Delay" (ภาพที่ 1) และวางลงในพื้นที่ออกแบบ
2. ใน Properties ตั้งค่าของคุณสมบัติ "Interval (uS)" เป็น 200000 (ภาพที่ 2)
3. เชื่อมต่อพิน "เชื่อมต่อ" ของ "Modules. WiFi. Sockets. TCPServer1" ของส่วนประกอบ "NodeMCU ESP-12" กับพิน "In" ของส่วนประกอบ Delay1 (ภาพที่ 3)
4. เชื่อมต่อพิน "ออก" ของคอมโพเนนต์ Delay1 กับพินอินพุต "นาฬิกา" ของคอมโพเนนต์ FormattedText1 (ภาพที่ 4)

ขั้นตอนที่ 10: ใน Visuino: เชื่อมต่อคอมโพเนนต์ข้อความที่จัดรูปแบบแล้ว และเพิ่มและเชื่อมต่อคอมโพเนนต์การหน่วงเวลา

1. เชื่อมต่อพิน "Out" ของคอมโพเนนต์ FormattedText1 กับพิน "In" ของ "Modules. WiFi. Sockets. TCPServer1" ของคอมโพเนนต์ "NodeMCU ESP-12" (ภาพที่ 1)
2. พิมพ์ "delay" ในช่อง Filter ของ Component Toolbox จากนั้นเลือกส่วนประกอบ "Delay" (ภาพที่ 2) และวางลงในพื้นที่ออกแบบ
3. เชื่อมต่อพิน "ออก" ขององค์ประกอบ FormattedText1 กับพิน "ใน" ขององค์ประกอบ Delay2 (ภาพที่ 3)
4. เชื่อมต่อพิน "Out" ของคอมโพเนนต์ Delay2 กับพินอินพุต "Disconnect" ของ "Modules. WiFi. Sockets. TCPServer1" ของคอมโพเนนต์ "NodeMCU ESP-12" (ภาพที่ 4)

คอมโพเนนต์การหน่วงเวลาจะยกเลิกการเชื่อมต่อซ็อกเก็ตหลังจากส่งข้อความไม่นาน

ขั้นตอนที่ 11: สร้าง คอมไพล์ และอัปโหลดโค้ด Arduino

1. ใน Visuino กด F9 หรือคลิกที่ปุ่มที่แสดงในรูปที่ 1 เพื่อสร้างรหัส Arduino และเปิด Arduino IDE
2. เชื่อมต่อโมดูล NodeMCU ด้วยสาย USB เข้ากับคอมพิวเตอร์
3. เลือกประเภทบอร์ดและพอร์ตอนุกรมตามที่ฉันได้แสดงให้คุณเห็นในคำแนะนำนี้
4. ใน Arduino IDE ให้คลิกที่ปุ่ม Upload เพื่อคอมไพล์และอัพโหลดโค้ด (ภาพที่ 2)

ขั้นตอนที่ 12: และเล่น…

ยินดีด้วย! คุณได้สร้างเว็บเซิร์ฟเวอร์อุณหภูมิและความชื้นของ Wi-Fi แล้ว

ในภาพที่ 1 และในวิดีโอ คุณสามารถดูโครงการที่เชื่อมต่อและขับเคลื่อนได้ ฉันใช้ USB Power Bank ขนาดเล็กเพื่อจ่ายไฟให้กับโมดูล

ตรวจสอบให้แน่ใจในโครงการในขั้นตอนที่ 4 คุณป้อน SSID และรหัสผ่านที่ถูกต้องสำหรับ Wi-Fi hotspot ของคุณ

หากคุณเปิดเว็บเบราว์เซอร์บนคอมพิวเตอร์หรืออุปกรณ์เคลื่อนที่ แล้วพิมพ์:

dht11server./

และกด Enter คุณจะเห็นอุณหภูมิและความชื้นที่วัดโดยโมดูล การอ่านจะรีเฟรชทุก 5 วินาทีตามที่ระบุไว้ในขั้นตอนที่ 7

ตรวจสอบให้แน่ใจว่าได้เพิ่ม Dot ที่ส่วนท้ายของชื่อ มิฉะนั้น Windows จะไม่สามารถแก้ไขชื่อโดเมนได้

ในรูปที่ 2 คุณสามารถดูไดอะแกรม Visuino ทั้งหมดได้

สิ่งที่แนบมาด้วยคือโครงการ Visuino ที่ฉันสร้างขึ้นสำหรับคำแนะนำนี้ ดาวน์โหลดและเปิดได้ใน Visuino: