零基礎教學 | BeagleBone Black Cross Compile on Ubuntu

如何新建 Qt 專案並Cross Compile 後在 BeagleBone Black上執行 (How to Build a new Qt project and Cross Compile to BeagleBone Black )

Garnett.C 嘎內
OneStep@ATime
8 min readJun 7, 2020

--

本篇將接續上篇並新建一個 Qt 的專案,如果不知道怎麼設定 QtCreator BeagleBone Black Cross Compile 的環境可點下列連結按步驟設定。

創建Project (專案)

1. 可由上方欄點選 “File” → “New File or Projectt” ,或者是可以由主頁面快捷鍵點選 “+New” 。

2. 接著會跳出選擇新建 Project 種類視窗,因為我們要創建的是應用視窗程式,因此選擇 “Application” → “Qt Widgets Application” 然後點 “Choose”。

3. 接著輸入專案名稱(自行命名好辨識即可,此範例中是使用 “ test1 ” ),然後選擇建立專案路徑,可以點選右方 “Brows” 選擇或是自行輸入路徑 (不是 BBB 上的路徑而是 PC 端的路徑)。

4. 然後選擇 “qmake” → “Next” 。

5. 這一步是設定 Class 名稱、主程式名稱( .cpp )、標頭檔名稱 ( .h ) 、UI介面名稱 ( .ui ),名稱可自行更改不過此範例中直接用預設

6. 接著是不同語言本版,目前先用不到直接 “Next” 。

7. 此不比較重要,選擇 Kit 時要選擇上次建立使用 Ti process SDK 的 compiler 的 Kit

8. 然後就是總結,會顯示你的 Project 內會產生哪些檔案,還有 Project 的建置路徑。按 “ Finish ” 完成。

9. 建置新專案完成。

應用視窗設計及程式碼修改這個範例

1. 第一步先雙擊開啟 Form 資料夾下的 “ mainwindow.ui ” (或是當初自行命名的 .ui 檔) 。

2. 開啟.ui 檔開會跳到如下圖頁面,頁面左邊是設計元件,可以直接拖曳元件置中間設計視窗即可使用元件;中間為主設計視窗,執行程式後會顯示如設計視窗一樣的畫面,可以自行編排成喜歡的樣式,視窗大小及元件大小都可以自行修改;右上方是元件列表,會顯示出目前主視窗中有那些元件;右下角是物件屬性,點選主設計視窗中的元件後其元件細節都可以在這邊編輯

3. 這個範例中會示範怎麼新建一個按鈕 ( PushButton ) 並顯示文字 ( TextEdit )代表成功。第一步先從設計元件搜尋 “Text Edit” ,找到後用滑鼠拖曳元件置中間設計視窗中

4. 接著在元件搜尋 “ Push Button ” 並一樣用滑鼠拖曳元件至中間設計視窗。然後可以自行改變 “ Text Edit ” 及 “ Push Button ” 大小如下圖所示。

5. 下一步我們要來設定當按下 “ Push Button ” 會有什麼動作。首先先在主設計頁面先點選 “ Push Button ” → 右鍵 → Go to Slot 。接著再 Select signal視窗中點選 “ clicked() ” → OK

6. 在 on_pushButton_Clicked() function 內新增以下程式碼 :

新增 ui->testEdit->setText(“Test Succeed !”);

6. 輸入完程式碼後在左下方選擇輸出種類,選擇 “ Release ” → “Build” (快捷鍵 : Ctrl + B) 。

7. 建置( Build )完畢後會產生一個資料夾,在資料夾內會 build 出一個跟專案名稱一樣的執行檔,此執行檔即可在 BeagleBone Blakc上執行。

在 BeagleBone上執行程式

  1. 開啟 Terminal 並移動至剛剛執行檔之路徑下,接著輸入以指令。執行後會需要輸入BBB的設備密碼,輸入完密碼後會顯示傳輸進度、傳輸的檔案及其相關資料
傳輸檔案指令
輸入BBB設備密碼
成功傳輸檔案至BBB

2. 在剛剛想要傳輸的路徑下會發現 “test1” 執行檔已經傳輸到 BBB 。在操作此範例時有外接一個觸控螢幕至 BBB 因此比較好觀察及操作,若沒有螢幕的話可以用VNC 或是 Putty 等遠端方法來查看是否傳輸成功

3. 接著執行 “ test1 ”執行檔,BBB會問要直接執行或是使用終端機執行,兩種都可以,執行後會跳出剛剛設計的視窗,按下 “ Push Button ” 按鈕後 “ Text Edit ” 即會顯示 " Test Succeed ! "。

下篇預告

因為這樣每次修改程式碼 Build 完都需要把執行檔丟到 BBB 有點麻煩,因此預計下一篇來分享一個方法可以直接建置的時候就把檔案傳輸至 BBB ,且利用 BBB 執行但是顯示視窗是在 PC 端可以直接觀看效果

後記

不好意思因為為了讓大家能更清楚了解每一步執行後會是什麼樣子,所以圖有點多篇幅有點長。當初一開始接觸的時候看網路上教學文描述步驟都好像很簡潔很簡單,不過實際上操作後反倒希望作者能更詳細的描述每個步驟,希望這系列可以幫助到更多想學習的人。最後如果覺得不錯的話可以多分享給其他人讓這系列可以比較容易搜尋的到,感謝大家。

相關連結

BeagleBone Balck 在 Ubuntu 上 Cross compile 的環境設定 :

專案如何在BBB端執行但在PC端顯示 :

--

--

Garnett.C 嘎內
OneStep@ATime

學店畢業末班生,前輪班星人工程師,現在轉任可以慢慢實現自己夢想的工程師工作。喜歡閱讀及分享,踏上追尋夢想的生命旅程~