ESP32でLittlevGL(オープンソースの組込み向けGUIライブラリ)を使ってみた

# はじめに

ESP32で[LittlevGL](https://littlevgl.com/)という組込み向けGUIライブラリを使ってみたので、その備忘録代わりの記事です。
※ESP-IDFで開発しています

本記事の手順では、以下のようにサンプルアプリを動作させます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/LittlevGL?src=hash&amp;ref_src=twsrc%5Etfw">#LittlevGL</a> というグラフィックライブラリのデモの様子。タッチセンサも対応しているみたい。スマホみたいなアプリが作りやすいと嬉しいけど、どんなもんかな。 <a href="https://t.co/YDoxoE6YE4">pic.twitter.com/YDoxoE6YE4</a></p>&mdash; Daiki🍆🍡🌙 (@TwDaiki) <a href="https://twitter.com/TwDaiki/status/1184469702724046848?ref_src=twsrc%5Etfw">October 16, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 使用したもの
* [ESPr® Developer 32](https://www.switch-science.com/catalog/3210/)　 ※これ以降は「ESP32］と呼称
* [HiLetgo® 2.8 "TFT LCDディスプレイ タッチパネル](https://www.amazon.co.jp/HiLetgo%C2%AE-LCD%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4-%E3%82%BF%E3%83%83%E3%83%81%E3%83%91%E3%83%8D%E3%83%AB-SPI%E3%82%B7%E3%83%AA%E3%82%A2%E3%83%AB240-ILI9341/dp/B072N551V3)
* 開発に使用したOS：Ubuntu18.04 ( Windows7 Pro 64bit をホストOSとするVirtualBoxにインストール ) 

# 結線

以下の通りにESP32と液晶ボードを結線します
　
※補足：
「Failed to connect to ESP32: Timed out waiting for packet header」というメッセージが出て書き込みできなかったので、ESP32のENとGNDの間に10uFのコンデンサを入れました。→[参考記事](https://randomnerdtutorials.com/solved-failed-to-connect-to-esp32-timed-out-waiting-for-packet-header/)

|ESP32  |LCD  |
|---|---|
|VOUT  |VCC  |
|GND  |GND  |
|IO5  |CS  |
|IO16  |RES  |
|IO17  |DC  |
|IO23  |MOSI  |
|IO18  |SCK  |
|3V3  |LED  |
|IO19  |MISO  |

# 手順

### １. サンプルプログラムを入手する

プロジェクト一式をGithubから入手します

```
$ git clone --recurse-submodules https://github.com/littlevgl/esp32_ili9341.git
```

lvgl_component.mk を component.mk にリネームしてlvgl ディレクトリに置きます。
また、lv_example_component.mk を component.mk にリネームして lv_examples ディレクトリに置きます。

```
$ cd esp32_ili9341/
$ mv ./lvgl_component.mk ./components/lvgl/component.mk 
$ mv ./lv_examples_component.mk ./components/lv_examples/component.mk 
```

### ２. ソースコードを編集する  

以下のファイル（☆）を変更します。

```
esp32_ili9341
└ components
　└ drv
　　├ disp_spi.h　☆
　　├ ili9341.h　☆
　　└ ili9341.c　☆
```

まず、LCDボードとの接続情報のコードを編集します。変更後のコードは以下の通りです。

```disp_spi.h(22行目辺り)

/*********************
 *      DEFINES
 *********************/

// #define DISP_SPI_MOSI 23
// #define DISP_SPI_CLK  19
// #define DISP_SPI_CS   22
#define DISP_SPI_MOSI 23
#define DISP_SPI_CLK  18
#define DISP_SPI_CS   5
```

```ili9341.h(21行目辺り)
/*********************
 *      DEFINES
 *********************/
#define DISP_BUF_SIZE (LV_HOR_RES_MAX * 40)
// #define ILI9341_DC   21
// #define ILI9341_RST  18
// #define ILI9341_BCKL 5
#define ILI9341_DC   17
#define ILI9341_RST  16
#define ILI9341_BCKL 4 //dummy

// if text/images are backwards, try setting this to 1
// #define ILI9341_INVERT_DISPLAY 0
#define ILI9341_INVERT_DISPLAY 1
```
※バックライトは3Vに直結しているので未使用ポート(4番)に割り当てました


次に、使用するLCDの向き（横向き）のコードを編集します。変更後のコードは以下の通りです。

```ili9341.c(109行目辺り)

#if ILI9341_INVERT_DISPLAY
  // uint8_t data[] = {0x68};
  uint8_t data[] = {0xF8};
  ili9341_send_cmd(0x36)
  ili9341_send_data(&data, 1);
#endif

```

（参考）写真：LCDの向き
<img width="400" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155449/27533a9f-688c-e3db-39d9-d110b17eeaca.png">

### ３. 動作を確認する

プログラムをビルドしてESP32に書き込み＆モニター開始します

```
$ make
$ make flash
```
※初回の実行時に以下のような設定メニューが出てきます。ただし、ひたすらエンターを押して（＝デフォルトのままとする）してその画面を抜けて問題なく動作しました。

```
GENCONFIG
*
* Restart config...
*
*
* Application manager
*
Use time/date stamp for app (APP_COMPILE_TIME_DATE) [Y/n/?] (NEW) 
：
```

# 終わりに

組み込み向けのGUIライブラリというと文字や簡単な図形を描けるぐらいのものが思い浮かびますが、このライブラリはCalendar、Keyboard、Sliderといったレベルで要素を配置することができます。

また、配置方法も画面に対する絶対座標だけでなく、既存のオブジェクトに対して相対座標や位置（CENTER、IN_TOP_LEFT、IN_TOP_MID・・・）で指定することもできます。

ただし、軽く[ドキュメント](https://docs.littlevgl.com/en/html/index.html)を見ただけでは、逆に簡単な図形（例：円）を描く際にどうやったらいいかといった点が見えてこなかったため、使い方に少しクセがあるかもしれません。

もう少し使ってみようと思います。

それでは、見ていただいてありがとうございました。
тнайк чoμ_〆(・ω・｡)			
			
# おまけ

### サンプルプログラムをベースにしてモックアップを作ってみました

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">LittlevGLの使い方が結構分かってきた。既存のフォントと画像だけで作ってみたモックアップ的なアプリ。<a href="https://twitter.com/hashtag/littlevgl?src=hash&amp;ref_src=twsrc%5Etfw">#littlevgl</a> <a href="https://twitter.com/hashtag/lvgl?src=hash&amp;ref_src=twsrc%5Etfw">#lvgl</a> <a href="https://twitter.com/hashtag/ESP32?src=hash&amp;ref_src=twsrc%5Etfw">#ESP32</a> <a href="https://t.co/q8davl5Fgg">pic.twitter.com/q8davl5Fgg</a></p>&mdash; Daiki🍆🍡🌙 (@TwDaiki) <a href="https://twitter.com/TwDaiki/status/1187317525597450241?ref_src=twsrc%5Etfw">October 24, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 + コード(github)
   + https://github.com/bigw00d/esp-idf-littlevgl-sample 

### little vGLのツール

・GUIビルダー：[lv_gui_designer](https://github.com/kaiakz/lv_gui_designer)
・シミュレータ：[pc_simulator_sdl_eclipse](https://github.com/littlevgl/pc_simulator_sdl_eclipse)

# 参考記事

 + espressif公式のデータシート
  + https://www.espressif.com/sites/default/files/documentation/esp32_datasheet_en.pdf

 + LittlevGLのドキュメント
  + https://docs.littlevgl.com/en/html/index.html

# 更新履歴
* 2019-10-24：新規作成