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

はじめに

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

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

#LittlevGL というグラフィックライブラリのデモの様子。タッチセンサも対応しているみたい。スマホみたいなアプリが作りやすいと嬉しいけど、どんなもんかな。 pic.twitter.com/YDoxoE6YE4

— Daiki🍆🍡🌙 (@TwDaiki) October 16, 2019

使用したもの

• ESPr® Developer 32　 ※これ以降は「ESP32］と呼称
• HiLetgo® 2.8 "TFT LCDディスプレイ タッチパネル
• 開発に使用したOS：Ubuntu18.04 ( Windows7 Pro 64bit をホストOSとするVirtualBoxにインストール )

結線

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

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の向き

３. 動作を確認する

プログラムをビルドして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・・・）で指定することもできます。

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

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

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

おまけ

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

LittlevGLの使い方が結構分かってきた。既存のフォントと画像だけで作ってみたモックアップ的なアプリ。#littlevgl #lvgl #ESP32 pic.twitter.com/q8davl5Fgg

— Daiki🍆🍡🌙 (@TwDaiki) October 24, 2019

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

little vGLのツール

・GUIビルダー：lv_gui_designer
・シミュレータ：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：新規作成