เริ่มต้นใช้งาน Qt บนบอร์ด BeagleBone Black
![01 1](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_01_1.png)
บทความก่อนหน้านี้ได้แนะนำให้รู้จักกับ บอร์ด 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](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_02.png)
เริ่มจากการติดตั้ง Qt Framework ที่รวบรวมไลบรารี่ของ Qt พร้อมติดตั้งโปรแกรม Qt Creator ที่เป็น IDE สำหรับการพัฒนา ในขั้นตอนนี้จะใช้เวลาดาวน์โหลดไฟล์ค่อนข้างนานเพราะมีขนาดใหญ่ ใช้คำสั่ง?
1 | sudo apt-get install qt4-dev-tools qtcreator |
![03](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_03.png)
ติดตั้ง gcc (GNU Complier Collection) ที่รวบรวมชุดคอมไพล์เลอร์สำหรับการพัฒนาบน Linux ติดตั้ง xterm (Terminal Emulator) สำหรับจำลองเทอร์มินอล และติดตั้ง git-core (Git Repository) กับ subversion สำหรับใช้งานเวอร์ชั่นคอนโทรล ด้วยคำสั่ง?
1 | sudo apt-get install gcc xterm git-core subversion |
![04](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_04.png)
การเปิดโปรแกรม Qt Creator
การเขียนโปรแกรมติดต่อกับฮาร์ดแวร์บนบอร์ด BeagleBone Black ด้วย Qt ต้องให้ Qt มีสิทธิเป็น Super User หรือ root ของระบบ Linux ในขั้นตอนการพัฒนาเพื่อให้สามารถเข้าถึงทรัพยากรต่างๆ ได้ การเรียกโปรแกรมขึ้นมาต้องเลือกใช้วิธีการใดวิธีการหนึ่งดังนี้
เลือกใช้งานผ่านชื่อผู้ใช้ debian
หากต่อ BeagleBone Black กับจอแสดงผลผ่าน HDMI หรือใช้จอแสดงผลที่เป็น Cape จะล็อกอินเข้ามาในระบบด้วยสิทธิของชื่อผู้ใช้ debian การรันโปรแกรม Qt Creator ขึ้นมาเพื่อให้เข้าถึงฮาร์ดแวร์ได้ ห้ามเปิดโปรแกรมจากเมนู Programming > Qt Creator แต่ต้องใช้คำสั่ง?
1 | sudo qtcreator |
![05](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_05.png)
เลือกใช้งานผ่านชื่อผู้ใช้ root (ในบทความจะอ้างอิงวิธีนี้)
หากใช้ VNC ตามบทความตอนก่อนหน้านี้จะไม่สามารถรัน sudo qtcreator ได้เนื่องจากเรารัน tightvncserver สร้าง VNC session ขึ้นมาธรรมดา ทำให้ไม่มีสิทธิของ root
![06](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_06.png)
ดังนั้นต้องสร้าง VNC session ขึ้นมาใหม่แล้วจึงเชื่อมต่อผ่านช่องทางนั้นทำให้เมื่อล็อกอินเข้ามามีสิทธิเป็น root ด้วยคำสั่ง?
1 | sudo tightvncserver |
หากสร้างเป็นครั้งแรก โปรแกรมจะให้ตั้งค่าโดยใส่รหัสผ่าน (Password) และยืนยันรหัสผ่าน (Verify) ให้ป้อนเหมือนกันทั้ง 2 ครั้งโดยใช้ค่าเดิมป้อนว่า “temppwd” ก็ได้ จากนั้นจะถามว่าให้มีรหัสผ่านสำหรับการเข้าดูอย่างเดียว (view-only password) หรือไม่ ให้เลือกไม่โดยตอบ “n”
![07](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_07.png)
ความแตกต่างของหน้าจอ VNC เมื่อเข้ามาเป็นผู้ใช้ debian กับเข้ามาเป็นผู้ใช้ root
![](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_08.png)
![](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_09.png)
หากเรา VNC เข้ามาเป็นชื่อผู้ใช้ root สามารถเปิดโปรแกรมจากเมนู Programming > Qt Creator ได้
![10](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_10.png)
ส่วนประกอบของโปรแกรม 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](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_11.png)
การตั้งค่าโปรแกรม Qt Creator
1. เลือกเมนู Help > About Plugins
![12](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_12.png)
2. ในหน้าต่าง Installed Plugins หัวข้อ Device Support > RemoteLinux จะเลือก Load อยู่ ให้เอาออกแล้วกดปุ่ม Close จากนั้นปิดโปรแกรม Qt Creator แล้วเปิดขึ้นมาใหม่
![13](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_13.png)
3. เลือกเมนู Tools > Options…
![14](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_14.png)
4. ในหน้าต่าง Options หัวข้อ Build & Run เลือกที่แท็บ Tool Chains กดปุ่ม Add แล้วเลือก GCC
![15](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_15.png)
5. จากนั้นเลือกที่ GCC ในส่วนของ Compiler path: ให้กดปุ่ม Browse เมื่อแสดงหน้าต่าง Choose Executable ให้เลือกไฟล์ arm-linux-gnueabihf-g++ สำหรับคอมไพล์ C++ ซึ่งอยู่ในไดเรกทอรี่ /usr/bin แล้วกดปุ่ม Open หน้าต่างจะปิดลงแล้วกดปุ่ม Apply
![16](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_16.png)
6. ที่แท็บ Qt Versions ให้กดปุ่ม Add… จะแสดงหน้าต่าง Select a qmake executable ให้เลือกไฟล์ qmake-qt4 จากไดเรกทอรี่ /usr/bin แล้วกดปุ่ม Open หน้าต่างจะปิดลงแล้วกดปุ่ม Apply แล้วกดปุ่ม OK สุดท้ายให้ปิดโปรแกรม Qt Creator แล้วเปิดขึ้นมาใหม่อีกครั้ง
![17](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_17.png)
การติดต่อ GPIO ของ BeagleBone Black
BeagleBone Black เป็นบอร์ด Embedded Linux มีการเชื่อมต่อกับฮาร์ดแวร์เบื้องต้นด้วยวิธีการที่คล้ายกับบอร์ด Raspberry Pi หรือ mini2440/mini6410 ของ FriendlyARM เราสามารถเข้าถึง GPIO ได้ง่ายๆ ผ่านไฟล์ที่อยู่ในระบบโดยอ้างอิงหมายเลข จากภาพคอนเน็คเตอร์ P9 ขา 11 คือ GPIO หมายเลข 30
![18](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_18-1024x623.png)
ต่อแคโทดของ LED ผ่านตัวต้านทานประมาณ 330 โอมห์เข้าบอร์ด BeagleBone Black ที่คอนเน็คเตอร์ P9 ขา 11 และต่อแอโนดของ LED เข้าที่ขา 1 ที่เป็นกราวด์
![19](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_19.jpg)
ในการใช้งาน GPIO ผ่านไฟล์จะมีไฟล์ที่เกี่ยวข้องอยู่ในไดเรกทอรี่ /sys/class/gpio โดยไฟล์ export ใช้สำหรับเปิด GPIO หมายเลขที่ต้องการ และไฟล์ unexport สำหรับปิด GPIO นั้น ลองลิสต์ไดเรกทอรี่ด้วยคำสั่ง?
1 | ls /sys/ class /gpio |
![20](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_20.png)
เมื่อต้องการใช้ GPIO หมายเลข 30 สามารถทำได้โดยเขียนค่า 30 ไปที่ไฟล์ export แล้วระบบจะสร้างไดเรกทอรี่ gpio30 ขึ้นมา จากนั้นลองลิสต์อีกครั้ง ด้วยคำสั่ง?
12 | echo 30 > /sys/ class /gpio/export ls /sys/ class /gpio |
![21](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_21.png)
ลิสต์ไฟล์ที่เกี่ยวข้องกับในไดเรกทอรี่ gpio30 ด้วยคำสั่ง?
1 | ls /sys/ class /gpio/gpio30 |
![22](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_22.png)
มีไฟล์ที่เกี่ยวกับการสั่งงาน GPIO อยู่ 2 ไฟล์ คือ ไฟล์ direction ใช้กำหนดทิศทางว่าเป็นอินพุตหรือเอาต์พุต และไฟล์ value ใช้กำหนดค่าสัญญาณหรือลอจิกว่าเป็น 0 หรือ 1 (Low หรือ High)
กำหนดไฟล์ direction ให้เป็นเอาต์พุต จากนั้นกำหนดไฟล์ value ให้มีค่าเป็น 1 ให้ LED ติดด้วยคำสั่ง?
12 | echo out > /sys/ class /gpio/gpio30/direction echo 1 > /sys/ class /gpio/gpio30/value |
![23](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_23.png)
เมื่อต้องการให้ LED ดับให้กำหนดไฟล์ value ให้มีค่าเป็น 0 และเมื่อเลิกใช้งาน gpio30 ให้เขียนค่า 30 ลงในไฟล์ unexport ไดเรกทอรี่ gpio30 จะถูกลบออกไปเป็นการปิดการใช้งาน ด้วยคำสั่ง?
12 | echo 1 > /sys/ class /gpio/gpio30/value echo 30 > /sys/ class /gpio/unexport |
![24](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_24.png)
เขียนโปรแกรม Qt ติดต่อ GPIO
1. เลือกเมนู File > New File or Project… หรือกด Ctrl + N
![25](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_25.png)
2. ในหน้าต่าง New เลือก Projects เป็น Applications เลือกชนิดเป็น Qt Gui Application แล้วกดปุ่ม Choose…
![26](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_26.png)
3. ในหน้าต่าง Qt Gui Application หัวข้อ Location ให้ตั้ง Name: ว่า testled ส่วน Create in: เลือกไดเรกทอรี่เป็น /root แล้วกดปุ่ม Next
![](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_27.png)
4. หัวข้อ Targets จะแสดงส่วน Target Setup เลือกอยู่เป็น Desktop ให้กดปุ่ม Next
![28](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_28-1.png)
5. หัวข้อ Detail จะแสดง Class Information ตรงนี้ให้ใช้ค่า Default ที่โปรแกรมกำหนดให้
![29](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_29.png)
6. หัวข้อ Summary จะแสดงสรุปการสร้างไฟล์โปรเจ็กต์ ให้กดปุ่ม Finish
![30](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_30.png)
7. โปรแกรมจะสลับมาที่ Editor โดยแสดงรายชื่อไฟล์อยู่ในส่วน Projects ด้านซ้ายและซอร์สโค้ดของไฟล์ mainwindows.cpp อยู่บนพื้นที่ Code Editor ด้านขวา
![31](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_31.png)
8. ให้เลือกที่ Forms แล้วดับเบิลคลิกเปิดไฟล์ mainwindows.ui ขึ้นมา จะเข้าสู่ Designer ทางด้านซ้ายเป็นส่วนของ Widget ที่สามารถลากมาวางในหน้าจอโปรแกรมได้ ตรงกลางคือส่วนของหน้าจอโปรแกรม และทางขวาคือส่วนของ Object Inspector และ Property Editor
![](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_32.png)
9. ลากปุ่ม Push Button จาก Widget ในกลุ่ม Button มา 2 ปุ่มวางในหน้าต่างโปรแกรม แล้วกำหนดชื่อโดยดับเบิลคลิกลงไปที่ปุ่มแล้วพิมพ์ชื่อลงไปเป็น On และ Off
![33](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_33.png)
10. คลิกขวาที่ปุ่ม On แล้วเลือกที่ Go to slot…
![34](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_34.png)
11. ในหน้าต่าง Go to slot เลือก Select signal เป็น clicked() QAbstractButton แล้วกดปุ่ม OK
![35](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_35.png)
12. โปรแกรมจะกลับมาที่ Editor ในไฟล์ mainwindows.cpp พร้อมสร้างฟังก์ชั่นรับเหตุการณ์จากการกดปุ่ม On ไว้ให้ชื่อว่า MainWindow::on_pushButton_clicked()
![36](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_36.png)
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](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_37.png)
15. คอมไพล์และรันโปรแกรมโดยกดปุ่ม Run สีเขียวด้านซ้าย
![38](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_38.png)
16. โปรแกรมแสดงหน้าต่าง Save Changes ให้บันทึกไฟล์ที่แก้ไข กดปุ่ม Save All
![39](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_39.png)
17. โปรแกรมจะแสดงแถบในขณะที่คอมไพล์ (Build) เหนือปุ่ม Run หากไม่มีข้อผิดพลาดโปรแกรมที่เขียนจะรันขึ้นมา
![40](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_40.png)
18. เมื่อกดปุ่ม On แล้ว LED จะติด และกดปุ่ม Off แล้ว LED จะดับ
![41](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_41.jpg)
![42](https://blog.thaieasyelec.com/wp-content/uploads/2020/07/85_42.jpg)
หวังว่าบทความสั้นๆ นี้จะพอเป็นพื้นฐานให้เห็นภาพการพัฒนาโปรแกรมด้วย Qt บนบอร์ด BeagleBone Black ช่วยให้ผู้อ่านสามารถนำไปเริ่มต้นและประยุกต์ในการพัฒนาต่อยอดได้ต่อไป หากผู้อ่านสนใจบอร์ด BeagleBone Black และสินค้าที่เกี่ยวข้อง สามารถติดต่อสั่งซื้อได้ทางเว็บไซต์ www.ThaiEasyElec.com หรืออีเมลติดต่อที่ sales@thaieasyelec.com หรือโทรศัพท์สอบถามได้ที่ 02-9542408 และ 089-514-8111