「App:Library:LVGL」の版間の差分
1行目: | 1行目: | ||
+ | = Arduino IDE + lv_arduino = | ||
+ | lv_Arduino (Arduino向けLVGL ver3) | ||
+ | <blockquote><syntaxhighlight lang="C++" style="border: 1px dashed gray;"> | ||
+ | 注:lv_Arduinoは古くて現在のLVGLとはあまり互換性がありませんが、新しいLVGLより軽く動きます。 | ||
+ | いくつかの重大なバグもあるため、LVGL Ver8以降をお勧めします。</syntaxhighlight> | ||
+ | == install == | ||
+ | === Arduino IDE === | ||
+ | <blockquote> | ||
+ | [https://www.arduino.cc/ '''Arduino公式ページ'''] または [http://www.microsoftstore.com/store/msjp/ja_JP/home Windows Store] からインストールして下さい。<BR /> | ||
+ | ESP32を使えるように、追加のボードマネージャーを設定します。<BR /> | ||
+ | :"ファイル"→"環境設定"→"追加のボードマネージャーのURL" | ||
+ | ::<nowiki>https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json</nowiki> | ||
+ | ::<nowiki>https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json</nowiki> | ||
+ | </blockquote> | ||
+ | |||
+ | === library === | ||
+ | <blockquote> | ||
+ | ==== lv_Arduino ==== | ||
+ | <blockquote> | ||
+ | Arduino IDEを起動、"ツール" → "ライブラリを管理..." → 検索:"LVGL"<BR/> | ||
+ | :[[file:LVGL_Ard_install_01.jpg|400px]]<BR/> | ||
+ | "lv_arduino" をインストールします。<BR /> | ||
+ | :{| class="wikitable" | ||
+ | |<small>lv_arduinoは旧版で、既にサポートされていません。<small>新しいライブラリは lvgl , lv_example です。 | ||
+ | |||
+ | <small>しかし、Arduino IDE にライブラリマネージャからインストールした場合に | ||
+ | |||
+ | <small>そのまま動作するのは lv_arduino である事から、ここでは lv_arduino を使用します。<BR /> | ||
+ | 同時に lvgl , lv_example がインストールされているとライブラリの重複で動作しなく</small> | ||
+ | |||
+ | なるため、 lvgl , lv_example を消して下さい。<BR /> | ||
+ | <BR /> | ||
+ | フォルダ丸ごと消してからアプリを再起動すればアンインストール完了です。<BR /> | ||
+ | 場所は、"ファイル"→"環境設定"→"スケッチブックの保存場所" の "libraries" フォルダ内です。</small> | ||
+ | |} | ||
+ | 以上でインストール完了です。<BR /> | ||
+ | </blockquote> | ||
+ | |||
+ | ==== LVGLの解説 ==== | ||
+ | <blockquote>https://www.arduino.cc/reference/en/libraries/lvgl/ | ||
+ | ---- | ||
+ | |||
+ | |||
+ | <BR /> | ||
+ | </blockquote> | ||
+ | </blockquote> | ||
+ | |||
+ | == 動作確認 == | ||
+ | ここでは '''TFT_eSPI + LVGL''' の組み合わせで動作確認をします。<BR /> | ||
+ | '''TFT_eSPI'''は結線情報をヘッダーファイル('''User_Setup.h''')内に保存するため、色々なスケッチ例をほぼ変更なしで動かす事ができます。<BR /> | ||
+ | :::{| class="wikitable" | ||
+ | |<small>※TFT_eSPI の代わりに LovyanGFX+LVGLで動作確認したい場合の動作確認の方法は<BR/> [https://youtu.be/IPCvQ4o_WP8 (日本語字幕)LVGL8:Ep0.GFX Setup(ft.LovyanGFX)]を参照してください。</small> | ||
+ | |} | ||
+ | <BR /> | ||
+ | === TFT_eSPIのインストール === | ||
+ | <blockquote> | ||
+ | ディスプレイドライバ [[App:Library:TFT eSPI|<u>'''TFT_eSPI をインストール'''</u>]]します。 | ||
+ | </blockquote> | ||
+ | |||
+ | === スケッチ例で動作確認 === | ||
+ | <blockquote> | ||
+ | ==== LVGLの動作確認① ==== | ||
+ | タッチセンサと画像表示の両方を確認するため、スライダーを動かすスケッチ例を動かします。<BR /> | ||
+ | <code><small>"ファイル" → "スケッチ例" → "lv_arduino" → "ESP32_TFT_Slider"</small></code><BR /> | ||
+ | スライダーを操作できれば動作確認完了です。<BR /> | ||
+ | <BR /> | ||
+ | |||
+ | ==== LVGLの動作確認② ==== | ||
+ | もう少し凝ったスケッチ例を Bodmer氏(TFT_eSPI の作者)が公開されています。<BR /> | ||
+ | せっかくなので実行してみましょう。<BR /> | ||
+ | [https://forum.arduino.cc/t/real-world-lvgl-demo-example/660928/7 Real-world LVGL demo example?]ここのbodmer氏の投稿にある<BR /> | ||
+ | [https://forum.arduino.cc/uploads/short-url/18deXNqAAkQsYHhDmU1Hn1dINCI.zip LVGL_ESP32_Test_1.zip] (3.45 KB)<BR /> | ||
+ | これをダウンロード・解凍すると現れるフォルダの中に次のファイルがあります。<BR /> | ||
+ | :{| class="wikitable" | ||
+ | |<small>LVGL_ESP32_Test_1</small> | ||
+ | :<small>Callbacks.ino</small> | ||
+ | :<small>Loop.ino</small> | ||
+ | :<small>LVGL_ESP32_Test_1.ino</small> | ||
+ | :<small>Setup.ino</small> | ||
+ | |} | ||
+ | これを実行ファイルを置いているフォルダにフォルダごとコピーします。<BR /> | ||
+ | 実行ファイル置いてあるフォルダの場所は、デフォルトでは次の場所になっています。<BR /> | ||
+ | "■"はPCにログインしているアカウント名です。<BR /> | ||
+ | :{| class="wikitable" | ||
+ | !<small>Linux</small> | ||
+ | |<small>/home/■/Arduino/projects/</small> | ||
+ | |- | ||
+ | !<small>Windows</small> | ||
+ | |<small>C:\Users\■\Documents\Arduino</small> | ||
+ | |} | ||
+ | <code>LVGL_ESP32_Test_1.ino</code> を実行します。<BR /> | ||
+ | <BR /> | ||
+ | スライダー等が表示されて操作できれば動作確認完了です。<BR /> | ||
+ | </blockquote> | ||
+ | |||
+ | == Tutorial : lv_arduino == | ||
+ | <blockquote>https://docs.arduino.cc/tutorials/portenta-h7/creating-gui-with-lvgl | ||
+ | </blockquote> | ||
+ | == Tutorial Video:lv_arduino == | ||
+ | <blockquote>by That Project<BR /> | ||
+ | :[https://github.com/0015/ThatProject github] <BR /> | ||
+ | :[https://www.youtube.com/c/ThatProject YouTube]<BR /> | ||
+ | :{| class="wikitable" | ||
+ | !No. | ||
+ | !YouTube | ||
+ | !内容 | ||
+ | !lvgl | ||
+ | !<small>TFT_</small><small>eSPI</small> | ||
+ | !<small>Lovyan</small><small>GFX</small> | ||
+ | !<small>Square</small><small>Line</small> | ||
+ | !code | ||
+ | ! | ||
+ | |- | ||
+ | ! | ||
+ | ! style="text-align:left;" |[https://youtu.be/wqaxCAcghtk <small>ESP32Berry, "WiFi connection & Simple Note App" Version 0.1</small>] | ||
+ | |Group: ESP32+LVGL Projects | ||
+ | |◆ | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | !0 | ||
+ | ! style="text-align:left;" |<small>[https://youtu.be/IPCvQ4o_WP8 (日本語字幕)LVGL8 : Ep 0.]</small> <small>[https://youtu.be/IPCvQ4o_WP8 GFX Setup (ft. LovyanGFX)]</small> | ||
+ | |LVGL+LovyanGFX | ||
+ | ・LovyanGFXの初期設定 | ||
+ | |||
+ | ・タッチディスプレイのcalibration data取得 | ||
+ | <code><small>'''ここでタッチディスプレイの calibration data を得るため、下記Videoを見る前に実施しておく事。'''</small></code> | ||
+ | |◆ | ||
+ | | | ||
+ | |○ | ||
+ | | | ||
+ | |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/0_ILI9488_LovyanGFX github] | ||
+ | | | ||
+ | |- | ||
+ | !1 | ||
+ | ! style="text-align:left;" |<small>[https://youtu.be/kRTFc2vY5A8 (日本語字幕)ESP32 :LVGL8 :]</small> [https://youtu.be/kRTFc2vY5A8 <small>Ep 1.</small> <small>Demos with LILY PI</small>] | ||
+ | | | ||
+ | |◆ | ||
+ | | | ||
+ | |○ | ||
+ | | | ||
+ | |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/1_LILYPI_ST7796_LovyanGFX github] | ||
+ | | | ||
+ | |- | ||
+ | !2 | ||
+ | ! style="text-align:left;" |<small>[https://youtu.be/i4qrWbHXH3U (日本語字幕)ESP32 :LVGL8 :]</small> <small>[https://youtu.be/i4qrWbHXH3U Ep 2. Shortcuts for Pull Stack Developer]</small> | ||
+ | |||
+ | <small>Fullでなく、Pullスタックの開発者のためのショートカットキー</small> | ||
+ | |ESP32をキーボードとして使う | ||
+ | |◆ | ||
+ | | | ||
+ | |○ | ||
+ | | | ||
+ | |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/2_LILYPI_StackOverflow_BLE github] | ||
+ | | | ||
+ | |- | ||
+ | !3 | ||
+ | ! style="text-align:left;" |<small>[https://youtu.be/r62vfOhWXeo ESP32 :LVGL8 : Ep3.]</small><small>[https://youtu.be/r62vfOhWXeo Ep 3. Base Project for WiFi Settings]</small> | ||
+ | |||
+ | <small>WiFi設定の基本プロジェクト</small> | ||
+ | <small>LVGL8 Base roject</small> | ||
+ | |||
+ | <small>For Selecting WiFi Dynamically</small> | ||
+ | |WiFi接続・時刻取得・ | ||
+ | |◆ | ||
+ | | | ||
+ | |○ | ||
+ | | | ||
+ | |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/3_BaseProject_Network_Selector github] | ||
+ | | | ||
+ | |- | ||
+ | !4 | ||
+ | ! style="text-align:left;" |[https://youtu.be/Ss3zBO-V9kI <small>QR Code Maker (ESP32+LVGL8)</small>] | ||
+ | | | ||
+ | |◆ | ||
+ | | | ||
+ | |○ | ||
+ | | | ||
+ | |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/4_QR_Code_Maker github] | ||
+ | | | ||
+ | |- | ||
+ | !5 | ||
+ | ! style="text-align:left;" |[https://youtu.be/gliwNg25fLE <small>Make your own System Monitor with ESP32 + LVGL 8</small>] | ||
+ | | | ||
+ | |◆ | ||
+ | | | ||
+ | |○ | ||
+ | | | ||
+ | |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8/5_System_Monitor github] | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | !0 | ||
+ | ! style="text-align:left;" |<small>[https://www.youtube.com/watch?v=OXUZEHMFFwc&list=RDCMUCRr2LnXXXuHn4z0rBvpfG7w&index=2 Part.0 -]</small> | ||
+ | |||
+ | <small>[https://www.youtube.com/watch?v=OXUZEHMFFwc&list=RDCMUCRr2LnXXXuHn4z0rBvpfG7w&index=2 Touch Display Setup for Simple Note App]📝</small> | ||
+ | |<small>配線</small> | ||
+ | <small>I/O Port 設定</small> | ||
+ | |||
+ | <small>TFT_eSPI インストール</small> | ||
+ | |||
+ | <small>タッチ位置調整</small> | ||
+ | |||
+ | <small>LCD向き設定(横長)</small> | ||
+ | | | ||
+ | |◎ | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | !1 | ||
+ | ! style="text-align:left;" |<small>[https://youtu.be/dErIWm-IVhc Part.1 -]</small> <small>[https://youtu.be/dErIWm-IVhc Basic LittlevGL for Simple Note App]📝</small> | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | !2 | ||
+ | ! style="text-align:left;" |<small>[https://youtu.be/PIzMeCShNZA Part.2 -]</small> <small>[https://youtu.be/PIzMeCShNZA By LittlevGL for Simple Note App📝]</small> | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | !1/2 | ||
+ | ! style="text-align:left;" |<small>[https://www.youtube.com/watch?v=Kpqz00_IzTc ChatApp:ESP32 + ESP-NOW + LVGL7]</small> | ||
+ | [https://www.youtube.com/watch?v=Kpqz00_IzTc <small>Part 1/2 - LVGL GUI Layout</small>] | ||
+ | |ESP-NOWとは:[https://it-evo.jp/blog/blog-1397/ ESP同士で通信する機能] | ||
+ | キー入力画面の作り方 | ||
+ | |◆ | ||
+ | |◎ | ||
+ | | | ||
+ | | | ||
+ | |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/ChatApp_LVGL7/Step_1_UI github] | ||
+ | | | ||
+ | |- | ||
+ | !2/2 | ||
+ | ! style="text-align:left;" |<small>[https://www.youtube.com/watch?v=Kpqz00_IzTc ChatApp:ESP32 + ESP-NOW + LVGL7]</small> | ||
+ | [https://www.youtube.com/watch?v=Kpqz00_IzTc <small>Part 2/2 - ESP-NOW bidirectional Comm (Primary - Secondary)</small>] | ||
+ | | | ||
+ | |◆ | ||
+ | |◎ | ||
+ | | | ||
+ | | | ||
+ | |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/ChatApp_LVGL7/Step_2_ESP-NOW github] | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | !1/2 | ||
+ | ! style="text-align:left;" |[https://www.youtube.com/watch?v=AvJms6_Pf_o&list=RDCMUCRr2LnXXXuHn4z0rBvpfG7w&index=3 <small>ESP32 Dynamic WIFI configuration GUI using LVGL7.x</small>] | ||
+ | [https://www.youtube.com/watch?v=AvJms6_Pf_o&list=RDCMUCRr2LnXXXuHn4z0rBvpfG7w&index=3 <small>Part 1/2 - Basic Setting</small>] | ||
+ | |インストール:TFT-eSPI, lv_arduino | ||
+ | |||
+ | TFT_eSPI:タッチセンサのcalibration parameter取得 ※defaultの方がいいかも? | ||
+ | |||
+ | LVGL:スライダーdemoの動作確認 | ||
+ | |||
+ | |◆ | ||
+ | |◎ | ||
+ | | | ||
+ | | | ||
+ | | rowspan="2" |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/DynamicWIFIConnector_LVGL7 github] | ||
+ | | | ||
+ | |- | ||
+ | !2/2 | ||
+ | ! style="text-align:left;" |[https://youtu.be/CfsUQE495iA <small>ESP32 Dynamic WIFI configuration GUI using LVGL7.x</small>] | ||
+ | |||
+ | [https://youtu.be/CfsUQE495iA <small>Part 2/2 - App Structure</small>] | ||
+ | |Wifi:DropDownListからSSID選択、Passをキー入力 | ||
+ | |||
+ | WiFi接続 | ||
+ | |||
+ | プログラムの概要説明 | ||
+ | |||
+ | ※320x240の画面ではメーターがはみ出し、Status barは完全にはみだす。 | ||
+ | |◆ | ||
+ | |◎ | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | style="text-align:left;" | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | !1/2 | ||
+ | ! style="text-align:left;" |<small>Part.1: [https://youtu.be/LrvqSjLzo44 Creating Tesla's Website in SquareLine Studio (ESP32+LVGL)]</small> | ||
+ | |SquareLine Studio → Arduino IDE (LVGL+LovyanGFX) | ||
+ | |◆ | ||
+ | | | ||
+ | |○ | ||
+ | |◇ | ||
+ | | rowspan="2" |[https://github.com/0015/ThatProject/tree/master/ESP32_LVGL/LVGL8_SquareLine github] | ||
+ | | | ||
+ | |- | ||
+ | !2/2 | ||
+ | ! style="text-align:left;" |<small>Part.2: [https://youtu.be/7PXBPRm_8_Y Creating Tesla's Website in SquareLine Studio (ESP32+LVGL)]</small> | ||
+ | |イベント・アクションの設定→ Arduino IDE (LVGL+LovyanGFX) | ||
+ | |◆ | ||
+ | | | ||
+ | |○ | ||
+ | |◇ | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | !1/2 | ||
+ | ! style="text-align:left;" |<small>[Https://youtu.be/K5Tr0AjK-Uc トイカメラを作ります! パート1]</small> | ||
+ | <small>ESP32CAM + ILI9488 LVGL7 : リアルタイムディスプレイ</small> | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | !2/2 | ||
+ | ! style="text-align:left;" |<small>[https://youtu.be/K4VEvUVOkG0 トイカメラを作ります! パート2]</small> | ||
+ | <small>ESP32CAM + ILI9488 LVGL7 : LVGL設定</small> | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | ! | ||
+ | ! [https: / youtu.be r62vfOhWXeo <small>ESP32 |<nowiki>LVGL8 | Ep 3. Base Project for WiFi Settings]</nowiki> | ||
+ | | | ||
+ | |◆ | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |} | ||
+ | </blockquote> | ||
= Arduino IDE + lv_arduino = | = Arduino IDE + lv_arduino = | ||
lv_Arduino (Arduino向けLVGL ver3) | lv_Arduino (Arduino向けLVGL ver3) |
2022年11月5日 (土) 19:05時点における版
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"
"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
No. YouTube 内容 lvgl 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 (日本語字幕)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 0 Part.0 - 配線 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 インストール:TFT-eSPI, lv_arduino TFT_eSPI:タッチセンサのcalibration parameter取得 ※defaultの方がいいかも?
LVGL:スライダーdemoの動作確認
◆ ◎ github 2/2 ESP32 Dynamic WIFI configuration GUI using LVGL7.x 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] ◆ 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"
"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
No. YouTube 内容 lvgl 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 (日本語字幕)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 0 Part.0 - 配線 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 インストール:TFT-eSPI, lv_arduino TFT_eSPI:タッチセンサのcalibration parameter取得 ※defaultの方がいいかも?
LVGL:スライダーdemoの動作確認
◆ ◎ github 2/2 ESP32 Dynamic WIFI configuration GUI using LVGL7.x 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
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]
インストール
次の順にインストールします。
使い方 for Arduino IDE
Arduino用のファイルを出力するためには、次の通りです。
- 何かプロジェクトを作ります。
- "Export"→"Create Template Project"→保存先のフォルダを指定
- "Export"→"Export UI Files"
保存先のフォルダの中の次の場所にファイルが保存されます。
<folder>/stm32g0/ui/ui.ino 等
Arduino IDEから上記フォルダを開きます。
- 〜.ino 入り口のファイルです。
- ui.c メインの処理をするファイルです。
- ui.h
- ui_comp.c
- ui.comp.h
- ui_helper.c
- 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種類取得しておけば十分です。
おおよそこれで動くと思います。
ドキュメント日本語訳
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 全て英語です。日本語字幕で見る場合には、右下の歯車マークの"設定"から"字幕:英語(自動生成)"→"自動翻訳:日本語"とします。
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)
補足
- 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は動く事もあるので、色々試すといいかもしれません。