App:Library:LVGL

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

Arduino IDE用

install

Arduino IDE

Arduino公式ページ または Windows Store からインストールして下さい。

library:lv_Arduino

Arduino IDEを起動、"ツール" → "ライブラリを管理..." → 検索:"LVGL"
LVGL Ard install 01.jpg
"lv_arduino" をインストールします。

lvgl,lv_exampleはArduino非対応のため、インストールされているとlv_arduinoが正しく動作しません。
既にインストールされている時は消去して下さい。

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

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

動作確認

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

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

ILI9341 ESP32-DevKitC
LCD VCC +3.3V_OUT
GND GND
CS D14
RESET D33
DC D27
SDI(MOSI) D19 (VSPI-MOSI)
SCK D18 (VSPI-SCK)
LED D32
SDO(MISO) D18 (VSPI-MISO)
Touch

Panel

T_CLK D18 (VSPI-SCK)
T_CS D4
T_DIN(MOSI) D19 (VSPI-MOSI)
T_DO(MISO) D18 (VSPI-MISO)
T_IRQ D15
SD SD_CS D5
SD_MOSI D19 (VSPI-MOSI)
SD_MISO D18 (VSPI-MISO)
SD_SCK D18 (VSPI-SCK)

※LovyanGFX+LVGLの組み合わせでの動作確認をする方法は、チュートリアルビデオ:(日本語字幕)LVGL8 | Ep 0. GFX Setup (ft. LovyanGFX)]を参照して下さい。

TFT_eSPIのインストール

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

スケッチ例を動かす

この段階で既に TFT_eSPI 用のスケッチ例の多くがそのまま動作しますが、順に確認を進めます。

TFT_eSPIの設定が問題ない事の確認 & calData取得

タッチセンサと画像表示の両方を確認します。
"ファイル" → "スケッチ例" → "TFT_eSPI" → "General" → "Touch_caribrate"
シリアルモニタが動いている状態で起動します。

最初に四隅をタッチしてタッチセンサをキャリブレートします。

TFT eSPI calib 01.jpg TFT eSPI calib 02.jpg TFT eSPI calib 03.jpg TFT eSPI calib 04.jpg


シリアルモニタ上にキャリブレーションパラメータが表示されます。
// Use this calibration code in setup():  uint16_t calData[5] = { 402, 3478, 1998, 1689, 7 }; tft.setTouch(calData); この値は後で使うため、テキストファイル等にメモしておきます。
次の画面になります。
画面上を触ると色がつきます。

TFT eSPI calib 05.jpg TFT eSPI calib 06.jpg


触った所に色が付けば動作確認OKです。

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

これを実行ファイルを置いている場所にフォルダごとコピーして、LVGL_ESP32_Test_1.ino を実行します。 スライダー等が表示されて操作できれば動作確認完了です。

LVGL+Arduino(lv_arduino) Tutorial Video

by That Project

github
YouTube
No. YouTube 内容 lvgl.h TFT_eSPI LovyanGFX code
ESP32Berry, "WiFi connection & Simple Note App" Version 0.1 Group: ESP32+LVGL Projects
0 (日本語字幕)LVGL8 | Ep 0. GFX Setup (ft. LovyanGFX)] LVGL+LovyanGFX

・LovyanGFXの初期設定

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

github
1 LVGL8 | Ep 1. Demos with LILY PI github
2 LVGL8 | Ep 2. Fullでなく、Pullスタックの開発者のためのショートカットキー] ESP32をキーボードとして使う github
3 LVGL8 | Ep3.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
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

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

Part 2/2 - App Structure

1番目のパート、リアルタイムディスプレイ]
2番目のパート、LVGL設定]

eclipse IDE用

ドキュメント日本語訳

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

Base object (lv_obj)

Core widgets

Extra 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

ドキュメント日本語訳

 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

SuareLine Studio Tutorial Video

https://youtu.be/9qp3Lmc8r-Q

Developing Embedded GUI with Open Source LVGL.
SquareLine Studio
Basic Tutorial #1:Get started
#2:Create a New Project
#3:Styles
#4:Events and Actions
#5:Animations
Create an Impressive UI in 10 Minutes without Images
Part.1: Creating Tesla's Website in SquareLine Studio (ESP32+LVGL) github
Part.2: Creating Tesla's Website in SquareLine Studio (ESP32+LVGL)

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 (訳)

関連資料 (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をインストール可。
  • Linux(ubuntu) に Eclipse + ESP-IDF を入れる方法:1 , 2 ,
  • LVGLは旧名LittlevGL
  • LVGL作者は基本的には Linux+Eclipse+SDK の環境



戻る/Previous