LovyanGFX LCD Graphics driver

LovyanGFX LCD Graphics driver　　　　　2020.07.02
.　　　　　　　　　　　　　　　　　　　　　rev 1 : 2020.07.04 : M5.Lcd.startWrite();
LovyanGFX：
.　らびやん(lovyan03)氏作成による ESP32 ( M5Stack ) や
.　SAMD51 ( Wio Terminal ) の LCDグラフィックスドライバーです。
.　Hardware SPI LCD Display に対応し高速に動作させる事ができます。
.　解説と使用方法は LovyanGFX に丁寧に書かれていますのでお読み下さい。
.　開発されたらびやん(lovyan03)氏に感謝致します。

Pacman

M5Stack Library : 9〜18 msec から
LovyanGFX Library : 1〜2 msec を達成！

PACMAN_Joy_GFX.zip

.
Boing Ball：TFT_e SPI / DMA Test にある example です。
. Wio Terminal の Seeed_Arduino_LCD Libraryは DMA機能無し。
. Wio Terminal + LovyanGFX と M5Stack + LovyanGFX を動かす。
. M5Stack は 86 fps 。M5 + LovyanGFX は 175 fps 。2倍の高速化。
. Wio Terminal の設定：SPI_FREQUENCY 50000000 。
. M5Stack の設定：SPI_FREQUENCY 40000000 。

Boing Ball

Wio Terminal + LovyanGFX : 232 fps
M5Stack + LovyanGFX : 175 fps
M5Stack : 86 fps

Wio Terminal : Wio_boing_ball_GFX.zip
M5Stack : boing_ball_GFX.zip

.　＊ DL fileは pdf(WordPressの都合)です。.pdf を削除し .zip を解凍します。
.
Target Display： ILI9341, ILI9342, ILI9486, ILI9488, ILI9163, HX8357,
_　ST7735, ST7789, SSD1351
_　M5Stack は ILI9341, ILI9342。 Wio Terminal は ILI9341 です。

使用方法：３つの方法。
1. LovyanGFX のみで使用。
2. M5Stack と共存：M5Stackの命令を使用可能。例： Switch操作。
3. ESP32-Chimera-Core と共存：M5Stackの命令を使用可能。

使用機種と価格：ESP32 / SAMD51 : 2020.06.26

No.	Nomen	Purchase	Price
1	ESP32-DevKitC	秋月電子通商	1480円
2	ESP-WROOM-32D	秋月電子通商	1480円
3	ESP32 Development , same as No.1	LANDZO ELECTRONIC , $5.54+$1.05=$6.59	705円
4	ESP32-WROOM-32D , same as No.2	Diykitmall Store , $3.91+$1.02=$4.93	528円
5	D1 mini ESP32	Buy Go Go Store Store , $3.67+$0.78=$4.45	477円
6	M5Stack Basic ( ESP32 )	M5Stack Official Store , $27.95+$8.36=$36.31	3890円
7	M5Stack Gray ( ESP32 )	M5Stack Official Store , $33.95+$8.36=$42.31	4533円
8	M5Stack Fire ( ESP32 )	M5Stack Official Store , $49.95+$10.25=$60.20	6450円
9	Wio Terminal (SAMD51)	秋月電子通商：3680円税込	3680円
10	Wio Terminal (SAMD51)	marutsu ：3700円税抜	3996円
11	Wio Terminal (SAMD51)	FeedoK Store,：$50.60	5414円

.
使用方法：3つの方法。
1. LovyanGFX , 2. M5Stackと共存 , 3. ESP32-Chimera-Core と共存
.
1. LovyanGFX のみで使用：LovyanGFX : lovyan03 : ver 1.0.14
.　以下 A, B ２つのいずれかで DLします。
.　A：github から LovyanGFX をDL。
.　B：Arduino IDE/Sketch/include Library/Manage Libraries..でインストール。
.　　　
.　動作確認： LovyanGFX 内にある examples を試します。
.　　サンプルは驚異的な速度で動きます。
.
.　事例：機種とスケッチ：Wio Terminal ( SAMD51 )
.　詳細：動作状況に記載。
.　結果：Wio Terminal + LovyanGFX で約4秒から 2秒。２倍の高速化を達成！
.　　　　

2. M5Stack と共存：
.　LovyanGFX には「include M5Stack.h より後に include LovyanGFX.hpp
.　　を書いてください。M5.Lcdは使わずに、別途LGFXのインスタンスを
.　　用意して使用してください。」と書かれています。
.　M5.Lcd を tft への変更は手間がある事と把握不足の為に今回は省きます。

.
3. ESP32-Chimera-Core と共存：M5Stackの命令を使用可能。
.　LovyanGFX には「ESP32-Chimera-Core を利用すると、M5.Lcd が
.　　 LovyanGFX になります。」と書かれています。
.　開発環境：Arduino IDE 1.8.13
.　Library 準備：Versionは最新版を確認。多くのエラーは Ver の不一致です。
. 　🍎 の Manage Libraries..でインストールが簡単です。

.　1. ESP32-Chimera-Core の入手：３つの方法。
. 　　　Libraryに M5Stackがあれば Library Folder外に移動しておきます。
.　　　理由：ESP32-Chimera-Core には M5StackのLibraryが含まれ重複する為。
.　　　解決：M5stack Library は使用せず ESP32-Chimera-Core Library で可能です。
.　A.　ESP32-Chimera-Core v 1.0.3 : tobozo : 左記のURLからDL。
.　B.　ESP32-Chimera-Core-lgfx : lovyan03 : 左記のURLからDL。
.　　　A 又は B を DL し Library Folder へ入れます。もしくは以下の
.　C.　🍎 Arduino IDE/Sketch/ include Library/Manage Libraries..でインストール。
.　　　
.
.　2. LovyanGFX の入手と配置。
.　　　LovyanGFX : lovyan03 : ver 1.0.14 : 左記のURLからDL。
.　　　又は以下の方法で Library内にインストール。
.　　　🍎 Arduino IDE/Sketch/ include Library/Manage Libraries..でインストール。
.　　　
.　　　Library内の構成：追記 ( rev 1 : 2020.07.04 )
.　　　　
.　これで ESP32-Chimera-Core と LovyanGFX Libraryが使用できます。

.　3. スケッチの事例：以下は基本的な記述です。
.　　　Know-how：以下の２つは速度向上の効果があります。
.　　　#pragma GCC optimize (“Ofast”)
.　　　M5.Lcd.startWrite(); // Release SPI bus

#pragma GCC optimize ("Ofast")
#include <ESP32-Chimera-Core.h> // Contains LovyanGFX
#include "M5StackUpdater.h" // SD-Upadate
void setup() {
M5.begin();
Wire.begin();
if(digitalRead(BUTTON_A_PIN)==0){updateFromFS(SD);ESP.restart();}
M5.Lcd.startWrite();  // Release SPI bus
M5.Lcd.setRotation(1);
M5.Lcd.fillScreen(TFT_BLACK); }

動作状況：
.　1. M5Stack Fire ( ESP32 ) と Wio Terminal ( SAMD51 )
.　　M5Stack , Wio Terminal と Library の速度
.　　Wio Terminal は M5Stack より速い。
.　　メモ：LovyanGFXの効果は命令にもよります。
.　　　　　M5.Lcd.pushImageDMA 命令は高速で動作します。
.　2. スケッチ：Raytrace：drawPixel , fillRect 命令を使用。
.　メモ：2020.07.04 ：M5.Lcd.startWrite(); 正しい位置は
.　　　　上記記載の基本的な記述と同じく SD操作の後にしてください。

tft.drawPixel(x, y, RGBTO565(r,g,b));
tft.fillRect(x, y, q, q, RGBTO565(r,g,b));

Model / result	Library	Time sec	Source
M5Stack Fire	M5Stack	6.280	Raytrace_M5Stack.zip
M5Stack Fire	ESP32-Chimera-Core	3.875	Raytrace_GFX.zip
M5Stack Fire	LovyanGFX	3.862	Raytrace_LovyanGFX.zip
Wio Terminal	Seeed_Arduino_LCD	3.362	Wio_Raytrace_sd.zip
Wio Terminal	LovyanGFX	1.945	Wio_Raytrace_GFX.zip

Wio Terminal
Sketch / Library	LovyanGFX	memo
Raytrace	◯	動作状況参照
Tetris	◯	Wio_Tetris.zip
Packman	◯	Wio_Packman.zip
nixie_tube_clock	◯	Wio_nixie_tube_clock.zip
audio_spectrum_display	◯	Wio_audio_spectrum_display.zip
uncannyEyes	◯	Wio_uncannyEyes_GFX.zip
ThermalCamera	◯	ThermalCamera_GFX.zip : 4 fps
Thermal_Camera_AMG8833	◯	Wio_ThermalCam_AMG8833_GFX.zip , 5 fps が 13 fps にアップ。2.6 倍向上。

M5Stack
Sketch / Library	LovyanGFX	memo
uncannyeyes	◯	M5_uncannyEyes_GFX.zip
.
.

.
.　ゲームは高速化と共に適度な速度が必要です。
.　上記のSketchは参考程度にしてください。

🍎 高速化のノウハウ：Pacman
.　抽画は DrawIndexedMap.h 内の drawFastHLine １つで書かれています。
.　この様に抽画は１つでできており優秀な記載方法で勉強になります。
.　これを LovyanGFX の pushImageDMA で記載すると高速になります。
.

// Original
#define C16(_rr,_gg,_bb) ((ushort)(((_rr & 0xF8) << 8) | 
                  ((_gg & 0xFC) << 3) | ((_bb & 0xF8) >> 3)))

void drawIndexedmap(uint8_t* indexmap, int16_t x, uint16_t y) {
  byte i = 0;
  uint16_t color = _paletteW[indexmap[0]];
  for (byte tmpY = 0; tmpY < 8; tmpY++) {
    byte width = 1;
    for (byte tmpX = 0; tmpX < 8; tmpX++) { uint16_t next_color = _paletteW[indexmap[++i]]; if ((color != next_color && width >= 1) || tmpX == 7) {
        M5.Lcd.drawFastHLine(x + tmpX - width, y + tmpY, width, color);
        color = next_color;
        width = 0;
      }
      width++;
    }
  }
}

// Revision
#define C16(_rr,_gg,_bb) lgfx::swap565(_rr, _gg, _bb)

void drawIndexedmap(uint8_t* indexmap, int16_t x, uint16_t y) {
  static uint16_t dmabuffer[2][64];
  static bool dmaflip;
  int i = 0;
  do {
    dmabuffer[dmaflip][i] = _paletteW[indexmap[i]];
  } while (++i < 64);
  M5.Lcd.pushImageDMA(x, y, 8, 8, dmabuffer[dmaflip]);
  dmaflip = !dmaflip;
}

🍎　高速化のポイント：以下の宣言や変数の設定により速くなります。
.　　#pragma GCC optimize (“Ofast”)　：冒頭に記載。速度優先のビルドが行われます。
.　　M5.Lcd.startWrite();　　　　　　　： SPI BUSを解放する。場所はSD宣言の後。
.　　int_fast8_t　　： int8_t を置き換えるとバイナリサイズが小さく動作が速くなる。
.　　int_fast16_t　： int16_tを置き換えるとバイナリサイズが小さく動作が速くなる。
.
.　　32bitCPU に 8bit や 16bit の変数は余分な処理が増えバイナリが大きく遅くなる。
.　　最終的にコンパイラによってint32_tと同じものとして扱われる。
.　　コンパイラはCPUに合わせて最適なサイズを選ぶ。
.　　人の目で見ても必要なバイト数が判断できる。
.　　for (uint8_t i = 0：節約のつもりが逆に遅くなる。
.　　int_fast～は記述が長くなり特に型に頓着しない場合は素直に int が無難。
.　　１つ１つの記述で効果があり楽しくなります。
.　　DMA 命令：pushPixelsDMA, pushImageDMA, initDMA, waitDMA
.
.
.　　スケッチの事例：PACMAN_Joy_GFX.zip：232 FPS
.
.　　上記のノウハウはらびやん氏に教えて頂き大変勉強になりました。
.

参照：
2020.04.12：lovyan03/LovyanGFX：公開。Twitter情報。
2020.04.29：ラズパイスキノニッキ：LovyanGFXの導入の仕方
2020.05.01：Lang-ship：M5StickCのDisplay周り解析その4 LovyanGFXで高速描画
2020.05,20：HomeMadeGarbage：MakePython ESP32 Color LCD で LovyanGFXを堪能
2020.05.20：Qiita, @karaage0703：M5 Stack/M5 StickC/Wio Terminalで使える
 _　　　　　　高性能グラフィックライブラリ「LovyanGFX」
2020.05.30：Arduino Library List：LovyanGFX： First Release Date：2020.05.30
2020.06.04：Lang-ship：M5StackでLovyanGFXを試すその1 メモリの確認
2020.06.29：Qiita, @poruruba：LILYGO TTGOのT-Wristbandで
 _　　　　　　グラフィックライブラリLovyanGFXを使ってみた
2020.xx.xx：ArduBadge：What is LovyanGFX?

感想：
画像表示好きで夢は高速の Graphics Library。
各種Display や M5Stackの Library は使用できますがさほど高速で無い。
まして自分で高速 Libraryを作れるベレルは無しと言う壁に突き当たる。
行き着いたのは Bodmer氏の TFT_eSPI Library。

2017.08.end：M5Stack もどき。
2017.09.12：M5Stack Copy版入手。
2017.10.24：公式 M5Stack Store 販売開始。
2017.11.18：M5Stack：M5Stack Storeから着：2017.10.23-2017.11.18

2020年4月12日に念願の LovyanGFX が公開されました。
早々にサンプルを試し、その高速性に驚きました。
どうしてここまで速く動くのか？　レベルが高すぎるが楽しい！
LovyanGFX Library の中を見ると莫大な量と高度な内容に圧倒されました。
複数の機種や多種類のSPI LCD Displayにも対応した配慮も同様です。
TFT_eSPI Libraryは現在のSprite装備まで長年かかって進化した経緯がある。
それに対し短期間にこれだけの内容が出来た事に驚きそのパワーに驚嘆します。
その事は LovyanGFX Library に書かれている事とCredits に書かれている
方々の謝辞にもあります。
これほどまでの内容を作れるらびやん氏に敬意と感謝の限りです。

ESP32-Chimera-Core：
Library には M5Stack が含まれています。使用する時は M5Stack を外します。
Library には ScreenShot 機能があり画面をSDに保存できます。

SD は SPI Busを使用します。 LovyanGFX も SPI Busを使用します。
その為に最初に M5.Lcd.startWrite(); を記載し最後に M5.Lcd.endWrite();
を記載します。SPI Bus の開放と閉鎖です。
画面の画像を使用する事により綺麗で解りやすくできます。

この記事の記載は 2020.07.02。力量不足により内容の不備があるかと思います。
Library の Version 変更や方式の変更で内容が変わる事も考えられます。
Library Version 変更により 2020.07.04 にて追記、及び変更を行いました。

LovyanGFX , TFT_eSPI , らびやん , lovyan03 , Bodmer , tobozo , M5Stack ,
Wio Terminal ,

Written by macsbug

7月 2, 2020 @ 8:10 am

カテゴリー: ESP32, M5STACK, Wio Terminal

macsbug