「App:Library:LVGL」の版間の差分
120行目: | 120行目: | ||
スライダー等が表示されて操作できればOKです。 | スライダー等が表示されて操作できればOKです。 | ||
</blockquote> | </blockquote> | ||
+ | == LVGL Tutorial Video == | ||
+ | <blockquote> | ||
+ | |||
+ | :{| class="wikitable" | ||
+ | !YouTube | ||
+ | !OS | ||
+ | !作者 | ||
+ | !内容 | ||
+ | !IDE | ||
+ | !lvgl.h | ||
+ | !<small>TFT_eSPI</small> | ||
+ | !<small>LovyanGFX</small> | ||
+ | |- | ||
+ | |[https://youtu.be/rq5yPJbX_uk <small>ILI9341 TFT LCDからESP32-ディスプレイ、SDカード、およびタッチの完全な方法。 TFT_eSPIドライバーの使用</small>] | ||
+ | | | ||
+ | |XTronical | ||
+ | |TFT_eSPIの設定 | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | |[https://youtu.be/IPCvQ4o_WP8 (日本語字幕)ESP32 | LVGL8 | Ep 0. GFX Setup (ft. LovyanGFX)] | ||
+ | |Mac | ||
+ | |[https://www.youtube.com/c/ThatProject <small>That Project</small>] | ||
+ | |Arduino環境構築 | ||
+ | | | ||
+ | |● | ||
+ | | | ||
+ | |● | ||
+ | |- | ||
+ | |[https://youtu.be/ZzLdct2ymvg How to Run Littlev Graphics Library in PC Simulator (Linux)] | ||
+ | <small>※lv_pcはproj_pcに変更。</small> | ||
+ | |||
+ | <small>※最後のRun configuurationsでC/C++ Appricationsに"~/eclipse-workspace/proj_pc/Debug/proj_pc"を設定。</small> | ||
+ | |Linux | ||
+ | |<small>LVGL</small> | ||
+ | |<small>Linux環境のSetupからSimを動かすまで。</small> | ||
+ | |||
+ | <small>インストール:SDL2,JRE,Eclipse</small> | ||
+ | |||
+ | <small>Run:PC Simulator</small> | ||
+ | |||
+ | <small>※Sim内容の説明なし</small> | ||
+ | |<small>Eclipse</small> | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | |[https://youtu.be/EiIHI8sE7as GUI on ESP32 with 30 FPS using LittlevGL] | ||
+ | | | ||
+ | |<small>LVGL</small> | ||
+ | |<small>動作のdemoのみ</small> | ||
+ | |<small>ESP32</small> | ||
+ | <small>320x240_30fps</small> | ||
+ | |||
+ | <small>TFT</small> | ||
+ | |||
+ | <small>ILI9341</small> | ||
+ | |||
+ | <small>SPI_40MHz</small> | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | [https: / www.youtube.com watch?v="OXUZEHMFFwc&list=RDCMUCRr2LnXXXuHn4z0rBvpfG7w&index=2" ESP32 |[https://www.youtube.com/watch?v=OXUZEHMFFwc&list=RDCMUCRr2LnXXXuHn4z0rBvpfG7w&index=2 Part.0 - Touch Display Setup for Simple Note App📝] | ||
+ | |||
+ | <small>※日本語自動翻訳</small> | ||
+ | | | ||
+ | |[https://www.youtube.com/c/ThatProject <small>That Project</small>] | ||
+ | |<small>配線</small> | ||
+ | <small>I/O Port 設定</small> | ||
+ | |||
+ | <small>TFT_eSPI インストール</small> | ||
+ | |||
+ | <small>タッチ位置調整</small> | ||
+ | |||
+ | <small>LCD向き設定(横長)</small> | ||
+ | |<small>Arduino IDE</small> | ||
+ | | | ||
+ | |● | ||
+ | | | ||
+ | |- | ||
+ | | [https: / youtu.be dErIWm-IVhc ESP32 |[https://youtu.be/dErIWm-IVhc Part.1 - Basic LittlevGL for Simple Note App📝] | ||
+ | | | ||
+ | |[https://www.youtube.com/c/ThatProject <small>That Project</small>] | ||
+ | | | ||
+ | |<small>Arduino IDE</small> | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | [https: / youtu.be PIzMeCShNZA ESP32 |[https://youtu.be/PIzMeCShNZA Part.2 - By LittlevGL for Simple Note App📝] | ||
+ | | | ||
+ | |[https://www.youtube.com/c/ThatProject <small>That Project</small>] | ||
+ | | | ||
+ | |<small>Arduino IDE</small> | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | [https: / www.youtube.com watch?v="zRLQPF5417Y" Chat App |[https://www.youtube.com/watch?v=AvJms6_Pf_o&list=RDCMUCRr2LnXXXuHn4z0rBvpfG7w&index=3 ESP32 + ESP-NOW + LVGL7] | ||
+ | [https://www.youtube.com/watch?v=AvJms6_Pf_o&list=RDCMUCRr2LnXXXuHn4z0rBvpfG7w&index=3 Part 1/2 - LVGL UI Layout] | ||
+ | |||
+ | <small>※日本語自動翻訳</small> | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |<small>Arduino IDE</small> | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | [https: / www.youtube.com watch?v="Kpqz00_IzTc" Chat App |[https://www.youtube.com/watch?v=Kpqz00_IzTc ESP32 + ESP-NOW + LVGL7] | ||
+ | [https://www.youtube.com/watch?v=Kpqz00_IzTc Part 2/2 - ESP-NOW bidirectional Comm (Primary - Secondary)] | ||
+ | |||
+ | <small>※日本語自動翻訳</small> | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |<small>Arduino IDE</small> | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | |[https://youtu.be/gliwNg25fLE Make your own System Monitor with ESP32 + LVGL 8] | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | |[https://youtu.be/8672iWVhBvM ESP32-Watch for OpenHaystack] | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | |[https://youtu.be/Ss3zBO-V9kI QR Code Maker (ESP32+LVGL8)] | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | [https: / youtu.be _Bu3lw49m5s ESP32 + UWB |[https://youtu.be/_Bu3lw49m5s Not AirTag, But ESP32Tag] | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | [https: / youtu.be r62vfOhWXeo ESP32 |[https://youtu.be/r62vfOhWXeo ESP32 | LVGL8 | Ep3.WiFi設定の基本プロジェクト] | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | |[https://www.youtube.com/watch?v=AvJms6_Pf_o&list=RDCMUCRr2LnXXXuHn4z0rBvpfG7w&index=3 ESP32 Dynamic WIFI configuration GUI using LVGL7.x] | ||
+ | [https://www.youtube.com/watch?v=AvJms6_Pf_o&list=RDCMUCRr2LnXXXuHn4z0rBvpfG7w&index=3 Part 1/2 - Basic Setting] | ||
+ | |||
+ | <small>※日本語自動翻訳</small> | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |<small>Arduino IDE</small> | ||
+ | |● | ||
+ | |● | ||
+ | | | ||
+ | |- | ||
+ | |[https://youtu.be/CfsUQE495iA ESP32 Dynamic WIFI configuration GUI using LVGL7.x] | ||
+ | [https://youtu.be/CfsUQE495iA Part 2/2 - Application Structure] | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |} | ||
+ | </blockquote> | ||
+ | |||
</blockquote> | </blockquote> | ||
2022年8月12日 (金) 09:42時点における版
Arduino IDE
install
library:lv_Arduino
Arduino IDEを起動、"ツール" → "ライブラリを管理..." → 検索:"LVGL"
"lv_arduino" をインストールします。
lvgl,lv_exampleはArduino非対応のため、インストールされているとlv_arduinoが正しく動作しません。
既にインストールされている時は消去して下さい。
フォルダ丸ごと消してからアプリを再起動すればアンインストール完了です。
場所は、"ファイル"→"環境設定"→"スケッチブックの保存場所" の "libraries" フォルダ内です。以上でインストール完了です。
動作確認
library:TFT_eSPIのインストール
実際に画像を表示して動作確認するため、このディスプレイドライバをインストールします。
Arduino IDEを起動、"ツール" → "ライブラリを管理..." → 検索:"TFT_eSPI"
インストールフォルダの中にある User_Setup.h を直接エディタで編集します。 場所は、"ファイル"→"環境設定"→"スケッチブックの保存場所" の "libraries/TFT_eSPI" 内です。
Line 元 変更後 説明 45付近 #define ILI9341_DRIVER (使用するディスプレイに合わせて変更) ILI9341の場合 130-131 // #define TFT_BL 32 // #define TFT_BACKLIGHT_ON HIGH
#define TFT_BL 32
- define TFT_BACKLIGHT_ON HIGH
LCD_LEDを制御する場合 168-170 #define TFT_CS PIN_D8
- define TFT_DC PIN_D3
- define TFT_RST PIN_D4
//#define TFT_CS PIN_D8 //#define TFT_DC PIN_D3
//#define TFT_RST PIN_D4
NodeMCUのためコメントアウト 205-210 //#define TFT_MISO 19 //#define TFT_MOSI 23
//#define TFT_SCLK 18
//#define TFT_CS 15
//#define TFT_DC 2
//#define TFT_RST 4
#define TFT_MISO 19
- define TFT_MOSI 23
- define TFT_SCLK 18
- define TFT_CS 14
- define TFT_DC 27
- define TFT_RST 33
LCDと接続するSPIのポートに設定 223 //#define TOUCH_CS 21 #define TOUCH_CS 4 タッチセンサのCS 342 #define SPI_FREQUENCY 27000000 (使用する基板に合わせて変更) 40000000以下にする 320*240pxなら10000000でもok
スケッチ例を動かす
TFT_eSPIの設定が問題ない事の確認
タッチセンサと画像表示の両方を確認します。
"ファイル" → "スケッチ例" → "TFT_eSPI" → "General" → "Touch_caribrate"
最初に四隅をタッチしてタッチセンサをキャリブレートした後で、触った所に色が付けば動作確認OKです。
LVGLの動作確認①
タッチセンサと画像表示の両方を確認するため、スライダーを動かすサンプルを動かします。
"ファイル" → "スケッチ例" → "lv_arduino" → "ESP32_TFT_Slider"
スライダーを操作できればOKです。
LVGLの動作確認②
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
を実行します。 スライダー等が表示されて操作できればOKです。LVGL Tutorial Video
eclipse IDE
日本語訳
LVGL Ver8.2 docs
LVGL Readme (github)
LVGL+eclipse Tutorial Video
SquareLine Studio
[EN]
インストール
次の順にインストールします。
Readme 日本語訳
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 SuareLine Studio チュートリアル ビデオ
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をインストール可。
- Linux(ubuntu) に Eclipse + ESP-IDF を入れる方法:1 , 2 ,
- LVGLは旧名LittlevGL
- LVGL作者は基本的には Linux+Eclipse+SDK の環境