Arduino Nano用 高性能2.8インチTFTシールド - 320×240 SPIディスプレイ

必要な部品と材料

Arduino Nano R3	×1
2.8インチ TFT SPI 320×240ディスプレイ	×1
Arduino Nano用TFTシールド	×1

プロジェクト概要

背景

カラーディスプレイを知らない人はいないでしょう。Arduinoでカラーディスプレイを使ったプロジェクトを作った（または作りたい）人も多いはず。最近は解像度、画面サイズ、インターフェースが様々なディスプレイが安価に手に入ります。

ここではSPIインターフェース、解像度320×240ピクセル、画面サイズ2.8インチ（2.4インチと3.2インチもあります）のディスプレイに注目します。SPIは信号線が少なくマイコンとの接続が容易で、高速な画面更新が可能です。メリットが多い反面、5V駆動のArduinoボードに接続する際はロジックレベルの変換が必要という課題もあります。

Arduino NanoにSPIディスプレイを簡単・確実に接続するため、TFTシールド（Arduino Nano用軽量版、第2世代）を使用します。Arduino Uno用の第1世代については過去記事を参照してください。

TFTシールドの主な仕様

• 基板サイズ: 64×49mm
• 30ピンコネクタ: Arduino Nano接続用
• 14ピンコネクタ: TFTディスプレイ（320×240、SPI、タッチスクリーン対応）接続用
• microSDカードコネクタ
• Bluetoothモジュール（HC-06等）コネクタ
• 20ピンコネクタ: OV7670カメラ等接続用
• Mini USBコネクタ、および別途2ピン電源コネクタ（5V）

組み立て

組み立ては簡単ですが、実装前にピン配置をよく確認してください。

1. Arduino Nanoを写真のように取り付け
2. ディスプレイを接続（基板の片面＝方法1、反対面＝方法2の両方に対応）
3. Mini USBケーブルで電源供給

方法1: ディスプレイを片面に実装

方法2: ディスプレイを反対面に実装

組み立て後、スケッチをアップロードしますが、その前にYATFTライブラリをインストールしてください: https://github.com/YATFT/YATFT

デモ1: グラフィックスとテキスト

テキスト、図形描画、タッチスクリーンの動作例です。便宜上、Arduino Nanoを単体でプログラムしてから組み立てることを推奨します（組み立て後でも書き込み可能）。

スケッチ

/******************************************************************************/
#include 
#include 
#include 
#include 
#include 

YATFT tft(0);
uint32_t total_time;
uint16_t Color[4] = {BRIGHTBLUE, BRIGHTGREEN, BRIGHTRED, BRIGHTYELLOW};
uint16_t Gray[7] = {GRAY0, GRAY1, GRAY2, GRAY3, GRAY4, GRAY5, GRAY6};

void ClearScreen() {
  tft.SetColor(BLACK);
  tft.ClearDevice();
}

void setup() {
  Serial.begin(115200);
  Serial.println("Arduino TFT_shield Example 1!");
  tft.begin();
}

void loop() {
  uint16_t x, y, x2, y2, mask_gray;
  uint16_t i;
  ClearScreen();

  // フォント表示
  Serial.print("1) View Fonts (");
  total_time = millis();
  tft.SetColor(BRIGHTBLUE);
  tft.SetFont(NULL);
  tft.OutTextXY(5, 5, "Demonstration of work with the TFT display.");
  tft.SetColor(BRIGHTGREEN);
  tft.SetFont(&FreeSerif9pt7b);
  tft.OutTextXY(5, 20, "The example uses fonts from Adafruit.");
  tft.SetFont(&FreeSerifItalic24pt7b);
  tft.SetColor(BRIGHTCYAN);
  tft.OutTextXY(5, 45, "3.5''");
  tft.SetColor(BRIGHTRED);
  tft.OutTextXY(90, 45, "QVGA");
  tft.SetColor(BRIGHTMAGENTA);
  tft.OutTextXY(230, 45, "disp.");
  tft.SetColor(BRIGHTYELLOW);
  tft.SetFont(&FreeSans24pt7b);
  tft.OutTextXY(5, 100, "A R D U I N O + T F T");
  tft.SetFont(NULL);
  for (i = 0; i < 7; i++) {
    tft.SetColor(Gray[i]);
    tft.OutTextXY(5, 170+10*i, "Demonstration of work with the TFT display.");
  }
  PrintTotalTime();
  delay(3000);
  ClearScreen();

  // 円描画
  Serial.print("2) Draw circle (");
  total_time = millis();
  tft.SetColor(BRIGHTRED);
  for (i = 10; i < GetMaxY()>>1; i += 10) {
    tft.DrawCirc(GetMaxX()>>1, GetMaxY()>>1, i);
  }
  PrintTotalTime();
  delay(1000);

  // 塗りつぶし円と矩形
  Serial.print("3) Draw FillCircle and FillRect (");
  total_time = millis();
  tft.SetColor(BRIGHTRED);
  tft.DrawFillCirc(GetMaxX()>>1, GetMaxY()>>1, 110);
  tft.SetColor(BRIGHTCYAN);
  tft.DrawFillRect(GetMaxX()/2-77, GetMaxY()/2-77, GetMaxX()/2+77, GetMaxY()/2+77);
  tft.SetColor(BRIGHTGREEN);
  tft.DrawFillCirc(GetMaxX()>>1, GetMaxY()>>1, 77);
  tft.SetColor(BRIGHTMAGENTA);
  tft.DrawFillRect(GetMaxX()/2-54, GetMaxY()/2-54, GetMaxX()/2+54, GetMaxY()/2+54);
  tft.SetColor(BRIGHTBLUE);
  tft.DrawFillCirc(GetMaxX()>>1, GetMaxY()>>1, 54);
  tft.SetColor(BRIGHTYELLOW);
  tft.DrawFillRect(GetMaxX()/2-37, GetMaxY()/2-37, GetMaxX()/2+37, GetMaxY()/2+37);
  PrintTotalTime();
  delay(1000);
  ClearScreen();

  // 以下、円弧、ベベル、ランダム線、画面塗りつぶしベンチマーク等が続く...
  // (全コードはGitHub参照)
}

void PrintTotalTime() {
  total_time = millis() - total_time;
  Serial.print(total_time);
  Serial.println(" ms)");
}

void RedrawFillScreen(uint16_t color) {
  Serial.print("ReDraw Fill Screen (");
  total_time = millis();
  tft.SetColor(color);
  tft.ClearDevice();
  PrintTotalTime();
  delay(1000);
}

実行スクリーンショット:

デモ2: タッチスクリーン

タッチスクリーン（XPT2046コントローラー）を使った描画デモです。タッチバーで色を選び、画面に描画できます。

スケッチの要点

• SPI通信をタッチスクリーンとTFTで共有するため、SPI.end()/SPI.begin()で切り替え
• ADC値から画面座標への変換と、4点移動平均によるフィルタリングを実装
• 画面下部のカラーバータッチで描画色切替、右端タッチで画面クリア

デモ3: ロジックゲーム「Columns」

落ち物パズルゲーム「Columns」の実装例。タッチスクリーンで操作します（左/右移動、スワップ、高速落下）。

コードは長いため要点のみ掲載。完全版はGitHubを参照してください。

デモ動画

続きは今後公開予定です。ご覧いただきありがとうございました！

関連記事

• 1) Unique TFT Shield for Arduino Uno - Start
• 2) Unique TFT Shield for Arduino Uno - OV7670 Cam Live View
• 3) Unique TFT Shield for Arduino Uno - Arduino Bluetooth Camera (ABC)

次回予定

• 4) Photos and RGB video on TFT SPI display

更新情報 (2021.04.01)

スクリーンシリーズ用の更新ライブラリを公開しました。現在は2種類のシールドと2種類のブレイクアウトボードに対応。スケッチは選択したバージョン（1〜4）とマイコンタイプ（MegaAVRまたはESP-32）に応じてコンパイルされます。写真、例を追加。詳細は https://github.com/Ekaburg/EkaTFT を参照。

ライブラリ

https://github.com/YATFT/YATFT