スタートレックのコミュニケータを作る企画の８回目です。
前回は、TFT ディスプレイと音声再生回路をボディ内部に組み込みました。
（前回のコミュニケータに内蔵した回路についての記事は、以下のリンクをご覧ください。）
今回は、ドライバ IC に GC9A01 を使った丸形 TFT 画面に文字や画像を表示させます。
最初は良く使われる「Adafruit GC9A01 Library」で画面表示のテストをしますが、次に表示が非常に高速と評判の「LovyanGFX」グラフィック・ライブラリを使ってみます。
実際のモアレの動画の表示に必要な SD カード内のデータの再生については、色々と問題が起きて話が長くなったので次回に解説します。
文字の表示テスト
まずは配線が間違っていないことを確認するために、TFT 画面に文字を表示してみます。
使用する開発環境は Arduino IDE で、ライブラリは「Adafruit GC9A01 Library」を使います。
ESP32 ボードの導入
事前にボードライブラリで、今回コミュニケータに組み込んだ ESP32 を追加しておきます。
1 「ファイル」 → 「基本設定」の「追加のボードマネージャURL」欄に「https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json」を追加する。
2 Arduino IDE の左枠の上から2番目のアイコンを押して、ボードマネージャーの検索欄に「ESP32」と入力してインストールします。（結構時間がかかります。）
GC9A01 ライブラリの導入
次に丸形 TFT に使われている GC9A01 ドライバ用のライブラリをインストールします。
Arduino IDE の左側の本棚？アイコンを押して「GC9A01A」と入力すると出てくる「Adafruit GC9A01」を押してライブラリを入れます。
スケッチ例
導入が終わったら、スケッチ例に追加されている「Adafruit GC9A01」の「graphicstest」を開きます。
スケッチの変更
開いた表示テスト用のスケッチの接続端子部分を書き換えます。
書き換えるのは２か所です。
「TFT_DC」と「TFT_CS」です。
今回は ESP32 の３番に DC を、７番に CS をつないだので、下のように書き換えます。
変更したスケッチを USB ケーブルで接続して書き込みます。
正常に表示できました。
すでにコミュニケータに組み込んだ回路は半田付けしていますが、同じ接続の回路で正常に画面表示できることが検証できました。（ほっと一安心。）
ちなみに、この試験用のスケッチは TFT 画面の試験中に、何のテストをしているかをシリアル通信で送ってきます。
しかし、ESP32 C3 の標準の設定ではシリアル通信が無効になっているので、何も表示がされません。
（なぜシリアル通信が出来ないか分からず、解決するのに１日かかりました。）
ESP32 C3 でシリアル通信を有効にするには、「ツール」の「USB cDC On Boot」を「Enable」にします。
LovyanGFX ライブラリ
LovyanGFX ライブラリとは、「らびやん」さんが作られた高速な画面表示用のライブラリです。
（「らび」がお名前で「やん」は呼称と聞いたので、「ぱおさん」さんみたいな呼び方ですね。）
ネット上の情報では、LovyanGFX ライブラリとは AdafruitGFX や TFT_eSPI と互換性を維持したまま、ギリギリまでチューニングされて、超高速な画像表示が可能なために ESP32 程度の MCU でも簡易的な動画再生が可能です。
（LovyanGFX ライブラリの詳細はリンク先をご覧ください。）
また、SD カードに保存した画像を TFT ディスプレイに表示する方法も超簡単です。
（SD カードの画像表示は次回紹介します。）
ライブラリのインストールです。
ライブラリマネージャーの検索欄に「LovyanGFX」と入力してライブラリをインストールします。
LovyanGFX ライブラリの使用法
LovyanGFX ライブラリは、すごく高性能ですが、唯一、私のような初心者が導入にとまどってしまうのが、初期設定が必要なことです。
最初に紹介した「Adafruit GC9A01」では接続したピン番号の変更だけで表示できましたが、チューンアップされた LovyanGFX ライブラリでは、使用する TFT に合わせて自分で環境設定する必要があります。
（DOS の頃の Config.sys みたいですね。）
設定ファイル
それでは、GC9A01 用の設定です。
LovyanGFX では、スケッチ内に設定を書き込むこともできますが、見づらくなるので別ファイルにまとめることが多いようです。
（素人なのでファイル命名法と異なるかもしれませんが）設定ファイルを「GC9A01.hpp」としました。
その内容です。
この設定で、一応、円形 TFT ディスプレイの GC9A01 で文字と画像の表示が出来ています。（何か間違っていたら教えてください。）
#define LGFX_USE_V1
#include <LovyanGFX.hpp>
// --- LGFX設定クラス ---
class LGFX : public lgfx::LGFX_Device {
lgfx::Panel_GC9A01 _panel_instance;
lgfx::Bus_SPI _bus_instance;
lgfx::Light_PWM _light_instance;
public:
LGFX(void) {
{ // バス制御の設定
auto cfg = _bus_instance.config();
cfg.spi_host = SPI2_HOST; // 使用するSPIを選択 ESP32-S2,C3 : SPI2_HOST or SPI3_HOST / ESP32 : VSPI_HOST or HSPI_HOST
// ※ ESP-IDFバージョンアップに伴い、VSPI_HOST , HSPI_HOSTの記述は非推奨になるため、エラーが出る場合は代わりにSPI2_HOST , SPI3_HOSTを使用
cfg.spi_mode = 0; // SPIモード3
cfg.freq_write = 40000000; // 送信時クロック (最大40MHz)
cfg.freq_read = 16000000; // 受信時クロック
// cfg.spi_3wire = true; // 受信をMOSIピンで行う場合はtrueを設定
cfg.pin_sclk = 4; // SCLKピン番号
cfg.pin_mosi = 6; // MOSIピン番号
cfg.pin_miso = 5; // MISOピン番号,SDカードと共通のSPIバスを使う場合、MISOは省略せず必ず設定
cfg.pin_dc = 3; // DCピン番号
_bus_instance.config(cfg);
_panel_instance.setBus(&_bus_instance);
}
{ // パネル制御の設定
auto cfg = _panel_instance.config();
cfg.pin_cs = 7; // CSピン番号
cfg.pin_rst = 10; // RSTピン番号 (-1は未使用)
cfg.pin_busy = -1; // BUSYピン番号 (-1は未使用)
cfg.panel_width = 240; // 実際の幅
cfg.panel_height = 240; // 実際の高さ
cfg.offset_x = 0; // Xオフセット
cfg.offset_y = 0; // Yオフセット
cfg.offset_rotation = 0; // 回転方向のオフセット
cfg.dummy_read_pixel = 8;
cfg.dummy_read_bits = 1;
cfg.readable = true;
cfg.invert = true; // 色が反転する場合ここをfalseに
cfg.rgb_order = false; // RGBが逆ならtrueに
_panel_instance.config(cfg);
}
setPanel(&_panel_instance);
}
};文字の表示
それでは、LovyanGFX を使って文字を表示してみます。
と言っても、初心者が１からスケッチを書いても動かないので、ネットで参考資料を調べます。
沢山の参考になる情報を公開されていて猫好きの「お父にゃんの電子工作」さんです。
紹介されているスケッチでは日本語を表示されていますが、スタートレックのコミュニケータでは英数字が表示出来ればよいので、少し変更してみました。
#include "GC9A01.hpp"
#define LGFX_USE_V1
LGFX lcd; // インスタンスを作成
void setup() {
// LCDの初期化
lcd.init();
lcd.setRotation(1);
lcd.clear(TFT_BLACK);
lcd.setTextSize(1);
// 文字表示テスト
lcd.setCursor(0, 0);
lcd.setTextColor(TFT_ORANGE);
lcd.setFont(&fonts::Orbitron_Light_32);
lcd.println("str");
lcd.setTextColor(TFT_WHITE);
lcd.setFont(&fonts::FreeSans18pt7b);
lcd.println("neko");
lcd.setTextColor(TFT_GREEN);
lcd.setFont(&fonts::FreeSansBold18pt7b);
lcd.println("0123456789\n0123456789");
lcd.setTextColor(TFT_CYAN);
lcd.setFont(&fonts::FreeMonoBold18pt7b);
lcd.println("ABCDEFGHI\nJabcdefghij");
// delay(1000);
}
void loop() {
}設定ファイルの追加
ちなみに、設定ファイルは表示テスト用のスケッチと同じフォルダに入れてください。
追加方法は、テキストエディタでファイルを作るか、Arduino IDE の右上の「・・・」を押して「新しいタブ」を追加します。
新しいタブに名前を付けて、設定ファイルの内容をコピペすると出来上がりです。
設定ファイルを入れ終わると自動的に読み込まれて、タブが追加されます。
動作画面
スケッチを書きこむとこんな画面が表示されます。
専用フォント？なので、大き目の文字でもキレイな表示ですね。
ちなみに、この円形ディスプレイは 240 X 240 ピクセル表示の液晶画面ですが、縮小表示されるのではなく円形の外側の情報は表示されません。
動画的なモノの表示テスト
まだ、SD カードの画像表示は出来ませんが、画面表示が高速だと言われている LovyanGFX の能力をテストしてみたいですね。
そこで、GitHub の LovyanGFX のページでも紹介されている「オウム（partyparrot）」の動画を再生してみます。
オウムのスケッチ
オウムのスケッチは、スケッチ例の「Sprite」内にある「PartyParrot」です。
読み込んだスケッチを一部変更します。
と言っても、TFT 用の設定ファイルを同じフォルダに入れて、設定ファイルの名前を追加するだけです。
（フォルダに設定ファイルを入れるには、一度名前を付けて保存する必要があります。）
「#define LGFX_USE_V1」と「#include <LovyanGFX.hpp>」をコメントアウトして、「#include “GC9A01.hpp”」を追加するだけです。
ちなみに、ファイル名を囲う記号の「<>」と「””」の違いは、ファイルがローカルに置いてあるかどうかの違いです。
そして変更したスケッチを書きこみます。
オウムの動画が超高速で再生されました。（停止画だと何だか分かりませんね。）
停止画では分からないので、動画も上げておきます。
この再生スピードなら、コミュニケータのモアレの動画も行けそうですね。
（すごいスピードですが、等倍再生です。使用している MCU は、ESP32 C3 SuperMini です。）
次回の予定
LovyanGFX を使って表示が出来たので、次回は SD カードの画像を表示して、モアレの動画の表示にチャレンジします。
（試作中に色々あったので、その紹介も行います。）
コメント