「App:Library:LVGL」の版間の差分
159行目: | 159行目: | ||
!<small>TFT_eSPI</small> | !<small>TFT_eSPI</small> | ||
!<small>LovyanGFX</small> | !<small>LovyanGFX</small> | ||
+ | !<small>SquareLine</small> | ||
!code | !code | ||
+ | ! | ||
|- | |- | ||
! | ! | ||
165行目: | 167行目: | ||
|Group: ESP32+LVGL Projects | |Group: ESP32+LVGL Projects | ||
|● | |● | ||
+ | | | ||
+ | | | ||
| | | | ||
| | | | ||
| | | | ||
|- | |- | ||
+ | | | ||
+ | | | ||
| | | | ||
| | | | ||
187行目: | 193行目: | ||
| | | | ||
|● | |● | ||
+ | | | ||
|[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/0_ILI9488_LovyanGFX github] | |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/0_ILI9488_LovyanGFX github] | ||
+ | | | ||
|- | |- | ||
!1 | !1 | ||
195行目: | 203行目: | ||
| | | | ||
|● | |● | ||
+ | | | ||
|[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/1_LILYPI_ST7796_LovyanGFX github] | |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/1_LILYPI_ST7796_LovyanGFX github] | ||
+ | | | ||
|- | |- | ||
!2 | !2 | ||
203行目: | 213行目: | ||
| | | | ||
|● | |● | ||
+ | | | ||
|[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/2_LILYPI_StackOverflow_BLE github] | |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/2_LILYPI_StackOverflow_BLE github] | ||
+ | | | ||
|- | |- | ||
!3 | !3 | ||
214行目: | 226行目: | ||
| | | | ||
|● | |● | ||
+ | | | ||
|[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/3_BaseProject_Network_Selector github] | |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/3_BaseProject_Network_Selector github] | ||
+ | | | ||
|- | |- | ||
!4 | !4 | ||
222行目: | 236行目: | ||
| | | | ||
|● | |● | ||
+ | | | ||
|[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/4_QR_Code_Maker github] | |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/4_QR_Code_Maker github] | ||
+ | | | ||
|- | |- | ||
!5 | !5 | ||
230行目: | 246行目: | ||
| | | | ||
|● | |● | ||
+ | | | ||
|[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/5_System_Monitor github] | |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/5_System_Monitor github] | ||
+ | | | ||
|- | |- | ||
+ | | | ||
+ | | | ||
| | | | ||
| | | | ||
252行目: | 272行目: | ||
| | | | ||
|● | |● | ||
+ | | | ||
+ | | | ||
| | | | ||
| | | | ||
257行目: | 279行目: | ||
!1 | !1 | ||
| [https: / youtu.be dErIWm-IVhc ESP32 |[https://youtu.be/dErIWm-IVhc Part.1 - Basic LittlevGL for Simple Note App📝] | | [https: / youtu.be dErIWm-IVhc ESP32 |[https://youtu.be/dErIWm-IVhc Part.1 - Basic LittlevGL for Simple Note App📝] | ||
+ | | | ||
+ | | | ||
| | | | ||
| | | | ||
265行目: | 289行目: | ||
!2 | !2 | ||
| [https: / youtu.be PIzMeCShNZA ESP32 |[https://youtu.be/PIzMeCShNZA Part.2 - By LittlevGL for Simple Note App📝] | | [https: / youtu.be PIzMeCShNZA ESP32 |[https://youtu.be/PIzMeCShNZA Part.2 - By LittlevGL for Simple Note App📝] | ||
+ | | | ||
+ | | | ||
| | | | ||
| | | | ||
271行目: | 297行目: | ||
| | | | ||
|- | |- | ||
+ | | | ||
+ | | | ||
| | | | ||
| | | | ||
286行目: | 314行目: | ||
|● | |● | ||
|● | |● | ||
+ | | | ||
| | | | ||
|[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/ChatApp_LVGL7/Step_1_UI github] | |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/ChatApp_LVGL7/Step_1_UI github] | ||
+ | | | ||
|- | |- | ||
!2/2 | !2/2 | ||
295行目: | 325行目: | ||
|● | |● | ||
|● | |● | ||
+ | | | ||
| | | | ||
|[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/ChatApp_LVGL7/Step_2_ESP-NOW github] | |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/ChatApp_LVGL7/Step_2_ESP-NOW github] | ||
+ | | | ||
|- | |- | ||
+ | | | ||
+ | | | ||
| | | | ||
| | | | ||
312行目: | 346行目: | ||
|● | |● | ||
|● | |● | ||
+ | | | ||
| | | | ||
| rowspan="2" |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/DynamicWIFIConnector_LVGL7 github] | | rowspan="2" |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/DynamicWIFIConnector_LVGL7 github] | ||
+ | | | ||
|- | |- | ||
!2/2 | !2/2 | ||
322行目: | 358行目: | ||
|● | |● | ||
|● | |● | ||
+ | | | ||
+ | | | ||
| | | | ||
|- | |- | ||
| | | | ||
| [https: / youtu.be r62vfOhWXeo ESP32 | | | [https: / youtu.be r62vfOhWXeo ESP32 | | ||
+ | | | ||
+ | | | ||
| | | | ||
| | | | ||
332行目: | 372行目: | ||
| | | | ||
|- | |- | ||
+ | !1/2 | ||
+ | |Part.1: [https://youtu.be/LrvqSjLzo44 Creating Tesla's Website in SquareLine Studio (ESP32+LVGL)] | ||
+ | |SquareLine Studio → Arduino IDE (LVGL+LovyanGFX) | ||
+ | |● | ||
+ | | | ||
+ | |● | ||
+ | |● | ||
+ | | rowspan="2" |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8_SquareLine github] | ||
+ | | | ||
+ | |- | ||
+ | !2/2 | ||
+ | |Part.2: [https://youtu.be/7PXBPRm_8_Y Creating Tesla's Website in SquareLine Studio (ESP32+LVGL)] | ||
+ | |イベント・アクションの設定→ Arduino IDE (LVGL+LovyanGFX) | ||
+ | |● | ||
+ | | | ||
+ | |● | ||
+ | |● | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | | ||
| | | | ||
| | | | ||
340行目: | 401行目: | ||
| | | | ||
|- | |- | ||
+ | !1/2 | ||
+ | | [https: / youtu.be K5Tr0AjK-Uc トイカメラを作ります!="ESP32CAM" + ILI9488 LVGL7 | 1番目のパート、リアルタイムディスプレイ] | ||
+ | | | ||
| | | | ||
− | |||
| | | | ||
| | | | ||
348行目: | 411行目: | ||
| | | | ||
|- | |- | ||
+ | !2/2 | ||
+ | | [https: / youtu.be K4VEvUVOkG0 トイカメラを作ります!="ESP32CAM" + ILI9488 LVGL7 | 2番目のパート、LVGL設定] | ||
+ | | | ||
| | | | ||
− | |||
| | | | ||
| | | |
2022年8月13日 (土) 11:19時点における版
Arduino IDE + LVGL
install
Arduino IDE
Arduino公式ページ または Windows Store からインストールして下さい。
library:lv_Arduino
Arduino IDEを起動、"ツール" → "ライブラリを管理..." → 検索:"LVGL"
"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"
シリアルモニタが動いている状態で起動します。
最初に四隅をタッチしてタッチセンサをキャリブレートします。
シリアルモニタ上にキャリブレーションパラメータが表示されます。
// Use this calibration code in setup(): uint16_t calData[5] = { 402, 3478, 1998, 1689, 7 }; tft.setTouch(calData); この値は後で使うため、テキストファイル等にメモしておきます。
次の画面になります。
画面上を触ると白く跡がつきます。
触った所に白く跡がつけば 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
これを実行ファイルを置いている場所にフォルダごとコピーします。
LVGL_ESP32_Test_1.ino
を実行します。スライダー等が表示されて操作できれば動作確認完了です。
Tutorial Video:LVGL+Arduino(lv_arduino)
by That Project
No. YouTube 内容 lvgl.h TFT_eSPI LovyanGFX SquareLine 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 ESP-NOWとは:ESP同士で通信する機能 キー入力画面の作り方
● ● github 2/2 ChatApp:ESP32 + ESP-NOW + LVGL7 ● ● github 1/2 ESP32 Dynamic WIFI configuration GUI using LVGL7.x ● ● github 2/2 ESP32 Dynamic WIFI configuration GUI using LVGL7.x ● ● 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番目のパート、リアルタイムディスプレイ] 2/2 2番目のパート、LVGL設定]
eclipse IDE + LVGL
ドキュメント日本語訳
LVGL Ver8.2 docs
LVGL Readme (github)
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 Interface LVGL with STM32 Low Memory Controllers :: Parallel Display Windows Controllers Tech
LVGLpageの初期設定方法の詳細な解説 フレームバッファの使い方等(STM32)
STM32CUBEIDE ●
SquareLine Studio
[EN]
インストール
次の順にインストールします。
ドキュメント日本語訳
https://docs.squareline.io/docs/squareline/
Welcome
ようこそ
[EN] Welcome Introduction (2)
はじめに
[EN] Overview [EN] Typical Development Workflow
[EN] Installation ★
Designer environment
環境
[EN] How to use the SquareLine Studio layout?
Panels
[EN] Launcher
[EN] Preferences
[EN] Project Settings
[EN] Animation Panel
[EN] Asset Panel
[EN] Console Panel
[EN] Font Manager Panel
[EN] Hierarchy Panel
[EN] History Panel
[EN] Inspector Panel
[EN] Widget PanelStyles
スタイル
[EN] Styles Events and Actions
イベントとアクション
Events and Actions [EN] Miscellaneous
その他
[EN] Changelog [EN] How to upgrade SquareLine Studio to an up-to-date version?
Tutorials
チュートリアル
[EN] Tutorial 1 - Trying out an Example Tutorial Video:SuareLine Studio
https://youtu.be/9qp3Lmc8r-Q 全て英語です。日本語字幕で見る場合には、右下の歯車マークの"設定"から"字幕:英語(自動生成)"→"自動翻訳:日本語"とします。
colspan="2" 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 アニメーションの作り方・動き方 Create an Impressive UI in 10 Minutes without Images 3Dプリンタ用UIを10分で作る 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)
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)
補足
- Arduino IDE の場合、ライブラリマネージャからインストール可能な LVGL は "lv_arduino" のみ。
- Eclipse + ESP-IDF を入れる方法:Windows, Linux(ubuntu)
- LVGLは旧名LittlevGL
- LVGL作者は基本的には Linux+Eclipse+SDK の環境