GUI API详解

如果您以前使用过我们的SPI屏幕应该会对这份例程比较熟悉

C

底层硬件接口

我们进行了底层的封装，由于硬件平台不一样，内部的实现是不一样的，如果需要了解内部实现可以去对应的目录中查看
在DEV_Config.c(.h)可以看到很多定义，在目录：c\lib\Config

• 数据类型：

#define UBYTE   uint8_t
#define UWORD   uint16_t
#define UDOUBLE uint32_t

• 模块初始化与退出的处理：

void DEV_Module_Init(void);
void DEV_Module_Exit(void);
注意：
1.这里是处理使用液晶屏前与使用完之后一些GPIO的处理。

• GPIO读写：

void 	DEV_Digital_Write(UWORD Pin, UBYTE Value);
UBYTE 	DEV_Digital_Read(UWORD Pin);

• SPI写数据

void DEV_SPI_WriteByte(UBYTE Value);

上层应用

对于屏幕而言，如果需要进行画图、显示中英文字符、显示图片等怎么办，这些都是上层应用做的。这有很多小伙伴有问到一些图形的处理，我们这里提供了一些基本的功能 在如下的目录中可以找到GUI，在目录：c\lib\GUI\GUI_Paint.c(.h)

在如下目录下是GUI依赖的字符字体，在目录：c\lib\Fonts

• 新建图像属性:新建一个图像属性，这个属性包括图像缓存的名称、宽度、高度、翻转角度、颜色

void Paint_NewImage(UWORD *image, UWORD Width, UWORD Height, UWORD Rotate, UWORD Color)
参数：
 	image:  图像缓存的名称，实际上是一个指向图像缓存首地址的指针；
 	Width:  图像缓存的宽度；
 	Height: 图像缓存的高度；
 	Rotate: 图像的翻转的角度
 	Color:  图像的初始颜色；

• 选择图像缓存:选择图像缓存，选择的目的是你可以创建多个图像属性，图像缓存可以存在多个，你可以选择你所创建的每一张图像

void Paint_SelectImage(UBYTE *image)
参数：
 	image: 图像缓存的名称，实际上是一个指向图像缓存首地址的指针；

• 图像旋转:设置选择好的图像的旋转角度，最好使用在Paint_SelectImage()后，可以选择旋转0、90、180、270

void Paint_SetRotate(UWORD Rotate)
参数：
 	Rotate: 图像选择角度，可以选择ROTATE_0、ROTATE_90、ROTATE_180、ROTATE_270分别对应0、90、180、270度

【说明】不同选择角度下，坐标对应起始像素点不同，这里以1.14为例，四张图，按顺序为0°， 90°， 180°， 270°。仅做为参考

• 图像镜像翻转:设置选择好的图像的镜像翻转，可以选择不镜像、关于水平镜像、关于垂直镜像、关于图像中心镜像。

void Paint_SetMirroring(UBYTE mirror)
参数：
 	mirror: 图像的镜像方式，可以选择MIRROR_NONE、MIRROR_HORIZONTAL、MIRROR_VERTICAL、MIRROR_ORIGIN分别对应不镜像、关于水平镜像、关于垂直镜像、关于图像中心镜像

• 设置点在缓存中显示位置和颜色：这里是GUI最核心的一个函数、处理点在缓存中显示位置和颜色；

void Paint_SetPixel(UWORD Xpoint, UWORD Ypoint, UWORD Color)
参数：
 	Xpoint: 点在图像缓存中X位置
 	Ypoint: 点在图像缓存中Y位置
 	Color:  点显示的颜色

• 图像缓存填充颜色:把图像缓存填充为某颜色，一般作为屏幕刷白的作用

void Paint_Clear(UWORD Color)
参数：
 	Color: 填充的颜色

• 图像缓存部分窗口填充颜色：把图像缓存的某部分窗口填充为某颜色，一般作为窗口刷白的作用，常用于时间的显示，刷白上一秒

void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
参数：
 	Xstart: 窗口的X起点坐标
 	Ystart: 窗口的Y起点坐标
 	Xend:   窗口的X终点坐标
 	Yend:   窗口的Y终点坐标
 	Color:  填充的颜色

• 画点:在图像缓存中，在（Xpoint, Ypoint）上画点，可以选择颜色，点的大小，点的风格

void Paint_DrawPoint(UWORD Xpoint, UWORD Ypoint, UWORD Color, DOT_PIXEL Dot_Pixel, DOT_STYLE Dot_Style)
参数：
 	Xpoint: 点的X坐标
 	Ypoint: 点的Y坐标
 	Color:  填充的颜色
 	Dot_Pixel: 点的大小，提供默认的8种大小点
 	 	 typedef enum {
 	 	 	 DOT_PIXEL_1X1  = 1,	// 1 x 1
 	 	 	 DOT_PIXEL_2X2  , 		// 2 X 2
 	 	 	 DOT_PIXEL_3X3  , 	 	// 3 X 3
 	 	 	 DOT_PIXEL_4X4  , 	 	// 4 X 4
 	 	 	 DOT_PIXEL_5X5  , 		// 5 X 5
 	 	 	 DOT_PIXEL_6X6  , 		// 6 X 6
 	 	 	 DOT_PIXEL_7X7  , 		// 7 X 7
 	 	 	 DOT_PIXEL_8X8  , 		// 8 X 8
 	 	} DOT_PIXEL;
 	Dot_Style: 点的风格,大小扩充方式是以点为中心扩大还是以点为左下角往右上扩大
 	 	typedef enum {
 	 	   DOT_FILL_AROUND  = 1,		
 	 	   DOT_FILL_RIGHTUP,
 	 	} DOT_STYLE;

• 画线：在图像缓存中，从 (Xstart, Ystart) 到 (Xend, Yend) 画线，可以选择颜色，线的宽度，线的风格

void Paint_DrawLine(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color, LINE_STYLE Line_Style , LINE_STYLE Line_Style)
参数：
 	Xstart: 线的X起点坐标
 	Ystart: 线的Y起点坐标
 	Xend:   线的X终点坐标
 	Yend:   线的Y终点坐标
 	Color:  填充的颜色
 	Line_width: 线的宽度，提供默认的8种宽度
 	 	typedef enum {
 	 	 	 DOT_PIXEL_1X1  = 1,	// 1 x 1
 	 	 	 DOT_PIXEL_2X2  , 		// 2 X 2
 	 	 	 DOT_PIXEL_3X3  ,		// 3 X 3
 	 	 	 DOT_PIXEL_4X4  ,		// 4 X 4
 	 	 	 DOT_PIXEL_5X5  , 		// 5 X 5
 	 	 	 DOT_PIXEL_6X6  , 		// 6 X 6
 	 	 	 DOT_PIXEL_7X7  , 		// 7 X 7
 	 	 	 DOT_PIXEL_8X8  , 		// 8 X 8
 	 	} DOT_PIXEL;
 	 Line_Style: 线的风格,选择线是以直线连接还是以虚线的方式连接
 	 	typedef enum {
 	 	 	 LINE_STYLE_SOLID = 0,
 	 	 	 LINE_STYLE_DOTTED,
 	 	} LINE_STYLE;

• 画矩形:在图像缓存中，从 (Xstart, Ystart) 到 (Xend, Yend) 画一个矩形，可以选择颜色，线的宽度，是否填充矩形内部

void Paint_DrawRectangle(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color, DOT_PIXEL Line_width, DRAW_FILL Draw_Fill)
参数：
 	Xstart: 矩形的X起点坐标
 	Ystart: 矩形的Y起点坐标
 	Xend:   矩形的X终点坐标
 	Yend:   矩形的Y终点坐标
 	Color:  填充的颜色
 	Line_width: 矩形四边的宽度，提供默认的8种宽度
 	 	typedef enum {
 	 	 	 DOT_PIXEL_1X1  = 1,	// 1 x 1
 	 	 	 DOT_PIXEL_2X2  , 		// 2 X 2
 	 	 	 DOT_PIXEL_3X3  ,		// 3 X 3
 	 	 	 DOT_PIXEL_4X4  ,		// 4 X 4
 	 	 	 DOT_PIXEL_5X5  , 		// 5 X 5
 	 	 	 DOT_PIXEL_6X6  , 		// 6 X 6
 	 	 	 DOT_PIXEL_7X7  , 		// 7 X 7
 	 	 	 DOT_PIXEL_8X8  , 		// 8 X 8
 	 	} DOT_PIXEL;
 	Draw_Fill: 填充,是否填充矩形的内部
 	 	typedef enum {
 	 	 	 DRAW_FILL_EMPTY = 0,
 	 	 	 DRAW_FILL_FULL,
 	 	} DRAW_FILL;

• 画圆:在图像缓存中，以 (X_Center Y_Center) 为圆心，画一个半径为Radius的圆，可以选择颜色，线的宽度，是否填充圆内部

void Paint_DrawCircle(UWORD X_Center, UWORD Y_Center, UWORD Radius, UWORD Color, DOT_PIXEL Line_width, DRAW_FILL Draw_Fill)
参数：
 	X_Center: 圆心的X坐标
 	Y_Center: 圆心的Y坐标
 	Radius：  圆的半径
 	Color:    填充的颜色
 	Line_width: 圆弧的宽度，提供默认的8种宽度
 	 	typedef enum {
 	 	 	 DOT_PIXEL_1X1  = 1,	// 1 x 1
 	 	 	 DOT_PIXEL_2X2  , 		// 2 X 2
 	 	 	 DOT_PIXEL_3X3  ,		// 3 X 3
 	 	 	 DOT_PIXEL_4X4  ,		// 4 X 4
 	 	 	 DOT_PIXEL_5X5  , 		// 5 X 5
 	 	 	 DOT_PIXEL_6X6  , 		// 6 X 6
 	 	 	 DOT_PIXEL_7X7  , 		// 7 X 7
 	 	 	 DOT_PIXEL_8X8  , 		// 8 X 8
 	 	} DOT_PIXEL;
 	Draw_Fill: 填充,是否填充圆的内部
 	 	typedef enum {
 	 	 	 DRAW_FILL_EMPTY = 0,
 	 	 	 DRAW_FILL_FULL,
 	 	} DRAW_FILL;

• 写Ascii字符:在图像缓存中，在 (Xstart Ystart) 为左顶点，写一个Ascii字符，可以选择Ascii码可视字符字库、字体前景色、字体背景色

void Paint_DrawChar(UWORD Xstart, UWORD Ystart, const char Ascii_Char, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
参数：
 	Xstart: 字符的左顶点X坐标
 	Ystart: 字体的左顶点Y坐标
 	Ascii_Char：Ascii字符
 	Font: Ascii码可视字符字库，在Fonts文件夹中提供了以下字体：
 	 	font8：5*8的字体
 	 	font12：7*12的字体
 	 	font16：11*16的字体
 	 	font20：14*20的字体
 	 	font24：17*24的字体
 	Color_Foreground: 字体颜色
 	Color_Background: 背景颜色

• 写英文字符串:在图像缓存中，在 (Xstart Ystart) 为左顶点，写一串英文字符，可以选择Ascii码可视字符字库、字体前景色、字体背景色

void Paint_DrawString_EN(UWORD Xstart, UWORD Ystart, const char * pString, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
参数：
 	Xstart:  字符的左顶点X坐标
 	Ystart:  字体的左顶点Y坐标
 	pString: 字符串，字符串是一个指针
 	Font: Ascii码可视字符字库，在Fonts文件夹中提供了以下字体：
 	 	font8：5*8的字体
 	 	font12：7*12的字体
 	 	font16：11*16的字体
 	 	font20：14*20的字体
 	 	font24：17*24的字体
 	Color_Foreground: 字体颜色
 	Color_Background: 背景颜色

• 写中文字符串：在图像缓存中，在 (Xstart Ystart) 为左顶点，写一串中文字符，可以选择GB2312编码字符字库、字体前景色、字体背景色；

void Paint_DrawString_CN(UWORD Xstart, UWORD Ystart, const char * pString, cFONT* font, UWORD Color_Foreground, UWORD Color_Background)
参数：
 	Xstart:  字符的左顶点X坐标
 	Ystart:  字体的左顶点Y坐标
 	pString: 字符串，字符串是一个指针
 	Font: GB2312编码字符字库，在Fonts文件夹中提供了以下字体：
 	 	font12CN：ascii字符字体11*21，中文字体16*21
 	 	font24CN：ascii字符字体24*41，中文字体32*41
 	Color_Foreground: 字体颜色
 	Color_Background: 背景颜色

• 写数字:在图像缓存中，在 (Xstart Ystart) 为左顶点，写一串数字，可以选择Ascii码可视字符字库、字体前景色、字体背景色

void Paint_DrawNum(UWORD Xpoint, UWORD Ypoint, double Nummber, sFONT* Font, UWORD Digit,UWORD Color_Foreground, UWORD Color_Background);
参数：
 	Xstart:  字符的左顶点X坐标
 	Ystart:  字体的左顶点Y坐标
 	Nummber: 显示的数字，这里使用的是32位长的int型保存，可以最大显示到2147483647
 	Font: Ascii码可视字符字库，在Fonts文件夹中提供了以下字体：
 	 	font8：5*8的字体
 	 	font12：7*12的字体
 	 	font16：11*16的字体
 	 	font20：14*20的字体
 	 	font24：17*24的字体
        Digit:显示小数点位数
 	Color_Foreground: 字体颜色
 	Color_Background: 背景颜色

• 显示时间:在图像缓存中，在 (Xstart Ystart) 为左顶点，显示一段时间，可以选择Ascii码可视字符字库、字体前景色、字体背景色；

void Paint_DrawTime(UWORD Xstart, UWORD Ystart, PAINT_TIME *pTime, sFONT* Font, UWORD Color_Background, UWORD Color_Foreground)
参数：
 	Xstart: 字符的左顶点X坐标
 	Ystart: 字体的左顶点Y坐标
 	pTime:  显示的时间，这里定义好了一个时间的结构体，只要把时分秒各位数传给参数；
 	Font: Ascii码可视字符字库，在Fonts文件夹中提供了以下字体：
 	 	font8：5*8的字体
 	 	font12：7*12的字体
 	 	font16：11*16的字体
 	 	font20：14*20的字体
 	 	font24：17*24的字体
 	Color_Foreground: 字体颜色
 	Color_Background: 背景颜色

QMI8658

• 模块初始化

unsigned char QMI8658_init(void);

• 读取数据

void QMI8658_read_xyz(float acc[3], float gyro[3], unsigned int *tim_count);
参数：
	 float acc[3]:  存储加速度值的数组，表示为浮点数，包含三个元素，分别是 X、Y 和 Z 轴上的加速度
	 float gyro[3]: 存储陀螺仪值的数组，表示为浮点数，包含三个元素，分别是 X、Y 和 Z 轴上的角速度

Python

底层硬件接口

• 模块初始化

def __init__(self)

• 发送命令

def write_cmd(self, cmd)

• 发送数据

def write_data(self, buf)

• 调节背光

def set_bl_pwm(self,duty)

画图GUI

• 导入库

import framebuf

• 创建对象

自定义类 LCD_1inch28 继承 MicroPython 中的 framebuf.FrameBuffer 类，这个类提供了许多绘制图像的方法，我们先创建 LCD_1inch28 类对象

LCD = LCD_1inch28()

• 画线

LCD.line(x1, y1, x2, y2, color)
参数：
	x1, y1: 起始点的 x 和 y 坐标
	x2, y2: 终点的 x 和 y 坐标
	color:  线的颜色

• 画框

LCD.fill_rect(x1, y1, w, h, color)
参数：
	x1, y1: 矩形左上角的 x 和 y 坐标
        w, h:   矩形的宽度和高度
        color:  矩形的填充颜色

• 绘制文本

LCD.text(str, x, y, color)
参数：
         str:   显示文本
	 x, y:  文本左上角的 x 和 y 坐标
         color: 文本的颜色

• 更改文本大小

LCD.write_text(str, x, y, size, color)
参数：
	 size: 该函数与 LCD.text 的区别是支持自定义字体大小，该参数用于指定字体大小

• 显示

LCD.show()

QMI8658

• 创建对象

qmi8658=QMI8658()

• 读取并解析传感器的XYZ数据

xyz=qmi8658.Read_XYZ()
返回值：
          xyz[0]~xyz[2]: 函数返回一个数组，前三个元素表示 X、Y 和 Z 轴上的加速度
	  xyz[3]~xyz[5]: 这三个元素表示 X、Y 和 Z 轴上的角速度

LVGL 示例程序

C

示例效果

本例显示的效果为四个可以通过触摸屏滑动切换的界面。

• 第一个界面
  • 显示内容：微雪电子的 Logo。
    
    
• 第二个界面
  • 显示内容：六轴传感器的数据。
  • 刷新频率：每 500ms 更新一次。
    
    
• 第三个界面
  • 显示内容：RTC的数据。
  • 刷新频率：每 300ms 更新一次。
    
    
• 第四个界面
  • 显示内容：用于控制AMOLED背光的界面。
  • 交互方式：在这个界面，您可以通过滚动滚轮控制屏幕亮度。
    
    
• 第五个界面
  • 显示内容：电池管理芯片的数据。
  • 参数介绍：芯片温度，是否正在充电，是否放电，是否待机状态，Vbus是否连接，Vbus是否良好，充电器状态，电池电压，Vbus电压，系统电压，电池百分比。
    
    

示例简介

本例用于测试 LVGL 控件交互、样式美化等， LVGL 的具体开发请参考LVGL开发文档。

实现功能

1. 本例使用 DMA 传输颜色数据到 SPI 总线，降低 CPU 的利用率，在进行简单交互时可以控制 CPU 的占用率在 50% 以下，内存占用在 35% 以下。
2. 本例使用触摸屏切换界面，实现实时展示六轴传感器、RTC、电源管理芯片数据，通过控件控制背光界面，展示了 LVGL 控件的简单运用。

编译运行

• Pico VSCode

1. 选择工程目录，导入工程
   
   
2. 选择版型以及SDK版本，点击 Complie 进行编译
   
   

• Windows
  • 参考Windows环境搭建教程完成环境搭建
  • 打开 VS 2022->工具栏->命令行->开发者 Powershell
  • 将你的 pico-sdk 所在绝对地址设置为 PICO_SDK_PATH，如我的 pico-sdk 地址为“D:\pico\pico-sdk”

    setx PICO_SDK_PATH "D:\pico\pico-sdk"

  • 下载例程，进入源码目录，如果 build 目录已经存在，则可以直接进入。如没有则创建该目录：

    mkdir build
    cd build

  • 执行 cmake ，自动生成 Makefile 文件：

    cmake -G "NMake Makefiles" ..

  • 执行 nmake 生成可执行文件，然后在终端中输入：

    nmake

    编译好后会生成一个 .uf2 格式的文件。
  • 按住板上的 boot 按键，通过 Micro USB 线将板子接到电脑的 USB 接口，然后松开按键，电脑会将 pico 识别为一个可移动盘，最后将编译生成的 .uf2 格式的文件复制到 pico 即可
• Ubuntu
  • 参考Pico入门使用手册的 Chapter 2. The SDK 完成环境搭建
  • 打开一个 terminal，设置环境变量 PICO_SDK_PATH 的值为 pico-sdk 所在绝对地址，如我的 pico-sdk 地址为“/home/pico/pico-sdk”

    nano ~/.bashrc
    #将以下内容添加到最后一行
    export PICO_SDK_PATH="/home/pico/pico-sdk"

  • 设置完后保存退出，使配置立即生效

    source ~/.bashrc

  • 下载例程，进入源码目录，如果 build 目录已经存在，则可以直接进入。如没有则创建该目录：

    mkdir build
    cd build

  • 执行 cmake ，自动生成 Makefile 文件：

    cmake ..

  • 执行 nmake 生成可执行文件，然后在终端中输入：

    nmake

    编译好后会生成一个 .uf2 格式的文件。
  • 按住板上的 boot 按键，通过 Micro USB 线将板子接到电脑的 USB 接口，然后松开按键，电脑会将 pico 识别为一个可移动盘，最后将编译生成的 .uf2 格式的文件复制到 pico 即可

源码解析

源码结构

• LVGL 库的源码位于工程文件夹的 lib/lvgl ，使用的版本号为8.1，二次开发请参考对应版本的开发文档。
• LVGL 库的相关设置在工程文件夹的 examples/inc/lv_conf.h 中，可以设置显示刷新频率、系统占用数据等。
  
  
• LVGL 库的应用代码位于工程文件夹的 examples/src/LVGL_example.c 。
  
  

LVGL 初始化

在使用 LVGL 图像库之前，您需要先初始化 LVGL。

• LVGL 库的初始化函数
  • 代码位置：examples/src/LVGL_example.c
  • 实现功能：主要用于初始化 LVGL 所需的硬件和结构体变量。

LVGL_Init();

• LVGL 库核心初始化
  • 代码位置：examples/src/LVGL_example.c

/*2.Init LVGL core*/
lv_init();

LVGL 运行

LVGL 库定时调用心跳接口函数 lv_tick_inc 来通知LVGL过去的时间，以便 LVGL 能够更新其内部的时间状态，处理与时间相关的任务，例如动画、定时器等。在主函数的循环中还需要调用 lv_task_handler 函数，以便 LVGL 及时处理事件和任务，保证用户界面的响应和刷新。

• LVGL 心跳接口
  • 代码位置：examples/src/LVGL_example.c
  • 实现方式：需要确保 lv_task_handler 的优先级低于 lv_tick_inc 的优先级，所以在本例中 lv_tick_inc 在定时器回调函数中调用。

//每5ms调用一次定时器回调函数
add_repeating_timer_ms(5, repeating_lvgl_timer_callback, NULL, &lvgl_timer);

static bool repeating_lvgl_timer_callback(struct repeating_timer *t) 
{
    lv_tick_inc(5);
    return true;
}

• LVGL 任务处理器
  • 代码位置：examples/src/LCD_XinXX_LVGL_test.c
  • 实现方式：要处理 LVGL 的任务，需要定期调用 lv_timer_handler()，本例中在主函数的循环中进行调用。

int main()
{
    ...
    while(1)
    {
      lv_task_handler();
      DEV_Delay_ms(5); 
      ...
    }

}

LVGL 显示

要实现 LVGL 显示，必须初始化一个显示驱动，并设置显示驱动的各个属性，例如，颜色格式、绘制缓冲区、渲染模式以及显示回调函数。在每个 LV_DISP_DEF_REFR_PERIOD(在 lv_conf.h 中设置)，LVGL 会检测 UI 上是否发生了一些需要重绘的事情。例如，按下按钮、更改图表、发生动画等。需要重新绘制时，LVGL 调用显示回调函数完成图像在刷新区的绘制。

• LVGL 显示刷新率设置
  • 代码位置：examples/inc/lv_conf.h
  • 设置方式：在 lv_conf.h 中还能设置显示缓冲区刷新频率的时间，可以修改这个定义来改变屏幕的刷新时间。

#define LV_DISP_DEF_REFR_PERIOD  10 // 单位:ms，这里为10ms

• LVGL 显示颜色设置
  • 代码位置：examples/inc/lv_conf.h
  • 设置目的：由于 lv_color_t 结构体在默认状态下所构建的像素颜色储存方式与本例需要传输的数据不一致，直接进行传输会导致显示的图像出现色差。

#define LV_COLOR_16_SWAP 1

• LVGL 显示相关变量定义
  • 代码位置：examples/src/LVGL_example.c
  • 实现功能：定义显示驱动 disp_drv，绘制缓冲区 disp_buf。本例绘制缓冲区设置为整个屏幕显示面积，能够在降低大面积刷屏锯齿的同时有效提高屏幕刷新率。

static lv_disp_drv_t disp_drv;
static lv_disp_draw_buf_t disp_buf;
static lv_color_t buf0[DISP_HOR_RES * DISP_VER_RES];

• LVGL 显示设备注册
  • 代码位置：examples/src/LVGL_example.c
  • 实现功能：根据设计需求完善 LVGL 库核心结构体变量，初始化显示驱动 disp_drv，并设置绘制缓冲区，该缓冲区是 LVGL 用来渲染屏幕内容的简单数组。一旦渲染准备就绪，绘制缓冲区的内容将使用显示驱动程序中设置的 disp_drv_flush_cb 函数发送到显示器。

/*3.Init LVGL display*/
lv_disp_draw_buf_init(&disp_buf, buf0, NULL, DISP_HOR_RES * DISP_VER_RES); 
lv_disp_drv_init(&disp_drv);    
disp_drv.flush_cb = disp_flush_cb;
disp_drv.draw_buf = &disp_buf;        
disp_drv.hor_res = DISP_HOR_RES;
disp_drv.ver_res = DISP_VER_RES;
lv_disp_t *disp= lv_disp_drv_register(&disp_drv);   

• LVGL 显示回调函数
  • 代码位置：examples/src/LVGL_example.c
  • 实现功能：主要完成图像在刷新区的绘制。

void disp_flush( lv_disp_drv_t *disp_drv, const lv_area_t *area, lv_color_t *color_p )
参数：
    lv_disp_drv_t *disp_drv： 显示驱动结构体指针，包含了与显示相关的信息和函数指针。该参数常用于通知刷新完成
    const lv_area_t *area  ： 区域结构体指针，包含待刷新区域的位置信息。在本例中，用于创建 TFT 显示的窗口
    lv_color_t *color_p    ： 颜色结构体指针，表示要在刷新区域内显示的颜色数据。在本例中，作为DMA输入读取地址将数据传输到SPI总线，完成图像的绘制

• LVGL 显示回调函数实现
  • 代码位置：examples/src/LVGL_example.c
  • 实现方式：在本例中为了最大化降低处理器的利用率，使用 DMA 来进行颜色数据的传输，设置 color_p 作为读地址，SPI 总线的输出数据寄存器为写地址。

static void disp_flush_cb(lv_disp_drv_t * disp, const lv_area_t * area, lv_color_t * color_p)
{
    AMOLED_1IN8_SetWindows(area->x1, area->y1, area->x2+1 , area->y2+1);  // Set the LVGL interface display position

    QSPI_Select(qspi);
    QSPI_Pixel_Write(qspi, 0x2c);
    channel_config_set_dreq(&c, pio_get_dreq(qspi.pio, qspi.sm, true));
    dma_channel_configure(dma_tx,   
                          &c,
                          &qspi.pio->txf[qspi.sm], 
                          color_p, // read address
                          ((area->x2 + 1 - area-> x1)*(area->y2 + 1 - area -> y1))*2,
                          true);// Start DMA transfer
}

• LVGL 刷新完成通知实现
  • 代码位置：examples/src/LVGL_example.c
  • 实现功能：每一次图像刷新完成后都需要通知 LVGL 核心，以便 LVGL 准备下个刷新图像的渲染。
  • 实现方式：本例在 DMA 传输完成中断服务函数中通知 LVGL 图像刷新完成

static void dma_handler(void)
{
    if (dma_channel_get_irq0_status(dma_tx)) 
    {
        dma_channel_acknowledge_irq0(dma_tx);
        QSPI_Deselect(qspi);
        lv_disp_flush_ready(&disp_drv); 
    }
}

LVGL 输入

在 LVGL 中，允许用户注册输入设备，如触摸板、鼠标、键盘或编码器等设备。用户可以通过这些输入设备控制用户界面，实现更好的交互。

• LVGL 调用输入设备回调函数的频率设置
  • 代码位置：examples/inc/lv_conf.h
  • 设置方式： LVGL 默认每 30ms 调用一次输入设备回调函数来更新输入设备所触发的事件，可以在 lv_conf.h 中进行设置。

#define LV_INDEV_DEF_READ_PERIOD 30 // 单位:ms，这里为30ms

• LVGL 输入设备注册
  • 代码位置：examples/src/LVGL_example.c
  • 设置方式：注册触摸屏设备 indev_ts 并初始化

/*4.Init touch screen as input device*/ 
lv_indev_drv_init(&indev_ts);           // 设备初始化
indev_ts.type = LV_INDEV_TYPE_POINTER;  // 注册为触摸屏设备
indev_ts.read_cb = ts_read_cb;          // 设置回调函数
lv_indev_t * ts_indev = lv_indev_drv_register(&indev_ts); // 注册设备
DEV_IRQ_SET(Touch_INT_PIN, GPIO_IRQ_EDGE_RISE, &touch_callback); //使能触摸中断

• LVGL 的输入设备回调函数
  • 代码位置：examples/src/LVGL_example.c
  • 实现功能：主要用于更新输入事件。

static void ts_read_cb(lv_indev_drv_t * drv, lv_indev_data_t*data);
参数：
  lv_indev_drv_t *indev_drv： LVGL 中的输入设备驱动结构体指针。在本例中，该结构体为触摸屏输入设备驱动
  lv_indev_data_t *data    ： LVGL 中的输入设备数据结构体指针。在本例中，该结构体用于存储输入设备的状态和数据，包括当前的触摸状态（按下或释放）以及触摸点的坐标

• 触摸屏输入设备的回调函数实现
  • 代码位置：examples/src/LVGL_example.c
  • 实现方式：主要是通过触摸中断更新触摸屏的触摸状态和触摸点坐标。

static void touch_callback(uint gpio, uint32_t events)
{
    if (gpio == Touch_INT_PIN)
    {
        FT3168_Get_Point(); // Get coordinate data
        gesture = FT3168_Get_Gesture(); // Get gesture data
        ts_x = FT3168.x_point;
        ts_y = FT3168.y_point;
        ts_act = LV_INDEV_STATE_PRESSED;
    }
}


static void ts_read_cb(lv_indev_drv_t * drv, lv_indev_data_t*data)
{
    data->point.x = ts_x;
    data->point.y = ts_y; 
    data->state = ts_act;
    ts_act = LV_INDEV_STATE_RELEASED;
}

LVGL 控件布局

在 LVGL 中，我们能够建立各种不同的用户界面。界面的基本组成部分是对象，也称为控件（Widgets），比如按钮（Button）、标签（Label）、图像（Image）、列表（List）、图表或文本区域。在一个界面中，可以同时创建多个控件，并且我们可以设置它们的位置、尺寸、父对象、样式以及事件处理程序等基本属性。

• LVGL 控件初始化
  • 代码位置：examples/src/LVGL_example.c
  • 实现功能：主要用于风格化控件和布局控件。

void Widgets_Init(void);

• LVGL 创建图块
  • 代码位置：examples/src/LVGL_example.c
  • 实现功能：Tile 视图是一个容器对象，其元素（称为图块）可以按网格形式排列。用户可以通过滑动来在各个图块之间导航。调用 lv_tileview_add_tile(tileview, row_id, col_id, dir) 在第 row_id 行和第 col_id 列上创建一个新图块。dir可以是 LV_DIR_LEFT/RIGHT/TOP/BOTTOM/HOR/VER/ALL 或值，以便通过滑动移动到给定方向的相邻图块。

//在 (0，0) 创建一个图块，支持向下滑动到 (0，1)
tile1 = lv_tileview_add_tile(tv, 0, 0, LV_DIR_BOTTOM);

• LVGL 创建控件
  • 代码位置：examples/src/LVGL_example.c
  • 实现功能：创建控件，不同控件需要使用不同的函数接口，可以选择父对象进行创建。

//创建一个控件,其中 tab1 为该按键的父对象，可以替换为list、title等可以有子对象的控件
sw = lv_switch_create(tab1);

• LVGL 控件的对齐定位
  • 代码位置：examples/src/LVGL_example.c
  • 实现功能：使控件能够基于参考点进行偏移定位。控件对齐偏移的参考点控件的中心。
  • 对齐标准： LVGL 库具备内部对齐和外部对齐两种方式。默认以左上角作为原点，向左为水平方向的正方向，向下为垂直方向的正方向。

//将btn控件定位在中心点向左偏移45个像素
lv_obj_align(sw, LV_ALIGN_CENTER, -45, 0);

• LVGL 控件切换字体大小
  • 代码位置：examples/inc/lv_conf.h、examples/src/LVGL_example.c
  • 实现功能：在实际运用时一个界面可能需要运用多种字体大小，可以在 lv_conf.h 中使能多种字体大小，且可以设置默认字体大小。设置字体大小时需要对控件风格化，使控件能够按照设置的风格进行渲染。利用 lv_obj_add_style 函数可以实现对控件各个部位在不同状态下的渲染。

#define LV_FONT_MONTSERRAT_16 1                                // 使能16号字体
#define LV_FONT_MONTSERRAT_18 1                                // 使能18号字体
#define LV_FONT_DEFAULT &lv_font_montserrat_18                 // 设置默认字体大小为18号

static lv_style_t style_label;                   
lv_style_init(&style_label);                                   // 初始化风格
lv_style_set_text_font(&style_label, &lv_font_montserrat_16);  // 设置字体大小为16号
lv_obj_add_style(label,&style_label,0);                        // 设置label主题的风格

• LVGL 控件事件处理
  • 代码位置：examples/src/LVGL_example.c
  • 实现功能：在 LVGL 中，可以给控件添加事件处理回调函数，使控件发生被点击、滚动、重绘等事件时，触发事件从而进入事件处理回调函数。在程序中调用 lv_obj_add_event_cb(obj, event_cb, filter, user_data)函数，为控件 obj 添加事件 filter 的处理函数 event_cb，当控件 obj 触发 filter 事件时，系统会自动调用 event_cb 函数。最后一个参数是指向事件中可用的任何自定义数据的指针。

//为控件 sw 添加事件 LV_EVENT_VALUE_CHANGED 的处理函数 sw_event_cb
lv_obj_add_event_cb(sw, sw_event_cb,LV_EVENT_VALUE_CHANGED,NULL);

资料

配套资料

示例程序

• 示例程序
• LVGL 示例程序

原理图

• 原理图
  

数据手册

• QMI8658 datasheet（英）
• PCF85063 datasheet（英）
• AXP2101 datasheet（英）
• ES8311 datasheet（英）
• ES8311 UserGuide（英）
• SH8601 datasheet（英）
• FT3168 datasheet（英）

官方资料

树莓派官方文档

• Raspberry Pi Pico入门学习MicroPython编程书籍（英文版）
• 树莓派相关书籍下载
• Pico2原理图
• Pico2引脚分布图
• Pico2入门使用手册
• Pico2 C SDK使用手册
• Pico2 Python SDK使用手册
• Pico2数据手册
• RP2350数据手册
• RP2350硬件设计参考手册

树莓派开源例程

• 树莓派官方C/C++示例程序 (github)
• 树莓派官方micropython示例程序 (github)

开发软件

• Thonny Python IDE (Windows版本 V3.3.3)
• Pico环境搭建相关软件 (百度网盘提取码：prgc )
  
• pico-vscode 软件包 (百度网盘提取码：szws )
  
• 汉字取模软件
• Image2Lcd 图片取模软件
• 字库取模教程
• 图片取模教程

FAQ

技术支持

周一-周五（9:30-6:30）周六（9:30-5:30）

手机：13434470212

邮箱：services04@spotpear.cn

QQ：202004841