LovyanGFX で画面描画(1):Hello World

12/17(土) 開催の「低レベル勉強会2022年12月」
https://lowleveltokyo.connpass.com/event/269268/
後半のテキスト(1/3)です。

Arduino などが LCD などで画面描画するときにはグラフィックライブラリを使うと便利です。
定番のグラフィックライブラリでは多くのLCD/OLED/LEDマトリックスのコントローラICのコマンドや、配線が抽象化されて細かな違いを問題にせずに画面のドット数、接続方法などをせっていするだけで画面に描画ができるようになります。
画面の描画だけではなく、フォントの扱いやグラフィックスイメージなども扱えるようになっていて、自前でアレコレするのに比べかなり便利になっています。

グラフィックライブラリのうち、LovyanGFX を使うときは ESP32 などの デバイスを使うことになるのですが、画面のデザインは手間がかかります。

• デザイン
• プログラム
• ビルド
• デバイスに転送
• デザイン確認

のループを回さないといけないのですが結構ビルドにばかにならない時間がかかったりしてしまいます。この間は1秒でも早いほうがいいですね。

今回は LovyanGFX の基本的なところを PC 上で試し、初期のループを早く回してなれていくことにします。

環境構築

Windows の方はこちら

「LovyanGFX for Windowsを使ってみた」
https://qiita.com/pokibon/items/4f6f9b1f733ad60c708a

Linux (と多分 Mac も同じハズ) の方はこちら
「LovyanGFX for PC を Ubuntu Linux で試す」
https://qiita.com/nanbuwks/items/5ec1bf2c3c074f0b3a05

Hello World!

Arduino 環境と同じように書いていきます。

setup() と loop() 関数があり、 setup() は最初に一度だけ呼ばれます。 loop() は setup() 実行後に呼び出され、繰り返します。

#define LGFX_USE_V1
#include <LovyanGFX.hpp>
#include <LGFX_AUTODETECT.hpp>

LGFX display ( 64, 32 );

void setup()
{
  display.init();
}

void loop()
{
  display.setCursor(0,0);
  display.setFont(&fonts::Font0);
  display.setTextColor(TFT_WHITE, TFT_BLACK);
  display.setTextSize(1);
  display.print("Hello LovyanGFX World!");
} 
        

これを実行してみましょう。

ちっちゃ!

画面を大きくしてみる

LGFX display ( 128, 64 );

のように、数字を大きくしたら画面が大きくなります。

しかしながら後々実デバイスに移行して試すつもりなので、手元に実デバイスがある方はその画面サイズに合わせたいですね。

でも PC でテストしているときには 実デバイスはドット数が少ないので PC では大きく表示したいです。それについては画面拡大が使えます。

LGFX display ( 128, 64 ,5 );

とすると縦横5倍で画面表示されます。

さて、フォントを選ぶことができます。

#define LGFX_USE_V1
#include <LovyanGFX.hpp>
#include <LGFX_AUTODETECT.hpp>

LGFX display ( 256, 256 ,1 );

void setup()
{
  display.init();
}

void loop()
{
  display.setCursor(0,0);
  display.setTextColor(TFT_WHITE, TFT_BLACK);
  display.setTextSize(1);
  display.setFont(&fonts::Font0);
  display.printf("Font0\n");
  display.setFont(&fonts::Font2);
  display.printf("Font2\n");
  display.setFont(&fonts::Font4);
  display.printf("Font4\n");
  display.setFont(&fonts::Font6);
  display.printf("Font6\n");
  display.setFont(&fonts::Font7);
  display.printf("Font7\n");
  display.setFont(&fonts::Font8);
  display.printf("Font8\n");
}

このようにすると、以下のようになります。

Font6,7,8は数字だけのフォントだそうです。

もっと多くのフォントの情報はこちら