[Smart Home ตอนที่ 1] Smart Home Display บน Raspberry PI ด้วยฟีเจอร์ใหม่ของ Qt กัน

อยากจะเขียนบล็อกเล่าเรื่องการพัฒนา IoT application บน Raspberry PI ด้วย Qt 
โดยจะทำเป็น smart home display บนซิงเกิลบอร์ดคอมพิวเตอร์ ที่นับวันจะยิ่งถูกลง

เพราะซิงเกิลบอร์ดคอมพิวเตอร์จิ๋วอย่างบอร์ด Raspberry PI, Beaglebone black, Bannana PI, Nano PI หรืออะไรก็แล้วแต่มักจะมีคำถามเสมอกับการพัฒนา UI เพื่อเอาไว้แสดงผลหรือควบคุมอะไรซักอย่าง

ก็เลยจะลองมาทำตัวอย่างเล่นๆ ให้ดูกันครับ

หน้าตาของ Smart Home display ที่จะทดลองกัน

จากบล็อกที่แล้วที่เล่าเรื่องฟีเจอร์ใหม่ๆ ของ Qt 5.7
มีอยู่ฟีเจอร์หนึ่งช่วยให้การพัฒนา application ด้วย QML รวดเร็วขึ้นนั่นคือ 
Qt Quick Control 2.0

Qt Quick Control คือชุดควบคุมบนหน้า UI ของ QML เช่น Button, Dialog, Dial หรือ Progress bar ต่างๆ เสมือนว่าเอาไว้ทดแทน Qt widget แบบเก่าที่เริ่มตามไม่ทันความเปลี่ยนแปลงของ UI สมัยใหม่นั่นเอง

ใน Qt 5.7 นี้ได้ถูกพัฒนามาถึง Qt Quick Control 2.0 
คุณสมบัติที่เด่นๆ คือเรื่องของ Styling นั่นเอง

แบบที่ 1 default style

แบบแรกคือ Default style เป็นแบบที่เรียบง่ายที่สุด ข้อดีคือประสิทธิภาพจะสูงที่สุดเมื่อเทียบกับแบบอื่น

แบบที่ 2 material style

แบบที่สองคือ material style ออกแบบตาม Google material design guildline นั่นเอง ก็จะช่วยให้การปรับแต่งสไตล์ของ application เราง่ายขึ้น อาจจะต้องเปลืองทรัพยากรฮาร์ดแวร์เพิ่มขึ้นอีกนิดหน่อยสำหรับการใช้งาน

แบบที่ 3 Microsoft universal style

แบบที่ 3 เป็นแบบ Microsoft universal style ซึ่งแน่นอนว่าออกแบบตาม Microsoft universal style design guildline

พอเข้าใจเรื่อง styling แล้ว เราจะมาทดลองรัน application demo กันดูครับ 
ก่อนอื่นก็ต้องติดตั้ง Qt creator เวอร์ชั่นใหม่ล่าสุดกันก่อนครับ ใครที่ยังไม่มีก็สามารถดาวน์โหลดได้ทาง

https://www.qt.io/download/

จะมีทั้งเวอร์ชั่นบน Window, Mac และ Linux นะครับ ในตัวอย่างนี้จะอ้างอิงเวอร์ชั่น 5.7 ดังนั้น ใครที่มีเวอร์ชั่นเก่ากว่าอาจจะจำเป็นต้องลงใหม่

หลังจากติดตั้ง Qt Creator แล้วก็ดาวน์โหลด Demo application จาก Qt กันมาก่อนเพื่อจะใช้ปรับแต่งกันในอนาคต

Smart Home Demo Application

ดาวน์โหลดแล้วก็ Extract file ได้เลยครับ

ไฟล์ใน Smart Home Demo Application

ให้สังเกตุไฟล์ที่ชื่อ SmartHome.pro ให้ดับเบิ้ลคลิกที่ไฟล์นี้ได้เลย เพื่อให้ Qt creator เปิดโปรเจค SmartHome ขึ้นมา

กด Configure Project เพื่อไปหน้าต่อไป

ต่อมาให้สังเกตุ มุมซ้ายล่างจะมีสัญลักษณ์ รูปลูกศรสีเขียวอยู่ให้กดเพื่อ Run application ได้เลยจะพบว่า …

Error สาเหตุเพราะว่าในไฟล์ .qml ต่างๆ ยังใช้ชื่อโมดูลที่ชื่อว่า Qt.labs.controls อยู่ ในตอนพัฒนา แต่ว่าปัจจุบัน Qt.labs.controls ได้ถูกเปลี่ยนชื่อแล้วเป็น Qt.Quick.Control 2.0 ดังนั้นให้ไล่เปลี่ยนทุกไฟล์ที่ import Qt.labs.controls เป็น Qt.Quick.Control 2.0

แก้ไข import

หลังจากแก้ไขทุกไฟล์เสร็จแล้วก็ให้ทดลองรัน application อีกครั้ง

หน้าตาจะออกมาแปลกๆ ซักหน่อยเนื่องจากตอนนี้ Styling ถูกกำหนดเป็น default style เราจะมาแก้ให้เป็น material style กัน

กดไปที่ tab projects แล้วเลือก Run เพื่อจะใส่ command line argument ตามภาพ

แล้วทดลองรันโปรแกรมอีกซักรอบจะพบว่า

หน้าตาดูดีขึ้นมาแล้ว มาลองดูวีดีโอที่เป็นแรงบันดาลใจให้เขียนบล็อกนี้จาก Qt กันดีกว่าว่า application นี้ทำอะไรบ้าง

Smart Home Demo บน i.mx6 NXP ( FreeScale )

ในบล็อกหน้าเราจะมาทำให้ Raspberry PI สามารถรัน application นี้ได้กัน หลังจากนั้น ก็จะทำให้ควบคุมฮาร์ดแวร์เบื้องต้นได้จริง

Deaware System 
ผู้เชี่ยวชาญระบบ Internet of things , Software และ Embedded System 
รับจัดอบรม รวมไปถึงปรึกษาและพัฒนาระบบ

ติดตามคอร์สอบรมด้าน IoT, Software และ Embedded System จาก Deaware ได้ที่ : www.deaware.com/calendar