App:Library:LVGL

提供: robot-jp wiki
ナビゲーションに移動検索に移動

Arduino IDE + LVGL8.3.3

注:LVGL8.3.3ArduinoIDEからインストールできるます<BR />
  いくつかのバグもありますが、バグは回避しながら使いましょう。

install

Arduino IDE

Arduino公式ページ または Windows Store からインストールして下さい。
ESP32を使えるように、追加のボードマネージャーを設定します。

"ファイル"→"環境設定"→"追加のボードマネージャーのURL"
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json

library

lv_Arduino

lv_arduinoがインストールされているとライブラリの重複でうまく動かないため、
先にライブラリフォルダからフォルダ丸ごと削除して下さい。
削除すれば次にArduinoIDEを起動した時に自動で認識されます。
ライブラリフォルダの場所は、"ファイル"→"環境設定"→"スケッチブックの保存場所" の "libraries" フォルダ内です。

Arduino IDEを起動、"ツール" → "ライブラリを管理..." → 検索:"LVGL"

LVGL Ard install 01.jpg

"lv_arduino" をインストールします。

次に、ライブラリをインストールしたフォルダ 〜/lvgl/ の中にある "lv_conf_template.h" を 1個下の階層にコピーして、さらにファイル名を"lv_conf.h"に変更します。

  (library folder)/lvgl/lv_conf_template.h
          /lv_conf.h

さらにこの"lv_conf.h"をテキストエディタで開き、最初の辺りにある "#if 0"を"#if 0"に書き換えて保存します。 これでLVGLが有効になります。

以上でインストール完了です。

LVGLの解説

https://www.arduino.cc/reference/en/libraries/lvgl/




動作確認

ここでは TFT_eSPI + LVGL8.3.3 の組み合わせで動作確認をします。

以下、書きかけです!!!!


TFT_eSPIは結線情報をヘッダーファイル(User_Setup.h)内に保存するため、色々なスケッチ例をほぼ変更なしで動かす事ができます。

※TFT_eSPI の代わりに LovyanGFX+LVGLで動作確認したい場合の動作確認の方法は
  (日本語字幕)LVGL8:Ep0.GFX Setup(ft.LovyanGFX)を参照してください。
 正直、LovyanGFXの方が良いのですが、ここではTFT_eSPIについて書きます。


TFT_eSPIのインストール

ディスプレイドライバ TFT_eSPI をインストールします。

スケッチ例で動作確認

LVGLの動作確認①

タッチセンサと画像表示の両方を確認するため、スライダーを動かすスケッチ例を動かします。
"ファイル" → "スケッチ例" → "lv_arduino" → "ESP32_TFT_Slider"
スライダーを操作できれば動作確認完了です。

LVGLの動作確認②

もう少し凝ったスケッチ例を Bodmer氏(TFT_eSPI の作者)が公開されています。
せっかくなので実行してみましょう。
Real-world LVGL demo example?ここのbodmer氏の投稿にある
LVGL_ESP32_Test_1.zip (3.45 KB)
これをダウンロード・解凍すると現れるフォルダの中に次のファイルがあります。

LVGL_ESP32_Test_1
Callbacks.ino
Loop.ino
LVGL_ESP32_Test_1.ino
Setup.ino

これを実行ファイルを置いているフォルダにフォルダごとコピーします。
実行ファイル置いてあるフォルダの場所は、デフォルトでは次の場所になっています。
"■"はPCにログインしているアカウント名です。

Linux /home/■/Arduino/projects/
Windows C:\Users\■\Documents\Arduino

LVGL_ESP32_Test_1.ino を実行します。

スライダー等が表示されて操作できれば動作確認完了です。

問題点のメモ

LVGL8.3.3は色々と未完成な部分が多い印象です。

機能 問題点 回避策
TFT_eSPI TFT_eSPIとセットで使うと、TFT_eSPIが出力するxy座標の画素数の計算がxyで逆になってしまい、画像の縦横比と合わない。

(LovyanGFXでは正常)

各軸の分解能比で補正。

 dat->point.x = touchX*4/3;

 dat->point.y = touchY*3/4;

又は、LovyanGFXを使う。

timer LVGLはArduinoのタイマーをch番号の小さい方順に使うっぽくて、LEDの明るさ制御等にタイマーを使うと衝突してうまく動かない事がある。 衝突しないchを探る
timer lv_timerを使うと、

1.動作回数の指定が効かない。

2.pauseは効くけど、resumeできない。

1.別で回数をカウントして最後にtimerをdelete

2.deleteは効くので、一旦消してからresumeするタイミングで再びタイマーを再定義する。

xTask xTaskCreateで並列処理させるとGuru Error多発。 lv_timerを使う。

タイミングの制約がある場合には他のタイマーを止める等で対策をする。

Tutorial : LVGL8

https://docs.arduino.cc/tutorials/portenta-h7/creating-gui-with-lvgl

Tutorial Video:lv_arduino

by That Project

github
YouTube
No. YouTube 内容 lvgl TFT_eSPI LovyanGFX SquareLine code
0 (日本語字幕)LVGL8 : Ep 0. GFX Setup (ft. LovyanGFX) LVGL+LovyanGFX

・LovyanGFXの初期設定

・タッチディスプレイのcalibration data取得 ここでタッチディスプレイの calibration data を得るため、下記Videoを見る前に実施しておく事。

github
1 (日本語字幕)ESP32 :LVGL8 : Ep 1. Demos with LILY PI github
2 (日本語字幕)ESP32 :LVGL8 : Ep 2. Shortcuts for Pull Stack Developer

Fullでなく、Pullスタックの開発者のためのショートカットキー

ESP32をキーボードとして使う github
3 ESP32 :LVGL8 : Ep3.Ep 3. Base Project for WiFi Settings

WiFi設定の基本プロジェクト LVGL8 Base roject

For Selecting WiFi Dynamically

WiFi接続・時刻取得・ github
4 QR Code Maker (ESP32+LVGL8) github
5 Make your own System Monitor with ESP32 + LVGL 8 github
LVGL8 | Ep 3. Base Project for WiFi Settings]

Arduino IDE + lv_arduino

lv_Arduino (Arduino向けLVGL ver3)

注:lv_Arduinoは古くて現在のLVGLとはあまり互換性がありませんが、新しいLVGLより軽く動きます
  いくつかの重大なバグもあるため、LVGL Ver8以降をお勧めします

install

Arduino IDE

Arduino公式ページ または Windows Store からインストールして下さい。
ESP32を使えるように、追加のボードマネージャーを設定します。

"ファイル"→"環境設定"→"追加のボードマネージャーのURL"
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json

library

lv_Arduino

Arduino IDEを起動、"ツール" → "ライブラリを管理..." → 検索:"LVGL"

LVGL Ard install 01.jpg

"lv_arduino" をインストールします。

lv_arduinoは旧版で、既にサポートされていません。新しいライブラリは lvgl , lv_example です。

しかし、Arduino IDE にライブラリマネージャからインストールした場合に

そのまま動作するのは lv_arduino である事から、ここでは lv_arduino を使用します。
同時に lvgl , lv_example がインストールされているとライブラリの重複で動作しなく

なるため、 lvgl , lv_example を消して下さい。

フォルダ丸ごと消してからアプリを再起動すればアンインストール完了です。
場所は、"ファイル"→"環境設定"→"スケッチブックの保存場所" の "libraries" フォルダ内です。

以上でインストール完了です。

LVGLの解説

https://www.arduino.cc/reference/en/libraries/lvgl/




動作確認

ここでは TFT_eSPI + LVGL の組み合わせで動作確認をします。
TFT_eSPIは結線情報をヘッダーファイル(User_Setup.h)内に保存するため、色々なスケッチ例をほぼ変更なしで動かす事ができます。

※TFT_eSPI の代わりに LovyanGFX+LVGLで動作確認したい場合の動作確認の方法は
  (日本語字幕)LVGL8:Ep0.GFX Setup(ft.LovyanGFX)を参照してください。


TFT_eSPIのインストール

ディスプレイドライバ TFT_eSPI をインストールします。

スケッチ例で動作確認

LVGLの動作確認①

タッチセンサと画像表示の両方を確認するため、スライダーを動かすスケッチ例を動かします。
"ファイル" → "スケッチ例" → "lv_arduino" → "ESP32_TFT_Slider"
スライダーを操作できれば動作確認完了です。

LVGLの動作確認②

もう少し凝ったスケッチ例を Bodmer氏(TFT_eSPI の作者)が公開されています。
せっかくなので実行してみましょう。
Real-world LVGL demo example?ここのbodmer氏の投稿にある
LVGL_ESP32_Test_1.zip (3.45 KB)
これをダウンロード・解凍すると現れるフォルダの中に次のファイルがあります。

LVGL_ESP32_Test_1
Callbacks.ino
Loop.ino
LVGL_ESP32_Test_1.ino
Setup.ino

これを実行ファイルを置いているフォルダにフォルダごとコピーします。
実行ファイル置いてあるフォルダの場所は、デフォルトでは次の場所になっています。
"■"はPCにログインしているアカウント名です。

Linux /home/■/Arduino/projects/
Windows C:\Users\■\Documents\Arduino

LVGL_ESP32_Test_1.ino を実行します。

スライダー等が表示されて操作できれば動作確認完了です。

Tutorial : lv_arduino

https://docs.arduino.cc/tutorials/portenta-h7/creating-gui-with-lvgl

Tutorial Video:lv_arduino

by That Project

github
YouTube
No. YouTube 内容 lvgl TFT_eSPI LovyanGFX SquareLine code
ESP32Berry, "WiFi connection & Simple Note App" Version 0.1 Group: ESP32+LVGL Projects
0 Part.0 -

Touch Display Setup for Simple Note App📝

配線

I/O Port 設定

TFT_eSPI インストール

タッチ位置調整

LCD向き設定(横長)

1 Part.1 - Basic LittlevGL for Simple Note App📝
2 Part.2 - By LittlevGL for Simple Note App📝
1/2 ChatApp:ESP32 + ESP-NOW + LVGL7

Part 1/2 - LVGL GUI Layout

ESP-NOWとは:ESP同士で通信する機能

キー入力画面の作り方

github
2/2 ChatApp:ESP32 + ESP-NOW + LVGL7

Part 2/2 - ESP-NOW bidirectional Comm (Primary - Secondary)

github
1/2 ESP32 Dynamic WIFI configuration GUI using LVGL7.x

Part 1/2 - Basic Setting

インストール:TFT-eSPI, lv_arduino

TFT_eSPI:タッチセンサのcalibration parameter取得 ※defaultの方がいいかも?

LVGL:スライダーdemoの動作確認

github
2/2 ESP32 Dynamic WIFI configuration GUI using LVGL7.x

Part 2/2 - App Structure

Wifi:DropDownListからSSID選択、Passをキー入力

WiFi接続

プログラムの概要説明

※320x240の画面ではメーターがはみ出し、Status barは完全にはみだす。

1/2 Part.1: Creating Tesla's Website in SquareLine Studio (ESP32+LVGL) SquareLine Studio → Arduino IDE (LVGL+LovyanGFX) github
2/2 Part.2: Creating Tesla's Website in SquareLine Studio (ESP32+LVGL) イベント・アクションの設定→ Arduino IDE (LVGL+LovyanGFX)
1/2 トイカメラを作ります! パート1

ESP32CAM + ILI9488 LVGL7 : リアルタイムディスプレイ

2/2 トイカメラを作ります! パート2

ESP32CAM + ILI9488 LVGL7 : LVGL設定

LVGL8 | Ep 3. Base Project for WiFi Settings]

eclipse IDE + LVGL

フォルダ構成

#Linux
#Windows

LVGLドキュメント日本語訳

LVGL Ver8.2 docs

Introduction

Introduction

Requirements

License

Repository layout

Release policy

FAQ

Examples

Get started

Styles

Animations

Events

Layouts

Scrolling

Widgets

Get started

Quick overview

Get started in a simulator

Add LVGL into your project

Learn the basics

Examples

porting

Set up a project

Display interface

Tick interface

Task Handler

Sleep management

Operating system and interrupts

Logging

Add custom GPU

Overview

Objects

Positions, sizes, and layouts

Styles

Style properties

Scroll

Layers

Events

Input devices

Displays

Colors

Fonts

Images

File system

Animations

Timers

Drawing

New widget

Widgets

Layouts

Flex

Grid

3rd party libraries

File System Interfaces

BMP decoder

JPG decoder

PNG decoder

GIF decoder

FreeType support

QR code

Lottie player

FFmpeg support

Others

Snapshot

Monkey

Grid navigation

Contributing

Introduction

Pull request

Developer Certification of Origin (DCO)

Ways to contribute

Changelog

Roadmap

LVGL Readme (github)

日本語 English

LVGL+eclipse Tutorial Video

YouTube OS 作者 内容 IDE lvgl.h TFT_eSPI LovyanGFX
How to Run Littlev Graphics Library in PC Simulator (Linux)

※lv_pcはproj_pcに変更。

※最後のRun configuurationsでC/C++ Appricationsに"~/eclipse-workspace/proj_pc/Debug/proj_pc"を設定。

Linux LVGL Linux環境のSetupからSimを動かすまで。

インストール:SDL2,JRE,Eclipse

Run:PC Simulator

※Sim内容の説明なし

Eclipse
ILI9341 TFT LCDからESP32-ディスプレイ、SDカード、およびタッチの完全な方法。 TFT_eSPIドライバーの使用 XTronical TFT_eSPIの設定
LVGL8 | Ep 0. GFX Setup (ft. LovyanGFX)] Mac That Project Arduino環境構築
GUI on ESP32 with 30 FPS using LittlevGL LVGL 動作のdemoのみ
Make your own System Monitor with ESP32 + LVGL 8
ESP32-Watch for OpenHaystack
QR Code Maker (ESP32+LVGL8)
Not AirTag, But ESP32Tag
ESP32 | LVGL8 | Ep3.WiFi設定の基本プロジェクト
ESP32 Dynamic WIFI configuration GUI using LVGL7.x

Part 2/2 - Application Structure

Interface LVGL with STM32 Low Memory Controllers :: Parallel Display Windows Controllers

Tech

LVGLpageの初期設定方法の詳細な解説

フレームバッファの使い方等(STM32)

STM32CUBEIDE

SquareLine Studio

[EN]

インストール

次の順にインストールします。

  1. Git
  2. ESP-IDF+Eclipse
  3. SquareLine Studio

使い方 for Arduino IDE

Arduino用のファイルを出力するためには、次の通りです。

  1. 何かプロジェクトを作ります。
  2. "Export"→"Create Template Project"→保存先のフォルダを指定
  3. "Export"→"Export UI Files"

保存先のフォルダの中の次の場所にファイルが保存されます。
<folder>/stm32g0/ui/ui.ino 等
Arduino IDEから上記フォルダを開きます。

  1. 〜.ino  入り口のファイルです。
  2. ui.c   メインの処理をするファイルです。
  3. ui.h
  4. ui_comp.c
  5. ui.comp.h
  6. ui_helper.c
  7. ui_helper.h


詳細な中身をよく観察すればわかってくると思います。

TFT_eSPIで使う場合、

〜.inoファイルに追加するのは次の通りです。

・SETUPの前

#include <TFT_eSPI.h>

static const uint16_t screenWidth  = 320; //画素数:横

static const uint16_t screenHeight = 240; //画素数:縦

TFT_eSPI tft = TFT_eSPI(screenWidth, screenHeight);

・void my_touchpad_read(〜)の中

bool touched = tft.getTouch( &touchX, &touchY, 600 );
defaultでは次のように書かれているので、必ず書き換える必要があります。

bool touched = false;//tft.getTouch( &touchX, &touchY, 600 );

・void setup()の中

    tft.begin();          /* TFT init */

    tft.setRotation( 3 ); /* Landscape orientation, flipped */

    uint16_t calData[5] = { 409, 3504, 274, 3542, 1 };

    tft.setTouch(calData);

calDataを書き込む後半の2行が欠けているため必ず追加します。

calDataの数列は Touch_calibrate.ino で取得します。

tft.setRotation(3)で向きが決まり、その値により

calDataの値は変化するので、4種類取得しておけば十分です。

おおよそこれで動くと思います。

ドキュメント日本語訳

 Readme

https://docs.squareline.io/docs/squareline/

Welcome

ようこそ

[EN] Welcome

Introduction (2)

はじめに

[EN] Overview

[EN] Typical Development Workflow

[EN] Licenses

[EN] Installation

[EN] Getting Started

[EN] Licence Manager

Designer environment

環境

[EN] How to use the SquareLine Studio layout?
[EN] Launcher
[EN] Preferences
[EN] Project Settings

Panels

[EN] Animation Panel
[EN] Asset Panel
[EN] Console Panel
[EN] Font Manager Panel
[EN] Hierarchy Panel
[EN] History Panel
[EN] Inspector Panel
[EN] Widget Panel

Styles

スタイル

[EN] Styles

Events and Actions

イベントとアクション

Events and Actions [EN]

Miscellaneous

その他

[EN] Changelog

[EN] How to upgrade SquareLine Studio to an up-to-date version?

[EN] Getting Help

[EN] Third Party Components in SquareLine Studio

Tutorials

チュートリアル

[EN] Tutorial 1 - Trying out an Example

[EN] Tutorial 2 - Create a New Application

[EN] Tutorial 3 - Add Styles

[EN] Tutorial 4 - Add Events

Tutorial Video:SuareLine Studio

https://youtu.be/9qp3Lmc8r-Q 全て英語です。日本語字幕で見る場合には、右下の歯車マークの"設定"から"字幕:英語(自動生成)"→"自動翻訳:日本語"とします。

SquareLine studio + eclipseのワークフローの全体像を知りたい人には★がオススメです。

eclipse Sim ArduinoIDE ESP32 title
Create an Impressive UI in 10 Minutes without Images 3Dプリンタ用UIを10分で作る
Developing Embedded GUI with Open Source LVGL. LVGL/SquareLine Studioの概要説明 Webinar
SquareLine Studio SquareLine studio プロモーションビデオ
Basic Tutorial #1:Get started アプリの概要説明
#2:Create a New Project 新prjの作り方、ボタンの配置・設定
#3:Styles Stylesの設定
#4:Events and Actions イベントとアクションの設定・動き方
#5:Animations アニメーションの作り方・動き方
Part.1: Creating Tesla's Website in SquareLine Studio (ESP32+LVGL) SquareLine Studio → Arduino IDE (LVGL+LovyanGFX) github
Part.2: Creating Tesla's Website in SquareLine Studio (ESP32+LVGL) イベント・アクションの設定→ Arduino IDE (LVGL+LovyanGFX)
LVGL官方GUI设计器【SquareLine Studio】试玩! Squareline Studio → VSCode

Link

LVGL 公式

LVGL https://lvgl.io/ (訳)
LVGL docs https://docs.lvgl.io/master/index.html (訳)
Github https://github.com/lvgl/lvgl (訳)
SquareLine Studio https://squareline.io/
SquareLine Studio docs https://docs.squareline.io/docs/squareline/ (訳)
LVGL's Blog

(ESP32関連)

2019/08/05 Pure Micropython Display Driver (訳)

2019/02/23 New release v5.3 - Micropython support, New object types, new features (訳)

2019/02/02 How to use the iPod Nano 6 LCD for LittlevGL (訳)

2019/01/31 Espressif officially supports LittlevGL on ESP32! Let's try it! (訳)

2018/12/26 LittlevGL References (訳)

LVGL Academy https://lvgl.academy/ ※英語・有料・Youtubeじゃないから自動翻訳不可

関連資料 (ESP32+LVGL)

参考 macsbug | LVGL 8 demo with 800×480 LCD and ESP32 S2 WROVER
OSRTOS | LittlevGL (訳)
Youtube ESP32 | LittlevGL | Arduino IDE - [Part.0] Touch Display Setup for Simple Note App

ESP32 | LittlevGL | Arduino IDE - [Part.1] Basic LittlevGL for Simple Note App


GUI on ESP32 with 30 FPS using LittlevGL


ESP32 | LVGL8 | Ep 0. GFX Setup

ESP32 | LVGL8 | Ep 1. Demos with LILY PI

ESP32 | LVGL8 | Ep 3. Base Project for WiFi Settings

トイカメラを作ります! = ESP32CAM + ILI9488 + LVGL7 | Part1、リアルタイムディスプレイ

トイカメラを作ります! = ESP32CAM + ILI9488 + LVGL7 | Part2、LVGL設定

補足

  • Arduino IDE の場合、ライブラリマネージャからインストール可能な LVGL は "lv_arduino" のみ。
  • Eclipse + ESP-IDF を入れる方法:Windows, Linux(ubuntu)
  • LVGLは旧名LittlevGL
  • LVGL作者は基本的には Linux+Eclipse+SDK の環境
  • Ver〜1.0.5は、ubuntuにインストールする場合、GPUの誤認識により起動直後に終了する事があります。

その場合、.desktop ファイルを書き換えると治る事があります。

   削除: ""  追加 : -force-opengl

   → Exec=/home/[user name]/ダウンロード/SquareLine_Studio_Linux_v1_1_0_Beta1/linux4/SquareLine_Studio_Beta.x86_64 -force-opengl %U

Ver1.1.0でこの問題は改善されました。

  • 1.1.0 から Arduino IDE 用のプログラム(〜.ino)を出力できるようになりました。

1. "Export" - "Create Template Project" :保存先のフォルダを指定すると、そこに "ui.ino" を含むフォルダが保存されます。Export folderの設定も自動で更新されます。

2. "Export" -  "Export UI Files" :必定な各種ファイルが上記フォルダに保存されます。

本来ならこの手順で出力した "ui.ino" をArduino IDEから開くだけで使えるはずですが、まだうまく動作してくれないようです。

SquareLine StudioのSample Projectは動作しませんでした。自分でゼロから作ったProjectは動く事もあるので、色々試すといいかもしれません。


戻る/Previous