本マニュアルについて

本マニュアルはトラデックスのCPUモジュール上で動作するQTを利用してGUIアプリケーションを作成する手順を記述していま す。

参考：

• https://developer.toradex.com/knowledge-base/how-to-set-up-qt-creator-to-cross-compile-for-embedded-linux

本マニュアルのPDFダウンロード

１．実行環境

２．事前準備

３．前提知識

４．注意点

OSイメージ作成

cd /work/oe-core/
. export

[Ubuntu]$ gedit ./conf/local.conf

IMAGE_INSTALL_append = " rsync"

[Ubuntu]$ bitbake tdx-reference-multimedia-image

モジュールに出来上がったOSイメージを書き込んでください

ハードウェアの準備

①X1にモジュールを挿します。ヒートシンクも装着します。
②X21にDSItoLVDSアダプタとその先にLCDを接続します。HDMIやTightVNC Viewerなどで代用できます。
③X34にUSBケーブルを差し込みパソコンと接続します。
④X25にEthernetケーブルを挿入します。パソコンと同じネットワークに接続してください。
⑤X58にACアダプタを接続します。

LCDを表示するためのセットアップ

[Module]$ vi /boot/overlays.txt
fdt_overlays=verdin-imx8mp_native-hdmi_overlay.dtbo verdin-imx8mp_lt8912_overlay.dtbo
->
fdt_overlays=touch-atmel-mxt_overlay.dtbo verdin-imx8mp_sn65dsi84-lt170410_overlay.dtbo verdinimx8mp_sn65dsi84_overlay.dtbo

再起動します。
LCDにQTのデモプログラムが表示されます。

[Module]$ systemctl disable wayland-app-launch

[Module]$ vi /etc/xdg/weston/weston.ini
[shell]
background-color=0x00FFFFFF
panel-position=none

[Module]$ systemctl restart weston@root

開発環境構築

IMAGE_INSTALL_append=" <レシピ名>"

SDKの作成

/work/oe-core/layers/meta-qt5/recipes-qt/packagegroups/packagegroup-qt5-toolchain-target.bb

QTの機能を追加した場合SDK用の機能も存在していなければ同様に追加してください。

[Ubuntu]$ bitbake meta-toolchain-qt5

/work/oe-core/build/deploy/sdk配下にSDKが出力されます。

[Ubuntu]$ mkdir /work/qt

cp -rf /work/oe-core/build/deploy/sdk /work/qt/

[Ubuntu]$ sudo /work/oe-core/build/deploy/sdk/tdx-xwayland-glibc-x86_64-meta-toolchain-qt5-aarch64-verdin-imx8mptoolchain-5.7.0.sh

[Ubuntu]$ Enter target directory for SDK (default: /opt/tdx-xwayland/5.7.0):

[Ubuntu]$ You are about to install the SDK to "/opt/tdx-xwayland/5.7.0". Proceed [Y/n]?

If you continue, existing files will be overwritten! Proceed [y/N]?

[Ubuntu]$ sudo rm -rf /opt/tdx-xwayland/5.7.0

. /opt/tdx-xwayland/5.7.0/environment-setup-aarch64-tdx-linux

QTの開発は最低限QT Creatorのみで開発が可能です。
本マニュアルではQT Creatorに加えてサンプルコードを入手します。
QTのサイトからQTのインストーラを入手してインストールします。
BSP5.7.0のQTのバージョンは5.14.2です。

[Ubuntu]$ wget https://download.qt.io/archive/qt/5.14/5.14.2/qt-opensource-linux-x64-5.14.2.run

[Ubuntu]$ chmod +x ./qt-opensource-linux-x64-5.14.2.run

[Ubuntu]$ mkdir ./inst

[Ubuntu]$ ./qt-opensource-linux-x64-5.14.2.run

QT-Creator実行シェル作成

QT Creatorは/work/qt/inst/Tools/QtCreator/bin/qtcreatorにインストールされています。
QT Creator起動前にSDK用環境変数を定義する必要があります。毎回起動前に環境変数の設定シェルを実行しないといけません。
設定漏れが起きないようにQT Creator起動用のシェルを作成します。
環境変数設定シェルは搭載するARMのアーキテクチャやBSPのバージョン、SDK出力ディレクトリなどによって変わります。(赤線部分)

[Ubuntu]$ cd /work/qt/
[Ubuntu]$ gedit ./sdk_qtcreator.sh

内容は下記です。

#!/bin/sh

. /opt/tdx-xwayland/5.7.0/environment-setup-aarch64-tdx-linux
./inst/Tools/QtCreator/bin/qtcreator

[Ubuntu]$ chmod +x ./sdk_qtcreator.sh

[Ubuntu]$ mkdir ./workspace

[Ubuntu]$ ./sdk_qtcreator.sh

[Module]# passwd

[Module]# vi /etc/systemd/network/wired.network

[Match]
Name=eth0

[Network]
DHCP=ipv4

[Match]
Name=eth0

[Network]
Address=192.168.179.92/24
Gateway=192.168.179.1

[Module]# systemctl restart systemd-networkd

[Module]# ifconfig

[Ubuntu]$ ping XXX.XXX.XXX.XXX

[Ubuntu]$ ssh -l root XXX.XXX.XXX.XXX

[Module]# uname -a

SSHで認証キーを使うことを推奨されますが本マニュアルでは使用しません。パスワードのみ使用します。
Nextをクリックします。

Finishをクリックします。

SSHの接続確認が行われます。成功すると下記のような画面になります。Closeをクリックします。

SSHの接続は~/.ssh/known_hostsのキーを使用します。
ホストのキーが保存された後にモジュールのOSを書き換えた場合、再度接続するとホストのキーが違うというエラーが発生します。
その場合ssh-keygen -f "~/.ssh/known_hosts" -R "192.168.179.92"で一旦古いキーを削除してください。

接続失敗後などに再度接続を試す場合はAuthentication typeをDefaultにしてかたTestボタンをクリックしてください。

Optionsに戻ります。左の欄からKitsを選択しQT Versionsタブを選択します。Addをクリックします。
最初からqmakeが存在している場合はこの手順は不要です。

/ opt/tdx-xwayland/5.7.0/sysroots/x86_64-tdxsdk-linux/usr/bin/qmake

ダブルクリックでqmakeのパスを選択します。
(パスはSDK出力先やモジュールやBSPのバージョンなどによって異なります。)

下記のようになります。Version Nameは自動的に作成されます。

コンパイラは自動で設定されていますがもし消してしまったりした場合はRe-detectボタンをクリックして再検知してください。

Debuggersタブを選択しAddをクリックします。

Nameにデバッガーの設定の名前を入力します。本マニュアルではVerdin-iMX8MPとしています。
Pathに下記を入力します。
デフォルト設定の場合は下記になります。

/opt/tdx-xwayland/5.7.0/sysroots/x86_64-tdxsdk-linux/usr/bin/aarch64-tdx-linux/aarch64-tdx-linux-gdb

itsタブを選択しAddをクリックします。

NameにKitsの設定の名前を入力します。本マニュアルではVerdin-iMX8MPとしています。
Device typeにGeneric Linux Deviceを選択するとDeviceが自動的に選択されます。
QT Version,Compilers,Debuggerに関してはそれぞれ作成した設定を選択します。
CMake Toolは自動で入力されます。
OKをクリックします。

プロジェクト作成からデバッグまで

メニューからFile > New File or Projectを選択します。

簡単なアプリケーションを作成します。
Projectsの項目はApplicationを選択します。
本マニュアルではQt Quick Application - Emptyを選択します。
Chooseをクリックします。

NameにProjectの名前を入力します。本マニュアルではTestとしています。
Projectのパスは事前に作成した/work/qt/配下のworkspaceを入力します。
Nextをクリックします。

Nextをクリックします。

本プロジェクトが動作するQTの最低バージョンを指定します。本マニュアルでは5.14としています。
Nextをクリックします。

Translation Fileを使用しないためそのままNextをクリックします。

さきほど作成したKitを選択します。Nextをクリックします。

本マニュアルではバージョン管理の設定は行いません。Finishをクリックします。

プロジェクトが作成されます。Designを開きます。

QT CreatorではGUIを容易に編集することができます。
画面左中央あたりのNavigatorの枠内にコンポーネントの一覧があります。最初はWindowという名前のWindow(Type)があります。

Navigatorの枠内でWindowを選択した状態で画面右側のProperties内のidを変更します。
本マニュアルではwinMainという名前に変更しています。変更するとNavigatorにあるアイテムも変わります。

Sizeのプロパティを変更して液晶のサイズに合わせます。本マニュアルで使う10.1インチ液晶は1280x800です。

本マニュアルではHello worldという表示をするテキストボックスを追加します。
Qt Quick -BasicからTextをドラッグ＆ドロップして真ん中の白い部分(main.qmlの画面)に持っていきます。
その後、Navigatorで追加テキスト(element)を選択した状態でidにtest1と入力します。
textプロパティにHello Worldと入力します。

Editを選択するとソースコードが表示される画面に戻ります。
main.qmlにDesignで編集した内容のコードが追加されているのが分かります。

プロジェクトを右クリックしてBuildを選択します。

下記のような保存していない内容を保存するかどうか問われます。
Save Allをクリックします。

Always save files before buildにチェックを入れておくと以後ビルド時に自動的に保存されます。

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
->

target.path = /home/root
INSTALLS += target

Fetch Device Environmentをクリックしてモジュールの環境変数を取得してデバッグ実行環境に設定します。
モジュールとSSH通信できる状態になっている必要があります。
tdx-reference-multimedia-imageはQTが実行できるようにQT_QPA_PLATFORMにwayland-eglが定義されています。

Debugの項目を開き、Projectsからmain.cppを開きます。
行番号の左側をクリックしてブレイクポイントを作ります。ブレイクポイントができると赤丸が出てきます。

メニューのDebugからStart Debugging > Start debugging of startup projectを選択します。

デバッグが開始してブレイクポイントで止まります。

F5でデバッグを続行すると下記のような画面が表示されます。

サンプルプログラムの読み込み

既存のプロジェクトと読み込む場合はFile > Open File or Projectを選択します。

本マニュアルではタッチパネルの動作確認がしやすいflatstyleというサンプルコードを実行します。
/ k/ t/i t/E l work/qt/inst/Examples/Qt-5.14.2/quickcontrols2/flatstyle/flatstyle.proを選択します。

プロジェクトを読み込むと使用するKitsを選択します。
作成したVerdin-iMX8MPにチェックを入れてConfigure Projectをクリックします。

プロジェクトを作成した時と同様Fetch Device Environmentをクリックして設定を取得します。

target.path = $$[QT_INSTALL_EXAMPLES]/quickcontrols2/flatstyle
->
target.path = /home/root

デバッグを開始すると下記のような画面が表示されます。スライダーやチェックボックスなどをタッチパネルで操作することができます。

デバッグではなく最終製品向けの実行をする場合はリリースビルドに変更します。Projectsの項目を開きDebugをReleaseに変更してからビルドを行います。Build Directoryに設定されたディレクトリに実行ファイルが出力されます。

プロジェクト右クリック> DeployでBuildした実行ファイルをデプロイできます。
.proファイルにtarget.path = /home/rootを定義していた場合/home/rootにデプロイされます。
最終的にはOSイメージのファイルシステムに組みこむことを推奨します。
以上がQT開発の環境構築からデバッグ、実行ファイル作成の手順です。
QTのアプリケーション開発はサンプルコードやインターネット上の情報をもとに行ってください。

Leave a comment