はじめに
この記事では、LogyanGFXを使ってテキストの横スクロールの方法について記載します。
News等の長いテキストのスクロール等に使えます。
- LovyanGFX for Windowsでのデバッグ環境の構築
- ソースの修正
- Windows環境でのビルド・デバッグ
- 実機での動作確認
LovyanGFX for Windowsの環境構築
LovyanGFX for Windowsを使ってみた(https://qiita.com/pokibon/items/4f6f9b1f733ad60c708a )を参考にPC上に環境を構築します。
ソースの修正
テキストの横スクロールの参考になるサンプルソフトウェアは、LogyanGFXのサンプルに含まれている「LovyanGFX\examples\Standard\LongTextScroll\LongTextScroll.ino」を参考に、LoyanGFX for Winodwsのコードを追加します。
- Arduino固有のソースをWindowsAPIに修正
delay() → sleep()
StringクラスをC++のstringクラスに変更 - LovyanGFX固有のコード修正
デバッグ時の可視化性向上のため、インスタンス作成時に表示倍率に4倍を指定しています。 - 文字のスクロール
このソースでは漢字を含む文字列を32ドットの明朝体で表示しています。ターゲットとなるLEDパネルのスクロールエリアは64x32ドットですが、これより1文字分多い96x32ドット分のスプライトを作成しています。スプライトを1ドット左にスクロールした後に描画エリアにpushSprite()で描画を繰り返すことにより横スクロールを実現しています。
#include <windows.h> // Sleep()を使うために追加
#include <string> // string変数を使うために追加
#define LGFX_USE_V1
#include <LovyanGFX.hpp>
#include <LGFX_AUTODETECT.hpp>
#define SCREEN_SIZE_X 64 // 64x32のHUB75 LEDパネルを想定
#define SCREEN_SIZE_Y 32
LGFX gfx ( SCREEN_SIZE_X, SCREEN_SIZE_Y, 4); // 縦横4倍の拡大表示
static lgfx::LGFX_Sprite cBuf;
#define FONT &fonts::lgfxJapanMincho_32
#define FONT_SIZE 32
#define FONT_MULTI 1.0
void setup()
{
gfx.init();
cBuf.createSprite(SCREEN_SIZE_X + FONT_SIZE, FONT_SIZE);
cBuf.setTextSize(FONT_MULTI, FONT_MULTI);
cBuf.setFont(FONT);
cBuf.setTextWrap(false);
cBuf.setTextColor(TFT_YELLOW, TFT_BLUE);
cBuf.clear(TFT_BLUE);
}
const std::string str = "◇AKBONE2022 Break Out News - ◇秘密結社オープンフォースの河野総統は、LEDパネルキットAKB2022をAVTOKYO2022で発表した。◇AKB2022のグラフィックライブラリにはLovyanGFXを使用、漢字表示や高速な描画を実現。◇搭載しているセンサモジュールは、BME280、MPU6500、およびReal Time Clock。◇Linux ボードとして、Sipeed Lichee Nanoを搭載。◇2023年1月 BitTradeOneより発売予定！";
size_t textlen = 0;
size_t textpos = 0;
void loop()
{
//=====================================================================
// 文字列をスクロール表示
//=====================================================================
textlen = str.length();
while (1) {
int32_t cursor_x = cBuf.getCursorX() - 1; // 現在のカーソル位置を取得し、1ドット左に移動
if (cursor_x <= 0) // カーソル位置が左端に到達している場合は一周したと判断
{
textpos = 0; // 文字列の読取り位置をリセット
cursor_x = gfx.width(); // 新たな文字が画面右端に描画されるようにカーソル位置を変更
}
cBuf.setCursor(cursor_x, 0); // カーソル位置を更新
cBuf.scroll(-1, 0); // キャンバスの内容を1ドット左にスクロール
while (textpos < textlen && cursor_x <= gfx.width()) // 画面右端に文字が書けるか判定
{
//Serial.print(str[textpos]);
cBuf.print(str[textpos++]); // 1バイトずつ出力 (マルチバイト文字でもこの処理で動作します)
cursor_x = cBuf.getCursorX(); // 出力後のカーソル位置を取得
}
cBuf.pushSprite(&gfx, 0, 0);
Sleep(10);
}
}
Windows環境でのデバッグ
Visual Studio上でデバッグ可能です。表示を拡大することにより、ドット単位で表示位置を確認することができます。
https://twitter.com/pokibon/status/1603533710460067843?s=20&t=8OfZQdGjVuRVe9Aw3BinEA
実機での動作確認
デバッグが完了したソースをAKBONE2022＋HUB75のLED PANELで実行してみました。
再現性もばっちりですね。動画でとるとLEDパネルのきれいな色が再現できないのが残念です。
https://twitter.com/pokibon/status/1603534370710507520?s=20&t=8OfZQdGjVuRVe9Aw3BinEA
まとめ
- LovyanGFX for Windowsを使うことにより、組込みデバイス書き込み前にPC上で動作確認、デバッグができるようになった。
- LovyanGFXのスプライトを使うことにより、テキストの横スクロールをちらつきなしに実現できた。