BLOG

ใช้ Nextion สร้างหน้าจอ Dashboard สำหรับคอมพ์

หน้าจอสำเร็จรูปที่ให้เราต่อผ่าน Serial
เราเอามันมาทำเป็น Dashboard ให้คอมพ์เราซะเลย~!

สวัสดีครับ หายหน้ากันไปนาน (ตามเคย) วันนี้ในที่สุดก็มีเรื่องที่อยากจะมาแชร์ให้ฟังกันซะที มันเริ่มมาจากว่าบริษัทฯ เราไปได้มีโอกาสสร้าง Proof of Concept (POC) ที่ต้องใช้ไมโครคอนโทรลเลอร์ (MCU เช่น Arduino, Raspberry Pi) และผมก็อยากได้หน้าจอสำหรับใช้สั่งงานตัว MCU ที่เป็นหน้าจอที่ดูทันสมัยหน่อย แทนที่จะเป็นปุ่มหรือว่าหน้าจอที่มีแต่ตัวอักษร หลังจากหาๆ มา ก็ไปเจอเข้ากับหน้าจอที่เรียกว่า Nextion HMI Display ครับ

หลังจากทำ POC เสร็จ ผมก็เลยใช้ความรู้ที่ได้ เสริมโปรแกรม systemX ของเราให้มันสามารถส่งค่าไปที่ Nextion ได้ด้วย พร้อมกับออกแบบหน้าจอสำหรับรันบน Nextion แล้วก็ได้ออกมาเป็นหน้าจอแบบในภาพด้านบน และเห็นท่ามันน่าจะขายได้ ก็เลยทำออกมาเป็น Product ซะเลย ชื่อว่า systemXD~ ท่านไหนที่อยากได้แบบสำเร็จรูป มาพร้อมฐานวาง กรอบ และสาย USB ก็สามารถติดต่อเราได้ทางแชทมุมล่างนี้้ หรือ Inbox http://m.me/level51pc เพื่อสั่งซื้อได้เลยจ้า ใช้ได้กับเครื่องทุกยี่ห้อ แค่ติดตั้งโปรแกรม systemX

สั่งซื้อหน้าจอ systemXD

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

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

จัดหาโปรแกรม

สำหรับการออกแบบหน้าจอสำหรับ Nextion จะต้องใช้โปรแกรม Nextion Editor ดาวน์โหลดได้จากหน้าเว็บนี้เลย https://nextion.tech/nextion-editor/

อีกโปรแกรมที่ต้องใช้ ก็คือ SystemX ของเรานั่นเอง เพราะมันจะเป็นโปรแกรมที่อ่านค่าของ Sensor ต่างๆ ในเครื่องเรา แล้วส่งคำสั่งไปที่ตัว Nextion ดาวน์โหลดได้จาก http://www.level51pc.com/systemx ได้เลย 

และท้ายสุด เพื่อให้เราสามารถพัฒนาหน้าจอได้โดยไม่ต้องไปคอยอัพโหลดใส่ตัว Nextion จริงๆ ให้วุ่นวาย ก็คือ โปรแกรมจำลอง COM Port วนกันอยู่ในเครื่องเราเอง เพื่อให้ SystemX สามารถส่งข้อมูลหา Nextion Editor ได้ ผมใช้ตัวที่ชื่อว่า Com0Com ซึ่งเป็นโปรแกรม Open Source ดาวน์โหลดและติดตั้งได้จากลิงค์นี้เลย

https://sourceforge.net/projects/com0com/files/com0com/3.0.0.0/

หลังจากติดตั้งแล้ว ในเครื่องจะแสดงเป็น COM Port ขึ้นมาใหม่สองตัวคู่กัน ที่ต้องมีคู่กันก็เพราะว่า COM Port เวลาที่ถูกเปิดใช้ด้วยโปรแกรมนึงไปแล้ว อีกโปรแกรมจะไม่สามารถใช้งานได้ ถ้าเราจะให้สองโปรแกรมส่งข้อมูลหากันได้ผ่าน COM Port เราก็เลยต้องมีคู่กัน สำหรับสองโปรแกรมนั่นเอง ซึ่ง SystemX ได้ทำมารองรับ com0com เรียบร้อยแล้ว ถ้าเกิดว่ามันหา USB->TTL ที่เป็น CH340 ไม่เจอ (ดูจากมีคำว่า CH340 ในชื่อ) มันก็จะพยายามใช้ com0com ตัวแรกที่เจอแทน

ทำความรู้จักกับ Nextion Editor

สำหรับโปรแกรม Nextion Editor นั้น จะเป็นโปรแกรมลักษณะที่เรียกว่า IDE (Integrated Development Environment) ก็คือมีเครื่องมือทุกอย่างที่จะต้องใช้งาน รวมอยู่ในหน้าจอเดียว ไม่ต้องเปิดไปเปิดมาพิมพ์คำสั่งกันให้วุ่นวาย

พอเข้าโปรแกรมมาแล้ว ก็เริ่มจากกด New ก่อนเลย พอเลือกว่าจะเซฟไฟล์ไว้ที่ไหนแล้วก็จะต้องเลือกรุ่นของหน้าจอด้วย ซึ่งสามารถพลิกดูด้านหลังได้เลย ของที่เราใช้จะเป็นรุ่น NX3224T024_011 ซึ่งอยู่ในกลุ่ม "Basic" 

โดยความแตกต่างระหว่าง Basic, Enhanced, Intelligent จะอยู่ที่ความสามารถของตัว MCU ที่มากับหน้าจอ โดยตัว Enhanced จะมีแรมมากกว่า Flash เยอะกว่า (ใส่รูปได้เยอะ) แล้วก็สามารถติดต่อกับอุปกรณ์อื่นผ่าน GPIO เองได้ด้วย ซึ่งก็เกินกว่าความต้องการของเรา และตัวสูงสุด Intelligent จะเป็นตัวที่มี GPU สามารถเล่นวีดีโอ ใช้ภาพที่พื้นหลังใสได้ ทำคอนโทรลใสได้ แต่ก็มีราคาแพงกว่ารุ่นอื่นๆ เยอะ และจะมีเฉพาะขนาดหน้าจอใหญ่ 7/10 นิ้วเท่านั้น ซึ่งเกินความต้องการของเราไปมากเลย

ขั้นต่อมาก็เลือกว่าจะให้เป็นการแสดงผลแนวไหน เราเลือกเป็นแนวนอน 90 ก็คือหัวปลั๊กจะอยู่ซ้ายมือ

และอีกตัวเลือกหนึ่งที่เราต้องเลือก ก็คือ Character Encoding ซึ่งมีตัวเลือกเยอะเลย แถมยังมี utf-8 ด้วย ก็คือในทางทฤษฎีมันก็สามารถรองรับภาษาไทยได้ด้วย แถมยังมี Windows-874 (TIS-620) ซึ่งเป็น Code Page ภาษาไทยให้ใช้ด้วยอีกต่างหาก (แต่น่าจะใช้ไม่ได้เพราะฟอนต์ภาษาไทยเดี๋ยวนี้มันจะเป็น UTF-8 หมดแล้ว) สำหรับครั้งนี้เรายังไม่ใช้ เราเลยจะเลือกเป็น ascii ไปก่อน จากนั้นก็กด OK เพื่อเข้ามาเริ่มสร้างหน้าจอได้เลย

ตัวโปรแกรม Nextion Editor จะหน้าตาคล้ายกับ Visual Basic / Visual Studio มากๆ เลย โดยฝั่งซ้าย (1) จะเป็น Toolbox ซึ่งจะมีตัวเลือกชิ้นส่วนหน้าจอ (Control) ที่เราสามารถเอามาใช้งานได้ กับ Resource (2) ที่ใช้ในโปรเจคของเรา  ทางขวามือจะเป็น Page (3) หรือ หน้าจอต่างๆ ในโปรเจคของเรา ซึ่งแน่นอนว่าเราสามารถทำให้โปรเจคเรามีหลายหน้าก็ได้ ส่วน Attribute (4) คือ การกำหนดคุณสมบัติของชิ้นส่วนหน้าจอแต่ละชิ้น และด้านล่าง คือ Output (5) เป็นส่วนที่แสดงข้อความแจ้งเตือนต่างๆ จากตัวโปรแกรม กับ Event (6) เป็นส่วนที่เราจะใช้ในการเขียนโค๊ด เพื่อตอบสนอง หรือสั่งงานต่างๆ กับหน้าจอของเรา

เริ่มออกแบบหน้าจอ

ขั้นตอนแรกก่อนที่เราจะสามารถทำอะไรได้ เราจะต้องทำการสร้าง Font ออกมาก่อน ก็ Nextion Editor มีเครื่องมือพร้อมแล้ว อยู่ในเมนู Tools แล้วก็ Font Generator เลย

ในหน้าจอนี้เราจะต้องเลือกความสูงของตัวอักษร โดยจากการทดลองเล่นแล้ว ในหน้าจอ 2.4 นิ้วของเรา ขนาดเล็กสุดที่พออ่านสบายจะอยู่ประมาณ 20-24 นะ โดยขั้นตอนการสร้างฟอนต์ก็คือกำหนดขนาดก่อน (1) ถ้าต้องการใช้ฟอนต์หลายขนาดก็เดี๋ยวต้องวงมากดอีกรอบ จากนั้นก็เลือก Encoding (2) ให้ตรงกับโปรเจคของเรา ซึ่งก็คือ ascii แล้วก็เลือกฟอนต์ที่เราชอบ (3) ถ้าทำขายก็อย่าลืมเช็ค License ของฟอนต์ก่อนด้วยละ (ก็ถ้าเป็นฟอนต์มาตรฐานของ  Windows เขาไม่ให้ใช้ในการเผยแพร่นะ ควรไปหาฟอนต์ฟรีจากเว็บ http://dafont.com มาใช้) และเพื่อไม่ให้ขนาดไฟล์ใหญ่เกินไป เราสามารถทำการ Subset (4) เลือกเฉพาะตัว ASCII คือแค่ตัวอักษรมาตรฐานดั้งเดิมแค่ 255 ตัวออกมาก็ได้ และสุดท้าย อย่าลืมตั้งชื่อฟอนต์ให้สื่อความหมาย (5) เพื่อให้เราไม่งงว่ามันคือฟอนต์ไหน ขนาดเท่าไหร่กันแน่ ผมเลยตั้งชื่อว่า Oswald24

พอกด Generate Font ออกมาแล้ว จะได้เป็นไฟล์ .zi ก็สามารถตอบ Yes เพื่อเอาเข้าโปรเจคได้เลย

หลังจากนั้น ที่ Toolbox ลองกด (1) Text เพื่อเอา Control Text ออกมาวาง เราจะได้กรอบสีน้ำเงินที่มีคำว่า newtxt ขึ้นมา (2) และหน้าจอ Attribute จะเปลี่ยนแปลงนิดหน่อย เป็นการแสดงผลการตั้งค่าของ Control Text ตัวที่กำลังถูกเลือกอยู่นี้ (3) 

(ถ้าเกิดว่าใครแอบข้ามขั้นตอนการ Generate Font ตอนที่เอา Text มาวาง จะเป็นช่องขาวโล่งๆ ไม่มีตัวอักษร)

เอาละ ทีนี้ ลองเอา Control Progress Bar กับ Text อีกอันนึงที่ขนาดฟอนต์ใหญ่กว่า (โดยการไป Generate Font มาเพิ่ม) และ Waveform ออกมาวาง และปรับสีให้ได้แบบนี้ดู

อ้อ อย่าลืมว่ามันมีปุ่มสำหรับจัดให้ Control มันวางเรียงกันสวยๆ ได้ด้วยนะ ไม่ต้องมานั่งขยับเอง

เสร็จแล้ว จะรออะไรอีก เราก็กด Debug เพื่อลองเล่นกันเลย ที่ปุ่มที่เขียนว่า Debug ใน Toolbar ใต้เมนู ซึ่งจะเป็นการเปิด Simulator สังเกตว่ามันเป็น Simulator นะ การที่เป็น Simulator แปลว่า มันไม่ได้ตรงตาม Hardware จริงเป๊ะๆ แบบ Emulator นะ ควรลองกับจอจริงอีกทีด้วย

การสั่งงาน Nextion

หลักการทำงานของ Nextion ก็คือ ตัว Nextion จะเป็นอุปกรณ์ที่ดูแลเรื่องการแสดงผลทั้งหมด (Presentation Layer หรือ View) โดยตัว MCU มีหน้าที่ส่งคำสั่ง ไปหาตัว Nextion เพื่อปรับเปลี่ยนการแสดงผล หรือพูดอีกแบบ ก็คือ MCU เป็น Controller/Model หรือ Business Layer นั่นเอง

ในการสั่งงาน Nextion เราจะต้องทำการส่งคำสั่งเป็นข้อความภาษา Nextion ไป คล้ายๆ ภาษา Script โดยคำสั่งที่ Nextion เข้าใจ จะมีแสดงรายการไว้อยู่ในหน้านี้ https://nextion.tech/instruction-set จะไปอ่านดูคร่าวๆ ก่อนก็ได้นะ

แต่หลักการพื้นฐานที่ต้องเข้าใจก็คือ

  • Control ต่างๆ ของ Nextion จะเป็นเหมือนตัวแปร โดยตัวแปรจะมี Attribute อยู่ข้างในตัวมันที่เราสามารถตั้งค่า (set) หรือ อ่านค่าออกมา (get) ได้
  • ภาษา Nextion ไม่มีี Expression Tree ก็คือ 1 คำสั่ง 1 อย่างเท่านั้น เช่น จะเอา t0.txt=t1.txt+t2.txt แบบนี้ไม่ได้ ต้องค่อยๆ ทำทีละขั้นตอนเท่านั้น ก็คือต้องแยกเป็น t0.txt+=t1.txt และ t0.txt+=t2.txt แบบนี้
  • Nextion ไม่มีการคำนวณเลขทศนิยมเลย การคำนวณทุกอย่างเป็นจำนวนเต็มทั้งหมด ถ้าเกิดว่ารู้แล้วว่าถ้าจะหารแล้วได้เลขเทศนิยม ต้องใช้การคูณ 10, 100, 1000 เข้าไปช่วย

ดังนั้น ถ้าเราต้องการเปลี่ยนข้อความ ของ Text ตัวแรกที่เราวางลงมา ซึ่งตัว Nextion Editor จะตั้งชื่อให้อัตโนมัติว่า t0 เราก็จะต้องส่งคำสั่งไปว่า

t0.txt="hello world"

พอเรากด Enter แล้ว ก็จะเห็นว่า ข้อความในช่อง t0 เปลี่ยนจาก "CPU NAME" ตอนแรกที่เราตั้งไว้ เป็น hello worl...เอ๊ะ ทำไมขาด d ไปตัวนึง ? ก็เพราะว่า Text โดยปกติแล้ว ตอนสร้างใหม่ จะมีการจองพื้นที่ในหน่วยความจำไว้แค่สำหรับ 10 ตัวอักษรเท่านั้น คำว่า Hello world มี 11 ตัวอักษร (นับรวมช่องว่าง) มันเลยขาดไป 1 ตัว ซึ่งเราสามารถไปเพิ่มได้ โดยการเปลี่ยนค่าของ txt_maxl ในตอนที่ออกแบบหน้าจอ

แล้วถ้าเราจะเปลี่ยนค่าของ Progress Bar ให้แสดงเหลือแค่ 10% บ้างละ? ก็ง่ายเลย แค่ใช้ j0.val=10 นั่นเอง

การใช้งาน Waveform

สำหรับ Waveform หรือก็คือตัวแสดงผลกราฟเส้นนั่นแหละ จะใช้วิธีต่างจากปกติหน่อย คือจะต้องใช้คำสั่งแบบนี้ ในการส่งจุดเข้าไป 1 จุดใน Waveform

add [รหัส id ของ waveform],[channel ของ waveform มีได้สูงสุด 4 channel],[ตัวเลข 0-255]

รายละเอียดของคำสั่ง

  • id ของ waveform สามารถดูได้จากหน้าจอ Attribute ซึ่งของหน้าจอที่เมื่อกี้ทำไว้นี้ อังเอิญจะได้เป็นเลข 4 และ id ของ Control สามารถเปลี่ยนได้ ถ้ามีการจัดเรียงหน้าจอใหม่ ดังนั้น ถ้าเกิดว่ามีการแก้ไขหน้าจอ ต้องมาเช็คเลขนี้อีกรอบด้วย
  • Channel ของ Waveform ก็คือว่า ในกราฟที่แสดงออกมา สามารถมีได้สูงสุด 4 เส้น เราจะส่งค่าของเลขไหนเข้าไป สามารถกำหนดจำนวน Channel ได้ ด้วย Attribute ch
  • ตัวเลข 0-255 จะเป็นค่า Y ของจุดที่จะส่งเข้าไป โดย 255 คืออยู่บนสุด 0 คือ อยู่ล่างสุด แต่ว่า จะมีความซับซ้อนเกิดขึ้นหน่อย เพราะว่า ตัว Waveform จะไม่ทำการ Scale ค่าให้เลย เช่น ถ้าเกิดว่ากราฟเรา มีความสูง 255 Pixel และตั้ง dis ไว้ 100 (100% หรือ 1 เท่า) ถ้าส่งจุด 255 ไป ตัวจุด 255 ก็จะอยู่ที่ตำแหน่งบนสุดของกราฟพอดี แต่ว่าถ้ากราฟเราสูงแค่ 115 การส่งจุด 255 ไปที่ Waveform จะทำให้จุดนี้ ทะลุกราฟออกไป เพราะ Waveform ที่มีความสูง 115 Pixel จะสามารถใส่ค่าได้แค่ 115 เท่านั้น

    การที่จะทำให้จุดเราไม่ทะลุกราฟออกไป เราจะต้องกำหนดค่า Attribute dis ของ Waveform ด้วย โดยมันคือเปอร์เซ็นต์ความสูงของกราฟ เมื่อเทียบกับ 255 เช่น ถ้า Waveform เรามีความสูง 115 เราจะต้องใส่ค่า dis ไว้ที่ 45 (45% หรือ 0.45 เท่า) ซึ่งมาจาก 115 หาร 255 คูณ 100 จุด 255 ถึงจะอยู่ที่จุดบนสุดในกราฟที่สูง 115 Pixel ได้เกือบพอดี ที่ว่าเกือบพอดี เพราะว่าการคำนวณจะเป็นเลขจำนวนเต็มทั้งหมดนะ

สมมุตให้เราลองใส่คำสั่งตามนี้ (อย่าลืมเปลี่ยน 4 เป็น id ของ Waveform ในหน้าจอของคุณเองด้วย)

add 4,0,255
add 4,0,200
add 4,0,150
add 4,0,100
add 4,0,50
add 4,0,0

แล้วกด Run all commands รัวๆ ก็จะได้กราฟฟันปลาแบบนี้ออกมา

การใส่ภาพพื้นหลังและทำเอฟเฟกต์พื้นหลังเบลอ

สำหรับการใส่ภาพพื้นหลัง เราจะต้องทำการเพิ่มภาพเข้ามาเป็น Resource ของโปรเจคเราก่อน คล้ายๆ กับเวลาทำ App มือถือสมัยนี้ โดยการกดปุ่ม + ที่หน้าจอ Picture (มุมล่างซ้าย) แล้วเลือกไฟล์ภาพ ก็ใช้งานได้ทันที โดยไฟล์ต้นฉบับนั้น จะเป็นไฟล์อะไรก็ได้ แต่แนะนำว่า ควรเป็นภาพ PNG เนื่องจากว่าจะได้ภาพเหมือนต้นฉบับที่เราทำจากโปรแกรมแต่งภาพเป๊ะๆ โดยตัว Nextion Editor จะทำการแปลงภาพให้อยู่ในรูปแบบที่ทำงานร่วมกับหน้าจอได้เร็วที่สุดให้อัตโนมัติ และสีจะถูกลดเหลือ 16-bit (65,536 สี) โดยอัตโนมัติ

Control เกือบทุกตัว จะมี Attribute ที่ชื่อว่า sta ซึ่งสามารถเลือกได้ระหว่าง solid color (สีพื้น), crop image (ภาพ แต่ตัดมาเฉพาะส่วน) และ image (เต็มภาพ ซึ่งจะบังคับให้ Control มีขนาดเท่ากับภาพพื้นหลัง)

ตัวที่น่าสนใจคือ crop image นี่แหละ เพราะด้วย Attribute นี้ จะทำการหลอกตาว่า พื้นหลังของ Control นั้นใสได้ โดยการเลือกภาพพื้นหลัง เป็นภาพเดียวกับภาพพื้นหลังของ Page (คลิกที่พื้นว่างๆ ของหน้าจอเพื่อแก้ Attribute ของ Page) ตัว Control จะดึงเอาภาพเฉพาะส่วนของพื้นหลังในตำแหน่งเดียวกับที่ Control วางอยู่มาให้เอง แต่ว่าไม่ได้ทำให้ตัว Control พื้นหลังใสได้จริง ก็คือถ้าวางซ้อนกัน มันก็จะบังตัวข้างหลังอยู่ดีนะ (จะเป็นเหมือนกับการออกแบบหน้าจอบน Windows สมัยก่อนนู้นนนเลย)

นอกจากนี้ เราก็สามารถใช้ความสามารถนี้ ในการทำเอฟเฟกต์พื้นหลังเบลอได้ด้วย โดยการใส่ภาพเดียวกันกับภาพที่ใช้เป็นพื้นหลังแต่ว่ามีเอฟเฟกต์เบลอ (ลูกศรชี้) จากนั้นเลือก Attribute sta เป็น crop image แต่เลือกภาพ (Attribute pic) เป็นภาพที่เบลอแทน จากภาพจะเป็นว่าจะจุดที่ (1) และ (2) เป็นภาพจากภาพอีกภาพนึงที่เป็นภาพเบลอ แต่ว่าอยู่ในตำแหน่งตรงกันเป๊ะๆ

การทำให้โปรเจคมีหลายหน้า

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

การใช้งานกับ SystemX ก็เหมือนกัน ยิ่งไปกว่านั้น โปรแกรม SystemX กับหน้าจอ Nextion มันมักจะเริ่มทำงานไม่พร้อมกันด้วย ดังนั้นวิธีที่เป็นไปได้ทางหนึ่ง ก็คือให้ตัว Nextion จะต้องมีหน้าจอ Boot ก่อน จากนั้นพอ SystemX ต่อกับ Nextion ได้แล้ว ให้ SystemX สั่งให้ Nextion ไปเปลี่ยนเป็นหน้า Home ซึ่งมีการส่งข้อมูลกลับมาบอกกับ SystemX อีกที ตามที่เราได้ออกแบบไว้

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

(แต่ถ้าไม่อยากจะให้หน้า 0 เป็นหน้าแรกจริงๆ ก็สามารถแก้ไขได้ โดยการกดปุ่ม C บน Toolbar จะเป็นการเปิดโค๊ดสำหรับเริ่มการทำงานของ Nextion ออกมา)

ส่วนการใช้งานกับ SystemX ก็จะต้องมีหน้าจอ boot กับหน้าจอ home โดยหน้าจอ boot เป็นหน้าจอที่เปิดรอ ระหว่าง SystemX ยังไม่ติดต่อเข้ามา โดยเมื่อ SystemX ติดต่อกับ Nextion ได้แล้ว มันจะส่งคำสั่งเปลี่ยนหน้าจอเป็นหน้า home มาเอง

วิธีการเปลี่ยนหน้า

เราสามารถใช้การเขียนคำสั่ง ลงไปในเหตุการณ์ (Event) ของ Control ต่างๆ ได้ ถ้าลองกดที่บริเวณว่างๆ จะเป็นการเลือก Page ซึ่งจะมี Event ดังนี้

  • PreInitialize - โค๊ดที่ทำงาน (Run) ก่อนหน้าจอจะเริ่มวาด Control
  • PostInitialize - โค๊ดที่รัน หลัง Control แสดงผลบน Page หมดแล้ว พร้อมรอรับคำสั่ง เป็น Event ที่เหมาะใช้ส่งบอกกับ SystemX หรือ MCU ว่า หน้าจอพร้อมรับคำสั่งแล้ว
  • Touch Press - ตอนที่นิ้วกดลงไปบนหน้าจอ แต่ว่ายังไม่ปล่อย ถ้าเป็นปุ่ม จะเป็นตอนที่ภาพปุ่มยุบลงไป Event นี้ เหมาะกับการใช้กรณีที่ต้องกดปุ่มค้างเพื่อให้เกิดการทำงาน เช่น กดเพิ่ม-ลด เสียง
  • Touch Release - ตอนที่นิ้วที่กดลงไปบนหน้าจอ ยกขึ้นจากจอแล้ว ถ้าเป็นปุ่ม จะเป็นตอนที่ภาพปุ่ม เด้งกลับขึ้นมา เหตุการณ์นี้เหมาะกับการใช้ส่งคำสั่ง เช่น เปิดประตู เป็นต้น
  • PageExit - โค๊ดที่รันตอนที่หน้าจอนี้ กำลังจะถูกปิด เหมาะกับการใช้เคลียร์ข้อมูลในฝั่ง MCU

และแต่ละ Control ก็จะมี Event แตกต่างกันไปได้ ตามการใช้งานของมัน อย่างเช่น Timer ซึ่งจะเป็น Control ที่คอยส่ง Event มาเป็นระยะๆ สำหรับให้เราใช้เขียนโค๊ดที่ทำการ Refresh หน้าจอ ก็จะไม่มี Event PageExit อยู่ในตัวมันเป็นต้น

ตัวอย่างเช่น ถ้าต้องการให้เมื่อแตะหน้าจอ จากในหน้าจอ boot แล้ว ทำการเปลี่ยนหน้าไปยังหน้าจอ home เราก็จะต้องใส่คำสั่งใน Event Touch Release ว่า

page home

ซึ่งระหว่างพิมพ์ ก็จะมีการ Auto Complete ขึ้นมาแนะนำตลอด รับรองไม่มีผิดแน่นอน เมื่อลอง Debug ดู ก็จะพบว่าเราสามารถเปลี่ยนหน้าจากหน้า boot ไปยังหน้า home ได้แล้ว โดยการคลิก (แตะ) ที่หน้าจอ

การส่งข้อมูลกลับไปหา SystemX / MCU

วิธีการส่งข้อมูล กลับไปยัง SystemX ผ่าน Serial Port นั้น สามารถทำได้โดยใช้คำสั่ง

get "data to send"

เพื่อเป็นการส่งคำว่า data to send ผ่าน Serial Port ออกไป หรือถ้าต้องการเอาค่าจาก Control ก็สามารถใช้ชื่อ Control กับ Attribute ที่ต้องการได้ เช่น

get t0.txt

จากนั้นก็อยู่ที่ทาง SystemX หรือ MCU ว่า จะตีความสิ่งที่ส่งไปนั้นว่าอย่างไร โดยเราก็จะต้องเขียนโปรแกรมจากทางฝั่ง MCU เพื่อทำความเข้าใจสิ่งที่ส่งมาของเราเอง สรุปก็คือ เราต้องออกแบบโปรโตคอล (Protocol) การรับ-ส่ง ข้อมูล ของเราเองด้วย (หรือใช้ SDK ของ Nextion สำหรับ Arduino)

รูปแบบของข้อมูลที่ส่งกลับไป จะเป็นไปตามที่เอกสารแจ้งไว้ในนี้่ https://nextion.tech/instruction-set/#s7 นั่นก็คือ จะเป็น ตัวอักษร p (0x70) ตามด้วยข้อความที่ส่ง และ Byte 255 เรียงกัน 3 ไบต์ ถ้าเกิดว่าเป็นข้อมูลตัวอักษร ซึ่งเราก็อาจจะทำให้โปรโตคอลของเราง่ายขึ้น โดยให้ข้อมูลจาก Nextion ทั้งหมด ส่งมาเป็นตัวอักษรทั้งหมดก็ได้เช่นกัน

สำหรับกรณีของ SystemX สิ่งที่ SystemX ต้องการจาก Nextion คือ Control ไหน จะให้แสดงข้อมูลอะไร หรือเรียกง่ายๆ ก็คือประมาณ "Data Binding" ฟังดูซับซ้อน แต่จริงๆ แล้วก็คือเป็นการสอนให้ SystemX รู้ว่า จะส่งคำสั่งไปบอก Nextion ยังไงบ้าง เวลาที่มีข้อมูลใหม่จาก Sensor เข้ามา โดย เมื่อมีข้อมูลมาแล้ว SystemX ก็จะส่งคำสั่งของ Nextion ผ่าน Serial Port กลับไปตามที่ Nextion ระบุไว้จากคำสั่งที่ส่งไป

โดยคำสั่งที่ SystemX รองรับ มีง่ายๆ แค่ 5 คำสั่ง ดังนี้ (สำหรับ Deduplicate มีคำอธิบายต่อด้านล่าง และชื่อ Sensor ที่ใช้ได้ อยู่ในภาคผนวก)

  • ClearPage : เป็นการ Clear การ Binding ทั้งหมดออก ก็คือ SystemX จะไม่ส่งคำสั่งอะไรไปที่ Nextion อีกเลย และเป็นการล้างข้อมูลที่ SystemX จำเอาไว้ก่อนหน้านี้ออกด้วย ควรสั่งเป็นคำสั่งแรกทุกครั้งที่เข้าหน้าจอใหม่ รูปแบบคำสั่ง ที่ต้องเขียนทางฝั่ง Nextion คือ

get "ClearPage"

  • Value [Control Name];[Sensor Id];[Value Factor];[Deduplicate] เป็นการสอนให้ SystemX ส่งค่าจาก Sensor ที่ระบุ ไปให้กับ Control ที่มี Attribute val (เช่น Progress Bar) โดยให้ค่าที่อ่านได้จาก Sensor คูณกับเลข Factor ก่อน เช่น ถ้าต้องการให้ Progress Bar j0 แสดงค่าจาก Sensor CPU Load ก็ใช้คำสั่งว่า

get "Value j0;CPULoad;1;false"

  • Text [Control Name];[Sensor Id];[Value Factor];[Format];[Deduplicate] เป็นการสอนให้ SystemX ส่งค่าจาก Sensor ที่ระบุ ไปให้กับ Control ที่มี Attribute txt (เช่น Text) โดยที่สามารถกำหนด Format ได้ ตาม C# String Format ด้วย (รายละเอียดเต็มๆ ตามนี้
    https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings)

เช่น ถ้าต้องการแสดงค่าความเร็ว CPU ใน t1 ซึ่ง จะได้เลขออกมาเป็น MHz และเราจะให้มีคำว่า MHz ต่อท้ายด้วย ก็จะต้องใช้คำสั่งว่า

get "Text t1;CPUClock;1;{0:#,#}MHz;false"

สังเกตว่า {0:#,#} จะเป็น Format String สำหรับให้มี , คั่นเวลาเลขเป็นหลักพัน และให้ตัดทศนิยมออก และให้มี MHz ต่อท้าย

ส่วนถ้าต้องการแสดงค่าความเร็ว CPU ใน t1 ในหน่วย GHz ซึ่งเราต้องหารด้วย 1000 ก่อน (ซึ่งก็คือการคูณ 0.001) ก็จะต้องใช้คำสั่งว่า

get "Text t1;CPUClock;0.001;{0:0.0}GHz;false"

สังเกตว่า {0:0.0} จะเป็น Format String สำหรับบังคับให้มีเลขทศนิยม 1 ตำแหน่ง และบังคับให้มีเลข 0 นำหน้า ถ้าเลขน้อยกว่า 0

และถ้าต้องการให้แสดงชื่อ CPU ใน t0 เฉยๆ ก็จะต้องเขียนคำสั่งว่า

get "Text t0;CPU;0.001;{0};false"

สังเกตว่า {0} หมายถึง ไม่มีการใส่ Format ใดๆ ส่วน CPU นั้นได้ค่าเป็นข้อความ การใส่ Factor ไม่มีผลกับข้อมูล

  • Graph [Control Id];[Channel];[Sensor Id];[Value Factor];[Y Max];[X Repeat] : เป็นการสอนให้ SystemX ทำการส่งค่าของ Sensor เข้ากับ Channel ที่ระบุ ไปที่ Waveform โดยกำหนดค่าสูงสุดของกราฟเป็นค่า Y Max ที่กำหนด เช่น ถ้าต้องการให้ แสดงกราฟของอุณหภูมิ Core ที่ร้อนที่สุดบน CPU ใน Channel 0 ของ Waveform Id หมายเลข 4 โดยให้บนสุดของกราฟ หมายถึง อุณหภูมิ 90c และให้ส่งค่าเดิมซ่้ำไป 5 ครั้ง ก็ใช้คำสั่งว่า

get "Graph 4;0;CPUTempCoreMax;1;90;5"

ที่ได้เป็น 5 นั้น มาจากการที่ เรากำหนดให้กราฟความกว้าง 320 Pixel และต้องการให้ผู้ใช้ มองเห็นกราฟย้อนหลังไปเป็นเวลาประมาณ 1 นาที
ก็จะต้องส่งค่าเดิมออกมา 5 ครั้ง (320 หาร 60 = 5.33)

อย่าลืมว่า Nextion จะไม่ Scale ค่าให้ อย่าลืมตั้งค่า dis ของ Waveform ตอนที่ออกแบบด้วยละ

  • Sprite [Control Name];[Sensor Id];[Value Factor];[Max Value];[Start Picture Index];[End Picture Index];[Deduplicate] : เป็นการเปลี่ยนภาพของ Control ที่มี Attribute pic (เช่น Picture Box) โดยใช้ภาพตามลำดับ ยิ่งค่าของ Sensor มีค่าเข้าใกล้กับค่า Max มาก ก็จะใช้ภาพลำดับหลังขึ้นเรื่อยๆ เช่น ถ้ามีภาพเรียงกัน (Sprite) ตั้งแต่ภาพหมายเลข 3 ถึง 15 และค่าของ Sensor คือ 96 จาก Max 100 ภาพที่จะถูกแสดงใน Control จะเป็นภาพหมายเลข 15 เป็นต้น

get "Sprite p0;CPULoad;1;100;3;15;false"

ถ้าสงสัยว่า Sprite หน้าตาเป็นยังไง มันคือภาพที่เรียงต่อกันแบบนี้ (แต่ปกติเขาจะเซฟรวมกันไว้ในภาพเดียวนะ) จากในตัวอย่างภาพนี้ มีทั้งหมด 13 ภาพ ถ้าเกิดว่าเรากำหนดค่า Max เป็น 100 และค่า Sensor ปัจจุบันเป็น 50 ตัว SystemX ก็จะส่งไปบอก Nextion ว่า ให้คอนโทรล ใช้ภาพลำดับที่ 6 เป็นต้น (หรือไม่ก็ 7)

ตอนนี้ผมได้ออกแบบหน้าจอเพิ่ม ให้มีทั้ง CPU/GPU แล้วก็ใช้ Sprite ทำ Donut ครึ่งวงกลมแบบในหน้าจอของ SystemX ในคอมพิวเตอร์ ออกมาเป็นแบบนี้แล้ว ก็ลองทำตามต่อดูก็ได้นะ

และโค๊ดที่จะทำให้หน้าจอ สามารถใช้งานได้ ก็จะมีดังนี้ (ใส่ใน Event Postinitialize ของ Page)

get "ClearPage"
get "Sprite gcpu;CPULoad;1;100;3;15;true"
get "Text cpuclock;CPUClock;0.001;{0:0.0}GHz;false"
get "Text cputemp;CPUTempCoreMax;1;{0:#}c;false"
get "Text cpuname;CPU;1;{0};true"
get "Sprite ggpu;GPULoad;1;100;3;15;true"
get "Text gpuclock;GPUClock;1;{0:#}MHz;false"
get "Text gputemp;GPUTemp;1;{0:#}c;false"
get "Text gpuname;GPU;1;{0};true"
get "Graph 2;0;CPUTempCoreMax;1;100;5;"
get "Graph 2;1;GPUTemp;1;100;5"

การแก้ไขหน้าจอกระพริบ (เกิดขึ้นเฉพาะในตัว Nextion ของจริง)

สังเกตว่า ผมมีการจัดกลุ่ม และเรียงลำดับให้คำสั่งของ Sprite มาก่อน Text ด้วยนะ และบางอันสั่ง Deduplicate เป็น True อันนี้ศัพท์เทคนิคเรียกว่า Draw Queue (Paint Queue, Paint Order) เพราะว่า Nextion ไม่ได้มีการทำ Buffering การส่งคำสั่งไปที่ Nextion จะทำให้เกิดการเปลี่ยนแปลงการแสดงผลทันที และ Control ต่างๆ ไม่มีลำดับอยู่จริง ถ้าเกิดว่าเราวาด Text ก่อน Sprite ซึ่งใน Design ตัว Sprite อยู่หลัง Text จะทำให้ข้อความหายไป เพราะว่าโดนภาพจาก Sprite ที่วาดทีหลัง ทับลงไปนั่นเอง

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

โดยออปชั่น Deduplicate ของ SystemX จะพยายามช่วยตรงนี้ โดยการที่ไม่ส่งคำสั่งเดิมไปซ้ำ เพื่อลดอัตราการอัพเดทหน้าจอ ซึ่งจะช่วยลดอาการหน้าจอกระพริบได้บางส่วน และ SystemX ก็ยังมีการส่งคำสะั่ง com_stop, com_star (เขียนไม่ผิด) เพื่อให้คำสั่งทั้งหมดไปอยู่ในตัว Nextion ก่อน แล้วค่อยประมวลผลรวดเดียว เพื่อให้การกระพริบสั้นลงอีก แต่ทางที่ถูกต้องก็คือต้องระวังไม่ให้มี Control ที่วางทับกันนะ

วิธีการทดสอบกับ SystemX

หลังจากที่เปิด SystemX ขึ้นมาแล้ว ให้คลิกขวา แล้วเลือกตัวเลือก systemXD เพื่อเปิดการทำงานรวมกับ Nextion

ระหว่างที่มีเครื่องหมายถูกอยู่ข้างหน้า systemXD ตัว SystemX ก็จะคอยสอดส่องมองหา Comport ที่เป็น com0com หรือ CH340 เพื่อต่อเข้าไปส่งข้อมูล ก็ให้เรากลับมาที่หน้าจอ Nextion Editor แล้วกด Debug จากนั้นเราจะสามารถสั่งให้ตัว Simulator ต่อเข้ากับ COM Port เพื่อคุยกับ SystemX ได้ โดยการเลือกที่ User MCU Input แล้วเลือก COM Port ที่เป็น com0com (1) จากนั้นตั้ง Baud Rate เป็น 921600 (2 รูปผิดนะ) แล้วก็กด Start (3) ได้เลย ถ้าเกิดว่าขึ้น Access Denied แปลว่า SystemX กำลังใช้งาน Port นั้นอยู่ ให้เปลี่ยนเป็นอีกตัวที่คู่กัน

หลังจากได้ COM Port ที่ต่อได้แล้ว อาจจะเกิดอีกปัญหาหนึ่งคือ SystemX ต่อเข้ากับ com0com ไว้นานแล้ว ทำให้มีข้อมูลค้างอยู่ใน COM Port จำลองเป็นจำนวนมาก จน Nextion ประมวลผลตามไม่ทัน วิธีแก้ไขคือ ต้องกดหยุด systemXD ก่อน แล้วเปิด Simulator เพื่อให้ตัว Simulator ดึงข้อมูลมาให้หมด จากนั้นจึงกดเปิดใหม่อีกรอบ

ถ้าแก้ไขทุกอย่างสำเร็จแล้ว เราก็จะเห็นว่า ทางฝั่ง Simulator Return จะเป็นคำสั่งที่ทาง Nextion ส่งไปหา SystemX (ซึ่่งก็คือตัว p ตามด้วยคำสั่งที่เรากำหนดไว้ และปิดด้วยไบต์ 255 3 ไบต์ ติดกัน) ทางด้าน MCU Return ก็จะเป็นคำสั่ง ที่ SystemX ส่งมาหา Nextion ซึ่งก็จะเป็นคำสั่งเซ็ตค่า Text, หรือใส่ค่าเข้า Waveform แบบเดียวกับที่เราพิมพ์เองนั่นแหละ

เหลือขั้นสุดท้าย ก็คือการทดสอบกับของจริง!

การอัพรอมเข้า Nextion

เมื่อเราพร้อมแล้วที่จะส่งรอมให้ไปทำงานอยู่บนจอ Nextion เรา ขั้นตอนสุดท้ายก็คือ เข้ามาเปลี่ยนโค๊ด Startup เพื่อเปลี่ยน Baud Rate จากปกติ 9600 เป็น 921600 ก่อน เพราะว่า SystemX จะสั่งเปิด COM Port ด้วยความเร็วนี้เท่านั้น

จากนั้น ก็กดปุ่มอัพโหลด แล้วเลือก COM Port, Baud Rate เช่นกัน ตัว Nextion Editor ก็จะทำการบิ้วรอม เป็นไฟล์ .TFT แล้วส่งขึ้น Nextion ให้เราเอง พร้อมสั่ง Restart ตัว Nextion ให้ด้วย พร้อมใช้งานต่อทันที

ส่วนถ้าเราอยากจะเอาไฟล์นี้ให้คนอื่นใช้ด้วย ก็สามารถสร้างเป็นไฟล์ .TFT ขึ้นมาจากเมนู File -> TFT File Output แล้วก็เลือกโฟลเดอร์แล้วกด Output ได้เลย สำหรับไฟล์ .TFT นี้ ถ้าจะส่งเข้า Nextion จะต้อง Copy ใส่ MicroSD แล้วเสียบเข้ากับตัว Nextion ก่อนที่จะเสียบสาย พอ Nextion ตรวจเจอ MicroSD ก็จะทำการอัพรอมตัวเอง โดยอัตโนมัติ

ส่งท้าย

หวังว่าโพสนี้ คงจะได้ให้แนวทางสำหรับท่านที่สนใจอยากจะลองเล่นตัวจอ Nextion นี้อยู่ และก็ได้ทดลองทำออกมาเป็นหน้้าจอที่ใช้งานได้จริงดูนะ คิดว่าน่าจะทำง่าย และเก็ทคอนเซ็ปต์ของ Nextion ล้วนๆ ได้ครบถ้วนกว่าไปพยายามต่อกับ Arduino เอง ซึ่งต้องมานั่งเขียนโค๊ดบน Arduino อีก และถ้ายังไม่ได้ลองทำ จะโหลดไฟล์ตัวอย่างของ systemXD ไปลองเล่นขยับๆ เอาเองบ้างก็ได้ และถ้าเกิดว่า ทำออกมาเป็นสกินเรียบร้อยแล้ว ก็มาส่งเข้าระบบได้เลย

ส่งสกินเข้าระบบ systemX Gallery

ดาวน์โหลดไฟล์โปรเจค systemXD

หมายเหตุ: Nextion จะมี SDK สำหรับ Arduino ให้ใช้ แต่ว่าการออกแบบ SDK ของเขานั้น พยายามจะทำให้ Nextion เป็นเหมือนกับ GUI Library ซึ่งก็เป็นแนวทางหนึ่งที่ทำได้ แต่ว่าจะทำให้การออกแบบโครงสร้างโปรเจคโดยภาพรวมค่อนข้างผิดเพี้ยนไป ก็คือโค๊ดในการแสดงผล/การตอบสนองกับผู้ใช้งาน/State การทำงานของหน้าจอ จะไปปะปนอยู่ในตัว Arduino ด้วย แทนที่จะให้ Nextion เป็นคนจัดการทั้งหมด แล้วสรุปรวมมาว่าจะสั่งให้ Arduino ทำอะไร และ Arduino ก็ติดที่เวลาแก้โค๊ดทีรอนานมากตอนที่ Burn ลงรอมกว่าจะรันได้ การพัฒนาแบบนี้ยิ่งทำให้ช้าเข้าไปอีก

จอแบบพร้อมใช้งาน เราก็มีขายนะ~

ส่วนถ้าท่านไหน ที่สนใจอยากจะได้ตัวจอแบบนี้ไปใช้งานบ้าง ก็อย่าลืมว่า สามารถทักแชทเราเข้ามา (หรือ http://m.me/level51pc) เพื่อสั่งซื้อได้เลย ในชุดประกอบไปด้วยสาย USB, หน้าจอ และกรอบพร้อมขาตั้งครบชุด (กรอบ/ขาตั้งเป็น 3D Print ออกมา)

สั่งซื้อหน้าจอ systemXD 

ภาคผนวก: แล้วเอาชื่อ Sensor มาจากไหน?

โปรแกรม SystemX ของเรานั้น สามารถเปิดดูได้ผ่านมือถือได้อยู่แล้วนะ เรียกว่า SystemZ สามารถกดเปิดได้โดยคลิกขวาที่ไอคอน 51 แล้วเลือก SystemZ and Deck หรือเปิด Browser ไปที่ http://localhost:5293/systemz/index.html เองเลยก็ได้

เผื่อท่านไหนไม่ทราบ SystemX ของเรา สามารถดูผ่านมือถือได้, เก็บข้อมูลจาก Sensor แล้วสร้างเป็นกราฟออกมาได้

แล้วก็ยังสามารถใช้มือถือ จำลองการกดปุ่มคีย์บอร์ด (ใช้มือถือเล่นเกมได้) ด้วยนะ~

ในหน้าจอนี้ จะมีรายการ Sensor ในเครื่องอยู่ ตรงที่เขียนว่า /intelcpu/0/clock/1 แบบนี้ คือ Sensor Id นั่นเอง

 

และนอกจากนี้ ก็จะมี Sensor Id พิเศษ ดังนี้ ที่สามารถเรียกใช้งานได้ โดยจะเป็น Sensor ที่สรุปค่าจาก Sensor อื่นๆ มาให้อีกที

  • CPU : ชื่อ CPU เช่น i7-7700K
  • GPU : ชื่อ GPU เช่น RTX2060
  • CPUTempAverage : อุณหภูมิ เฉลี่ยทุก Core หน่วยเป็นองศาเซลเซียส
  • CPUTempCoreMax : อุณหภูมิ Core ที่ร้อนที่สุดหน่วยเป็นองศาเซลเซียส
  • CPUClock : ความเร็วเฉลี่ยของทุก Core หน่วยเป็น MHz
  • CPULoad : % การใช้งาน CPU 
  • GPUTemp : อุณหภูมิ GPU Core หน่วยเป็นองศาเซลเซียส
  • GPULoad: % การใช้ GPU
  • GPUClock : ความเร็วของ GPU Core หน่วยเป็น MHz

นอกจากนี้ ยังมี Sensor ที่อ่านค่าจาก FPS Counter ของ SystemX มาให้อ่านออกมาได้ด้วย โดยต้องกดเปิด FPS Counter ของ SystemX ก่อน จึงจะมีีค่าแสดงออกมา ไม่อย่างนั้นจะเป็นค่าว่าง (Empty String)

  • FrameTime : ระยะเวลาระหว่าง Frame ของเกมหรือโปรแกรมที่ใช้ DirectX ที่เป็นหน้าจอที่อยู่บนสุดในตอนนี้
  • FPS : คือ 1000 / FrameTime เป็นค่า Frame Per Second ที่เราคุ้นเคยกัน
  • CurrentProcess : ชื่อเกมหรือโปรแกรมที่ใช้ DirectX ที่เป็นหน้าจออยู่บนสุดในตอนนี้
BLOG

LEVEL51 คือใคร?

เราเป็นบริษัทโน๊ตบุ้คของคนไทย ใช้เครื่องจากโรงงาน CLEVO แบบยี่ห้อดังในต่างประเทศ ที่คุณสามารถเลือกสเปคเองได้เกือบทั้งเครื่อง ถ้าโน๊ตบุ้คและคอมพิวเตอร์ของคุณ คืออุปกรณ์สำคัญในการทำงาน นี่คือเครื่องที่ออกแบบมาสำหรับคุณ

1317
ลูกค้าที่รักเรา
0
เครื่องเกินแสนบาท
49
K
มูลค่าเครื่องโดยเฉลี่ย
0
K
สถิติเครื่องแพงสุด

ลูกค้าหน่วยงานราชการและมหาวิทยาลัย

ลูกค้ากลุ่ม Video Production, 3D Design, Software House

Landscape Design

ลูกค้ากลุ่มบริษัทอุตสาหกรรมและก่อสร้าง

 

 

 

พิเศษเฉพาะคุณ - รับคูปองส่วนลด 2,000 บาท สำหรับการสั่งซื้อเครื่องกับเรา