macsbug

Archive for 7月 2020

M5Stack WristWatch

leave a comment »

M5Stack WristWatch             2020.07.06

ATmage328PによるMI/O腕時計が気に入り M5Stackに移植。
時刻表示は Nixi Tube を使用しました。

もとネタ:HACKADAY.IO の MI/O Projects
ATmage328Pによる デザインに 魅了させられます。
さらに この背景画像を変更すると他のデザインが楽しめます。

M5Stack PCB Version:


.
使用方法:
.  

1. WiFi ( NTP ) 未接続は Wifi Led は Red。接続は Green に点灯。

2. RTC ( DS3231 SDA=5,SCL=13):接続は RTC ON。無い場合は RTC無しを表示。
. RTC 未接続でも NTPで時刻を表示します。
. RTC があると WiFi NTP が無い場合や 電源ON時に RTCが利用出来ます。
. 参照:2016.10.07:DS3231 RTC in ESP8266

3. A,B,C ボタンで時刻表示を切り変えます。

4. C + A ボタンで 画面の Screen Shot が撮れ SD に保存されます。
. 保存場所は SD内の ScreenShot folder です。事前にfolderを作成しておきます。

5. 一定時間毎に NTP時刻による 補正が行なわれます。


.
準備:

1. Library:ESP32-Chimera-Core v 1.0.3 入手。
.  Arduino IDE/Sketch/ include Library/Manage Libraries..でインストール。
.  M5Stack と LovyanGFX と ScreenShot Library が使用できます。
.  M5Stack Library は 重複する為 Library の外に置いておきます。
.  
2. Library:LovyanGFX 入手。
.  


.
作成:
1. HACKADAY.IO の MI/O Projects から公開画像を入手。

2. LCD Image Convereter で 画像変換 ( xxx.c )。
. 幾つかのバージョンがあり 動作する物を使用する。
. マック10.8.5 + Wine2.0 では 201701319 version を使用。
. 参考:2019.06.15:M5StickC Nixie tube Clock
. これにより 画像で部品を作成します。


.
スケッチ:
. M5Stack MI/O version:
. M5Stack_wristwatch.zip を DLします。
. Fileは PDF形式で DL後に xxx .zip に変更し解凍します。

. M5Stack PCB Version:
. M5_pcb_Wristwatch.zip を DLします。
.  修正:2020.07.12:String str = ,,, + “.jpg”); を “.bmp” に変更。

.  🍎 メモ:2020.07.13, 14:Wifi の ssid , pass について。
_ 1. M5Stackは 一度 WiFi に接続した場合、NVS領域内に ssid , password を
_  記憶する仕組みがあり、最後に接続したAPが接続対象になります。
_  よって、 WiFi.begin(ssid,pass); を WiFi.begin(); に省略しています。2020.07.14 修正。
_ 2. LovyanLauncher にWiFi設定を任せてしまうことで、
_  プログラムコード内に ssid , pass を書かなくて良くなります。


.
ScreenShot:
. 実物の画像とは 色が異なる事に気がつきました。
.  
. M5_PCB の ScreenShot
.  


.
感想:
元ネタの ATmage328Pによるデザインは ジックリ見る程 魅せられました。
購入での費用や 工作は難しく時間もかかります。
そこで 画像で試そうと M5Stackへ移植。
ただし、一番見たい ATMEGA328P の文字は画像が小さく見えません。
M5Stack は 画像のデザインで追加や新機能ができます。
WiFi接続で さらに多くの事ができます。
機能や画像表現は 画像の部品を取り揃える事で かなりの事が出来る様になります。

詰めの甘い所が あるかも知れません。時計は奥が深く 勉強が必要です。

WiFi 接続:ssid, pass の省略方法を熟知していませんでしたが、
. らびやん氏から省略出来る方法のアドバイスを頂きました。感謝致します。


M5Stack , WiFi , RTC , DS3231 , NTP ,

Written by macsbug

7月 6, 2020 at 4:11 pm

カテゴリー: M5STACK

LovyanGFX LCD Graphics driver

leave a comment »

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 です。

使用方法:3つの方法。
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 2つの いずれかで DLします。
. A:github から LovyanGFX をDL。
. B:Arduino IDE/Sketch/include Library/Manage Libraries..でインストール。
.   
. 動作確認: LovyanGFX 内にある examples を試します。
.  サンプルは 驚異的な速度で動きます。
.
. 事例:機種とスケッチ:Wio Terminal ( SAMD51 )
. 詳細:動作状況に記載。
. 結果:Wio Terminal + LovyanGFX で 約4秒 から 2秒 。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 の入手:3つの方法。
.    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-CoreLovyanGFX Libraryが使用できます。

. 3. スケッチの事例:以下は基本的な記述です。
.   Know-how:以下の2つは 速度向上の効果があります。
.   #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 1つで書かれています。
. この様に 抽画は1つでできており優秀な記載方法で勉強になります。
. これを 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 が無難。
.  1つ1つの記述で 効果があり 楽しくなります。
.  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 at 8:10 am

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