อินเทอร์เฟซการแสดงผล Nextion พร้อม ESP 32 สี่รีเลย์บอร์ด: 7 ขั้นตอน

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

ในคำแนะนำนี้เราจะเชื่อมต่อจอแสดงผล nextion ขนาด 5” กับบอร์ดรีเลย์สี่ Esp 32 บอร์ดควบคุมโดยโปรโตคอล MQTT บอร์ดยังมีคุณสมบัติการควบคุมสองทาง สามารถควบคุมได้ทั้งโดย mqtt และหน้าจอสัมผัส หน้าจอสัมผัสเชื่อมต่อกับ Esp 32 ผ่าน uart

การตั้งค่าการแสดงผล Nextion:

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

สามารถดาวน์โหลด Nextion Editor ได้จากลิงค์นี้

nextion.itead.cc/resources/download/nextion-editor/

หลังจากดาวน์โหลดให้ติดตั้งตัวแก้ไข nextion

ขั้นตอนที่ 1: ตัวแก้ไข Nextion

เปิดตัวแก้ไข nextion ด้านล่างจะแสดงหน้าต่าง nextion ซึ่งมีหน้าต่างย่อย. Toolbox ในหน้าต่างนี้จะมีชุดของคุณสมบัติต่างๆ เช่น การแสดงข้อความ ปุ่มเพิ่ม หรือเพื่อสร้างแป้นหมุน เป็นต้น เราสามารถลากและวางวัตถุเหล่านี้ไปที่หน้าต่างหลักได้ มุมล่างซ้ายเป็นหน้าต่างรูปภาพและแบบอักษรที่ผู้ใช้สามารถเพิ่มรูปภาพโดยใช้สัญลักษณ์ '+' และสามารถลบรูปภาพโดยใช้สัญลักษณ์ '-' มุมบนขวามีหน้าต่างหน้าที่ผู้ใช้สามารถเพิ่มหรือลบหน้าได้ มุมล่างขวาของหน้าต่างแอตทริบิวต์มี ที่นี่ผู้ใช้สามารถแก้ไขพารามิเตอร์ของวัตถุ ด้านล่างมีหน้าต่างสองบานหนึ่งคือหน้าต่างผลลัพธ์และหน้าต่างเหตุการณ์ ในหน้าต่างผลลัพธ์ จะแสดงข้อผิดพลาดของคอมไพเลอร์ ผู้ใช้จะเลือกวัตถุและเขียนโค้ดในหน้าต่างเหตุการณ์เพื่อให้สิ่งต่างๆ เกิดขึ้น

เราต้องสร้างไฟล์ใหม่ เมื่อเราบันทึกไฟล์ใหม่แล้ว หน้าต่าง image2 จะปรากฏขึ้น มันจะถามให้เลือกรุ่น model นั้นไม่มีอะไรนอกจากรูปแบบการแสดงผล nextion คุณจะได้รับมันที่ด้านหลังของ nextion หลังจากนั้นคลิก ok เพื่อ ดำเนินดำเนินการต่อ.

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

ขั้นตอนที่ 2: การเพิ่มรูปภาพและแบบอักษร

ใน image4 คุณสามารถดูวิธีสร้างแบบอักษรได้ ไปที่เครื่องมือและคลิกที่ตัวสร้างแบบอักษร หน้าต่างตัวสร้างแบบอักษรจะปรากฏขึ้น ในส่วนนี้ ให้เลือกความสูงและประเภทแบบอักษร และตั้งชื่อแบบอักษรและคลิกที่แบบอักษรของตัวสร้าง หลังจากสร้างแบบอักษรแล้ว ถัดไปจะถามว่าจะเพิ่มแบบอักษรหรือ ไม่.

ใน image5 คุณสามารถดูวิธีการเพิ่มฟอนต์ โดยเน้นที่สแนปชอต การใช้สัญลักษณ์ + และ – ผู้ใช้สามารถเพิ่มหรือลบแบบอักษรได้

ในรูปภาพ 6 คุณสามารถดูวิธีการเพิ่มรูปภาพหรือลบรูปภาพโดยเลือก "+" หรือ "-" ตามลำดับ

ขั้นตอนที่ 3: การสร้างปุ่ม

Image7 แสดงวิธีการเพิ่มวัตถุไปยังหน้าต่างหลักจากกล่องเครื่องมือ ตัวอย่างเช่น คลิกที่ปุ่มสถานะคู่ของวัตถุ มันจะปรากฏบนหน้าต่างหลักตามที่แสดงในวัตถุปุ่มสถานะคู่ image7 bt0 ผู้ใช้สามารถย้ายปุ่มในทิศทาง x และ y เราจะแสดงวิธีสร้างปุ่มสวิตช์ด้วยสถานะคู่

ใน image8 เราจะเห็นว่ารูปภาพปุ่มมีการเปลี่ยนแปลงตามผู้ใช้ เราต้องคลิกที่ปุ่ม bt0 ในหน้าต่างแอตทริบิวต์ พารามิเตอร์ของปุ่มจะปรากฏขึ้น ในผู้ใช้นั้นจำเป็นต้องเปลี่ยนพารามิเตอร์ sta เป็นรูปภาพและในแท็บ pic0 และ pic1 ผู้ใช้จำเป็นต้องกำหนดรูปภาพที่เขาต้องการใช้

ในภาพที่ 9 แสดงการจัดเรียงสุดท้ายของปุ่มทั้งหมดรวมถึงการตั้งชื่อ เราได้เพิ่ม bt0, bt1, bt2 และ bt3 สำหรับ button0, button1, button2 และ button3 ตามลำดับ

ขั้นตอนที่ 4: รหัสเหตุการณ์สำหรับปุ่มสวิตช์

Image10 แสดงค่ากำหนดเริ่มต้นของอัตราบอด = 115200 ในหน้าต่างเหตุการณ์ ซึ่งเป็นส่วนหนึ่งของโค้ด ผู้ใช้สามารถเริ่มต้นในส่วนนี้เกี่ยวกับการแสดงผลได้

ในรูปที่ 11 แสดงส่วนรหัสของปุ่ม bt0 ที่นี่เรากำลังพิมพ์ซีเรียลขึ้นอยู่กับสถานะตัวแปรของปุ่มเช่นสำหรับตัวแปร bt0 เป็น 0 จากนั้นเราจะส่งซีเรียล "R10" และสำหรับตัวแปร bt0 คือ 1 เราจะส่ง "R11" ถึงโดยเฉพาะ เมื่อ Esp ได้รับ R10 มันจะปิดรีเลย์ที่ 1 และเมื่อได้รับ R11 รีเลย์ที่ 1 จะเปิดขึ้น ในทำนองเดียวกัน เราจำเป็นต้องโค้ดสำหรับปุ่มทั้งหมด เช่น bt1, bt2 และ bt3

ขั้นตอนที่ 5: ดีบัก GUI

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

เมื่ออุปกรณ์ทำงานตามผู้ใช้แล้วขั้นตอนต่อไปคือการอัปโหลดรหัสไปยังหน้าจอถัดไป

Image13 แสดงหน้าต่างการอัปโหลดไปยังอุปกรณ์ Nextion คุณต้องเลือกพอร์ต com และอัตรารับส่งข้อมูล หลังจากนั้นต้องคลิกที่ปุ่ม go เพื่ออัปโหลดไปยังรหัส อาจใช้เวลาในการอัปโหลด

ขั้นตอนที่ 6: การทำงานของอุปกรณ์

Image14 แสดงไดอะแกรมการเชื่อมต่อของบอร์ดรีเลย์ ESP 32 wifi สี่บอร์ดพร้อมจอแสดงผล nextion จากบอร์ด ESP 32 J1 และ J2 เชื่อมต่อ 5v และกราวด์ (G) ไปยังจอแสดงผลถัดไปดังแสดงด้านล่าง เชื่อมต่อ Tx ของ nextion กับ Rx0 ของ ESP32 บอร์ดและ Rx ถัดจาก Tx0 ของบอร์ด ESP32 สิ่งนี้จะสร้างการสื่อสาร Uart

การทำงาน: เมื่อทุกอย่างเชื่อมต่อแล้ว อุปกรณ์จะกำหนดค่าอุปกรณ์ด้วย ssid และรหัสผ่าน และโบรกเกอร์ mqtt ด้วยชื่อหัวข้อการเผยแพร่และตัวห้อย หลังจากส่งข้อมูลรับรองแล้ว อุปกรณ์จะรีบูตและเชื่อมต่อกับ mqtt อุปกรณ์พร้อมแล้วได้รับการกำหนดค่าให้เป็น openhab (สำหรับ openhab โปรดตรวจสอบ คำสั่ง openhab) ดังแสดงในภาพที่ 15

อุปกรณ์สามารถควบคุมได้โดย http, mqtt เช่นกันผ่านหน้าจอสัมผัส GUI เราสามารถรับสถานะปัจจุบันของช่องสัญญาณรีเลย์ทั้งหมดไม่ว่าจะเปิดหรือปิดช่องบนทั้ง mqtt และหน้าจอสัมผัส

ขั้นตอนที่ 7: ความช่วยเหลือถัดไป

Image17 แสดงหน้าต่างสำหรับชุดคำสั่ง nextion ซึ่งผู้ใช้สามารถขอความช่วยเหลือได้