ระบบอัตโนมัติภายในบ้านโดยใช้ Captive Portal: 9 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:04

ที่นี่ เราจะสร้างโครงการที่น่าสนใจมากของระบบอัตโนมัติภายในบ้านที่ใช้ Captive Portal โดยใช้ nodeMCU ตั้งแต่เริ่มต้น..เอาล่ะมาเริ่มกันเลย..

ขั้นตอนที่ 1: การประกาศเบื้องต้น

ประกาศพิน IO ของ nodeMCU เพื่อดำเนินการ ไฟล์ส่วนหัว และรหัสสำหรับสร้างเซิร์ฟเวอร์ DNS..แสดงในรูปภาพ..

ขั้นตอนที่ 2: รหัส Html สำหรับส่วนหน้าเช่น หน้าเข้าสู่ระบบ

ดังที่แสดงในภาพ ประกาศรหัส html ภายในตัวแปรสตริงที่เราส่งไปยังผู้ใช้ปลายทางเพื่อตรวจสอบรหัสการเข้าถึง

*เพื่อจับข้อมูลที่ป้อนโดยผู้ใช้ที่นี่ เราใช้ anchor pane และ href tag

*โดยทั่วไปแล้ว แท็ก Anchor จะใช้เพื่อเพิ่มหน้าเว็บอื่นภายในหน้าเว็บ และแท็ก href จะกำหนดปลายทางของลิงก์

*แต่ในที่นี้ เราได้รับข้อมูลที่ป้อนโดยผู้ใช้ในช่องรหัสการเข้าถึงผ่าน Anchor Pane และแท็ก href…

ฉันจะพูดถึงสองวิธีในการรับอินพุตจากเว็บอินเตอร์เฟสไปจนถึงโปรแกรมเมอร์ของเราสิ้นสุด..

ขั้นตอนที่ 3: การใช้ WebServer.arg() และ WebServer.on() Methods

อย่างที่ฉันพูดถึงในขั้นตอนก่อนหน้านี้ ฉันจะบอกคุณสองวิธีที่แตกต่างกัน..

1) โดยใช้วิธี webServer.arg():

ในที่นี้เราระบุแอตทริบิวต์ออโต้โฟกัสพร้อมกับองค์ประกอบตามที่แสดงในภาพ

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

จากนั้นเราเรียกเมธอด args() บนอ็อบเจ็กต์เซิร์ฟเวอร์ เมธอดนี้จะส่งคืนจำนวนพารามิเตอร์การสืบค้นที่ส่งผ่านบน HTTP และใช้คำสั่งแบบมีเงื่อนไขเพื่อดำเนินการตามนั้น

2) โดยใช้และแอตทริบิวต์ href:

ที่นี่ เราระบุองค์ประกอบการควบคุมของเรา (เช่นปุ่ม) ภายในและกำหนดสตริง อักขระ ลิงก์ที่คุณต้องการตรวจสอบโดยใช้คำสั่งแบบมีเงื่อนไข จากนั้นเราเรียก webServer.on() เพื่อรับอินพุตสำหรับการตรวจสอบ

ตามที่ปรากฏ..

ขั้นตอนที่ 4: หากผู้ใช้พิมพ์ข้อมูลรับรองไม่ถูกต้อง

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

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

ตามที่ปรากฏ..

ขั้นตอนที่ 5: วิธีเพิ่มรูปภาพลงในหน้าเว็บของคุณ.

มันง่ายมาก เพราะที่นี่เราไม่ได้เก็บภาพของเราไว้ในที่เก็บข้อมูลจริง ดังนั้นเราจึงจัดเตรียมเส้นทางในการดึงภาพนั้นที่เรามักจะทำในกรณีของหน้า html

ดังนั้นสิ่งที่เราทำคือเพียงแค่แปลงรูปภาพของเราเป็น base64 แล้ววางลงในโค้ดของเพจดังที่แสดง..

ขั้นตอนที่ 6: ส่วนประกอบใดที่เราต้องการ.

1)- nodeMCU

2) - Arduino IDE เพื่อแฟลช nodeMCU

3)-สายจัมเปอร์ (F-2-F)

4)-โมดูลรีเลย์

5) - สมาร์ทโฟนหรือแล็ปท็อปที่เปิดใช้งาน WiFi เพื่อทดสอบ

ขั้นตอนที่ 7: การเชื่อมต่อ.

เพิ่มโมดูลรีเลย์ไปยังหมุด IO ที่ประกาศไว้ในโค้ด

ต่อรีเลย์กับอุปกรณ์ไฟฟ้าที่ต้องการควบคุมตามภาพ..

ขั้นตอนที่ 8: ตอนนี้ทดสอบและสนุก.

ขั้นตอนที่ 9: รหัสอยู่ที่นี่.

กรุณาเขียนความคิดเห็นที่มีค่าของคุณ..