ILI9341 2.4インチTFTタッチシールドでのビットマップアニメーション実装ガイド

必要なコンポーネントと用品

	Arduino UNO	×	1
	ILI9341 2.4" TFT Touchscreen Shield for Arduino	×	1

使用アプリとオンラインサービス

	Visuino - Arduino用グラフィカル開発環境
	Arduino IDE

このプロジェクトについて

ILI9341ベースのTFTタッチスクリーンディスプレイシールドは、Arduino向けの非常に人気ある低コストディスプレイシールドです。Visuinoはかなり前からこれらをサポートしていましたが、チュートリアルを書く機会がありませんでした。最近、Visuinoでのディスプレイ使用について質問をいくつかいただいたため、チュートリアルを作成することにしました。

このチュートリアルでは、シールドをArduinoに接続し、Visuinoでプログラミングして、ビットマップをディスプレイ上で動かすアニメーションを作成する簡単さを紹介します。

ステップ1：コンポーネント

• Arduino Uno互換ボード1台（Megaでも動作する可能性ありますが、未検証）
• ILI9341 2.4" TFT Touchscreen Shield for Arduino 1台

ステップ2：ILI9341 TFTタッチスクリーンディスプレイシールドをArduinoに接続

画像のように、TFTシールドをArduino Unoの上に差し込みます。

ステップ3：Visuinoを起動しTFTディスプレイシールドを追加

Arduinoをプログラミングするには、Arduino IDE（https://www.arduino.cc/）が必要です。バージョン1.6.7以上を必ずインストールしてください。それ未満ではこのチュートリアルは動作しません！

Visuino（https://www.visuino.com）もインストールが必要です。

• Visuinoを起動（画像1）
• Arduinoコンポーネントの「下矢印」ボタンをクリックしドロップダウンメニューを開く（画像1）
• メニューから「シールドを追加...」を選択（画像1）
• 「シールド」ダイアログで「ディスプレイ」カテゴリを展開し、「TFTカラータッチスクリーンディスプレイILI9341シールド」を選択、「+」ボタンで追加（画像2）

ステップ4：Visuinoでテキスト影用Draw Text要素を追加

まず、テキストの影を描画するグラフィック要素を追加します。

• オブジェクトインスペクタで「TFT Display」要素の「Elements」プロパティの「...」ボタンをクリック（画像1）
• エレメントエディタで「Draw Text」を選択し、「+」ボタンで追加（画像2、3）
• 「Draw Text1」要素の「Color」プロパティを「aclSilver」に設定（画像3）
• 「Size」プロパティを「4」に設定（画像4）。これでテキストが大きくなります
• 「Text」プロパティを「Visuino」に設定（画像5）
• 「X」プロパティを「43」に設定（画像6）
• 「Y」プロパティを「278」に設定（画像6）

ステップ5：Visuinoでテキスト前景用Draw Text要素を追加

次に、テキスト本体を描画するグラフィック要素を追加します。

• エレメントエディタで「Draw Text」を選択し、「+」ボタンで2つ目を追加（画像1、2）
• 「Size」プロパティを「4」に設定（画像2）
• 「Text」プロパティを「Visuino」に設定（画像3）
• 「X」プロパティを「40」に設定（画像4）
• 「Y」プロパティを「275」に設定（画像4）

ステップ6：Visuinoでアニメーション用Draw Bitmap要素を追加

次に、ビットマップを描画するグラフィック要素を追加します。

• エレメントエディタで「Draw Bitmap」を選択し、「+」ボタンで追加（画像1、2）
• オブジェクトインスペクタで「Draw Bitmap1」要素の「Bitmap」プロパティの「...」ボタンをクリックし、「Bitmap Editor」を開く（画像2、3）
• 「Load...」ボタンをクリックし、ファイル選択ダイアログを開く（画像4）
• 描画するビットマップを選択し「Open」をクリック（画像4）。ファイルが大きすぎるとArduinoメモリに収まらない場合があります。コンパイル時にメモリ不足エラーが出たら、より小さなビットマップを選んでください
• 「OK」ボタンでダイアログを閉じる（画像5）

ステップ7：Draw Bitmap要素のX、Yプロパティ用ピンを追加

ビットマップをアニメーションさせるには、XとY位置を制御する必要があります。そのためにピンを追加します。

• 「Draw Bitmap1」要素の「X」プロパティ前の「Pin」ボタンをクリックし、「Integer SinkPin」を選択（画像1、2）
• 同様に「Y」プロパティで「Integer SinkPin」を選択（画像3、4）

ステップ8：2つの整数正弦波ジェネレーターを追加し、最初のものを設定

ビットマップの動きをアニメーションさせるため、2つの整数正弦波ジェネレーターを使用します。

• コンポーネントツールボックスのフィルターボックスに「sine」と入力し、「Sine Integer Generator」コンポーネントを選択（画像1）、設計エリアに2つドロップ
• 「SineIntegerGenerator1」の「Amplitude」を「96」に設定（画像2）
• 「Offset」を「96」に設定（画像3）
• 「Frequency」を「0.2」に設定（画像4）

ステップ9：2つ目の正弦波ジェネレーターを設定し、X/Y座標ピンに接続

• 「SineIntegerGenerator2」の「Amplitude」を「120」に設定（画像1）
• 「Offset」を「120」に設定（画像2）
• 「Frequency」を「0.03」に設定（画像3）
• 「SineIntegerGenerator1」の「Out」出力ピンを、Arduinoコンポーネントの「Shields.TFT Display.Elements.Draw Bitmap1」要素の「X」入力ピンに接続（画像4）
• 「SineIntegerGenerator2」の「Out」出力ピンを、同じく「Y」入力ピンに接続（画像5）

ステップ10：StartとClock Multi Sourceコンポーネントを追加・接続

XとY位置が更新されるたびにビットマップを描画するには、「Draw Bitmap1」要素にクロック信号を送る必要があります。位置変更後にコマンドを送るため、イベントを同期させる仕組みが必要です。Repeatコンポーネントで継続的にイベントを生成し、Clock Multi Sourceで順次2つのイベントを生成します。最初のイベントで正弦波ジェネレーターをクロックしてX/Y位置を更新し、2番目のイベントで「Draw Bitmap1」をクロックします。

• ツールボックスで「repeat」と入力し、「Repeat」コンポーネントを選択、設計エリアにドロップ（画像1、2）
• 「multi」と入力し、「Clock Multi Source」コンポーネントを選択、ドロップ（画像2、3）
• 「Repeat1」の「Out」を「ClockMultiSource1」の「In」に接続（画像3）
• 「ClockMultiSource1」の「Pin[0]」を「SineIntegerGenerator1」の「In」に接続（画像4）
• 「ClockMultiSource1」の「Pin[0]」を「SineIntegerGenerator2」の「In」に接続（画像5）
• 「ClockMultiSource1」の「Pin[1]」をArduinoの「Shields.TFT Display.Elements.Draw Bitmap1」要素の「Clock」入力ピンに接続（画像6）

ステップ11：Arduinoコードを生成、コンパイル、アップロード

• VisuinoでF9キーを押すか、ボタンをクリックしてArduinoコードを生成し、Arduino IDEを開く（画像1）
• Arduino IDEで「アップロード」ボタンをクリックし、コンパイルとアップロードを実行（画像2）

ステップ12：完成——動作確認

おめでとうございます！ プロジェクト完了です。

画像2〜5と動画は、接続・通電されたプロジェクトを示しています。ILI9341ベースのTFTタッチスクリーンディスプレイシールド上で、動画のようにビットマップが動き回っているのが確認できます。

画像1には完成したVisuinoダイアグラムが表示されています。このチュートリアルで作成したVisuinoプロジェクトと、Visuinoロゴのビットマップも添付されています。ダウンロードしてVisuino（https://www.visuino.com）で開けます。

FPHWHL0IV0AHJLX.zip