ESP32-P4: LVGLで画像表示

2025年8月18日2025年8月19日

ESP32-P4-Function-EV-Boardで、付属のLCDに好きな画像を表示させる方法を解説します。

ESP32-P4は、espressif社製の無線モジュールESPシリーズなのですが、他のESP32とは毛色が異なり、無線機能はなくSoC単体です。しかし、高性能であるため、様々な応用ができるとおもいます。従来のESP32シリーズと同様、ESP-IDFで開発できます。EV-Boardにはタッチパネル付きのLCD（1024×600、MIPI DSI）とカメラが同梱されていて、購入時デモプログラムが書き込まれています。また、EV-Boardには無線モジュールも搭載されているため、Wi-Fiも利用可能です。

LVGLというグラフィックライブラリが利用可能で、これをつかうことで簡単に様々なウィジェットと呼ばれるパーツや画像を表示させることができます。

今回は、練習として任意の画像を表示させてみました。

環境

VSCode上のESP-IDF
ESP-IDF v5.5.0
- これ未満のバージョンではビルドできません。

準備

プロジェクトの作成

まず、New Project Wizardでプロジェクトを作成します。

Project Nameは「ESP32P4_Learn」（これは任意）、Choose ESP-IDF Targetにはesp32p4を、Choose ESP-IDF BoardにはESP32-P4 chip (via builtin USB-JTAG)を選択します。

Choose Templateを押下し、左のメニューバーからtemplate-appを選択、右上のCreate project using template template-appを押して、少し待つと右下に「(省略)new window?」というメッセージが出るので、Yesを押して新規ウィンドウで開きます。これでプロジェクトができました。ウィンドウが開いたら、右下に今度は「Generate compile_commands.json」というボタンが出るので押します。

コンポーネントの準備

プロジェクトのルート（「ESP32P4_Learn」フォルダ内）にcomponentsフォルダを作成します。

GitHubからesp-bspをダウンロードし、esp-bspのcomponentsフォルダの中身すべてと、bspフォルダ内のesp32_p4_function_ev_boardフォルダを作成したcomponentsフォルダ内にコピーします。

component配下に以下のフォルダがあればOKです。

components
- m5dial
- m5stack_core
- m5stack_core_2
- m5stack_core_s3
- esp_bsp_devkit
- esp_bsp_generic
- esp_wrover_kit
- esp32_azure_iot_kit
- esp32_c3_lcdkit
- esp32_p4_function_ev_board
- esp32_s2_kaluga_kit
- esp32_s3_eye
- esp32_s3_korvo_1
- esp32_s3_korvo_2
- esp32_s3_lcd_ev_board
- esp32_s3_usb_otg
- esp-box
- esp-box-3
- esp-box-lite
- m5_atom_s3

画像データの用意

1024×600ピクセルの画像を用意します。今回はライフminanoba相模原店でのイベントで撮影した写真を用意しました。ファイル名は変数名となるため、C言語における変数名の命名規則に従ってください（数字から始まる名前や、英数字とアンダースコア以外は使えません）。今回は「life_lalapi.jpg」としました。

今回は簡易的なプログラムのため、JPEGデコードなどは行わず、あらかじめ画像を配列化しておきます。LVGL Image Converterを使い、RGB565でconvertします。するとlife_lalapi.cというファイルがダウンロードされますので、プロジェクトのmainフォルダ（main.cと同一階層）に移動し、mainフォルダ内のCMakeLists.txtにlife_lalapi.cを追加します。CMakeListの記述例は以下のようになります：

idf_component_register(SRCS "main.c" "life_lalapi.c"
                    INCLUDE_DIRS ".")

コーディング

main.cは次のようになります。短いですね。

#include <stdio.h>
#include "bsp/esp-bsp.h"
#include "lvgl.h"

extern const lv_image_dsc_t life_lalapi;

void app_main(void)
{
    bsp_display_start();
    bsp_display_backlight_on();

    bsp_display_lock(0);

    lv_obj_t *screen = lv_disp_get_scr_act(NULL);

    lv_obj_t *img = lv_image_create(screen);
    LV_IMG_DECLARE(life_lalapi);
    lv_image_set_src(img, &life_lalapi);
    lv_obj_center(img);

    bsp_display_unlock();
}