【nRF7002-DK Wi-Fi® 6开发套件评测】驱动ST7789 TFT屏幕使用LVGL显示仪表盘

HonestQiao · 发表于2023-12-13 18:08

【nRF7002-DK Wi-Fi® 6开发套件评测】驱动ST7789 TFT屏幕使用LVGL显示仪表盘 [复制链接]

本帖最后由 HonestQiao 于 2023-12-13 18:44 编辑

之前在 NUCLEO-U5A5ZJ-Q 开发板上，应用过Arduino兼容接口，驱动过ST7789 TFT屏幕。

nRF7002-DK 开发板的官方介绍中，主要特点里面，就有Arduino连接器：

这个Arduino兼容接口，采用的是 Arduino Uno Rev3 规格。 Arduino Uno Rev3 是Arduino 世界最负盛名的开发板型号，兼容该接口，意味着千千万万Arduino Uno Rev3可用的传感器或者外部设备，都可以在咱们板子上使用了。

这篇分享，就是使用Arduino兼容接口，连接DFRobot的ST7789显示屏来实现显示功能，包括基本的显示，以及显示仪表盘。

一、硬件了解

1. nRF7002-DK 开发板的Arduino接口了解

nRF7002-DK 开发板的Arduino兼容接口具体信息，通过查看手册可以了解：

兼容的接口，包括模拟接口A0~A5，数字IO D0~D13，以及IIC接口的SDA、SCL。

在开发版的背面，也做了友好的标注：

对应正面的接口如下：

2. DFRobot ST7789显示屏了解

我手头的这块ST7789如下：

DFRobot官方介绍为：这是一款1.47英寸，分辨率为172×320的彩色高清IPS显示屏，采用驱动芯片ST7789V3、SPI通讯接口。

屏幕的背后如下：

3. 显示屏与开发板连接

显示屏与开发板Arduino兼容接口的连接关系如下：

二、通过样例学习基础使用

在Zephyr中，提供了ST7789的驱动，以及一个LVGL的实例，可以用于驱动ST7789屏来显示，但是在nRF7002-DK上使用，需要做一些对应的处理，具体如下。

1. 新建工程

首先，在VSCode的nRF Connect插件界面，从样例新建一个lvgl工程：

建立完成后，工程如下：

2. 添加nRF7002-DK专用配置

这个目录里面，有一个boards目录，用于存放特定开发板的专属配置文件。

nRF7002-DK在一般编译的时候，对应的board名称为：nrf7002dk_nrf5340_cpuapp

如果是其他类型的，下面的配置要参考添加。

首先，添加一个 nrf7002dk_nrf5340_cpuapp.conf 文件，内容如下：

CONFIG_LV_COLOR_DEPTH_32=y
CONFIG_GPIO=y
CONFIG_INPUT=y

用于定义LVGL的颜色深度，以及启用GPIO等。

然后，再添加一个nrf7002dk_nrf5340_cpuapp.overlay文件，用于自定义dts

#include <zephyr/dt-bindings/led/led.h>

/ {
	chosen {
		zephyr,display = &st7789v_st7789v_dfrobot_172x320;
	};
};

&arduino_spi {
	status = "okay";
	cs-gpios = <&arduino_header 16 GPIO_ACTIVE_LOW>;	/* D10 */

	st7789v_st7789v_dfrobot_172x320: st7789v@0 {
		compatible = "sitronix,st7789v";
		spi-max-frequency = <20000000>;
		reg = <0>;
		cmd-data-gpios = <&arduino_header 15 GPIO_ACTIVE_LOW>;	/* D9 */
		reset-gpios = <&arduino_header 14 GPIO_ACTIVE_LOW>;	/* D8 */
		width = <172>;
		height = <320>;
		x-offset = <35>;
		y-offset = <0>;
		vcom = <0x19>;
		gctrl = <0x35>;
		vrhs = <0x12>;
		vdvs = <0x20>;
		mdac = <0x00>;
		gamma = <0x01>;
		colmod = <0x05>;
		lcm = <0x2c>;
		porch-param = [0c 0c 00 33 33];
		cmd2en-param = [5a 69 02 01];
		pwctrl1-param = [a4 a1];
		pvgam-param = [D0 04 0D 11 13 2B 3F 54 4C 18 0D 0B 1F 23];
		nvgam-param = [D0 04 0C 11 13 2C 3F 44 51 2F 1F 1F 20 23];
		ram-param = [00 F0];
		rgb-param = [CD 08 14];
	};
};

上述配置，定义了我所使用到的st7789屏的具体连接盒初始化信息，在代码中，最终为zephyr_display设备。

3. 编译下载测试

编译上述代码：

然后点Flash下载：

下载后，实际运行的效果如下：

默认的演示代码，会在屏幕上显示 Hello World，并在底部显示一个计数器计数的值。

三、显示仪表盘

上面的演示代码，过于简单，LVGL的强大没有体现出来。

下面，我们根据LVGL官方的实例，来进行仪表盘的显示。

1. 添加meter和inidc的定义

static lv_obj_t * meter;
static lv_meter_indicator_t * indic;

2. 添加仪表盘值更新的回调

static void set_value(void * indic, int32_t v)
{
    lv_meter_set_indicator_value(meter, indic, v);
}

3. 添加一个测试用的仪表盘

void lv_example_meter_1(void)
{
    meter = lv_meter_create(lv_scr_act());
    lv_obj_center(meter);
    lv_obj_set_size(meter, 150, 150);

    /*Add a scale first*/
    lv_meter_scale_t * scale = lv_meter_add_scale(meter);
    lv_meter_set_scale_ticks(meter, scale, 41, 2, 10, lv_palette_main(LV_PALETTE_GREY));
    lv_meter_set_scale_major_ticks(meter, scale, 8, 4, 15, lv_color_black(), 10);

    // lv_meter_indicator_t * indic;

    /*Add a blue arc to the start*/
    indic = lv_meter_add_arc(meter, scale, 3, lv_palette_main(LV_PALETTE_BLUE), 0);
    lv_meter_set_indicator_start_value(meter, indic, 0);
    lv_meter_set_indicator_end_value(meter, indic, 20);

    /*Make the tick lines blue at the start of the scale*/
    indic = lv_meter_add_scale_lines(meter, scale, lv_palette_main(LV_PALETTE_BLUE), lv_palette_main(LV_PALETTE_BLUE),
                                     false, 0);
    lv_meter_set_indicator_start_value(meter, indic, 0);
    lv_meter_set_indicator_end_value(meter, indic, 20);

    /*Add a red arc to the end*/
    indic = lv_meter_add_arc(meter, scale, 3, lv_palette_main(LV_PALETTE_RED), 0);
    lv_meter_set_indicator_start_value(meter, indic, 80);
    lv_meter_set_indicator_end_value(meter, indic, 100);

    /*Make the tick lines red at the end of the scale*/
    indic = lv_meter_add_scale_lines(meter, scale, lv_palette_main(LV_PALETTE_RED), lv_palette_main(LV_PALETTE_RED), false,
                                     0);
    lv_meter_set_indicator_start_value(meter, indic, 80);
    lv_meter_set_indicator_end_value(meter, indic, 100);

    /*Add a needle line indicator*/
    indic = lv_meter_add_needle_line(meter, scale, 4, lv_palette_main(LV_PALETTE_GREY), -10);

    /*Create an animation to set the value*/
    lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_exec_cb(&a, set_value);
    lv_anim_set_var(&a, indic);
    lv_anim_set_values(&a, 0, 100);
    lv_anim_set_time(&a, 2000);
    lv_anim_set_repeat_delay(&a, 100);
    lv_anim_set_playback_time(&a, 500);
    lv_anim_set_playback_delay(&a, 100);
    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
    lv_anim_start(&a);
}

上述代码，添加了一个150x150的仪表盘，取值范围为0~100，并根据取值范围设置了对应的区间颜色：

0~20：蓝色
80~100：红色
其他为默认颜色

在这个演示的最后，用了一个 animation动画来更新仪表盘的值。实际上，也可以在循环部分，直接调用 lv_meter_set_indicator_value(meter, indic, v) 来更新仪表盘的值。

关于LVGL的知识，这里就不详细介绍了，大家可以看LVGL官方的文档，非常的详细，包括各种实例代码。

然后，在源代码的main()部分的while前面，添加下面的代码：

#if 1
	// 清屏
	lv_obj_clean(lv_scr_act());

	lv_example_meter_1();

	while(1) {
		lv_task_handler();
		k_sleep(K_MSEC(10));
	}
#endif

上述代码的逻辑也不复杂，就是调用 lv_example_meter_1() 绘制仪表盘，然后循环更新界面。

4. 编译下载测试

配置和代码处理好了以后，编译下载测试，运行的效果如下：

4495_1702461846

从上面的效果可以看出，运行起来丝滑流畅，效果非常不错。

5. 问题处理

细心的同学，可能会发现，怎么显示的颜色，和前面代码中说明的，不一样啊？

前面还差2个配置需要修改，具体修改如下：

文件：/opt/nordic/ncs/v2.5.0/zephyr/boards/shields/st7789v_generic/Kconfig.defconfig

# Copyright (c) 2019 Jan Van Winkel <jan.van_winkel@dxplore.eu>
# SPDX-License-Identifier: Apache-2.0

if SHIELD_ST7789V_TL019FQV01 || SHIELD_ST7789V_WAVESHARE_240X240 || SHIELD_ST7789V_DFROBOT_172x320

if DISPLAY

choice ST7789V_PIXEL_FORMAT
	default ST7789V_RGB888 if SHIELD_ST7789V_TL019FQV01
	default ST7789V_RGB565 if SHIELD_ST7789V_WAVESHARE_240X240
	default ST7789V_RGB565 if SHIELD_ST7789V_DFROBOT_172x320
endchoice

if LVGL

config LV_Z_BITS_PER_PIXEL
	default 24 if SHIELD_ST7789V_TL019FQV01
	default 16 if SHIELD_ST7789V_WAVESHARE_240X240
	default 16 if SHIELD_ST7789V_DFROBOT_172x320

choice LV_COLOR_DEPTH
	default LV_COLOR_DEPTH_16 if SHIELD_ST7789V_WAVESHARE_240X240
	default LV_COLOR_DEPTH_16 if SHIELD_ST7789V_DFROBOT_172x320
endchoice

config LV_COLOR_16_SWAP
	default y if SHIELD_ST7789V_WAVESHARE_240X240
	default y if SHIELD_ST7789V_DFROBOT_172x320

endif # LVGL

endif # DISPLAY

endif # SHIELD_ST7789V_TL019FQV01 || SHIELD_ST7789V_WAVESHARE_240X240 || SHIELD_ST7789V_DFROBOT_172x320

文件：/opt/nordic/ncs/v2.5.0/zephyr/boards/shields/st7789v_generic/st7789v_dfrobot_172x320.overlay

/*
 * Copyright (c) 2019 Jan Van Winkel <jan.van_winkel@dxplore.eu>
 * Copyright (c) 2019 PHYTEC Messtechnik GmbH
 * Copyright (c) 2023 HonestQiao <honestqiao@gmail.com>
 *
 * SPDX-License-Identifier: Apache-2.0
 */

/ {
	chosen {
		zephyr,display = &st7789v_st7789v_dfrobot_172x320;
	};
};

&arduino_spi {
	status = "okay";
	cs-gpios = <&arduino_header 16 GPIO_ACTIVE_LOW>;	/* D10 */

	st7789v_st7789v_dfrobot_172x320: st7789v@0 {
		compatible = "sitronix,st7789v";
		spi-max-frequency = <20000000>;
		reg = <0>;
		cmd-data-gpios = <&arduino_header 15 GPIO_ACTIVE_LOW>;	/* D9 */
		reset-gpios = <&arduino_header 14 GPIO_ACTIVE_LOW>;	/* D8 */
		width = <172>;
		height = <320>;
		x-offset = <35>;
		y-offset = <0>;
		vcom = <0x19>;
		gctrl = <0x35>;
		vrhs = <0x12>;
		vdvs = <0x20>;
		mdac = <0x00>;
		gamma = <0x01>;
		colmod = <0x05>;
		lcm = <0x2c>;
		porch-param = [0c 0c 00 33 33];
		cmd2en-param = [5a 69 02 01];
		pwctrl1-param = [a4 a1];
		pvgam-param = [D0 04 0D 11 13 2B 3F 54 4C 18 0D 0B 1F 23];
		nvgam-param = [D0 04 0C 11 13 2C 3F 44 51 2F 1F 1F 20 23];
		ram-param = [00 F0];
		rgb-param = [CD 08 14];
	};
};

上述两个文件的路径，请根据你的实际情况修改。

修改完成后，编译参数添加一个：-DSHIELD=st7789v_dfrobot_172x320

然后重新进行编译下载，最终的效果如下：

4496_1702464247

这次，颜色就完全正常了。

四、总结

nRF7002-DK 开发板的Arduino兼容接口非常的方便，能够快速应用上手头的Arduino外部设备，对开发者非常的友好。

上面演示了驱动ST7789，以及LVGL的简单应用。但LVGL的功能非常的强大，小到简单的仪表盘，再次播放器，或者其他更复杂的界面，都完全能够胜任。

掌握好了LVGL，以及相关的开发工具，就相当于给嵌入式设备开了光了，赶紧用起来吧。