บทความการพัฒนาโปรแกรมบน Raspberry Pi ด้วย Qt ตอนที่ 2

บทความการพัฒนาโปรแกรมบน Raspberry Pi ด้วย Qt
ตอนที่ 2 การติดตั้งและใช้งาน Qt บน Raspberry Pi

โดยเนื้อหาหลักๆ จะประกอบด้วยหัวข้อดังนี้

         Qt (อ่านออกเสียงว่า คิวท์) เป็น Cross–Platform Application และ Framework สำหรับสร้าง User Interface (UI) บนพื้นฐานของภาษา C++ QML CSS และ JavaScript มีความโดดเด่นในที่สามารถพัฒนาเพียงครั้งเดียวแล้วคอมไพล์ออกมาสำหรับแพลตฟอร์มที่แตกต่างกันได้ตามต้องการ นอกจากนี้ยังสามารถออกแบบหน้า UI ได้สวยงาม มี Widget ที่หลากหลายและครบถ้วน และหากไม่เพียงพอต่อความต้องการ สามารถนำเอาไฟล์จากภายนอกเข้ามาประกอบเป็น UI ได้อย่างรวดเร็วและง่ายดาย
         เอกสารนี้จึงเลือก Qt มาให้ศึกษาและใช้ในการพัฒนาแอพพลิเคชั่นด้วยภาษา C++ เพื่อควบคุม Hardware ของ Raspberry Pi และสร้าง Graphic User Interface เพื่อรับคำสั่งและแสดงผลให้กับผู้ใช้งานผ่านหน้าจอคอมพิวเตอร์

ขั้นตอนการติดตั้ง Qt

– เชื่อมต่อบอร์ด Raspberry Pi กับ Internet โดยหากเชื่อมต่อผ่าน LAN บอร์ดจะ DHCP สามารถใช้งานได้ทันที แต่หากเชื่อมต่อผ่าน Wireless LAN ด้วย USB Wi-Fi Dongle ให้ใช้โปรแกรม Wi-Fi Config บนหน้า Desktop เพื่อเชื่อมต่อ
– เปิดโปรแกรม LXTerminal

37

– พิมพ์คำสั่ง sudo apt-get update เพื่ออัพเดทรายการสารบัญที่อยู่ของซอฟท์แวร์จาก Repository จากนั้นรอสักครู่ให้การอัพเดทเสร็จสิ้น

38

– ติดตั้ง Qt 4 Development Tools ด้วยคำสั่ง sudo apt-get install qt4-dev-tools รอสักพักเพื่อให้ระบบตรวจสอบแพ็คเกจที่เกี่ยวข้องที่ต้องดาวน์โหลด จากนั้นเมื่อมีข้อความยืนยันให้ตอบตกลงโดยกด y แล้วรอจนกว่าจะติดตั้งสำเร็จ

39

– ติดตั้ง Qt Creator ด้วยคำสั่ง sudo apt-get install qtcreator และยืนยัน จากนั้นรอจนการติดตั้งสำเร็จ

40

นอกจากนี้จะมีซอฟท์แวร์แพ็คเกจอื่นๆ ที่ต้องติดตั้งด้วยดังนี้

– ติดตั้ง gcc (คอมไพลเลอร์) ด้วยคำสั่ง sudo apt-get install gcc

41

– ติดตั้ง xterm ด้วยคำสั่ง sudo apt-get install xterm

42

– ติดตั้ง git-core ด้วยคำสั่ง sudo apt-get install git-core

43

– ติดตั้ง subversion ด้วยคำสั่ง sudo apt-get install subversion

เท่านี้ถือว่าเสร็จสิ้นการติดตั้ง Qt และแพ็คเกจที่จำเป็นบนบอร์ด Raspberry Pi แล้ว

ตั้งค่า gcc toolchain ให้กับ Qt Creator

– เปิดโปรแกรม LXTerminal 
– พิมพ์คำสั่ง sudo qtcreator เพื่อเปิดโปรแกรม QtCreator

45
46

– เลือกเมนู Tools > Options…

47

– เลือกหัวข้อ Build & Run

48

– เลือกแท็บ Tool Chains

49

– คลิกปุ่ม “Add” เพื่อดึง Drop-Down

50

– แล้วเลือก GCC

51

– ตั้งค่า Compiler path คลิกที่ปุ่ม Browse…

52

– เลือกที่ /usr/bin/arm-linux-gnueabihf-gcc-4.6 แล้วกดปุ่ม Open

53

– ตั้งค่า Debugger คลิกที่ปุ่ม Browse…

54

– เลือกที่ /usr/bin/gdb แล้วกดปุ่ม Open

55

– ตั้งค่า mkspace เป็น default

56

– คลิกปุ่ม Apply และ OK ตามลำดับ

57

ยกเลิกการตั้งค่าการ Deploy และ Remote

– ไปที่เมนู Help > About Plugins…

58

– ค้นหาขัวข้อ Device Support แล้วเอาเครื่องหมายถูกที่ Remote Linux ออก- ค้นหาขัวข้อ Device Support แล้วเอาเครื่องหมายถูกที่ Remote Linux ออก

59

– ปิดโปรแกรม Qt Creator และเปิดโปรแกรมขึ้นมาใหม่อีกครั้ง ด้วยคำสั่ง sudo qtcreator

– ไปที่เมนู Tool > Options…

60

– เลือกหัวข้อ Build & Run

61

– เลือกที่แท็บ Qt Versions จากนั้นคลิกปุ่ม Add…

– เลือกที่ /usr/bin/qmake-qt4 แล้วกดปุ่ม Open

– คลิกปุ่ม OK เสร็จสิ้นการตั้งค่าโปรแกรม Qtcreator

วิธีการ Create Project

– เปิดโปรแกรม  LXTerminal

– พิมพ์คำสั่ง sudo qtcreator เพื่อเปิด QtCreator

– เลือกเมนู File > New File or Project… 

65

– เลือกตั้งค่า Project ตามลำดับดังนี้

1. Application

2. Qt Gui Application

3. คลิกปุ่ม Choose…

66

– ตั้งชื่อ Project ในช่อง Name และในช่อง Create in เป็นที่เก็บแบบ Default ให้คลิกปุ่ม Next >

67

– ในส่วนของ Targets ที่เป็น Target Setup ให้เป็นค่า Default จากนั้นคลิก Next 

68

– ตั้งชื่อ Class name  Header file  Source file ตรงนี้ใช้ค่า default ได้เช่นกัน จากนั้นคลิก Next

69

– หน้าแสดง Summary หากไม่ถูกต้องสามารถ Back กลับไปแก้ไขได้ เสร็จแล้วให้คลิก Finish 

– ในหน้า Qt Creator จะแสดง Project ของเราขึ้นมาในโหมด Edit ทางขวาเป็นพื้นที่เขียนโปรแกรม

71

– ในส่วนของ Project Manager ให้ดับเบิลคลิกที่ Forms > mainwindows.ui

72

– จะแสดงพื้นที่ Designer เลือก Widget ชื่อ PushButton จาก Widget Box กลุ่ม Buttons ลากไปวางในหน้า Form Designer 

73

– คลิกขวาที่ PushButton เลือก Go to slot…

74

– เลือก Signal > clicked() แล้วคลิกปุ่ม Ok 

75

– โปรแกรมจะสร้างฟังก์ชั่นสำหรับรับอีเว้นท์จากการคลิก PushButton แล้วพาเราไปยังตำแหน่งของโค้ดในไฟล์ mainwindows.cpp

76

– เขียนโค้ดลงในฟังก์ชั่น on_pushButton_clicked() ดังนี้  

Ui->pushButton->setText(“Hello World”);

77

– จากนั้นรันโปรแกรมโดยคลิกที่เครื่องหมาย Play ด้านซ้ายล่าง

78 1

– หน้าต่าง Save Changes ให้คลิกเลือก Save All

79

– รอสักครู่โปรแกรม Hello world จะ Run ขึ้นมา โดยมีปุ่ม PushButton ตามที่ออกแบบไว้

80

– คลิกที่ปุ่ม PushButton โปรแกรมจะทำตาม Code ที่เขียนเอาไว้ในฟังก์ชั่น on_pushButton_clicked() คือ เปลี่ยนข้อความบน PushButton เป็นข้อความ “Hello World”

81