第14章 Qt - GUIフレームワーク

第14章 Qt - GUIフレームワーク

14.1. ライセンス

14.2. Qt on Armadillo

14.2.1. Armadillo用に準備されているモジュール
14.2.2. 制限事項

14.3. Qt Creator

14.3.1. 新規プロジェクトを作成する
14.3.2. Hello World
14.3.3. Hello Worldをデスクトップ上で実行
14.3.4. Hello WorldをArmadillo上で実行
14.3.5. Hello Worldを拡張ボードのLCDに表示

14.4. Qt Linguist

14.5. QML

14.6. オリジナルQtアプリケーションをatmark-distへ統合

14.6.1. Qtアプリケーションをatmark-distに統合
14.6.2. QML UIをatmark-distに統合

14.7. サンプルソースコード

14.8. リファレンス

Qtとは、ファイル操作やデータベースアクセス、XML解析、ネットワークサポートなどの機能を備えたアプリケーションを開発するためのフレームワークです。Armadilloでは、主にGUIツールキットとして利用します。

Armadillo-840で採用しているQt5は、従来からのQt C++ UIフレームワークに加え、Qt Quickと呼ばれるいまどきのUIを簡単に作成するためのフレームワークを持っています。Qt Quickは、OpenGLをベースに、3D空間のオブジェクトを表現する「シーングラフ(Scene Graph)」、画面クリック時に波紋を生成するような「パーティクル・システム(Particle System)」、さらに画像処理に力を発揮する「シェーダー・エフェクト(Shader Effects)」機能を持ったフレームワークです。Qt5では、このような高い機能を、QMLというJavascriptに似た言語によって表現することで、とても簡単に使うことができるようになっています。

Qtには、様々な支援ツールが存在しています。統合開発環境のQt Creator、UIデザインツールのQt Designer、翻訳支援ツールのLinguistなどが用意されています。ATDEには、これらのツールキットが標準でインストールされており、すぐにアプリケーション開発を始めることができます。

14.1. ライセンス

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

オープンソース版: LGPL v2.1

・GNU Lesser General Public License, version 2.1 (LGPL v2.1)^[29]およびDigia Qt LGPL Exception version 1.1^[30]に準拠して開発する必要があります。

・LGPL v2.1として開発をスタートした後に、商用版に移行することはできません。

オープンソース版: GPL v3

・GNU General Public License, version 3 (GPLv 3)^[31]に準拠して開発する必要があります。

・GPL v3として開発をスタートした後に、商用版に移行することはできません。

商用版: Qt Commercial License (Digia社から提供)

・商用版を使用して開発するために、有償の開発者ライセンス(Developer License)が必要です。

・商用版を組み込んだ機器の量産時に、有償のランタイムライセンス(Runtime Distribution License)が必要です。

・オープンソースライセンス(LGPL/GPL)由来の制限等は受けません。

・オープンソース版にはない追加機能やツールが存在します。

オープンソース版で開発する前に

一度オープンソース版(LGPL v2.1/GPL v3)で開発をスタートすると、後から商用版(Qt Commercial License)に切り替えることはできませんのでご注意ください。

商用版ライセンスを使用したい場合、弊社窓口までお問い合わせください。

14.2. Qt on Armadillo

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

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

表14.1 eglfs用の環境変数

環境変数	用途	設定値
QT_QPA_EGLFS_DISPLAY	画面表示先を変更します	0: HDMI(fb0)に画面を表示します 1: LCD(fb1)に画面を表示します
QT_QPA_EGLFS_WIDTH	有効な画面の幅を指定します	ピクセル数を指定します
QT_QPA_EGLFS_HEIGHT	有効な画面の高さを指定します	ピクセル数を指定します
QT_QPA_EGLFS_HIDECURSOR	マウスカーソルを隠します	0: マウスカーソルを表示します 1: マウスカーソルを表示しません

14.2.1. Armadillo用に準備されているモジュール

Qtには様々なモジュールが存在しますが、Armadillo用に準備されているものは(執筆時点では)限られています。次に示すモジュールが準備されています。

Qt5 Core module	Qt5 GUI module
Qt5 OpenGL module	Qt5 Widgets module
Qt5 Network module	Qt5 D-Bus module
Qt5 SQL module	Qt5 Print support module
Qt5 Concurrent module	Qt5 JavaScript backend module
Qt5 QML module	Qt5 XML module

14.2.2. 制限事項

執筆時点で判明している、不具合事項は次の通りです。

メインウィンドウ以外にサブウィンドウを作成する場合、作成に失敗する場合があります。例えば、メッセージボックスやファイルダイアログなどを作ろうとする場合に、EGL_BAD_ALLOCエラーとなる場合があります。
Qt CreatorでQMLのデザイナーが利用できません。次のようにダイアログが表示されます。
QML言語で記述したアプリケーションの画面を拡張ボード01のLCDに表示させた場合に、HDMI(プライマリフレームバッファ)の画面解像度が使用されてしまいます。LCDの画面解像度で表示させるためには、次のようにアプリケーションを実行する必要があります。
```
[armadillo ~]# QT_QPA_EGLFS_DISPLAY=1 QT_QPA_EGLFS_WIDTH=800 QT_QPA_EGLFS_HEIGHT=480 qml_app
```

14.3. Qt Creator

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」を設定します。

14.4. Qt Linguist

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

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

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

プロジェクトファイルにTSファイル^[32]の指定を追加
プログラムでQMファイル^[33]を読み込むように変更
TSファイル、QMファイルを作成

まずは、プロジェクトファイル(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();
}

	QTranslatorを利用するため、インクルードを追加
	QTranslatorオブジェクトを定義
	QMファイルをロード
	翻訳設定をアプリケーションにインストール

図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上でも日本語が表示されます。

14.5. QML

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`

14.6. オリジナルQtアプリケーションをatmark-distへ統合

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

14.6.1. Qtアプリケーションをatmark-distに統合

まずは、「Hello World」で作成したhello-qtプロジェクトを統合してみましょう。atmark-distには、Qtアプリケーションを簡単に統合できるように実装されています。

ここでは、atmark-distとhello-qtは、atmarkユーザーのホームディレクトリ(~/)に存在すると仮定します。

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

まずは、hello-qtプロジェクトをクリーンアップします。プロジェクトのディレクトリで次のように「make distclean」を行います。

[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

hello-qtディレクトリをatmark-dist/user/qt5/以下へコピーします。

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

実行ファイルhello-qtがユーザーランドの/usr/bin/ディレクトリにインストールされるようにエディタでプロジェクトファイルを修正します。

[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

target.pathを/usr/binに変更

続いて、atmark-distのビルドシステムにhello-qtを登録します。

[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 = \

subdir_yにhello-qtを追加

これで、atmark-distにhello-qtを追加することができました。Armadillo-840用にatmark-distをビルドするとユーザーランドイメージに/usr/bin/hello-qtが追加されます。フラッシュメモリを更新してArmadilloを起動後、次のように実行することができます。

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

14.6.2. QML UIをatmark-distに統合

ここでは、「QML」で作成したhello_qmlをatmark-distに統合する方法について説明します。

hello_qmlはQML UIのため、前述した通りにビルドの必要がありません。そのため、インストール時の動作のみを記述します。まずは、hello_qmlディレクトリをコピーします。

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

続いて、atmark-distのビルドシステムにhello_qmlを登録します。

[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 = \

qmldir_yにhello_qmlを追加

QML UIでは、自動的にMakefileが生成されないため、インストール用の記述を記載したMakefileを作成します。

[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

これで、atmark-distにhello_qmlを追加することができました。Armadillo-840用にatmark-distをビルドするとユーザーランドイメージに/usr/share/qt5/hello_qml/hello_qml.qmlが追加されます。フラッシュメモリを更新してArmadilloを起動後、次のように実行することができます。

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

14.7. サンプルソースコード

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の工場出荷状態では、デフォルトのアプリケーションとなっています

画像

14.8. リファレンス

Qt Creator Manual: http://qt-project.org/doc/qtcreator-2.7/index.html

Qt QML: http://qt-project.org/doc/qt-5.0/qtqml/qtqml-index.html

Qt Examples And Tutorials: http://qt-project.org/doc/qt-5.0/qtdoc/qtexamplesandtutorials.html

Qt class reference: http://qt-project.org/doc/qt-5.0/qtdoc/classes.html

^[29]詳細については、ATDE5にインストールされている/usr/share/common-license/LGPL-2.1を参照してください。

^[30]詳細については、ATDE5にインストールされている/usr/share/doc/qtbase5-dev/LGPL_EXCEPTION.txtを参照してください。

^[31]詳細については、ATDE5にインストールされている/usr/share/common-license/GPL-3を参照してください。

^[32]TSファイルとは、翻訳対象の文字列と翻訳が記載されたXMLファイルです。

^[33]QMファイルとは、TSファイルをQtアプリが解釈できるバイナリ形式に変換したファイルです。


第13章開発の基本的な流れ	PDF version	第15章 AVコーデックミドルウェア