โปรเจกต์ หน้าจอ Nextion แบบสีเชื่อมต่อผ่าน Remote Wireless

Introduction

ในโปรเจกต์ก่อนหน้านี้ ผมได้นำเสนอ Loadmaster XP ซึ่งเป็นเครื่องคอนโทรลเลอร์ระบบทำน้ำร้อนพลังงานแสงอาทิตย์แบบ PV ที่มีระบบ maximum power point (mppt)

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

ผมต้องการจอแสดงผลสีที่ให้ความสวยงามดึงดูดสายตามากกว่าจอ LCD ขนาด 20x4 ตัวอักษร และมีพื้นที่การมองเห็นเพียงพอที่จะแสดงพารามิเตอร์ทั้งหมดได้ในพริบตาเดียว ผมไม่ค่อยชอบความคิดที่จะต้องเขียนโค้ดจำนวนมหาศาลซึ่งมักจะมาพร้อมกับการขับเคลื่อนจอ LCD touchscreen แบบสี นอกจากนี้ผมยังต้องการให้จอแสดงผลนี้ทำงานได้อย่างน่าเชื่อถือ 100% เมื่อวางไว้ที่ใดก็ได้ในบ้านโดยใช้การเชื่อมต่อไร้สาย และนี่คือคำตอบ: จอ Nextion และ Module ไร้สาย HC-12 หนึ่งคู่:-

จอ Nextion มาพร้อมกับ Processor, หน่วยความจำ และหน้าจอสัมผัสบน Board และได้รับการสนับสนุนโดย ซอฟต์แวร์ Editor ฟรี สำหรับการสร้าง Graphical User Interfaces (GUI) ซอฟต์แวร์ Nextion Editor ช่วยให้คุณ (เมื่อคุณเข้าใจมันแล้ว!) พัฒนา User Interface ได้อย่างรวดเร็วจาก Component แบบลากและวาง ซึ่งรวมถึงรูปภาพกราฟิกแบบหลายสถานะ, Text boxes, Buttons, Gauges, Sliders, Number boxes และ Progress bars เป็นต้น จอ Nextion เชื่อมต่อกับอุปกรณ์ Micro controller (เช่น Arduino Nano ใน Loadmaster) ผ่าน TTL Serial (5V, TX, RX, GND) คำสั่ง ASCII ง่ายๆ ที่ได้รับจาก Loadmaster จะถูกนำมาใช้ควบคุมองค์ประกอบกราฟิกทั้งหมดและอัปเดตค่าข้อมูลที่แสดงบนหน้าจอ นอกจากนี้ 'การแจ้งเตือนเหตุการณ์' (เช่น สำหรับการกดปุ่มบนหน้าจอสัมผัส) สามารถส่งผ่าน Serial จากจอแสดงผลไปยัง MCU อุปกรณ์ต่อพ่วง (Arduino) เพื่อให้มันทำงานตามคำสั่งได้ แอปพลิเคชันการแสดงผลระยะไกลของ LoadMaster ที่พูดถึงในที่นี้มีจุดประสงค์หลักเพื่ออัปเดตข้อมูลบนจอแสดงผล แต่ยังรวมถึงความสามารถในการเปิดและปิด LoadMaster (ON&OFF) โดยใช้ปุ่มบนหน้าจอสัมผัสด้วย (ในการใช้งานของผม จอ Nextion ติดตั้งอยู่หลังบานประตูตู้กระจกในห้องครัวเพื่อให้ข้อมูลแบบ 'มองเพียงแวบเดียว' เท่านั้น - ซึ่ง หน้าจอสัมผัสไม่สามารถ ทำงาน ผ่าน กระจกได้!):-

GUI ประกอบด้วยการควบคุมปุ่มบนหน้าจอสัมผัสสำหรับการสลับเปิด/ปิด (ON/OFF)

โดยทั่วไป Loadmaster จะถูกตั้งค่าและกำหนดค่า (ซึ่งไม่ได้ทำบ่อยนัก) โดยใช้อินเทอร์เฟซ Serial terminal หากมีเวลาพัฒนามากขึ้น ก็เป็นไปได้ที่จะขยายฟังก์ชันการทำงานของ Nextion ด้วย U.I. แบบหลายหน้า แนวคิดจอแสดงผลอัจฉริยะของ Nextion นั้นยอดเยี่ยมสำหรับการสร้างผลงานที่รวดเร็วและมีราคาที่น่าสนใจ (เกือบจะเทียบเท่ากับการสร้างโซลูชันจอแสดงผลระยะไกลที่ใช้ Nano อีกตัวและ Module กราฟิกขนาด 20x4 ฯลฯ) โดยทั่วไป ITEAD หรือ Banggood จะจำหน่ายจอแสดงผลในราคาที่สมเหตุสมผล

หมายเหตุ:- Nextion มีตระกูลจอแสดงผลที่แตกต่างกันจำนวนหนึ่ง ได้แก่ Standard, Enhanced และเวอร์ชันราคาประหยัดอย่าง Discovery จอแสดงผลทั้งหมดสามารถใช้งานโค้ดร่วมกันได้ และเวอร์ชัน Discovery ขนาด 2.8 นิ้วก็ทำงานได้อย่างสมบูรณ์แบบในแอปพลิเคชันนี้ สามารถดาวน์โหลดโค้ดได้สองเวอร์ชันพร้อมกราฟิกที่กำหนดค่าไว้สำหรับใช้กับจอ Nextion ขนาด 2.8 หรือ 3.2 นิ้ว อย่างไรก็ตาม! (และผมเชื่อว่าผมไม่ใช่คนเดียวที่พูดแบบนี้) การขาดเอกสารรายละเอียดพร้อมตัวอย่างการสร้างโค้ด / กราฟิก และสมองที่ประมวลผลช้าของผม ทำให้ช่วงการเรียนรู้นั้นค่อนข้างสับสนและใช้เวลานาน ผมไม่ใช่ผู้เชี่ยวชาญ Nextion อย่างแน่นอน แต่หวังว่าโปรเจกต์นี้อาจช่วยชี้แจงบางแง่มุมของการใช้จอแสดงผลระยะไกลนี้กับ Loadmaster หรืออีกวิธีหนึ่ง คุณสามารถเลือกเส้นทางที่ง่ายและโหลดโค้ดจอแสดงผล 'tft' เริ่มต้นของผม ซึ่งควรใช้เวลาน้อยกว่า 2 นาทีโดยใช้การ์ด uSD:-

Connecting the Nextion Display to LoadMaster.

Nextion อาจถูกต่อสายโดยตรงเข้ากับคอนเน็กเตอร์ CN6 ของ PCB LoadMaster V4 ดังนี้:-

หรือสำหรับการแสดงผลระยะไกลผ่าน Module ไร้สาย HC-12 (หรืออื่นๆ) ให้ต่อสายดังนี้:-

การโปรแกรมจอแสดงผลด้วยโค้ดแสดงผลเริ่มต้นของผมนั้นง่ายมาก:-

จากส่วนดาวน์โหลดซอฟต์แวร์ ให้ดาวน์โหลดไฟล์ 'tft' ที่เหมาะสมกับขนาดจอแสดงผลของคุณ (กราฟิกและโค้ดถูกออกแบบมาเพื่อให้เหมาะกับจอแสดงผลขนาด 2.8 หรือ 3.2 นิ้ว) คัดลอกไฟล์ 'tft' ลงใน Micro SD card (ขนาดน้อยกว่า 32GB) เสียบการ์ดเข้ากับช่องเสียบการ์ดของจอแสดงผลแล้วจ่ายไฟ 5V หน้าจอจะแสดงความคืบหน้าในการโปรแกรม เมื่อเสร็จสิ้น ให้ถอดการ์ดออกแล้วจ่ายไฟใหม่อีกครั้ง ตอนนี้จอแสดงผลได้รับการโปรแกรมแล้ว ง่ายๆ แค่นี้ คุณก็ควรจะมีจอแสดงผลระยะไกลที่ใช้งานได้

Baud rate เริ่มต้นของ Nextion คือ 9600 ซึ่งเหมาะสมกับ Module วิทยุ HC-12 ดังนั้นจึงคงไว้ที่ 9600

ผมต้องการให้จอแสดงผลเป็นแบบไร้สายและทำงานได้อย่างเสถียรที่ระยะ 30 เมตรหรือมากกว่านั้นจาก LoadMaster ผ่านผนังอิฐ ฯลฯ หลังจากลองใช้ Module หลายแบบ ผมเลือกใช้ Module HC-12 433Mhz ซึ่งให้ระยะที่ยอดเยี่ยมและ 'ปราศจากข้อผิดพลาด' ได้ไกลเกินกว่า 50 เมตร (โดยใช้เสาอากาศแบบสปริงลวดพื้นฐาน) Module เหล่านี้มีความฉลาดบางอย่างในการจัดการลำดับของข้อความ Tx และ Rx พวกมันดูเหมือนจะทำงานได้อย่างไร้ที่ติ 100%

Module HC-12 สามารถโปรแกรมให้ทำงานบนช่องสัญญาณ RF และ Baud rate ที่แตกต่างกันได้ ฯลฯ มันเป็น Module ที่มีเอกสารประกอบดีมากบนเว็บ ดังนั้นจึงขอละไว้เพียงเท่านี้

Creating the Graphical User Interface..A basic overview

เพื่อให้เข้าใจพื้นฐานของการใช้งานจอ Nextion ผมจะเน้นที่องค์ประกอบกราฟิก โดยเฉพาะประสิทธิภาพของ cropped images และวิธีที่ดีที่สุดในการอัปเดตค่า Variable บนจอแสดงผลโดยให้มี 'traffic' ของ Serial น้อยที่สุด

Nextion Display Coding and Libraries

มี Library ของ Nextion หลายตัวสำหรับ Arduino ในตอนแรกผมดูที่การใช้สิ่งเหล่านี้ แต่แล้วก็เหมือนกับคนอื่นๆ ที่สรุปว่าการใช้ Library สำหรับแอปพลิเคชัน User Interface ขนาดเล็กถึงขนาดกลางอาจมีประโยชน์น้อย และในความเป็นจริงกลับเพิ่มความซับซ้อนและความสับสนมากขึ้น! หากคุณมีหน้าและปุ่มจำนวนมาก ก็ควรพิจารณาใช้ Library

มีหลายแนวทางในการใช้งานและควบคุม Nextion ผมจะพยายามอธิบายบางวิธีที่นี่

หน้าจอ LoadMaster ของผมแสดงอยู่ด้านล่าง:-

องค์ประกอบจอแสดงผลที่ใช้งานอยู่ ได้แก่:-

Linear Bargraphs - พร้อมแถบแสดงค่า Max / Min กล่องเครื่องมือของ Nextion มีเครื่องมือ Progress Bar มาให้ แต่อย่างไรก็ตาม ฟังก์ชัน Cropped image ก็เป็นวิธีทางเลือกที่ดี

Gauge / Meter สำหรับ WHrs

Number Boxes สำหรับ Watts และ Temperatures

Picture elements - แสดงไอคอน 'data received' ของระบบไร้สายแบบกะพริบ

TouchPush button สำหรับสถานะ ON/OFF - ปุ่มแบบสองสถานะยังแสดงข้อความแสดงข้อผิดพลาด (fault error messages) ได้ด้วย

Graphics work

อันดับแรก คุณต้องรู้ประเภท / ความละเอียดของจอแสดงผลของคุณ (3.2" = 400x240, 2.8" = 320 x 240) ในแอปพลิเคชัน Editor ให้เปิดโปรเจกต์ใหม่โดยเลือกจอแสดงผลที่เหมาะสมและเลย์เอาต์แบบแนวนอน (Landscape) / แนวตั้ง (Portrait)

โดยทั่วไป Attribute box สำหรับ Page 0 จะระบุสีพื้นหลังแบบสีเดียวหรือรูปภาพพื้นหลัง (เพื่อให้ดูน่าสนใจยิ่งขึ้น)

ไฟล์รูปภาพพื้นหลังเริ่มต้นสร้างจาก MS PowerPoint ซึ่งจัดการรูปแบบไฟล์รูปภาพได้หลากหลายรวมถึงรูปภาพ PNG แบบโปร่งใส ทำให้จัดวางกราฟิกและเพิ่มเส้นและข้อความ ฯลฯ ได้ง่าย จุดที่สำคัญมากคือต้องสร้างรูปภาพพื้นหลังรูปสี่เหลี่ยมผืนผ้าที่มี Aspect ratio ให้ตรงกับจอแสดงผล เป๊ะๆ (เช่น 400x240 pixels = สมมติว่า 16 ซม. x 9.6 ซม.) ใช้ค่าขนาดของ PowerPoint เพื่อกำหนดมิติ (ตัวอย่างไฟล์ PowerPoint มีให้ในส่วนดาวน์โหลด)

PowerPoint อนุญาตให้คุณเลือกรูปภาพพื้นหลังและ 'Save as a picture' อย่างไรก็ตาม วิธีนี้ไม่มีตัวเลือกในการตั้งค่ามิติ Pixel จริง ผมจึงเลือกภาพแล้วนำไปวางใน Inkscape แทน Inkscape ยังสามารถใช้เพื่อเพิ่มเอฟเฟกต์กราฟิกอื่นๆ (ผมพบว่ามันเพิ่มองค์ประกอบข้อความได้ดีกว่า PowerPoint โดยไม่เปลี่ยน Aspect ratio) ในขั้นสุดท้าย ให้ใช้ Inkscape เพื่อ 'Export as a PNG' โดยใช้มิติ Pixel ที่ต้องการ เช่น 3.2" = 400x240 หรือ 2.8" = 320x240

ผมสร้างรูปภาพพื้นหลังซึ่งรวมองค์ประกอบ Bargraph ทั้งหมดในสถานะว่างเปล่าไว้ด้วยกัน

และรูปภาพอีกรูปที่มีส่วนประกอบทั้งหมดเปิดอยู่:-

ทำไมไม่ใช้เครื่องมือ Progress Bar ของ Nextion? จริงๆ แล้วคุณก็ใช้ได้ องค์ประกอบ Progress bar สามารถกำหนดค่าให้แสดงทั้งแถบความคืบหน้าแบบสีเดียวที่มีความกว้างขึ้นอยู่กับ Attribute val (0-100) หรือสามารถแสดงบางส่วนของรูปภาพที่เกี่ยวข้องได้ ในการสร้างแถบไล่ระดับสี คุณจะต้องสร้างหรือ 'ตัดออก' (cut-out) รูปภาพของแถบสี 'เต็ม' ขนาดต่างๆ โดยใช้ความกว้าง ความสูง Pixel ที่ถูกต้อง และมีขอบที่ตรงกันและกลมกลืนกับพื้นหลัง ('ppic' ในการตั้งค่า Attribute) พร้อมกับรูปภาพที่จะแสดงสำหรับส่วนที่ว่างเปล่าของแถบ (bpic) เอฟเฟกต์การแรเงา การทำ Anti-aliasing / การผสมผสานเข้ากับพื้นหลังอาจกลายเป็นเรื่องที่ยุ่งยากมากขึ้น วิธีที่ผมเลือกในการสร้าง Progress bars จะกล่าวถึงต่อไป และอิงตามการใช้คำสั่ง cropped image 'picq' (อย่าสับสนกับ 'crop' ในกล่องเครื่องมือ) ด้วยวิธีนี้ คุณเพียงแค่สร้างและโหลดรูปภาพหน้าจอขนาดเต็มสองภาพ ภาพหนึ่งมีองค์ประกอบทั้งหมดในสถานะเปิด (on) และอีกภาพหนึ่งปิด (off) ทั้งหมด จากคำแนะนำของ Nextion:-

การใช้งาน: picq <x>, <y>, <w>, <h>, <picid>

<x> คือพิกัด x ของมุมบนซ้ายของพื้นที่ Crop ที่กำหนด

<y> คือพิกัด y ของมุมบนซ้ายของพื้นที่ Crop ที่กำหนด

<w> คือความกว้างของพื้นที่ Crop ที่กำหนด

<h> คือความสูงของพื้นที่ Crop ที่กำหนด

<picid> คือหมายเลข ID ของรูปภาพหน้าจอเต็มที่เกี่ยวข้อง

รูปภาพที่ถูก Crop จะแสดงที่ด้านบนของรูปภาพพื้นหลังของหน้า เช่น

ปัญหาเดียวที่เรามีในตอนนี้คือ หากเราต้องการแสดงความกว้างของแถบเพียง 25% เราจำเป็นต้องมีวิธีการบางอย่างในการล้างพื้นที่ของแถบที่อยู่เหนือค่าความกว้างเป้าหมายไปจนถึง 100% picq สามารถใช้ทำสิ่งนี้ได้โดยการ Crop และแสดงส่วนจากภาพ 'off' (image ID = 5 ในตัวอย่างนี้)

ทั้งหมดข้างต้นสามารถทำได้ใน Arduino โดยใช้โค้ดดังนี้:-

void UpdateNextionWatts (void) {
int BarWidth = map(PVWatts, 0, 3000, 0, 300);  // map PVWatts  FSD range to match the bar width
mySerial.print(F("picq 84,3,"));  // X,Y Position
mySerial.print(F(",51,6"));  // This is the value Serial.write(0xff);  // We always have to send this three lines after each command sent to the nextion display mySerial.write(0xff); mySerial.write(0xff); mySerial.write(0xff);
mySerial.print(F("picq "));         
mySerial.print(84 + BarWidth);   // This will clear the area of the bar
mySerial.print(F(",3,"));        // above the value of BarWidth
mySerial.print (300 - BarWidth);
mySerial.print(F(",51,5")); 
mySerial.write(0xff); mySerial.write(0xff);

อย่างไรก็ตาม! ...นี่เป็นการแลกเปลี่ยนข้อมูล Serial จำนวนมาก และต่อไปเราจะต้องส่งคำสั่งเพื่ออัปเดตค่าตัวเลขของ PVwatts

Using Variables

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

หากเราเพิ่มองค์ประกอบ Timer ให้กับหน้าจอแสดงผล เราสามารถใช้สิ่งนี้เพื่ออัปเดตองค์ประกอบทั้งหมดของหน้าจอเป็นระยะๆ โดยใช้ค่าที่ได้รับจาก Variable ต่างๆ

คลิกที่องค์ประกอบ Timer, tm0 เพื่อดูหน้าต่าง Event code ของมัน:-

ทุกครั้งที่ Timer 0 ทำงาน มันจะรันโค้ดนี้:-

tm0.en=1 // tm0 Starttm0.tim=500 // tm0 Time base 500 mS
//********************
//use cropped images to
width.val=TopC.val/8 //600 = 60degC and bar width =60 pixels
picq 18,90,width.val,37,6picq17+width.val,90,75-width.val,37,5
x0.val=TopC.val // Update XFloat display for Top Tempvalue//use cropped images tocreate graduated Mid Temp progress bar.
width.val=MidC.val/8 //600 = 60degC and bar width =60 pixels
picq 18,136,width.val,34,6
picq18+width.val,136,75-width.val,34,5
x1.val=MidC.val // Update XFloat display for Mid Tempvalue
//
//use cropped images to
width.val=BotC.val/8 //600 = 60degC and bar width =60pixels
picq 18,187,width.val,34,6
picq18+width.val,187,75-width.val,34,5
//use cropped images tocreate Min Mid Temp bar.width.val=MinC.val/8 //600 = 60degC and bar width =60pixels
picq 18,170,width.val,5,6
picq18+width.val,170,75-width.val,5,5
//use cropped image to showmax mid temp bar.
width.val=MaxC.val/8 //600 = 60degC and bar width =60pixels
picq 18,131,width.val,5,6
picq18+width.val,131,75-width.val,5,5//Show Whrs on gauge, widthvariable is used to hold the scaled angular needle position.n0.val=Whrs.val
width.val=Whrs.val/35 //Gauge to go 6 to 235 for 0 to8000W = W/35 +6
z0.val=width.val+6
//
//create graduated Watts progress bar
width.val=Watts.val/10 //600 = 60degC and bar width =60 pixels
picq 85,2,width.val,36,6
picq
n1.val=Watts.val // Update watts number box
// create graduated Max Watts progress bar
width.val=MaxW.val/10 //600 = 60degC and bar width =60 pixels
picq 85,38,width.val,12,6
picq

โดยพื้นฐานแล้วโค้ดข้างต้นจะใช้ฟังก์ชัน Timer ของ Nextion เพื่ออัปเดตองค์ประกอบจอแสดงผลต่างๆ เป็นระยะๆ โดยอิงตามค่าของ Variable ที่ได้รับ

Downloads

ในส่วน Schematics และแผนผังวงจร คุณจะพบกับ:-

ตัวอย่างไฟล์ PowerPoint ที่ใช้สร้างกราฟิก

โค้ดพัฒนา Nextion 'HMI' - ให้เปิดไฟล์นี้ใน Nextion Editor เพื่อช่วยในการทำความเข้าใจและให้คุณสามารถนำไปแก้ไขด้วยตนเองได้!

ไฟล์ TFT ซึ่งใช้สำหรับโหลดเข้าจอแสดงผลโดยใช้การ์ด uSD