เริ่มต้นใช้งาน Qt บนบอร์ด BeagleBone Black

เริ่มต้นใช้งาน Qt บนบอร์ด BeagleBone Black

01 1

บทความก่อนหน้านี้ได้แนะนำให้รู้จักกับ บอร์ด BeagleBone Black Rev. C และ การพัฒนาแอพพลิเคชั่นติดต่อกับฮาร์ดแวร์เบื้องต้นด้วย BoneScript และ Cloud9 IDE ไปแล้ว ในฉบับนี้จะแนะนำให้รู้จักกับการใช้งาน Qt บนบอร์ด BeagleBone Black เพื่อเป็นทางเลือกสำหรับผู้ที่ต้องการใช้พัฒนาแอพพลิเคชั่นให้มี User Interface ติดต่อผู้ใช้
          นักพัฒนาแอพพลิเคชั่นหลายคนคงคุ้นเคยหรือรู้จักกับ Qt (ออกเสียงว่า คิวต์) กันมาบ้างแล้ว Qt เป็นเฟรมเวิร์คสำหรับการพัฒนาแอพพลิเคชั่นซึ่งสามารถเลือกพัฒนาบนระบบปฏิบัติการได้หลากหลายทั้ง Linux Windows หรือ Mac OS X แล้วนำไปใช้งานได้หลายแพลตฟอร์ม (Cross Platform) เพิ่มความสะดวกรวดเร็วให้กับนักพัฒนา การพัฒนาโปรแกรมด้วย Qt นั้นสามารถออกแบบ User Interface ให้มีความสวยงาม มีลูกเล่นที่หลากหลาย ด้วย Widget สำเร็จรูปที่โปรแกรมให้มา หรือจะสร้าง Widget ขึ้นมาเองก็ได้ตามต้องการ การเขียนโปรแกรมพื้นฐานอยู่บนภาษา C++ มีข้อกำหนดทางลิขสิทธิ์ทั้งแบบ Open Source และแบบ Commercial ให้เลือกใช้ หากสนใจรายละเอียดเพิ่มเติมสามารถศึกษาได้จาก บทความ Qt หรือเว็บไซต์ https://qt-project.org/

การติดตั้ง Qt บน BeagleBone Black
          การติดตั้งต้องเชื่อมต่ออินเตอร์เน็ตให้กับบอร์ดจากนั้นเลือกเมนู Accessories > LXTerminal เปิดโปรแกรม Terminal ขึ้นมา หรือจะทำผ่าน SSH ก็ได้

02

 เริ่มจากการติดตั้ง Qt Framework ที่รวบรวมไลบรารี่ของ Qt พร้อมติดตั้งโปรแกรม Qt Creator ที่เป็น IDE สำหรับการพัฒนา ในขั้นตอนนี้จะใช้เวลาดาวน์โหลดไฟล์ค่อนข้างนานเพราะมีขนาดใหญ่ ใช้คำสั่ง?

1sudo apt-get install qt4-dev-tools qtcreator
03

          ติดตั้ง gcc (GNU Complier Collection) ที่รวบรวมชุดคอมไพล์เลอร์สำหรับการพัฒนาบน Linux ติดตั้ง xterm (Terminal Emulator) สำหรับจำลองเทอร์มินอล และติดตั้ง git-core (Git Repository) กับ subversion สำหรับใช้งานเวอร์ชั่นคอนโทรล ด้วยคำสั่ง?

1sudo apt-get install gcc xterm git-core subversion
04

การเปิดโปรแกรม Qt Creator 
          การเขียนโปรแกรมติดต่อกับฮาร์ดแวร์บนบอร์ด BeagleBone Black ด้วย Qt ต้องให้ Qt มีสิทธิเป็น Super User หรือ root ของระบบ Linux ในขั้นตอนการพัฒนาเพื่อให้สามารถเข้าถึงทรัพยากรต่างๆ ได้ การเรียกโปรแกรมขึ้นมาต้องเลือกใช้วิธีการใดวิธีการหนึ่งดังนี้
เลือกใช้งานผ่านชื่อผู้ใช้ debian 
          หากต่อ BeagleBone Black กับจอแสดงผลผ่าน HDMI หรือใช้จอแสดงผลที่เป็น Cape จะล็อกอินเข้ามาในระบบด้วยสิทธิของชื่อผู้ใช้ debian การรันโปรแกรม Qt Creator ขึ้นมาเพื่อให้เข้าถึงฮาร์ดแวร์ได้ ห้ามเปิดโปรแกรมจากเมนู Programming > Qt Creator แต่ต้องใช้คำสั่ง?

1sudo qtcreator
05

เลือกใช้งานผ่านชื่อผู้ใช้ root (ในบทความจะอ้างอิงวิธีนี้)
          หากใช้ VNC ตามบทความตอนก่อนหน้านี้จะไม่สามารถรัน sudo qtcreator ได้เนื่องจากเรารัน tightvncserver สร้าง VNC session ขึ้นมาธรรมดา ทำให้ไม่มีสิทธิของ root

06

ดังนั้นต้องสร้าง VNC session ขึ้นมาใหม่แล้วจึงเชื่อมต่อผ่านช่องทางนั้นทำให้เมื่อล็อกอินเข้ามามีสิทธิเป็น root ด้วยคำสั่ง?

1sudo tightvncserver

          หากสร้างเป็นครั้งแรก โปรแกรมจะให้ตั้งค่าโดยใส่รหัสผ่าน (Password) และยืนยันรหัสผ่าน (Verify) ให้ป้อนเหมือนกันทั้ง 2 ครั้งโดยใช้ค่าเดิมป้อนว่า “temppwd” ก็ได้ จากนั้นจะถามว่าให้มีรหัสผ่านสำหรับการเข้าดูอย่างเดียว (view-only password) หรือไม่ ให้เลือกไม่โดยตอบ “n” 

07

  ความแตกต่างของหน้าจอ VNC เมื่อเข้ามาเป็นผู้ใช้ debian กับเข้ามาเป็นผู้ใช้ root

หน้าจอเมื่อล็อกอินชื่อผู้ใช้ debian
หน้าจอเมื่อล็อกอินชื่อผู้ใช้ root

 หากเรา VNC เข้ามาเป็นชื่อผู้ใช้ root สามารถเปิดโปรแกรมจากเมนู Programming > Qt Creator ได้

10

ส่วนประกอบของโปรแกรม Qt Creator
          โปรแกรม Qt Creator เป็น IDE (Integrated Development Environment) ประกอบด้วยส่วนต่างๆ สำหรับช่วยเหลือนักพัฒนาในการเขียนโปรแกรมเพื่อทำให้ Workflow ของการทำงานเป็นไปอย่างสะดวกรวดเร็ว สามารถใช้งานได้ง่ายไม่ซับซ้อน และมีเครื่องมือในการพัฒนาครบถ้วน แบ่งเป็นแท็บต่างๆ ประกอบด้วย
          – Welcome เป็นศูนย์รวมของ Getting Started Develop Examples และ Tutorial สำหรับผู้เริ่มต้นศึกษาหาข้อมูล ตัวอย่าง วิธีการ ในการพัฒนาโปรแกรมด้วย Qt
          – Edit เป็นส่วน Editor สำหรับการเขียนโค้ดโปรแกรมจะแบ่งเป็น 2 ส่วน คือ Project Explorer สำหรับแสดงไฟล์ในโปรเจ็กต์ทางด้านซ้าย และ Code Editor สำหรับแสดงโค้ดโปรแกรมอยู่บนพื้นที่ตรงกลาง
          – Design เป็นส่วน Designer สำหรับการออกแบบหน้าจอติดต่อผู้ใช้ประกอบด้วย Widget สำเร็จรูปพร้อมใช้งานทางด้านซ้ายมือ Form Designer เป็นพื้นที่สำหรับสร้างและออกแบบฟอร์มหรือหน้าจออยู่ตรงกลาง และ Object Inspector กับ Properties Editor สำหรับกำหนดค่าของออบเจ็กต์ต่างๆ
          – Debug เป็นส่วนหน้อจอ Debugger สำหรับการดีบั๊กแก้ไขปัญหาต่างๆ ของโปรแกรมที่เขียน
          – Project เป็นส่วนกำหนดค่าของโปรเจ็กต์ เช่น Build Settings Run Settings Editor Settings เป็นต้น
          – Help เป็นส่วนช่วยเหลือของโปรแกรมรวบรวมคู่มือการใช้งานและคำอธิบายต่างๆ

11

การตั้งค่าโปรแกรม Qt Creator
1. เลือกเมนู Help > About Plugins

12

2. ในหน้าต่าง Installed Plugins หัวข้อ Device Support > RemoteLinux จะเลือก Load อยู่ ให้เอาออกแล้วกดปุ่ม Close จากนั้นปิดโปรแกรม Qt Creator แล้วเปิดขึ้นมาใหม่

13

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

14

4. ในหน้าต่าง Options หัวข้อ Build & Run เลือกที่แท็บ Tool Chains กดปุ่ม Add แล้วเลือก GCC

15

5. จากนั้นเลือกที่ GCC ในส่วนของ Compiler path: ให้กดปุ่ม Browse เมื่อแสดงหน้าต่าง Choose Executable ให้เลือกไฟล์ arm-linux-gnueabihf-g++ สำหรับคอมไพล์ C++ ซึ่งอยู่ในไดเรกทอรี่ /usr/bin แล้วกดปุ่ม Open หน้าต่างจะปิดลงแล้วกดปุ่ม Apply

16

6. ที่แท็บ Qt Versions ให้กดปุ่ม Add… จะแสดงหน้าต่าง Select a qmake executable ให้เลือกไฟล์ qmake-qt4 จากไดเรกทอรี่ /usr/bin แล้วกดปุ่ม Open หน้าต่างจะปิดลงแล้วกดปุ่ม Apply แล้วกดปุ่ม OK สุดท้ายให้ปิดโปรแกรม Qt Creator แล้วเปิดขึ้นมาใหม่อีกครั้ง

17

การติดต่อ GPIO ของ BeagleBone Black
          BeagleBone Black เป็นบอร์ด Embedded Linux มีการเชื่อมต่อกับฮาร์ดแวร์เบื้องต้นด้วยวิธีการที่คล้ายกับบอร์ด Raspberry Pi หรือ mini2440/mini6410 ของ FriendlyARM เราสามารถเข้าถึง GPIO ได้ง่ายๆ ผ่านไฟล์ที่อยู่ในระบบโดยอ้างอิงหมายเลข จากภาพคอนเน็คเตอร์ P9 ขา 11 คือ GPIO หมายเลข 30

18

 ต่อแคโทดของ LED ผ่านตัวต้านทานประมาณ 330 โอมห์เข้าบอร์ด BeagleBone Black ที่คอนเน็คเตอร์ P9 ขา 11 และต่อแอโนดของ LED เข้าที่ขา 1 ที่เป็นกราวด์

19

ในการใช้งาน GPIO ผ่านไฟล์จะมีไฟล์ที่เกี่ยวข้องอยู่ในไดเรกทอรี่ /sys/class/gpio โดยไฟล์ export ใช้สำหรับเปิด GPIO หมายเลขที่ต้องการ และไฟล์ unexport สำหรับปิด GPIO นั้น ลองลิสต์ไดเรกทอรี่ด้วยคำสั่ง?

1ls /sys/class/gpio
20

  เมื่อต้องการใช้ GPIO หมายเลข 30 สามารถทำได้โดยเขียนค่า 30 ไปที่ไฟล์ export แล้วระบบจะสร้างไดเรกทอรี่ gpio30 ขึ้นมา จากนั้นลองลิสต์อีกครั้ง ด้วยคำสั่ง?

12echo 30 > /sys/class/gpio/exportls /sys/class/gpio
21

  ลิสต์ไฟล์ที่เกี่ยวข้องกับในไดเรกทอรี่ gpio30 ด้วยคำสั่ง?

1ls /sys/class/gpio/gpio30
22

มีไฟล์ที่เกี่ยวกับการสั่งงาน GPIO อยู่ 2 ไฟล์ คือ ไฟล์ direction ใช้กำหนดทิศทางว่าเป็นอินพุตหรือเอาต์พุต และไฟล์ value ใช้กำหนดค่าสัญญาณหรือลอจิกว่าเป็น 0 หรือ 1 (Low หรือ High)
          กำหนดไฟล์ direction ให้เป็นเอาต์พุต จากนั้นกำหนดไฟล์ value ให้มีค่าเป็น 1 ให้ LED ติดด้วยคำสั่ง?

12echo out > /sys/class/gpio/gpio30/directionecho 1 > /sys/class/gpio/gpio30/value
23

เมื่อต้องการให้ LED ดับให้กำหนดไฟล์ value ให้มีค่าเป็น 0 และเมื่อเลิกใช้งาน gpio30 ให้เขียนค่า 30 ลงในไฟล์ unexport ไดเรกทอรี่ gpio30 จะถูกลบออกไปเป็นการปิดการใช้งาน ด้วยคำสั่ง?

12echo 1 > /sys/class/gpio/gpio30/valueecho 30 > /sys/class/gpio/unexport
24

เขียนโปรแกรม Qt ติดต่อ GPIO
1. เลือกเมนู File > New File or Project… หรือกด Ctrl + N

25

2. ในหน้าต่าง New เลือก Projects เป็น Applications เลือกชนิดเป็น Qt Gui Application แล้วกดปุ่ม Choose…

26

3. ในหน้าต่าง Qt Gui Application หัวข้อ Location ให้ตั้ง Name: ว่า testled ส่วน Create in: เลือกไดเรกทอรี่เป็น /root แล้วกดปุ่ม Next

4. หัวข้อ Targets จะแสดงส่วน Target Setup เลือกอยู่เป็น Desktop ให้กดปุ่ม Next

28

5. หัวข้อ Detail จะแสดง Class Information ตรงนี้ให้ใช้ค่า Default ที่โปรแกรมกำหนดให้

29

6. หัวข้อ Summary จะแสดงสรุปการสร้างไฟล์โปรเจ็กต์ ให้กดปุ่ม Finish

30

7. โปรแกรมจะสลับมาที่ Editor โดยแสดงรายชื่อไฟล์อยู่ในส่วน Projects ด้านซ้ายและซอร์สโค้ดของไฟล์ mainwindows.cpp อยู่บนพื้นที่ Code Editor ด้านขวา

31

8. ให้เลือกที่ Forms แล้วดับเบิลคลิกเปิดไฟล์ mainwindows.ui ขึ้นมา จะเข้าสู่ Designer ทางด้านซ้ายเป็นส่วนของ Widget ที่สามารถลากมาวางในหน้าจอโปรแกรมได้ ตรงกลางคือส่วนของหน้าจอโปรแกรม และทางขวาคือส่วนของ Object Inspector และ Property Editor

9. ลากปุ่ม Push Button จาก Widget ในกลุ่ม Button มา 2 ปุ่มวางในหน้าต่างโปรแกรม แล้วกำหนดชื่อโดยดับเบิลคลิกลงไปที่ปุ่มแล้วพิมพ์ชื่อลงไปเป็น On และ Off

33

10. คลิกขวาที่ปุ่ม On แล้วเลือกที่ Go to slot…

34

11. ในหน้าต่าง Go to slot เลือก Select signal เป็น clicked() QAbstractButton แล้วกดปุ่ม OK

35

12. โปรแกรมจะกลับมาที่ Editor ในไฟล์ mainwindows.cpp พร้อมสร้างฟังก์ชั่นรับเหตุการณ์จากการกดปุ่ม On ไว้ให้ชื่อว่า MainWindow::on_pushButton_clicked()

36

13. ให้ทำตามขั้นตอนที่ 10 ถึง 12 กับปุ่ม Off เช่นเดียวกัน
14. เมื่อกลับมาที่ไฟล์ mainwindow.cpp ให้เพิ่มโค้ดลงไปดังนี้ (สังเกตเลขบรรทัดที่แถบสีเขียวด้านหน้า)
ในส่วนหัวเพิ่ม stdio.h เพื่อเรียกใช้ฟังก์ชั่นเกี่ยวกับไฟล์ และกำหนดตัวแปร file ขึ้นใช้งาน ดังนี้?

#include <stdio.h>
 
FILE *file;

ในฟังก์ชั่นคอนสตรัคเตอร์ MainWindow::MainWindow เพิ่มโค้ดลงไปใต้ ui->setupUi(this) เพื่อเปิดใช้งาน gpio30 และกำหนด direction ให้เป็นเอาต์พุต ดังนี้?

file = fopen("/sys/class/gpio/export","w");
if(file==NULL){
    qDebug("Export file to activate GPIO failed");
}else{
    fwrite("30",1,2,file);
    fclose(file);
    file = fopen("/sys/class/gpio/gpio30/direction","w");
    if(file==NULL){
        qDebug("Write direction file to output failed");
    }else{
        fwrite("out",1,3,file);
        fclose(file);
    }
}

ในฟังก์ชั่นดีสตรัคเตอร์ MainWindow::~MainWindow เพิ่มโค้ดลงไปก่อน delete ui เพื่อปิด gpio30 ดังนี้?

file = fopen("/sys/class/gpio/gpio30/direction","w");
if(file==NULL){
    qDebug("Unexport file to deactivate GPIO failed");
}
else{
    fwrite("30",1,2,file);
    fclose(file);
}

ในฟังก์ชั่น MainWindow::on_pushButton_clicked() ของปุ่ม On เพิ่มโค้ดลงไปดังนี้?

file = fopen("/sys/class/gpio/gpio30/value","rb+");
if(file==NULL){
    qDebug("Write value file to On LED failed");
}
else{
    fwrite("1",1,1,file);
    fclose(file);
}

ในฟังก์ชั่น MainWindow::on_pushButton_2_clicked() ของปุ่ม On เพิ่มโค้ดลงไปดังนี้?

file = fopen("/sys/class/gpio/gpio30/value","rb+");
if(file==NULL){
    qDebug("Write value file to Off LED failed");
}
else{
    fwrite("0",1,1,file);
    fclose(file);
}
37

15. คอมไพล์และรันโปรแกรมโดยกดปุ่ม Run สีเขียวด้านซ้าย

38

16. โปรแกรมแสดงหน้าต่าง Save Changes ให้บันทึกไฟล์ที่แก้ไข กดปุ่ม Save All

39

17. โปรแกรมจะแสดงแถบในขณะที่คอมไพล์ (Build) เหนือปุ่ม Run หากไม่มีข้อผิดพลาดโปรแกรมที่เขียนจะรันขึ้นมา

40

18. เมื่อกดปุ่ม On แล้ว LED จะติด และกดปุ่ม Off แล้ว LED จะดับ

41
42


        หวังว่าบทความสั้นๆ นี้จะพอเป็นพื้นฐานให้เห็นภาพการพัฒนาโปรแกรมด้วย Qt บนบอร์ด BeagleBone Black ช่วยให้ผู้อ่านสามารถนำไปเริ่มต้นและประยุกต์ในการพัฒนาต่อยอดได้ต่อไป หากผู้อ่านสนใจบอร์ด BeagleBone Black และสินค้าที่เกี่ยวข้อง สามารถติดต่อสั่งซื้อได้ทางเว็บไซต์ www.ThaiEasyElec.com หรืออีเมลติดต่อที่ sales@thaieasyelec.com หรือโทรศัพท์สอบถามได้ที่ 02-9542408 และ 089-514-8111