こんにちは、AsoBotです。
さて今日はSquareLine StudioというＵＩエディターを使ったLCD表示のお話をしようと思います。
使用するマイコンはESP32-C6-LCD-1.47というESP32マイコンと1.47インチのLCDを組み合わせた基板です。
【今回の目標】EXPO2025記念動画をLCDで表示しよう！！
今回は万博が開幕した記念ということで下のようにミャクミャクの目をグルグル回してみようと思います。
完成まではいろいろやることがありますが気楽に見てみてくださいネ。
ESP32-C6-LCD-1.47ってなに？
まずはメインになるマイコンの説明です。
ESP32-C6-LCD-1.47 https://www.waveshare.com/wiki/ESP32-C6-LCD-1.47#Features
Waveshere社のESP32系のマイコンを使用した評価基板でLCD(液晶)が実装されています。
このマイコン基板は以下のような仕様を持っています。
| 項目 | 仕様 |
|---|---|
| マイコン | ESP32-C6FH4 |
| LCD | 1.47 inch /172×320pixel |
| 外部メモリ | microSD |
| 外部IOピン（GPIO） | 11pin(GPIO 0-5, 9 , 18-20, 23) |
| 外部通信ピン | UART(TXD/RXD) |
| USBタイプ | Type C（USBバスパワー駆動） |
モデルはピンヘッダの有り無しの２タイプがあります。
【重要】2025年6月時点では日本の電波法の取得は確認できませんでした。そのため今回は無線機能はすべて使用しません
ＵＩエディター：SquareLine Studioってなに？
世の中にはさまざまなLCDが溢れていますが、それぞれの表示を一から作っていくのは大変です。
SquareLine StudioはLVGL (Light and Versatile Graphics Library)というグラフィックライブラリーをGUIで操作できるようにした便利ツールです。
しかも個人使用では無料なので気楽に採用できます。
HPはこちらです →→→ https://squareline.io/
操作画面はこんな感じで使い方はちょっと癖はありますが、比較的簡単にイラストやアニメーションを作成する事ができます。
表示するイラストを用意する
それでは順番に作っていきましょう。
今回は以下の手順で画像を作成していきます。
- ミャクミャク画像を探してくる ：Webから探してくる
- 目玉だけを消す ：画像編集ソフトPIXLR
- 目玉を別のファイルで作成し背景を透過する ：画像編集ソフトPIXLR
画像はPNG形式で出力しますが、編集自体は難しくないのでPIXELRというWebアプリを使用します。
ミャクミャク画像を探してくる ：Webから探してくる
まずは使用したい画像をwebからダウンロードしてきます。
目玉だけを消す ：画像編集ソフトPIXLR
ダウンロードしてきたミャクミャクの画像をESP32-C6-LCD-1.47用の加工します。
172×320pixelの画像を新規で作成して、そこにミャクミャクを貼り付けます。
次に目は別パーツにしたいので、青い目をすべて白く塗りつぶします。
目玉を別のファイルで作成し背景を透過する ：画像編集ソフトPIXLR
次に目のパーツを作成します。
今度は目だけなので、小さめサイズのイラストを用意します。
今回は50×50pixleですが、画像を配置する段階でサイズは変更できるので大きめでも問題ありません。
但し、イラストが小さいほど出力するデータサイズは小さくなるので小さめで作成します。
完成した画像はこちらからダウンロードできます。
SquareLine Studioでアニメーションを作成する
ここまでで、ミャクミャクを含んだ背景画像と目のイラストが完成しました。
次はSquareLine Studioを使用してミャクミャクと目の玉を組み合わせてグルグル回していきます。
ここまででプログラムを作成するために必要なデータが揃いました。
完成した画像データの構成
出力したデータは下のようなフォルダ構成にしています。
最終的にはArduinoファルダにコピーして使用するためどこでもいいのですが、【Export Path】フォルダは出力する時に含まれるファイルがすべて更新される（使用しないファイルは消される）ので、独立したフォルダを指定しています。
SquareLine Studioのファイルメニューから
File → Prpject Settings → Export Path
で設定したフォルダに「.h」「.c」ファイルがいくつか出力されます。
これが先ほど作成したアニメーションのデータになります。
これをArduinoプログラムで読み出して使用します。
Arduinoでプログラム
それでは最後にArduinoでプログラムをしていきます。
まずはベースになるプログラムはWaveshareからサンプルプログラムをダウンロードします。
サンプルプログラムへのリンクはこちら ※Waveshare社のダウンロードリンクです。
ESP32-C6-LCD-1.47-Demo → Arduino → examples → LVGL_Arduino
にある以下のファイルを使用しますが、このうち使用しないファイルは削除します。
次にSquareLine Studioで出力したファイル群をArduinoの作業フォルダにコピーします。
最後にメインプログラム ”LVGL_Arduino.ino” を変更していきます。
ＳＤカード、Wirelessなど不要な部品プログラムはすべて削除します。
次に目玉がグルグル回る部分を追記していきます。（青枠部）
Image2 – 7 は目玉一つ一つを表していて、目玉の数だけあります。
このイラストが定義しているプログラムはui.cになります。
すべてのファイルはこちらからダウンロードできます。
目玉がグルグルする動作を確認
出来上がったプログラムを書き込むとこんな感じで動かせます。
まとめ
今回はESP32-C6-LCD-1.47でLCD表示にチャレンジしました。
プログラムの関係がいろいろあって分かりにくいかもしれないけど、LCDが動かせると電子工作の幅がグッと広がります。
みなさんも興味があったら是非チャレンジしてみてね。
