Armadillo 開発者サイト

Qtは複数のライセンスのもとに頒布されています。ATDEにインストールされているQtは、「LGPL v2.1」向けのオープンソース版です。

	オープンソース版で開発する前に
	一度オープンソース版(LGPL v2.1/GPL v3)で開発をスタートすると、後から商用版(Qt Commercial License)に切り替えることはできませんのでご注意ください。 商用版ライセンスを使用したい場合、弊社窓口までお問い合わせください。 アットマークテクノ製品に関するお問い合わせウェブフォーム https://www.atmark-techno.com/contactinfo/form_product

Armadilloで利用する場合、QPA (Qt Platform Abstraction) は、デフォルトでは 「eglfs」 を利用します。デフォルト状態では、プライマリフレームバッファ(fb0)のHDMIに画面が表示されますが、環境変数のQT_QPA_EGLFS_DISPLAYを設定することで、fb1のLCDにも画面を表示させることができます。

eglfs用の環境変数を次に示します。

Qt Creatorは、ユーザーインターフェース(UI)のデザインやプログラムのビルド・デバッグなどを行うことができる統合開発環境です。

デスクトップの左上の「アプリケーション -> プログラミング -> Qt Creator」で起動させることができます。

図14.1 Qt Creator

14.3.1. 新規プロジェクトを作成する

本節では、新規にプロジェクトを作成する手順について説明します。 新規にプロジェクトを作成すると、スケルトンと言われる単純アプリケーションの ソースコードが自動的に生成されます。 このスケルトンをベースにアプリケーションを開発していきます。

新規プロジェクトを作成するには、Qt Creatorのメニューから 「ファイル -> ファイル/プロジェクトの新規作成」を選択します。

図14.2 新規作成 - Qt GUIアプリケーション

新規作成画面では、Qt GUIアプリケーションを選択します。

図14.3 Qt GUIアプリケーション - プロジェクト名とパス

次に、Qt GUIアプリケーションの設定を行います。初めにプロジェクト名とパスを設定します。 ここでは、名前に「hello-qt」、パスに「/home/atmark」を指定します。このように設定すると、/home/atmark/hello-qt/ディレクトリ以下に自動的にファイル(プロジェクトファイルやソースコードなど)が作成されます。

図14.4 Qt GUIアプリケーション - キットの選択

次に、キットの選択を行います。

キットとは、特定のプラットフォーム用のアプリケーションをビルドする環境や実行する環境、その他の必要なツール類を指定する設定の総称です。ATDEでは、「デスクトップ」と「Armadillo(armhf)」の2種類をあらかじめ用意してあります。

	キット「Armadillo(armhf)」は、atmarkユーザーのみ使用可能です。 ATDEに新規に追加したユーザーで「Armadillo(armhf)」を使用する場合は、 次のようにコマンドを実行してください。 [ATDE ~]$ mkdir -p ~/.config [ATDE ~]$ cp -r /home/atmark/.config/QtProject ~/.config/

「デスクトップ」は、ATDE上で動作するアプリケーション用の設定です。

「Armadillo(armhf)」は、Armadillo上で動作するアプリケーション用の設定です。ビルド環境には、クロスコンパイラやクロスライブラリのパスなどが設定されています。Armadillo上にファイルを転送するための設定やリモート実行する設定などがテンプレートとして指定されています。これらの制御はネットワークを経由して行われます。

通常は、設定を変更する必要はありません。

図14.5 Qt GUIアプリケーション - クラス情報

次に、自動生成されるソースコードの基底クラスなどの情報を指定します。ダイアログベースのアプリケーションを作成する場合などに、基底クラスを変更します。

本節では、設定を変更する必要はありません。

図14.6 Qt GUIアプリケーション - プロジェクト管理

次に、プロジェクトのバージョン管理方法を指定します。gitなどでバージョン管理を行う場合に設定を行います。

本節では、設定を変更する必要はありません。

図14.7 新規プロジェクトの作成が完了後の画面

これで新規プロジェクトの作成が完了しました。パスで設定した/home/atmark/hello-qt/ディレクトリ以下にスケルトンが生成されています。

14.3.2. Hello World

新規プロジェクトで生成されたスケルトンのソースコードは、実行すると単純にウィンドウが表示されるだけのものです。

本節では、プログラミングのファーストステップである「Hello World」を作成してみましょう。作成されたスケルトンをベースに「Hello, World!」が表示されるようにソースコードを変更します。

まずは、プロジェクトの設定に一部情報を追加します。

リモート実行時にArmadillo上の/tmpにファイルが転送され実行できるように、プロジェクトファイル(hello-qt.pro)にインストールパスを設定します。

INSTALLS += target
target.path = /tmp

図14.8 インストールパスを設定後の画面

続いて、「Hello World!」が表示されるようにmainwindow.cppを変更します。

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include <QLabel> 

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    //ui->setupUi(this); 
    QLabel *label = new QLabel(tr("Hello, World!")); 
    setCentralWidget(label); 
}

	QLabelを利用するため、インクルードを追加
	コメントアウト (必須ではありません)
	ラベルを定義しデフォルトの文字列を指定
	定義したラベルをセントラルウィジェットに設定

図14.9 mainwindow.cppの変更箇所 (一部抜粋)

図14.10 mainwindow.cppの変更後の画面

14.3.3. Hello Worldをデスクトップ上で実行

作成したソースコードをビルドして実行してみましょう。まずは、ATDE上のデスクトップで実行してみます。

キットには、デスクトップを選択します。画面左中央のプロジェクトタブを選択して、「デスクトップのビルド」を選択します。シャドウビルドのチェックは外しておきます。

図14.11 デスクトップのビルド設定

ビルドを行うには、Qt Creatorのメニューの「ビルド -> プロジェクト "hello-qt" をビルド」を選択します。ビルドエラーとならない場合は、「ビルド -> 実行」を選択すると実行されます。 実行すると次のようにウィンドウが表示されます。

図14.12 Hello Worldウィンドウ

14.3.4. Hello WorldをArmadillo上で実行

デスクトップ上で実行確認ができたので、次はArmadillo上で実行してみましょう。 デスクトップ時の操作とほとんどかわりありませんが、標準状態のATDEに設定されている「Armadillo(armhf)」の設定では、ターゲットのArmadilloのIPアドレスが設定されていないため、ファイル転送やリモート制御することができない状態となっています。また、工場出荷状態のArmadilloでは、ファイル転送やリモート制御に利用するSSHが利用できない状態となっています。 まずは、Armadillo側でSSHを利用できるように設定します。

14.3.4.1. Armadillo上でSSHを設定

ArmadilloのSSHの設定は、専用のスクリプトが用意されているため簡単です。 Armadilloを起動させてログイン後、次のようにコマンドを実行してください。

[armadillo ~]# /etc/init.d/sshd keygen 
generate rsa1 key ...done
generate dsa key ...done
generate rsa key ...done
[armadillo ~]# /etc/init.d/sshd 
Starting sshd: done
[armadillo ~]#

	SSHの鍵を生成
	SSHサーバーを起動

SSHの鍵を生成すると自動的にフラッシュメモリに保存され、Armadilloの次回起動時には自動的にSSHサーバーが起動します。

続いて、ArmadilloのIPアドレスを確認しておきましょう。

[armadillo ~]# ifconfig eth0
eth0      Link encap:Ethernet  HWaddr 00:11:0C:XX:XX:XX
          inet addr:192.168.1.123  Bcast:172.16.255.255  Mask:255.255.0.0
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:10240 errors:0 dropped:0 overruns:0 frame:0
          TX packets:10240 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000
          RX bytes:1048576 (1.0 MiB)  TX bytes:1048576 (1.0 MiB)
          Interrupt:142 DMA chan:ff

14.3.4.2. Armadillo(armhf)の設定

リモートターゲットの設定を行います。 画面左中央の「プロジェクトタブ」を選択して、「Armadillo(armhf)のビルド」を選択します。シャドウビルドのチェックは外しておきます。

図14.13 プロジェクト - Armadillo(armhf) - ビルド

左上にある「キットを管理」をクリックします。

図14.14 オプション - デバイス

フィルタリストの「デバイス」をクリックします。Armadilloデバイスの設定項目が表示されるので、ホスト名欄に利用するArmadilloのIPアドレスを入力します。

続いて、リモート実行時の設定を修正します。 画面上部のArmadillo(armhf)の「実行」タブをクリックします。

図14.15 プロジェクト - Armadillo(armhf) - 実行

デプロイ項目の「ディスクの空き容量チェック」を削除します。

図14.16 プロジェクト - Armadillo(armhf) - 実行

続いて、実行項目の実行構成を「hello-qt (リモートデバイス上)」に設定します。

これでArmadillo上でリモート実行する準備が整いました。

本節の構成どおりに作業を行った場合、hello-qtプロジェクトはデスクトップ用にビルドされています。Armadillo用にビルドしなおすために、メニューの「ビルド -> プロジェクト "hello-qt" をリビルド」を選択します。ビルドエラーとならない場合は、「ビルド -> 実行」を選択すると実行されます。

	本節の構成どおりに作業を行い、メニューの「ビルド -> プロジェクト "hello-qt" をビルド」を選択した場合、実行時に "ash: /tmp/hello-qt: not found" というエラーが出る場合があります。 このようなエラーが出た時は、「ビルド -> プロジェクト "hello-qt" をリビルド」または、「ビルド -> プロジェクト "hello-qt"をクリーン」「ビルド -> プロジェクト "hello-qt"をビルド」を行い、 プロジェクトをArmadillo用にビルドしなおすことで解決できます。

14.3.5. Hello Worldを拡張ボードのLCDに表示

拡張ボード01のLCDに画面を表示するためには、環境変数「QT_QPA_EGLFS_DISPLAY」に値「1」を設定します。

Qt Linguistは、翻訳支援ツールです。多国語に対応したアプリケーションを作成する場合に利用します。本節では、「Hello World!」を「こんにちは!」に変換する手順を例に説明します。

Hello Worldのソースコードを見るとわかりますが、文字列はtr()によって括られています。このtr()で括られた文字列を任意の言語に変換して表示することができます。

大まかな手順は次の通りです。

まずは、プロジェクトファイル(hello-qt.pro)にTSファイルの指定を行いましょう。 次のように記述を追加します。

TRANSLATIONS = hello_ja.ts

図14.17 hello-qt.proにTRANSLATIONSを追加

続いてプログラムがQMファイルを読み込むように、main.cppを次のように変更します。

#include "mainwindow.h"
#include <QApplication>
#include <QTranslator>  

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QTranslator translator; 
    translator.load(QLatin1String(":hello_") + QLocale::system().name()); 
    a.installTranslator(&translator); 
    MainWindow w;
    w.show();

    return a.exec();
}

図14.18 QMファイルに対応

続いて、TSファイルの作成を行います。この作業はQt Creatorでは行えないため、 ターミナル上で作業します。次のコマンドを実行することにより、プロジェクト内の 翻訳対象の文字列から自動的にTSファイル(hello_ja.ts)を作成します。

[ATDE ~]$ cd /home/atmark/hello-qt/
[ATDE ~/hello-qt]$ lupdate-qt4 ./hello-qt.pro

生成されたhello_ja.tsをQt Linguistで開きます。

[ATDE ~/hello-qt]$ linguist-qt4 hello_ja.ts

図14.19 Qt Linguist

ソーステキストの「Hello, Wolrd!」をクリックし、日本語訳欄に「こんにちは!」を入力します。変更を確定するには、メニューの「翻訳 -> 完了にして次へ」を選択します。

図14.20 Qt Linguist - 翻訳

翻訳を完了する場合は、メニューの「ファイル -> 保存」を選択します。 また、翻訳ファイルをプログラムが扱える形式にするためにエクスポートします。 メニューの「ファイル -> リリース」を選択します。 リリースするとQMファイル(hello-qt_ja.qm)が作成されます。

図14.21 Qt Linguist - 翻訳確定後

これで、QMファイルが作成できました。続いて、QMファイルを実行ファイル(hello-qt)に統合するためにリソース化します。まずは、プロジェクトにリソースファイル(hello-qt.qrc)を追加します。

メニューの「ファイル -> ファイル/プロジェクトの新規作成」を選択します。

図14.22 新規作成 - Qt リソースファイル

ファイルとクラス項目の「Qt」を選択して、「Qt リソースファイル」を選択します。

図14.23 Qt リソースファイルの新規作成 - パス

ファイル名とパスを選択します。ここでは、名前に「hello-qt」、パスには「/home/atmark/hello-qt」を指定します。

図14.24 Qt リソースファイルの新規作成 - プロジェクト管理

プロジェクト管理については、特に変更する必要はありません。

図14.25 hello-qt.qrc

これで、プロジェクトにリソースファイルが追加されました。続いて、リソースに翻訳ファイルを追加します。「追加」から「プレフィックスを追加」を選択し、プレフィックス欄に「/」を指定します。

図14.26 hello-qt.qrc - プレフィックス

続いて、「追加」から「ファイルを追加」を選択し、ファイルダイアログからhello-qt_ja.qmを選択します。

図14.27 hello-qt.qrc - QMファイルを追加

これで、QMファイルをリソースとしてプロジェクトに登録することができました。 デスクトップ上でhello-qtを実行してみましょう。次の図のように「こんにちは!」と表示されます。

図14.28 Hello Worldウィンドウ - 日本語対応

Armadillo上で日本語を表示するには、環境変数「LANG」を指定する必要があります。

図14.29 プロジェクト - Armadillo(armhf) - 実行 - 環境変数

左のプロジェクトタブをクリックして、Armadillo(armhf)の「実行」タブをクリックします。実行のシステム環境変数を使用の「詳細」をクリックして、詳細設定を表示させます。「デバイス環境にフェッチ」をクリックして、Armadilloの環境変数をフェッチしてください。その後、追加で変数に「LANG」、値に「ja_JP.UTF-8」を入力してください。Armadillo用にリビルドを行い、実行するとArmadillo上でも日本語が表示されます。

QMLとは、Qt Quickの一部分として実装された、ユーザーアプリケーションを開発するための言語を指します。 アニメーション制御や状態遷移などを簡単に記述でき、ボタンやスクロールなどのコンポーネントと組み合わせることで簡単にユーザーインターフェースを実現することができます。

QMLを利用したアプリケーション開発では、QMLアプリケーション、 QML UIの2つの種類があります。

QMLアプリケーションは、QMLファイルやC++ファイルなどをビルドして1つのバイナリに統合したものを指します。

QML UIは、C++言語で記載する箇所がなく、ビルドもしません。 QMLファイルを直接qmlsceneから起動させることができます。 利点としては、コンパイラが不要のため、エディタのみでも開発できることです。

本節では、QML UIの作成・動作確認方法について説明します。

まずは、Qt Creatorを利用して、QML UIのスケルトンを作成しましょう。 QML UIのスケルトンは、画面中央に「Hello World」と表示されるものとなっています。

図14.30 新規作成 - Qt Quick2 UI

メニューの「ファイル/プロジェクトの新規作成」を選択して、「Qt Quick2 UI」を選択します。

図14.31 New Qt Quick UI Project - プロジェクト名とパス

プロジェクト名とパスを設定します。ここでは、プロジェクト名に「hello_qml」、パスに「/home/atmark/」としておきます。

図14.32 New Qt Quick UI Project - プロジェクト管理

プロジェクト管理については、特に変更する必要はありません。

図14.33 新規プロジェクトの作成が完了後の画面

これで、QML UIのスケルトンが作成されました。

Qtアプリケーションと違い、QML UIではキット設定がありませんでしたね。これは、前述した通りビルドステップがないためです。

作成されたスケルトンをそのまま実行すると、次のようにウィンドウが立ち上がります。

図14.34 qmlscene - Hello World

ビルドステップが無いため、Armadillo上で動作させるには、qmlファイルのみを転送するだけで実行準備が整います。Armadilloにファイルを転送しましょう。FTPなどで転送します。

転送が終われば実際に動作させてみましょう。次の例では、FTP経由で/home/ftp/pub/にファイルを転送した場合です。

[armadillo ~]# cd /home/ftp/pub
[armadillo /home/ftp/pub]# qmlscene ./hello_qml.qml

	拡張ボード01のLCDに画面を表示するには、次のようにコマンドを実行します。 [armadillo /home/ftp/pub]# QT_QPA_EGLFS_DISPLAY=1 QT_QPA_EGLFS_WIDTH=800 QT_QPA_EGLFS_HEIGHT=480 qmlscene ./hello_qml.qml

作成したオリジナルのQtアプリケーションをatmark-distへ統合する方法について説明します。atmark-distへ統合することにより、ユーザーランドのイメージファイル(romfs.img.gz)に自動的にインストールされるようになります。

[ATDE ~]$ ls -d atmark-dist/ hello-qt/
atmark-dist/  hello-qt/

[ATDE ~]$ cd hello-qt
[ATDE ~/hello-qt]$ make distclean
rm -f moc_mainwindow.cpp
rm -f ui_mainwindow.h
rm -f main.o mainwindow.o moc_mainwindow.o
rm -f *~ core *.core
rm -f hello-qt
rm -f Makefile

[ATDE ~/hello-qt]$ cd
[ATDE ~]$ cp -a hello-qt/ atmark-dist/user/qt5/

[ATDE ~]$ cd atmark-dist/user/qt5/hello-qt
[ATDE ~/atmark-dist/user/qt5/hello-qt]$ vi hello-qt.pro

FORMS    += mainwindow.ui

INSTALLS += target
target.path = /usr/bin 

TRANSLATIONS = hello_ja.ts

[ATDE ~/atmark-dist/user/qt5/hello-qt]$ cd ..
[ATDE ~/atmark-dist/user/qt5]$ vi Makefile

CROSS_LIBDIR = /usr/$(CROSS_COMPILE:-=)/lib

subdir_y = qmlscene
subdir_y += hello-qt 
qmldir_$(CONFIG_USER_QT5_PHOTOVIEWER) += photoviewer

BASE_LIBS = \

[armadillo ~]# LANG=ja_JP.UTF-8 /usr/bin/hello-qt

[ATDE ~]$ ls -d atmark-dist/ hello_qml/
atmark-dist/  hello_qml/
[ATDE ~]$ cp -a hello_qml/ atmark-dist/user/qt5/

[ATDE ~]$ cd atmark-dist/user/qt5/
[ATDE ~/atmark-dist/user/qt5]$ vi Makefile

CROSS_LIBDIR = /usr/$(CROSS_COMPILE:-=)/lib

subdir_y = qmlscene
subdir_y += hello-qt
qmldir_y += hello_qml 
qmldir_$(CONFIG_USER_QT5_PHOTOVIEWER) += photoviewer

BASE_LIBS = \

[ATDE ~/atmark-dist/user/qt5]$ cd hello_qml
[ATDE ~/atmark-dist/user/qt5/hello_qml]$ vi Makefile

all:
#nothing to do here

romfs install_target:
	mkdir -p $(ROMFSDIR)/usr/share/qt5/hello_qml
	$(ROMFSINST) hello_qml.qml \
		/usr/share/qt5/hello_qml/hello_qml.qml

[armadillo ~]# qmlscene /usr/share/qt5/hello_qml/hello_qml.qml

ATDEには、ユーザーインターフェースの開発に参考となるソースコードが標準的にインストールされています。Armadilloで参考となりそうなものをいくつかリストアップします。

名称	calculator
内容	Qtアプリケーションでボタンやエディットボックスを使用した基本的なアプリケーションです
パス	/usr/arm-linux-gnueabihf/lib/qt5/examples/widgets/widgets/calculator/
備考
画像

名称	photoviewer
内容	QMLで記述されたフォトビューワーです。画像データはインターネットから取得しています
パス	/usr/arm-linux-gnueabihf/lib/qt5/examples/quick/demos/photoviewer/
備考	Armadillo-840の工場出荷状態では、デフォルトのアプリケーションとなっています
画像