6月 | 2021 | macsbug

Archive for 6月 2021

How to run LVGL on M5Stack ( ESP32 )

LVGL を M5Stack ( ESP32 ) で動かす方法。　　　　　　　　　　　2021.06.18

LVGL ( Light and Versatile Graphics Library ) は綺麗な表示と多彩な機能の
グラフィックライブラリです。

lv_demo_widgets：このデモから必要な表示を取り出して使用する事ができます。

1.　開発機種：MacBook Pro (16-inch, 2019) , macOS Catalina Ver 10.15.7
2.　開発環境：Arduino IDE 1.8.15
3.　開発環境：Board Manager：ES32 Arduino 1.0.6
4.　Library：m5stack / M5Stack
5.　Library：LVGL ( LittleVGL )：lv_arduino
6.　Library：TFT-eSPI：ESP32で使用します。
7.　Library：LGFX；LovyanGFX：高速化が可能です。
8.　HARD ：M5Stack, ESP32
.

準備：
LVGL Libray Install：これで LVGL を使用する事ができます。
_　Arduio IDE のライブラリマネージャを開き 🔴「lv_arduino」を Install します。
_　「lv_arduino」には Arduino IDE 開発環境で動作する「lvgl」が含まれています。

_　注意：lv_exsample , lvgl は、Arduino IDE 開発環境では使用できません。
.

_　資料：
1.　Espressif (ESP32) — LVGL documentation v7.11.0-dev
_　
2.　ESP32 Modules Now Support LittlevGL and μGFX　Jan 4,2019
_　　espressif は LittlevGL and μGFX をサポートするようになりました。( ESP-IDF )
3.　ESPRESSIF : LVGL Graphics Library Document があります。
4.　注意：lvgl/lv_port_esp32 ：開発環境は ESP-IDFで Arduino IDEでは使用出来ません。
.

デモを動かしてみます。
_　動かして表示や操作のイメージを体験し LVGL の機能を把握できます。
1.　LVGL_Core2
2.　LVGL_ESP32_Test_1
3.　LVGL_Core2 M5Stack版
4.　lv_demo_widgets
5.　lv_demo_benchmark ( + LovyanGFX )
6.　LVGL_Sin_Cos_Graph

✳️ M5Core2 Demo：LVGL ForumのHow-toにあるスケッチはタッチ操作で動作します。
_　以下の場所で Down Load できます。
_　M5Core2 slow fps. Scrol slider breaks when moving horizontally
_　DownLoad：LVGL_Core2.zip：DL後 pdfを削除しzipを解凍します。

M5StackのDemo：
✳️ LVGL_ESP32_Test_1：Arduino forumにある Bodmer氏(TFT-eSPIの作成者)作成の
_　「LVGL_ESP32_Test_1」があります。
_　構成は ESP32 + TFT Touch Display + TFT-eSPI Library で動作します。
_　Real-world LVGL demo example? で DownLoadできます。
_　その「LVGL_ESP32_Test_1」を M5Stackに移植しました。表示サイズは 240×320 です。
_　DownLoad：LVGL_ESP32_Test_1_M5Stack.zip：DL後 pdfを削除しzipを解凍します。
_　タッチ操作はできませんが Slider , Button, Color_Picker を表示します。
_　ESP32 + TFT Touch Panel Display ではタッチ操作で動作しています。
_　スケッチは解りやすく参考になり Slider や Button の追加が出来る様になります。

_　3.5″ 320×480 SPI ILI9488 Touch Display と ESP32 で構成した例です。
_　既にある Slider, Button をコピーして配置。Sliderは幅を変更すると縦方向を表示します。

✳️ M5Core2 DemoをM5stackへ移植；M5Stackの A,B,C Button で Tabを操作します。
_　DownLoad：LVGL_M5Stack_ver.zip：DL後 pdfを削除しzipを解凍します。

Core2のタッチパッド：
_　my_touchpad_read の M5.Touch.getPressPoint(); で x,y を読んでいます。
_　data point は x,y。dada state は LV_INDEV_STATE_PR を取得します。

bool my_touchpad_read(lv_indev_drv_t * indev_driver,
                      lv_indev_data_t * data){
  TouchPoint_t pos = M5.Touch.getPressPoint();
  bool touched = ( pos.x == -1 ) ? false : true;
  if(!touched) {
    data->state = LV_INDEV_STATE_REL;
  } else {
    data->state = LV_INDEV_STATE_PR; 
    /*Set the coordinates*/
    data->point.x = pos.x;
    data->point.y = pos.y;
  }
  return false; 
}

my_touchpad_readの中のタッチパッド(x,y)を M5Stackの A,B,C Button に置き換えます。
A Button は Tab1を選択、B Button は Tab2を選択、C Button は Ta3を選択します。

int xp=10, yp=10;
bool my_touchpad_read(lv_indev_drv_t * indev_driver,
                      lv_indev_data_t * data){
  // A Button ---------------------------------------------------------
  if (M5.BtnA.wasPressed()){  // tab 1 : A Button
      data->point.x = xp; data->point.y = yp; // mouse position x,y
      data->state =LV_INDEV_STATE_PR; M5.update(); return false;}
  // B Button ---------------------------------------------------------
  if (M5.BtnB.wasPressed()){  // tab 2 : B Button
      data->point.x = screenWidth/2; data->point.y = yp;
      data->state =LV_INDEV_STATE_PR; M5.update(); return false;}
  // C Button ---------------------------------------------------------
  if (M5.BtnC.wasPressed()){  // tab 3 : C Button
      data->point.x = screenWidth -10; data->point.y = yp;
      data->state =LV_INDEV_STATE_PR; M5.update(); return false;}
  // No button operation ----------------------------------------------
      data->state =LV_INDEV_STATE_REL;M5.update(); return false;
}

Button入力と処理の流れ：
my_touchpad_readから data(x,y) と LV_INDEV_STATE_PR を setup内の
indev_drv.read_cb = my_touchpad_read; に送られタッチパッドの様に動作します

void setup() {
  // Initialize the (dummy) input device driver
  lv_indev_drv_t indev_drv;
  lv_indev_drv_init(&indev_drv);
  indev_drv.type = LV_INDEV_TYPE_POINTER;
  indev_drv.read_cb = my_touchpad_read;  // ***
  lv_indev_drv_register(&indev_drv);
}

✳️ lv_demo_widgets：
lvgl/lv_demosに「lv_demo_widgets」があり LGVL の多様な機能を見ることができます。

_　「lv_demo_widgets」をM5Stackへ移植し、デモを見る事ができます。
_　DownLoad：lv_demo_widgets_M5Stack.zip：DL後 pdfを削除しzipを解凍します。
.
_　M5Stack Core2 用の lv_demo_widgets でタッチ操作で動きます。
_　DownLoad：lv_demo_widgets_M5Core2.zip：DL後 pdfを削除しzipを解凍します。
.

✳️ lv_demo_benchmark：
_　ベンチマークテストを M5Stack と M5Stack + LovyanGFX で実施しました。
_　 LovyanGFX ( LGFX ) は高速化に効果があります。

_　結果：
_　M5Stack　only　：FPS = 42 , Opa. speed = 88%
_　M5Stack + LGFX：FPS = 47 , Opa. speed = 87%
_　DownLoad：lv_demo_benchmark_M5Stack.zip：DL後 pdfを削除しzipを解凍します。
_　DownLoad：lv_demo_benchmark_LGFX_M5Stack.zip：DL後 pdfを削除しzipを解凍します。

Library と Display 命令 ( インスタンス ) について。
_　M5Stackで、Display 命令を M5.Lcd や tft で記述します。

_　M5Stack：M5.Lcd

#include <lvgl.h>;
#include <M5Stack>;
#include "lv_demo_benchmark.h"
//
M5.Lcd.setRotation(1);

.
_　TFT-eSPI：tft

#include <lvgl.h>
#include <TFT_eSPI.h>
#include "lv_demo_benchmark.h"
TFT_eSPI tft = TFT_eSPI();

.
_　M5Stack + TFT-eSPI：tft

#include <lvgl.h>;
#include <M5Stack>;
#include "lv_demo_benchmark.h"
TFT_eSPI tft = TFT_eSPI();

.
_　LovyanGFX：tft

#define LGFX_USE_V1
#define LGFX_AUTODETECT
#include <lvgl.h>;
#include <LovyanGFX.hpp>;
static LGFX tft;
#include "lv_demo_benchmark.h"
//
tft.setRotation(1);

✳️ LVGL_Sine_Cos_Graph：
_　akirahitosi氏作製の LVGLでの随時更新の有るグラフ描画　2021/05/20
_　を M5Stackへ移植しました。akirahitosi氏に感謝致します。
_　DownLoad：LVGL_Sin_Cos_Graph_M5Stack.zip：DL後 pdfを削除しzipを解凍します。
_　横軸は 200msec とかの時間軸になっています。
_　この様な高速表示が必要なLibraryは LovyanGFX を使用すると滑らかに表示します。
_　画面サイズの大きい物を使用する場合は特に効果があります。

_　M5Stack + LovyanGFX + 3.5″ 320×480 SPI ILI9488 Display を使用した例
_　上は M5Stack。下は M5Stack + LovyanGFX で高速で滑らかに表示します。

感想：
LVGLは 2018年から登場しました。LVGL Forumではレベルの高い人が回答しています。
LVGLに対する Arduino IDE, ESP32, M5Stackに関する情報は現在少ないです。
中国サイトを検索すると、情報があり若い人への積極的な取り組みがされています。
情報源として日本国内は少なく LVGL Forum や中国サイトがあります。
：
M5Stack社は LVGLを基に UiFlow へ移植(移植中)を進めています。
その為に LVGLの表示や機能は制限されたり遅れる事になります。
M5Stack Forumにおける LVGLの質問への回答は UiFlowにより積極的ではありません。
一方 TTGO社では TWatchのタッチパネルの為に LGVLを採用し積極的です。
seeed社は Wio Terminal での説明や githubに移植した LVGLのSampleがあり積極的です。
seeed社でのLVGLの説明は丁寧で技術的にも読み応えのある内容です。
：
使用する条件は Arduino IDE, ESP32, M5Stack です。
よって LVGLのDocumentが基本ですが書かれている内容が全て動作するとは限りません。
動かない情報もありますので、切り分けて進めた方が良いかと思います。
：
何も解らず始めています。初めての LVGLで説明が不十分な点もあるかと思います。
LVGLは命令数が非常に多く大変ですが表現力は多彩で高機能を期待できます。
LVGLの一つの表示だけでも、これまでのDraw命令の方法で作ると大変です。
LVGLは一つの表示だけでも、さらに多彩な表現ができ驚きます。
備忘録として、デモを体験する事を目指しました。画像から何かが得られたらと思います。
デモの次の課題はメーターとか１つの表示と、その入力はどの様にするかです。
ハードのスイッチやデジタル、アナログ信号を接続できると反応があり楽しくなるかと思います。

LovyanGFX で動作させる方法は LVGL with M5Stack Part 2 をご覧下さい。

.
.
M5Stack , ESP32 , LVGL , LittleVGL , LGFX , LovyanGFX , lv_arduino , lv_demo_widgets ,
lv_demo_benchmark ,

Written by macsbug

6月 18, 2021 at 4:35 pm

カテゴリー: ESP32, M5STACK

macsbug

Archive for 6月 2021

How to run LVGL on M5Stack ( ESP32 )

最近の投稿

アーカイブ

カテゴリー

メタ情報