STM32F407ベースのLVGLプロジェクトテンプレート（MSP3526ディスプレイ）、FreeRTOS版とベアメタル版を含む

プロジェクト実践 オープンソースプロジェクト
, , , ,
1

STM32F407にLVGLグラフィックライブラリをポートし、LCDパネルはMSP3526です。別の画面に変更したい場合はLCDドライバを自分で修正できます。プロジェクトにはFreeRTOS版とベアメタル版の両方が含まれており、SPI＋DMAで画面を駆動します。

このLCDパネルの解像度は320×480、サイズは3.5インチ、LCD駆動ICはST7796、インターフェースはSPI、静電容量タッチパネル駆動ICはFT6336U、インターフェースはI²Cです。

MCUをオーバークロックした状態でフルスクリーン更新時のフレームレートは約9 FPS、部分更新時は30 FPS超。SPIとしては十分な数値だと思います。

電子・マイコン技術交流QQ群：2169025065

効果図

デモ動画：https://www.bilibili.com/video/BV1Ni421S7ta/

4640×6960 1.88 MB

5824×4368 1.82 MB

4368×5824 1.66 MB

6960×4640 1.82 MB

6960×4640 1.77 MB

6960×4640 1.78 MB

LVGL概要

LVGL（Light and Versatile Graphics Library）は無料・オープンソースのグラフィックライブラリで、使いやすいGUI部品、美しい視覚効果、低メモリ消費を備えた組み込みGUI作成に必要な機能を全て提供します。

主な特徴：

  • 豊富で強力なモジュール式グラフィックコンポーネント：ボタン、チャート、リスト、スライダ、画像など
  • 高度なグラフィックエンジン：アニメーション、アンチエイリアス、透明度、スムーズスクロール、レイヤブレンド
  • タッチパネル、キーボード、エンコーダ、ボタンなど複数の入力デバイス対応
  • マルチディスプレイ対応
  • 特定ハードウェアに依存せず、任意のディスプレイで動作
  • コンパクトにカスタマイズ可能（最小構成：Flash 64 kB、RAM 16 kB）
  • UTF-8ベースの多言語サポート（中国語、日本語、韓国語、アラビア語など）
  • CSSライクなFlexbox/Gridレイアウト
  • OS、外部メモリ、ハードウェアアクセラレーション対応（STM32 DMA2D、NXP PXP、VGLiteを内蔵）
  • シングルフレームバッファでもスムーズな描画
  • 純粋C言語で記述、C++からも呼び出し可能
  • MicroPython対応（LVGL API in MicroPython）
  • シミュレータによる無ハードウェア開発
  • 豊富なサンプルコード
  • 詳細なオンライン/PDFドキュメント＆APIリファレンス
  • MITライセンスで無料・オープンソース

動作要件：

基本的にディスプレイを駆動できる現代のコントローラなら動作します。最低限必要なスペック：

  • 16/32/64ビットマイクロコントローラまたはプロセッサ
  • 推奨クロック＞16 MHz
  • Flash/ROM：重要コンポーネント用＞64 kB（推奨＞180 kB）
  • RAM：
    • 静的RAM使用量：～2 kB（機能・オブジェクト種別依存）
    • ヒープ：＞2 kB（推奨＞8 kB）
    • 動的データ（ヒープ）：＞2 kB（複数オブジェクト使用時推奨＞16 kB）※lv_conf.h内でLV_MEM_SIZE設定
    • 表示バッファ：＞水平解像度ピクセル（推奨＞10×水平解像度）
    • MCUまたは外部ディスプレイコントローラ内の1フレームバッファ
  • C99以降のコンパイラ

LVGL公式サイト：https://lvgl.io/

配線説明

LCDパネル MCU/ボード 機能説明
GND GND LCDパネルGND
VCC 5 V/3.3 V LCDパネル電源正
LCD_CS PE6 LCD SPIチップセレクト
LCD_RST PC1 LCDリセット
LCD_RS PC0 LCDコマンド／データ選択
SDI(MOSI) PB5 LCD SPIデータ線（Master→Slave）
SCK PB3 LCD SPIクロック
LED 3.3 V バックライトLED（IO接続・ソフト制御可）
SDO(MISO) PB4 LCD SPIデータ線（Slave→Master）
CTP_SCL PB8 静電容量タッチI²Cクロック線
CTP_RST PB7 静電容量タッチコントローラRST
CTP_SDA PB9 静電容量タッチI²Cデータ線
CTP_INT PB6 静電容量タッチコントローラINT

注意：効果図に使っているボードではPB4ピンは両端のヘッダに出ておらず、上部のJTAGコネクタにあります。

資料・プログラムダウンロード

画面資料オンライン文書：https://url.zeruns.com/68x3Y

画面資料パックDL先1：https://www.123pan.com/s/2Y9Djv-rZevH.html

画面資料パックDL先2：https://url.zeruns.com/gzBO4

ベアメタル版STM32F407＋LVGLプロジェクトDL先1：https://url.zeruns.com/X242k

ベアメタル版STM32F407＋LVGLプロジェクトDL先2：https://pan.baidu.com/s/1vAhHijYd_aWvRr3_c1_WtA?pwd=ry4g

FreeRTOS版STM32F407＋LVGLプロジェクトDL先1：https://www.123pan.com/s/2Y9Djv-CzevH.html

FreeRTOS版STM32F407＋LVGLプロジェクトDL先2：https://url.zeruns.com/0iOHF

ぜひStarをお願いします！

プログラムGitee开源地址：https://gitee.com/zeruns/STM32F407_LVGL_Template_MSP3526

プログラムGitHub开源地址：https://github.com/zeruns/STM32F407_LVGL_Template_MSP3526

Gitee・GitHubの最新版はFreeRTOS版です。ベアメタル版はReleasesのv0.1.3をご利用ください。

STM32CubeMXで生成したプロジェクトをKeil5＋VScode＋EIDEで開発しています。

正点原子の移植チュートリアルを参考にしました。

正点原子「LVGLの使用と移植」ビデオチュートリアルDL先1：https://www.123pan.com/s/2Y9Djv-0ZevH.html

正点原子「LVGLの使用と移植」ビデオチュートリアルDL先2：https://www.alipan.com/s/Pd6TDfT2rBL

使い方

コードをダウンロードしてビルド・書き込むだけで動作します。

フレームレートやメモリ使用率の表示を無効にしたい場合はlv_conf.h内の以下マクロを1→0に変更してください。

/*1: Show CPU usage and FPS count*/
#define LV_USE_PERF_MONITOR 1
#if LV_USE_PERF_MONITOR
    #define LV_USE_PERF_MONITOR_POS LV_ALIGN_BOTTOM_RIGHT
#endif

/*1: Show the used memory and the memory fragmentation
 * Requires LV_MEM_CUSTOM = 0*/
#define LV_USE_MEM_MONITOR 1
#if LV_USE_MEM_MONITOR
    #define LV_USE_MEM_MONITOR_POS LV_ALIGN_BOTTOM_LEFT
#endif
```![](upload://gM3vy1FSbkp0rfvCP6rg7bj5HDX.png)

FreeRTOS版を使用する場合は `freertos.c` ファイルにコードを記述します。STM32CubeMXソフトウェアを使用してスレッドやセマフォなどを作成し、コードを生成できます。生成されたコードは指定された位置に規則に従って記述されており、再生成しても自分で書いたコードには影響しません。ベアメタル版の場合は直接 `main.c` ファイルにコードを記述してください。

デモプログラムを無効にする必要がある場合は、下図のコードをコメントアウトしてください。

![](upload://rnrQUS1XVqXJTepVovvXcJek7T2.png)

## 部品購入先

- STM32F407VET6開発ボード：[https://s.click.taobao.com/sQSMWmt](https://s.click.taobao.com/t?e=m%3D2%26s%3DGxUVgIOWBWVw4vFB6t2Z2ueEDrYVVa64g3vZOarmkFi53hKxp7mNFrMfIvbtZ%2F%2B2IT%2BVhjqUP7X0JlhLk0Jl4QTquP0kWxBLBDnvz6xo38xspWc9%2BCL4bTGF1ceZMhPo8mL8HhJ3EdVrH4ks4QyiY4z4rjZDGVMAhscfsB2%2FyzZJq71CBMBeP%2F1SarTXhIOTsgIpc1WFZiJNubylQlnZt0ft88oCh4qlKjZ0Zrpn9cYR7kNHbGZ5w15bTaW0%2FWfaQBd0yVbMw3IeTeL3FeYp0owmLWBgEm80VKxcI130SjETn2JhMaQNtYWLhXkoGmYygFktLIh%2BAXuBHaXkFVFVVsYOae24fhW0&union_lens=lensId%3APUB%401716477927%40212abf30_0d16_18fa60ea164_1890%40025BlJPZdLaOG4oFPxX7gKUY%40eyJmbG9vcklkIjo4MDY3NCwiic3BtQiiI6Il9wb3J0YWxfdjJfcGFnZXNfcHJvbW9fZ29vZHNfaW5kZXhfaHRtIiiwiic3JjRmxvb3JJZCI6IjgwNjc0In0ie%3BtkScm%3AselectionPlaza_site_4358%3Bscm%3A1007.30148.329090.pub_search-item_5a7fc953-12f7-46f5-8abf-f0725f8174cf_)
- Daplinkダウンローダー：[https://s.click.taobao.com/9kMKWmt](https://s.click.taobao.com/t?e=m%3D2%26s%3DTHTCnVvsTHtw4vFB6t2Z2ueEDrYVVa64YUrQeSeIhnK53hKxp7mNFrMfIvbtZ%2F%2B2mFKI%2FmDcMIH0JlhLk0Jl4QTquP0kWxBLBDnvz6xo38xspWc9%2BCL4bTGF1ceZMhPo8mL8HhJ3EdVrH4ks4QyiY4z4rjZDGVMAFBcM8wkWlGmBPeR%2FUFCetKLWMw3EOEsyJN2owMjhufwDudUsQ2T%2Bdnc9abdYtRqDTzYdoB%2FDOjstFZhpb%2ByhLzPbHWUbis%2BWsZGiFV6vs3eSWi1ViPhRlULEkqTedE399KEV1g6mN9AKChukhDzWey1fmH6DK4UhxgxdTc00KD8%3D&union_lens=lensId%3APUB%401716478245%4021673e1b_0d06_18fa6137a23_e4cb%40023uxCV3Edv0RnAmphuKflFP%40eyJmbG9vcklkIjo4MDY3NCwiic3BtQiiI6Il9wb3J0YWxfdjJfcGFnZXNfcHJvbW9fZ29vZHNfaW5kZXhfaHRtIiiwiic3JjRmxvb3JJZCI6IjgwNjc0In0ie%3BtkScm%3AselectionPlaza_site_4358%3Bscm%3A1007.30148.329090.pub_search-item_be2f7d85-fcee-40ff-96c5-d9d5bd472c5d_)
- MSP3526スクリーン：[https://s.click.taobao.com/i1Z29nt](https://s.click.taobao.com/t?e=m%3D2%26s%3DepCXgq%2FZmWBw4vFB6t2Z2ueEDrYVVa64g3vZOarmkFi53hKxp7mNFrMfIvbtZ%2F%2B2tJl3z4Kcvjj0JlhLk0Jl4QTquP0kWxBLBDnvz6xo38xspWc9%2BCL4bTGF1ceZMhPo8mL8HhJ3EdVrH4ks4QyiY4z4rjZDGVMA%2FEM5jbZlb7P9R7R4oT9ML5ESMSIvSnZOMN7NXhFCiynJvjSktgLu1nmUrf%2BRsjyAm8kA6wY1r21y2p9AgG%2F91VmfPAhbcEJheBtNII99o%2FtnjWeMZ%2B39PZGZ9wPRcXV%2BQ%2FMlsmagC3ST4aDEgnPNca8ZkUY0DmW2xiXvDf8DaRs%3D&skuId=5223178287593&union_lens=lensId%3APUB%401716478528%40212c5298_0d1d_18fa617cd1e_3501%40034rs5qkRnldNGhC5eLF4gZ4%40eyJmbG9vcklkIjo4NTQ2Nywiic3BtQiiI6Il9wb3J0YWxfdjJfcGFnZXNfcHJvbW9fZ29vZHNfZGV0YWlsX2h0bSIsInNyY0Zsb29ySWQiiOiiI4MDY3NCJ9%3BtkScm%3AselectionPlaza_site_4358%3Bscm%3A1007.30148.329090.pub_search-item_18bdbb55-0a4c-494e-96fc-a14c1b4c6732_)
- ジャンパワイヤー：[https://s.click.taobao.com/W1wHWmt](https://s.click.taobao.com/t?e=m%3D2%26s%3DD%2BKEsm2G8bhw4vFB6t2Z2ueEDrYVVa64g3vZOarmkFi53hKxp7mNFrMfIvbtZ%2F%2B2Sn8%2BqdSFAFT0JlhLk0Jl4QTquP0kWxBLBDnvz6xo38xspWc9%2BCL4bTGF1ceZMhPo8mL8HhJ3EdVrH4ks4QyiY4z4rjZDGVMAhscfsB2%2FyzZJq71CBMBeP%2F1SarTXhIOTsgIpc1WFZiJNubylQlnZt5Tr%2BZsTRXxVoTwQXkQy%2BZ5FeGSAzHUbnuYhpSNeyz6v9H5aeGRpz8mogVv1SEjhEYwmLWBgEm80VKxcI130SjETn2JhMaQNtYWLhXkoGmYyO0%2FufYOLJc1EEap0MMy2i8YOae24fhW0&union_lens=lensId%3APUB%401716478612%402104b45c_0cd2_18fa619123a_652e%40023dY61JLu6wYjo297E4L0ip%40eyJmbG9vcklkIjo4MDY3NCwiic3BtQiiI6Il9wb3J0YWxfdjJfcGFnZXNfcHJvbW9fZ29vZHNfaW5kZXhfaHRtIiiwiic3JjRmxvb3JJZCI6IjgwNjc0In0ie%3BtkScm%3AselectionPlaza_site_4358%3Bscm%3A1007.30148.329090.pub_search-item_c09a2639-b75e-40a9-8886-2b13dfb05f6a_)
- STM32F407VGT6開発ボード：[https://s.click.taobao.com/VjC29nt](https://s.click.taobao.com/t?e=m%3D2%26s%3DimgWkSQh79Jw4vFB6t2Z2ueEDrYVVa64g3vZOarmkFi53hKxp7mNFrMfIvbtZ%2F%2B2VCC9Q%2BPYiL70JlhLk0Jl4QTquP0kWxBLBDnvz6xo38xspWc9%2BCL4bTGF1ceZMhPo8mL8HhJ3EdVrH4ks4QyiY4z4rjZDGVMAhscfsB2%2FyzZJq71CBMBeP%2F1SarTXhIOTsgIpc1WFZiJNubylQlnZt1PgRVjPwS2ItjXwer7KgrNYvdwnwfvUuaclSgSzfliuRVQ2zHzYrnKVyphVinEJT4wmLWBgEm80VKxcI130SjETn2JhMaQNtYWLhXkoGmYy0ZHJIUNbntFzUAbdwYp3usYOae24fhW0&union_lens=lensId%3APUB%401716478657%4021547cbb_0d71_18fa619c373_1476%40027J4l8QPFtC3F2VYygWUUdV%40eyJmbG9vcklkIjo4MDY3NCwiic3BtQiiI6Il9wb3J0YWxfdjJfcGFnZXNfcHJvbW9fZ29vZHNfaW5kZXhfaHRtIiiwiic3JjRmxvb3JJZCI6IjgwNjc0In0ie%3BtkScm%3AselectionPlaza_site_4358%3Bscm%3A1007.30148.329090.pub_search-item_a456d2bb-5c50-4eb6-a55f-0e6f4ff87eed_)

## 主要コードスニペット

主に`lv_port_disp.c`ファイルの`disp_flush`関数内で以下のLCD塗りつぶし関数を呼び出します。LCDドライバはスクリーンの公式サンプルプログラムを基に改造しています。

```c
/**
 * @brief LCD画面の指定矩形領域を塗りつぶす
 * LVGLライブラリの色値を使用してLCDの指定領域を塗りつぶす。
 * @param sx 開始X座標
 * @param sy 開始Y座標
 * @param ex 終了X座標
 * @param ey 終了Y座標
 * @param color_p 塗りつぶす色へのポインタ
 */
void LCD_Fill_LVGL(uint16_t sx, uint16_t sy, uint16_t ex, uint16_t ey, lv_color_t *color_p)
{
	uint32_t i, j;
	uint16_t width = ex - sx + 1;	 // 塗りつぶし領域の幅を計算
	uint16_t height = ey - sy + 1;	 // 塗りつぶし領域の高さを計算
	uint32_t Pixel = width * height; // 塗りつぶし領域のピクセル数を計算
	LCD_SetWindows(sx, sy, ex, ey);	 // LCDの表示ウィンドウを指定領域に設定

//	for (i = 0; i < height; i++)
//	{
//		for (j = 0; j < width; j++){
//			Lcd_WriteData_16Bit(color_p->full); // データを書き込む
//		}
//	}

// データ分割値、データを分割して送信するため
#define data_split 3000

	uint8_t data[Pixel * 2]; // 色データを格納する配列を作成

	for (i = 0; i < Pixel; i++)
	{
		// 色データを16ビットから2つの8ビットデータに変換
		data[i * 2] = (color_p->full) >> 8;			// 上位8ビットデータを取得
		data[i * 2 + 1] = (uint8_t)(color_p->full); // 下位8ビットデータを取得
		color_p++;										// 次の色値へポインタを進める

		// データ量が10000より大きいかを判定、大きい場合は分割してデータを送信
		if (Pixel > 10000)
		{
			if ((i + 1) % data_split == 0)
			{
				if ((i + 1) == data_split)
				{
					Lcd_WriteData_DMA(data, data_split * 2); // DMA方式でデータを送信
				}
				else
				{
					while (HAL_SPI_GetState(LCD_SPI) != HAL_SPI_STATE_READY);								// SPIバスがアイドルになるまで待機
					uint8_t *temp = &data[((uint16_t)((i + 1) / data_split) - 1) * data_split * 2]; // 残りデータを取得
					Lcd_WriteData_DMA(temp, data_split * 2);											// DMA方式でデータを送信
				}
			}
			else if (((i + 1) % data_split > 0) && ((i + 1) > data_split) && (i == (Pixel - 1)))
			{
				if ((uint16_t)((i + 1) / data_split) == 1)
				{
					while (HAL_SPI_GetState(LCD_SPI) != HAL_SPI_STATE_READY)
						;										 // SPIバスがアイドルになるまで待機
					uint8_t *temp = &data[data_split * 2];			 // 残りデータを取得
					Lcd_WriteData_DMA(temp, ((i + 1) % data_split) * 2); // DMA方式でデータを送信
				}
				else
				{
					while (HAL_SPI_GetState(LCD_SPI) != HAL_SPI_STATE_READY)
						;													  // SPIバスがアイドルになるまで待機
					uint8_t *temp = &data[(uint16_t)((i + 1) / data_split) * data_split * 2]; // 残りデータを取得
					Lcd_WriteData_DMA(temp, ((i + 1) % data_split) * 2);
				}
			}
		}
	}

	if (Pixel <= 10000)
	{
		// 送信データが10000*2バイト未満の場合は一度に全て送信
		Lcd_WriteData_DMA(data, Pixel * 2);
	}

	LCD_SetWindows(0, 0, lcddev.width - 1, lcddev.height - 1); // ウィンドウ設定を全画面に復元
}

その他のオープンソースプロジェクト推奨

おすすめ記事

「いいね！」 1