[チュートリアル] Hello World!

UPDATED: 2022-07-22

本ブログではEmbedded Wizardを利用したHello Worldアプリの作り方について説明します。
本記事を通じて基本的なプロジェクトの作成と、全体的な開発手順について学習できます。

前提条件

開発PCに Embedded Wizardをインストールします。
Embedded Wizardは下記URLからダウンロードできます。
https://www.embedded-wizard.de/download

本記事では RX72N評価ボードを対象にします。
RX72N評価ボードでの評価方法についてはこちらのURLを参照してください。
https://www.dioiz-japan.com/blog/tutorial_embedded_wizard_rx72n_envision_kit

新規プロジェクトの生成

Embedded Wizardを起動し新規プロジェクトを作成します。
[Project]メニューから[New]を選択してください。

以下の手順に従って設定を行います。

　　① 対象となる評価ボードを選択します(RX72N評価ボードの場合はRX72N-EnvisionKitを選択)
　　② プロジェクト名を入力します。
　　③ プロジェクトの保存先を指定します。Build EnviromentのExamplesフォルダを入力します。
　　④ [Create new project]をクリックします。

プロファイルを編集してプロジェクトの詳細設定を行います。

　　① [Project]タグを選択します。
　　② [RX]プロファイルを選択します。
　　③ [CleanOutputDirectories]を"true"にします。出力フォルダを空にする設定です。
　　④ [OutputDirectory]に"..\..\Application\GeneratedCode"を入力します。

ビットマップ画像の登録

ビットマップ画像が用意します。
既存プロジェクトのビットマップ画像をコピーします。

コピー元: c:\RX72N\RX72N-EnvisionKit\Examples\HelloWorld\Res\EmWiLog.png

コピー先: c:\RX72N\RX72N-EnvisionKit\Examples\MyHelloWorld\Res\EmWiLog.png

ビットマップ画像をリソースとして登録します。

　　① Applicationユニットを選択します。
　　② [Templates]ウインドウの[Resources]フォルダを開きます。
　　　 [Bitmap Resource]をドラッグして Applicationユニットにドロップします。
　　③ BitmapリソースのFileName属性を設定します。コピーしたビットマップ画像を入力名を指定してください。

表示文字列の編集

"Hello World!"を画面に表示させるため、文字列を編集します。

Textオブジェクトの文字列を編集します。

　　① ApplicationユニットのApplicationクラスをダブルクリックするとクラスの定義画面に移動します。
　　② 画面の真ん中にあるTextオブジェクトをクリックします。
　　③ TextオブジェクトのString属性を"Hello World!"に変更します。

Imageオブジェクトの追加

ビットマップ画像を画面に表示するときは Imageオブジェクトが必要です。

Imageオブジェクトを追加し設定を行います。

　　① [Templates]ウインドウの[Views]フォルダを開きます。
　　　[Image]をドラッグして Applicationクラスにドロップします。
　　② [Bitmap]属性を編集します。ApplicationユニットのBitmapリソースを指定します。
　　③ [AutoSize]属性を"true"に設定します。
　　　Bitmapリソースのサイズに合わせてImageオブジェクトのサイズが自動に調整されます。

タッチインターフェースの追加

タッチインターフェースを実現するためには、タッチハンドラが必要です。
タッチパネルの操作領域を設定できます。イベントを検出しイベントハンドラを呼び出す役を担ってます。

　　① [Templates]ウインドウの[Event Handlers]フォルダを開きます。
　　　[Simple Touch Handler]をドラッグして Applicationクラスにドロップします。

　　① SimpleTouchHandlerオブジェクトのPoint1, Point2, Point3, Point4属性を設定します。
　　　スクリーンサイズ(480x272)に合わせて4つのポイントを入力します。
　　　Point1.x = "0"
　　　Point1.y = "272"
　　　Point2.x = "480"
　　　Point2.y = "272"
　　　Point3.x = "480"
　　　Point3.y = "0"
　　　Point4.x = "0"
　　　Point4.y = "0"

タッチインターフェースの実装

タッチパネルのタップ、ドラッグ操作に合わせてビットマップ画像を移動させます。

SimpleTouchHandlerにイベントハンドラを登録しイベントごとに処理を実行します。

　　① [Templates]ウインドウの[Chora]フォルダを開きます。
　　　[Slot Method]をドラッグして Applicationクラスにドロップします。
　　② F2キーを押して Slot名を[OnTouch]に変更します。
　　③ SimpleTouchHandlerメンバのOnDrag属性に"OnTouch"と入力します。
　　④ SimpleTouchHandlerメンバのOnPress属性に"OnTouch"と入力します。

イベントハンドラを実装します。

　　① "OnTouch"スロットをダブルクリックします。
　　② 以下のコードを入力します。タッチ座標を中心にImageオブジェクトを配置するコードです。

Image.Bounds.origin = SimpleTouchHandler.CurrentPos - point ( Image.Bounds.w / 2, Image.Bounds.h / 2 );

プロトタイピング

Prototyperは Embedded Wizardが提供する最も重要な機能の一つです。
Prototyperは実機と同等な実行環境を提供します。
実装結果を確認するたびに実機に書き込む必要がありません。
実機がなくても UIアプリ開発が可能です。

Applicationクラス画面を表示した状態で、F5キーを押して Prototyperを起動します。
Prototyper画面でマウスクリックした座標に合わせてビットマップ画像が移動することを確認できます。

実機での動作確認

実機で動かすためにはクロスビルドが必要です。

F8キーを押して Cソースコードを生成します。
生成されたソースコードはプロファイルで指定した以下のフォルダに格納されます。

..\..\Application\GeneratedCode

ソースコードをクロスコンパイラでビルドします。

開発環境の構築やビルド方法の詳細についてはこちらのURLを参照してください。
https://www.dioiz-japan.com/blog/tutorial_embedded_wizard_rx72n_envision_kit

ビルドしたファームウェアをターゲットにダウンロードします。
下図は RX72N評価ボードにダウンロードしたときの写真です。

終わりに

定番の Hello Worldアプリを作成してみました。
WYSIWYGの簡単操作だけでタッチインターフェースのアプリを開発できます。
他WYSIWYGエディタでは表現できないロジカルな要素(ビットマップリソースやメッソド等)を可視化することで把握しやすく、メンテナンス面でも管理しやすいです。
Prototyperは実機と同等な実行環境を提供しますので、生産性の高い開発が可能です。