ESP32 开发笔记(三）源码示例 23_LCD_Test 液晶屏测试粗线/细线/角度线/实心矩形/空心矩形/实心三角/空心三角/画点/圆/实心圆/字符串/数字

刺骨的言语ヽ痛彻心扉 2022-12-07 12:29 140阅读 0赞

开发板购买链接

[https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674][https_item.taobao.com_item.htm_spm_a2oq0.12575281.0.0.50111deb2Ij1As_ft_t_id_626366733674]

[开发板简介][Link 1]  
[开发环境搭建 windows][windows]

ESP32例程为C语言开发，并非Python/Arduino/AT指令开发，基于ESP-IDF\_V4.2框架库，采用纯C语言开发，开发工具为Visual Studio Code

Android(安卓)例程全部为原生Android开发，例程全部支持到SDK版本29  Android 10.0(Q) 开发工具为Andirod Studio 4.0

PC源码例程为Visual Studio 2013开发，C++语言，基于MFC

送的MQTT账号，仅用于同学们开发测试，大家不要用到实际产品上，不定期更换密码，会在QQ群公布

以下列出的例程源码均编写完成（不断增加中），开发教程正在编写  
**基础例程：**  
    [0\_Hello Bug （ESP\_LOGX与printf）][0_Hello Bug _ESP_LOGX_printf]    工程模板/打印调试输出  
    [1\_LED][1_LED]                                                    LED亮灭控制         
   [ 2\_LED\_Task][2_LED_Task]                                          使用任务方式控制LED  
    [3\_LEDC\_PWM ][3_LEDC_PWM]                                     使用LEDC来控制LED实现呼吸灯效果  
    [4\_ADC\_LightR][4_ADC_LightR]                                      使用ADC读取光敏电阻实现光照传感  
    [5\_KEY\_Short\_Long][5_KEY_Short_Long]                              按钮长按短按实现  
    [6\_TouchPad\_Interrupt ][6_TouchPad_Interrupt]                         电容触摸中断实现  
    [7\_WS2812\_RMT][7_WS2812_RMT]                                  使用RMT实现RGB\_LED彩虹变色示例  
    [8\_DHT11\_RMT][8_DHT11_RMT]                                    使用RMT实现读取DHT11温湿度传感器  
    [9\_SPI\_SDCard][9_SPI_SDCard]                                    使用SPI总线实现TF卡文件系统示例  
    [10\_IIC\_ADXL345][10_IIC_ADXL345]                                使用IIC总线实现读取ADXL345角度加速度传感器  
    [11\_IIC\_AT24C02][11_IIC_AT24C02]                                 使用IIC总线实现小容量数据储存测试  
    [12\_IR\_Rev\_RMT][12_IR_Rev_RMT]                                使用RMT实现红外遥控接收解码（NEC编码）  
    [13\_IR\_Send\_RMT][13_IR_Send_RMT]                              使用RMT实现红外数据发送（NEC编码）  
    [14\_WIFI\_Scan][14_WIFI_Scan]                                    附近WIFI信号扫描示例      
    [15\_WIFI\_AP][15_WIFI_AP]                                        创建软AP示例  
    [16\_WIFI\_AP\_TCP\_Server][16_WIFI_AP_TCP_Server]                  在软AP模式下实现TCP服务端  
    [17\_WIFI\_AP\_TCP\_Client][17_WIFI_AP_TCP_Client]                   在软AP模式下实现TCP客户端  
    [18\_WIFI\_AP\_UDP][18_WIFI_AP_UDP]                              在软AP模式下实现UDP通讯  
    [19\_WIFI\_STA][19_WIFI_STA]                                      创建STA站模连接路由器  
    [20\_WIFI\_STA\_TCP\_Server][20_WIFI_STA_TCP_Server]                在站模式STA下实现TCP服务端  
    [21\_WIFI\_STA\_TCP\_Client ][21_WIFI_STA_TCP_Client]                在站模式STA下实现TCP客户端  
    [22\_WIFI\_STA\_UDP][22_WIFI_STA_UDP]                            在站模式STA下实现UDP通讯  
    [23\_LCD\_Test][23_LCD_Test]                                      LCD液晶触摸屏显示测试  
    [24\_XPT2046\_Touch\_Test][24_XPT2046_Touch_Test]                   电阻触摸XPT2046驱动测试触摸校正  
**ESP32应用例程**  
    Bluetooth\_RGBLight                          Android手机通过蓝牙控制RGB灯变色  
    Bluetooth\_Sensor                              Android手机通过蓝牙读取开发板姿态和温度湿度参数  
    Bluetooth\_Test                                   Android手机通过蓝牙与开发板通讯  
    Encryption\_MD5                                MD5加密  
    Encryption\_SHA1                              SHA1加密  
    Encryption\_SHA256                          SHA256加密  
    EncryptionDecrypt\_AES\_CBC          AES\_CBC加密  
    EncryptionDecrypt\_AES\_ECB          AES\_ECB加密  
    ESP32\_SmartConfig                         通过Android手机配置WIFI连网  
    HTTP\_GET\_Request\_Weather        HTTP Get请求天气预报  
    JSON\_Package                                创建JSON数据包  
    JSON\_Parsing                                  解析JSON数据包  
    LCD JPEG\_Effect                             解码JGEG图片特效显示  
    MQTT                                                MQTT通讯测试  
**Android（安卓）工具源码  
 **   ESP32\_Bluetooth\_Chat                   Android通过蓝牙与开发板通讯测试  
    ESP32\_Bluetooth\_RGBLight           Android通过蓝牙控制开发板RGB灯  
    ESP32\_Bluetooth\_Sensor               Android通过蓝牙读取开发板3D姿态和温度湿度数据  
    ESP32\_SmartConfig                       Android手机配置WIFI配网  
    MQTT\_Test                                     Android与开发板通过MQTT协议通讯  
    TCP\_Client                                     Android作为TCP客户端与开发板通讯   
    UDP\_Client                                     Android通过UDP协议与开发板通讯  
**PC(Visual Studio 2013 C++ MFC)工具源码**  
    MQTT\_调试助手                                 PC通过MQTT与开发板通讯  
    TCP 调试助手                                     PC通过TCP服务器/客户端与开发板通讯  
    UDP 调试助手                                     PC通过UDP与开发板通讯

**LVGL源码**     
    LVGL\_Full\_Test                                  LVGL官方例程（使用到了大分部控件）  
    LVGL\_Arc\_Test                                  圆弧指示器通过触摸动态改变值  
    LVGL\_Bar\_Test                                  通过动画方式动态演示Bar进度条的使用方法  
    LVGL\_Button\_Test                             通过5种不同动态效果的按钮学习按钮的创建与使用  
    LVGL\_ButtonMatrix\_Test                   创建一个计算器布局来演示矩阵按钮控件的使用  
    LVGL\_Calendar\_Test                         日历控件的创建和使用  
    LVGL\_Canvas\_Test                           透明画布和画一个圆角过渡色矩形并旋转角度学习画布的使用  
    LVGL\_Chart\_Test                               通过创建三个不同风格的图表来学习图表控件的使用  
    LVGL\_Checkbox\_Test                        学习复选框控件的创建和使用  
    LVGL\_ColorPicker\_Test                     创建一个颜色选择器并动态显示当前颜色的RGB值  
    LVGL\_Container\_Test                        在内容控件上动态创建三个文本标签学习内容控件的自适应布局  
    LVGL\_Drop\_down\_List\_Test              创建三个不同类型的下拉选择控件  
    LVGL\_Gauge\_Test                             创建一个动态仪表和静态多指针仪表  
    LVGL\_Image\_Test                              通过四个滑动条控件控制图片颜色的变化来学习图像控件的使用  
    LVGL\_ImageButton\_Test                  创建一个图片背景的图像按钮  
    LVGL\_Keyboard\_Test                       通过一个文本输入框控件还学习键盘控件的调用关闭设置  
    LVGL\_Label\_Test                              创建内容颜色可变，长文本滚动展示，带阴影3D效果三个标签控件  
    LVGL\_LED\_Test                                创建三个LED，学习LED控件的调光，颜色，开关的设置  
    LVGL\_Line\_Test                                通过二维数组创建一段折线来演示线控件的使用  
    LVGL\_LineMeter\_Test                      创建两个不同的线段弧形指示器动态展示数据  
    LVGL\_List\_Test                                 创建一个带图标的列表控件  
    LVGL\_MessageBox\_Test                  创建一个带按钮的消息框控件  
    LVGL\_ObjectMask\_Test                    创建一个变幻色的文本学习蒙版遮罩效果  
    LVGL\_Page\_Test                            学习页面控件的使用  
    LVGL\_Roller\_Test                           通过示例学习滑动列表选择器控件  
    LVGL\_Slider\_Test                           创建一个单向和一个双向滑动条控件  
    LVGL\_Spinbox\_Test                        学习微调控件的使用  
    LVGL\_Spinner\_Test                        创建三个不同的环形加载器  
    LVGL\_Switch\_Test                          创建两个不同的开关控件  
    LVGL\_Table\_Test                            创建一个简单的表格  
    LVGL\_Tabview\_Test                       实现三页的页面切换学习Tabview控件  
    LVGL\_Textarea\_Test                       长按实现打字机效果的Textarea控件  
    LVGL\_Tileview\_Test                        实现四面环形触摸切换的Tileview控件  
    LVGL\_Window\_Test                        创建一个窗口，带设置子窗口学习窗口控件的使用

# TFTLCD 简介 #

TFT-LCD 即薄膜晶体管液晶显示器。其英文全称为： Thin Film Transistor-Liquid Crystal Display。 TFT-LCD 与无源 TN-LCD、 STN-LCD 的简单矩阵不同，它在液晶显示屏的每一个象素上都设置有一个薄膜晶体管（TFT），可有效地克服非选通时的串扰，使显示液晶屏的静态特性与扫描线数无关，因此大大提高了图像质量。 TFT-LCD 也被叫做真彩液晶显示器。

开发板上使用的液晶屏ILI9841参数如下  
显示颜色                       RGB 65K彩色  
触摸芯片                       XPT2046  
尺寸                              3.2(inch)  
类型                              TFT  
驱动芯片                      ILI9341  
分辨率                          320\*240 (Pixel)  
模块接口                      4-wire SPI interface  
有效显示区域(AA区)    48.6x64.8(mm)  
工作温度                     -20℃~60℃  
存储温度                     -30℃~70℃  
VCC电源电压             3.3V  
逻辑IO口电压             3.3V(TTL)

# SPI简介 #

1、什么是SPI？

SPI是串行外设接口(Serial Peripheral Interface)的缩写。是 Motorola 公司推出的一种同步串行接口技术，是一种高速的，全双工，同步的通信总线。

2、SPI优点  
支持全双工通信  
通信简单  
数据传输速率块

3、缺点  
没有指定的流控制，没有应答机制确认是否接收到数据，所以跟IIC总线协议比较在数据可靠性上有一定的缺陷。

4、特点  
1）：高速、同步、全双工、非差分、总线式  
2）：主从机通信模式

5、协议通信时序详解  
1）：SPI的通信原理很简单，它以主从方式工作，这种模式通常有一个主设备和一个或多个从设备，需要至少4根线，事实上3根也可以(单向传输时)。也是所有基于SPI的设备共有的，它们是SDI(数据输入)、SDO(数据输出)、SCLK(时钟)、CS(片选)。  
(1)SDO/MOSI – 主设备数据输出，从设备数据输入;  
(2)SDI/MISO – 主设备数据输入，从设备数据输出;  
(3)SCLK – 时钟信号，由主设备产生;  
(4)CS/SS – 从设备使能信号，由主设备控制。当有多个从设备的时候，因为每个从设  
备上都有一个片选引脚接入到主设备机中，当我们的主设备和某个从设备通信时将需要将从设备对应的片选引脚电平拉低或者是拉高。

# 一、硬件原理 #

ESP32 有四个 SPI 外设,称为 SPI0,SPI1,HSPI 和 VSPI. SPI0 是专用于 flash 缓存, ESP32 将连接的 SPI flash 设备映射到存储器. SPI1 和 SPI0 使用相同的硬件线,SPI1 用于写入 flash 芯片. HSPI 和 VSPI 可以任意使用. SPI1,HSPI 和 VSPI 都有三条片选线,作为 SPI 主机允许它们最多驱动三个 SPI 设备

液晶屏用到的是VSPI\_HOST即SPI3\_HOST

查看原理图，除了SPI必要发四根线其实还有三根控制线，是RESET，BL，RS

RESET是液晶复位信号线，由于开始板GPIO紧张所以与系统的RESET线接在一起，同样的BL是液晶的背光控制线，也直接接到了3.3V，RS是命令/数据选择信号线，接到IO2引脚上，触摸信号下编再讲。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70][]

# 二、代码编写 #

代码分为三个文件，主函数main文件，lcd底层驱动文件，gui上层显示文件

先看main文件

导入必要头文件

#include <stdio.h>
    #include <stdlib.h>
    #include <string.h>
    #include "freertos/FreeRTOS.h"
    #include "freertos/task.h"
    #include "esp_system.h"
    #include "driver/gpio.h"
    #include "lcd.h"
    #include "gui.h"
    #include "pic.h"

main函数，直接调用底层初始化和上层画图

void app_main(void)
    {
    	esp_err_t ret;
    	Init_LCD();
    
    
    	// 实心矩形
    	LCD_DrawFillRectangle(20,20,100,100,GREEN);
    	// 空心矩形
    	LCD_DrawRectangle(20,220,100,200,GREEN);	
    	// 画圆
    	LCD_Draw_Circle(180,200,40,WHITE);
    	// 画实心圆
    	LCD_Draw_FillCircle(180,200,30,WHITE);	
    	// 画点
    	LCD_DrawPoint(120,110,RED);
    	// 画线
    	LCD_DrawLine(0, 0, 128, 128,RED);
    	// 画角度线
    	LCD_Draw_AngleLine(100,100,35,85,BLACK);
    	// 画粗线1
    	LCD_DrawBLine0(20,160,60,190,5,YELLOW);
    	// 画粗线2
    	LCD_DrawBLine1(40,140,90,190,2,YELLOW);
    	// 画三角形
    	LCD_DrawTriangel(100,50,30,100,150,150,RED);
    	// 画实心三角形
    	LCD_DrawFillTriangel(180,30,160,80,200,120,RED);
    	// 显示单个字符
    	LCD_ShowChar(120,0,BLACK,RED, 'A',12,1);
    	LCD_ShowChar(140,0,BLACK,RED, 'B',12,0);	
    	LCD_ShowChar(160,0,BLACK,RED, 'A',16,1);
    	LCD_ShowChar(180,0,BLACK,RED, 'B',16,0);
    	// 显示字符串
    	LCD_ShowString(10,240,GREEN,RED,12,"ABCDabcd123",1);
    	LCD_ShowString(10,252,GREEN,RED,12,"ABCDabcd123",0);
    	LCD_ShowString(10,264,GREEN,RED,16,"ABCDabcd123",1);
    	LCD_ShowString(10,280,GREEN,RED,16,"ABCDabcd123",0);
    	// 显示数字
    	LCD_ShowNum(10,296,WHITE,BLACK,123456,7,16);
    	// 显示图片
    	LCD_Drawbmp16(100,240,gImage_qq);
    }

接下来看lcd底层驱动，包括SPI初始化，LCD初始化，设置方向，设置窗口，SPI写数据，写命令等等底层驱动

lcd.c

导入必要头文件

#include "esp_log.h"
    #include "freertos/FreeRTOS.h"
    #include "freertos/task.h"
    #include "stdint.h"
    #include "stdbool.h"
    #include "driver/gpio.h"
    #include "lcd.h"
    #include "math.h"  
    #include "string.h"

SPI和LCD液晶初始化

// 初始化液晶
    void Init_LCD(void)
    {
    	int cmd=0;
    	lcd_init_cmd_t ili_init_cmds[]={
    		{0xCF, {0x00, 0xD9, 0X30}, 3},
    		{0xED, {0x64, 0x03, 0X12, 0X81}, 4},
    		{0xE8, {0x85, 0x10, 0x7A}, 3},
    		{0xCB, {0x39, 0x2C, 0x00, 0x34, 0x02}, 5},
    		{0xF7, {0x20}, 1},
    		{0xEA, {0x00, 0x00}, 2},
    		{0xC0, {0x1B}, 1},          /*Power control*/
    		{0xC1, {0x12}, 1},          /*Power control */
    		{0xC5, {0x26, 0x26}, 2},    /*VCOM control*/
    		{0xC7, {0xB0}, 1},          /*VCOM control*/
    		{0x36, {0x08}, 1},          /*Memory Access Control*/
    		{0x3A, {0x55}, 1},			/*Pixel Format Set*/
    		{0xB1, {0x00, 0x1A}, 2},
    		{0xB6, {0x0A, 0xA2}, 2},
    		{0xF2, {0x00}, 1},	
    		{0x26, {0x01}, 1},	
    		{0xE0, {0x1F, 0x24, 0x24, 0x0D, 0x12, 0x09, 0x52, 0XB7, 0x3F, 0x0C, 0x15, 0x06, 0x0E, 0x08, 0x00}, 15},
    		{0XE1, {0x00, 0x1B, 0x1B, 0x02, 0x0E, 0x06, 0x2E, 0x48, 0x3F, 0x03, 0x0A, 0x09, 0x31, 0x37, 0x1F}, 15},
    		{0x2B, {0x00, 0x00, 0x01, 0x3f}, 4},
    		{0x2A, {0x00, 0x00, 0x00, 0xEF}, 4},
    
    		//		
    		//{0x2C, {0}, 0},
    		//{0xB7, {0x07}, 1},
    
    		{0x11, {0}, 0x80},
    		{0x29, {0}, 0x80},
    		{0, {0}, 0xff},
    	};
    	esp_err_t ret;
    	// SPI总线配置
    	spi_bus_config_t buscfg = {
    		.miso_io_num = PIN_NUM_MISO,
    		.mosi_io_num = PIN_NUM_MOSI,
    		.sclk_io_num = PIN_NUM_CLK,
    		.quadwp_io_num = -1,
    		.quadhd_io_num = -1,
    		.max_transfer_sz=PARALLEL_LINES*320*2+8
    	};
    	// SPI驱动接口配置
    	spi_device_interface_config_t devcfg = {
    		.clock_speed_hz = 30*1000*1000,				// SPI时钟 30 MHz
    		.mode = 0,									// SPI模式0
    		.spics_io_num = PIN_NUM_CS,					// CS片选信号引脚
    		.queue_size = 7,							// 事务队列尺寸 7个
    		.pre_cb = lcd_spi_pre_transfer_callback,	// 数据传输前回调，用作D/C（数据命令）线分别处理
    	};
    	// 初始化SPI总线
    	ret=spi_bus_initialize(LCD_HOST, &buscfg, DMA_CHAN);
    	ESP_ERROR_CHECK(ret);
    	// 添加SPI总线驱动
    	ret=spi_bus_add_device(LCD_HOST, &devcfg, &LCD_SPI_Handle);
    	ESP_ERROR_CHECK(ret);
    
    	// 初始化其它控制引脚
    	gpio_set_direction(PIN_NUM_DC, GPIO_MODE_OUTPUT);
    	//gpio_set_direction(PIN_NUM_RST, GPIO_MODE_OUTPUT);
    	//gpio_set_direction(PIN_NUM_BCKL, GPIO_MODE_OUTPUT);
    
    	// Reset the display
    	//gpio_set_level(PIN_NUM_RST, 0);
    	//vTaskDelay(100 / portTICK_RATE_MS);
    	//gpio_set_level(PIN_NUM_RST, 1);
    	//vTaskDelay(100 / portTICK_RATE_MS);
    
    	uint32_t lcd_id = LCD_Get_ID();
    	printf("LCD ID: %08X\n", lcd_id);
    
    	printf("LCD ILI9341 initialization.\n");
    
    	// 循环发送设置所有寄存器
    	while (ili_init_cmds[cmd].databytes!=0xff) {
    		LCD_WriteCMD(ili_init_cmds[cmd].cmd);
    		LCD_WriteDate(ili_init_cmds[cmd].data, ili_init_cmds[cmd].databytes&0x1F);
    		if (ili_init_cmds[cmd].databytes&0x80) {
    			vTaskDelay(100 / portTICK_RATE_MS);
    		}
    		cmd++;
    	}
        LCD_Set_Orientation(LCD_DISPLAY_ORIENTATION_PORTRAIT);// 纵向
    
    	//LCD_WriteCMD(0x21);// 翻转颜色
    	LCD_WriteCMD(0x20);
    	LCD_Clear(BLUE);
    	// gpio_set_level(PIN_NUM_BCKL, 0);	// 点亮LCD屏
    }

SPI向LCD写命令

void LCD_WriteCMD(const uint8_t cmd)
    {
    	esp_err_t ret;
    	spi_transaction_t t;
    	memset(&t, 0, sizeof(t));		// 清空结构体
    	t.length=8;						// 要传输的位数 一个字节 8位
    	t.tx_buffer=&cmd;				// 将命令填充进去
    	t.user=(void*)0;				// 设置D/C 线，在SPI传输前回调中根据此值处理DC信号线
    	ret=spi_device_polling_transmit(LCD_SPI_Handle, &t);		// 开始传输
    	assert(ret==ESP_OK);			// 一般不会有问题
    }

SPI向LCD写数据

void LCD_WriteDate(const uint8_t *data, int len)
    {
    	esp_err_t ret;
    	spi_transaction_t t;
    	if (len==0) return;				// 长度为0 没有数据要传输
    	memset(&t, 0, sizeof(t));		// 清空结构体
    	t.length=len*8;					// 要写入的数据长度 Len 是字节数，len, transaction length is in bits.
    	t.tx_buffer=data;				// 数据指针
    	t.user=(void*)1;				// 设置D/C 线，在SPI传输前回调中根据此值处理DC信号线
    	ret=spi_device_polling_transmit(LCD_SPI_Handle, &t);		// 开始传输
    	assert(ret==ESP_OK);			// 一般不会有问题
    }

SPI发送前回调DC信号线处理

void lcd_spi_pre_transfer_callback(spi_transaction_t *t)
    {
    	int dc = (int)t->user;
    	gpio_set_level(PIN_NUM_DC, dc);
    }

设置屏幕方向，4个方向

// 设置屏幕方向
    void LCD_Set_Orientation(uint8_t orientation)
    {
    	const char *orientation_str[] = {"PORTRAIT", "PORTRAIT_INVERTED", "LANDSCAPE", "LANDSCAPE_INVERTED"};
    	printf("%s->Display orientation: %s\n",TAG, orientation_str[orientation]);
    	uint8_t data[] = {(1<<3)|(0<<6)|(0<<7), (1<<3)|(1<<6)|(1<<7), (1<<3)|(0<<7)|(1<<6)|(1<<5), (1<<3)|(1<<7)|(1<<5)};
    	//(1<<3)|(0<<6)|(0<<7));		// BGR==1,MY==0,MX==0,MV==0
    	//(1<<3)|(0<<7)|(1<<6)|(1<<5));	// BGR==1,MY==1,MX==0,MV==1
    	//(1<<3)|(1<<6)|(1<<7));		// BGR==1,MY==0,MX==0,MV==0
    	//(1<<3)|(1<<7)|(1<<5));		// BGR==1,MY==1,MX==0,MV==1
    	LCD_Orientation = orientation;
    	if(orientation == LCD_DISPLAY_ORIENTATION_PORTRAIT || orientation == LCD_DISPLAY_ORIENTATION_PORTRAIT_INVERTED){
    		LCD_Width = 240;		// LCD 宽度
    		LCD_Height = 320;		// LCD 高度
    	}else if(orientation == LCD_DISPLAY_ORIENTATION_LANDSCAPE || orientation == LCD_DISPLAY_ORIENTATION_LANDSCAPE_INVERTED){
    		LCD_Width = 320;		// LCD 宽度
    		LCD_Height = 240;		// LCD 高度
    	}
    
    	printf("%s->0x36 command value: 0x%02X\n",TAG, data[orientation]);
    	LCD_WriteCMD(0x36);
    	LCD_WriteDate((void *) &data[orientation], 1);
    }

清屏成指定颜色

// 清屏指定颜色
    void LCD_Clear(uint16_t Color)
    {
    	unsigned int i,m;  
    	uint8_t databuf[2] = {0,0};
    	LCD_SetWindows(0,0,LCD_Width-1,LCD_Height-1);   
    	for(i=0;i<LCD_Height;i++){
    		for(m=0;m<LCD_Width;m++){	
    			databuf[0] = (Color>>8)&0xFF;
    			databuf[1] = Color&0xFF;
    			LCD_WriteDate(databuf,2);
    		}
    	}
    }

设置窗口

// 设置窗口
    void LCD_SetWindows(uint16_t xStar, uint16_t yStar,uint16_t xEnd,uint16_t yEnd)
    {	
    	uint8_t databuf[4] = {0,0,0,0};
    	databuf[0] = xStar>>8;
    	databuf[1] = 0xFF&xStar;	
    	databuf[2] = xEnd>>8;
    	databuf[3] = 0xFF&xEnd;
    	LCD_WriteCMD(0x2A);
    	LCD_WriteDate(databuf,4);
    
    	databuf[0] = yStar>>8;
    	databuf[1] = 0xFF&yStar;	
    	databuf[2] = yEnd>>8;
    	databuf[3] = 0xFF&yEnd;
    	LCD_WriteCMD(0x2B);	
    	LCD_WriteDate(databuf,4);
    
    	LCD_WriteCMD(0x2C);	//开始写入GRAM			
    }

gui.c上层驱动包含了画图形，字符串，数字，图片的驱动

导入必要头文件，这里要包含数据库math.h

#include "esp_log.h"
    #include "freertos/FreeRTOS.h"
    #include "freertos/task.h"
    #include "stdint.h"
    #include "stdbool.h"
    #include "../LCD/include/lcd.h"
    #include "gui.h"
    #include "font.h"
    #include "math.h"  
    #include "string.h"

还要定义一个π用于计算角度

//π值定义
    #define	app_pi	3.1415926535897932384626433832795

画点

// 画点
    void LCD_DrawPoint(uint16_t x,uint16_t y,uint16_t color)
    {
    	LCD_SetCursor(x,y);//设置光标位置 
    	LCD_WriteDate16(color); 
    }

画圆

// 画圆
    void LCD_Draw_Circle(uint16_t x0,uint16_t y0,uint16_t r,uint16_t color)
    {
    	int a,b;
    	int di;
    	a=0;b=r;	  
    	di=3-(r<<1);             //判断下个点位置的标志
    	while(a<=b){
    		LCD_DrawPoint(x0+a,y0-b,color);		//5
     		LCD_DrawPoint(x0+b,y0-a,color);		//0
    		LCD_DrawPoint(x0+b,y0+a,color);		//4
    		LCD_DrawPoint(x0+a,y0+b,color);		//6
    		LCD_DrawPoint(x0-a,y0+b,color);		//1
     		LCD_DrawPoint(x0-b,y0+a,color);
    		LCD_DrawPoint(x0-a,y0-b,color);		//2
      		LCD_DrawPoint(x0-b,y0-a,color);		//7
    		a++;
    		//使用Bresenham算法画圆
    		if(di<0){
    			di +=4*a+6;
    		}else{
    			di+=10+4*(a-b);
    			b--;
    		}
    	}
    }

画实心圆

// 画实心圆
    void LCD_Draw_FillCircle(uint16_t x0,uint16_t y0,uint16_t r,uint16_t color)
    {
    	uint16_t a,b;
    	int di;//uint16_t di 画实心菱形
    	a=0;b=r;
    	di=3-(r<<1);	// 判断下个点位置的标志
    	while(a<=b){
    		int i = a,p = b;
    		while(i>0){
    			LCD_DrawPoint(x0+b,y0-i,color);
    			LCD_DrawPoint(x0-i,y0+b,color);
    			i--;
    		}
    		while(p>0){
    			LCD_DrawPoint(x0-a,y0-p,color);
    			LCD_DrawPoint(x0-p,y0-a,color);
    			LCD_DrawPoint(x0+a,y0-p,color);
    			LCD_DrawPoint(x0-p,y0+a,color);
    			LCD_DrawPoint(x0+a,y0+p,color);
    			LCD_DrawPoint(x0+p,y0+a,color);
    			p--;
    		}
    		a++;
    		//Bresenham算法画圆
    		if(di<0){
    			di +=4*a+6;
    		}else{
    			di+=10+4*(a-b);
    			b--;
    		}
    	}
    	LCD_DrawPoint(x0,y0,color); //圆心坐标
    }

画线(单像素)

// 画线(单像素)
    void LCD_DrawLine(uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2,uint16_t color)
    {
    	uint16_t t; 
    	int xerr=0,yerr=0,delta_x,delta_y,distance; 
    	int incx,incy,uRow,uCol; 
    
    	delta_x=x2-x1; //计算坐标增量 
    	delta_y=y2-y1; 
    	uRow=x1; 
    	uCol=y1; 
    	if(delta_x>0)incx=1; //设置单步方向 
    	else if(delta_x==0)incx=0;//垂直线 
    	else {incx=-1;delta_x=-delta_x;} 
    	if(delta_y>0)incy=1; 
    	else if(delta_y==0)incy=0;//水平线 
    	else{incy=-1;delta_y=-delta_y;} 
    	if( delta_x>delta_y)distance=delta_x; //选取基本增量坐标轴 
    	else distance=delta_y; 
    	for(t=0;t<=distance+1;t++ ){//画线输出
    		LCD_DrawPoint(uRow,uCol,color);//画点 
    		xerr+=delta_x ; 
    		yerr+=delta_y ; 
    		if(xerr>distance) { 
    			xerr-=distance; 
    			uRow+=incx; 
    		} 
    		if(yerr>distance) { 
    			yerr-=distance; 
    			uCol+=incy; 
    		} 
    	}  
    }

画指定角度的线

// 画角度线
    void LCD_Draw_AngleLine(uint16_t x,uint16_t y,uint16_t Angle,uint16_t r,uint16_t color)
    {
    	int sx=x-r;
    	int sy=y-r;
    	int px0,px1;
    	int py0,py1;  
    	uint8_t r1; 
    	int d = r;
    	r1=d/2+3;
    	px0=x;//sx+r+(r-d-7)*sin((app_pi/30)*Angle); 
    	py0=y;//sy+r-(r-d-7)*cos((app_pi/30)*Angle); 
    	px1=sx+r+r1*sin((app_pi/180)*Angle); 
    	py1=sy+r-r1*cos((app_pi/180)*Angle); 
    	LCD_DrawLine(px0,py0,px1,py1,color);
    }

画粗线

void LCD_DrawBLine0(uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2,uint8_t size,uint16_t color)
    {
    	uint16_t t; 
    	uint16_t xerr=0,yerr=0,delta_x,delta_y,distance; 
    	uint16_t incx,incy,uRow,uCol; 
    	if(x1<size|| x2<size||y1<size|| y2<size)return;
    	delta_x=x2-x1; //计算坐标增量 
    	delta_y=y2-y1; 
    	uRow=x1; 
    	uCol=y1; 
    	if(delta_x>0)incx=1; //设置单步方向 
    	else if(delta_x==0)incx=0;//垂直线 
    	else {incx=-1;delta_x=-delta_x;} 
    	if(delta_y>0)incy=1; 
    	else if(delta_y==0)incy=0;//水平线 
    	else{incy=-1;delta_y=-delta_y;} 
    	if( delta_x>delta_y)distance=delta_x; //选取基本增量坐标轴 
    	else distance=delta_y; 
    	for(t=0;t<=distance+1;t++ )//画线输出 
    	{  
    		LCD_Draw_FillCircle(uRow,uCol,size,color);//画点 
    		xerr+=delta_x ; 
    		yerr+=delta_y ; 
    		if(xerr>distance){xerr-=distance;uRow+=incx;}  
    		if(yerr>distance){yerr-=distance;uCol+=incy;}
    	}  
    }

画粗线2，线粗只支持0-2

void LCD_DrawBLine1(uint16_t x0,uint16_t y0,uint16_t x1,uint16_t y1,uint8_t size,uint16_t color)
    {
    	int t; 
    	int xerr=0,yerr=0,delta_x,delta_y,distance; 
    	int incx,incy,uRow,uCol; 
    
    	delta_x=x1-x0; //计算坐标增量 
    	delta_y=y1-y0; 
    	uRow=x0; 
    	uCol=y0; 
    	if(delta_x>0)incx=1; //设置单步方向 
    	else if(delta_x==0)incx=0;//垂直线 
    	else {incx=-1;delta_x=-delta_x;} 
    	if(delta_y>0)incy=1; 
    	else if(delta_y==0)incy=0;//水平线 
    	else{incy=-1;delta_y=-delta_y;} 
    	if( delta_x>delta_y)distance=delta_x; //选取基本增量坐标轴 
    	else distance=delta_y; 
    	for(t=0;t<=distance+1;t++ ){//画线输出 
    		if(size==0)LCD_DrawPoint(uRow,uCol,color);//画点 
    		if(size==1){
    			LCD_DrawPoint(uRow,uCol,color);//画点 
    			LCD_DrawPoint(uRow+1,uCol,color);//画点 
    			LCD_DrawPoint(uRow,uCol+1,color);//画点 
    			LCD_DrawPoint(uRow+1,uCol+1,color);//画点 
    		}
    		if(size==2){
    			LCD_DrawPoint(uRow,uCol,color);//画点 
    			LCD_DrawPoint(uRow+1,uCol,color);//画点 
    			LCD_DrawPoint(uRow,uCol+1,color);//画点 
    			LCD_DrawPoint(uRow+1,uCol+1,color);//画点 
    			LCD_DrawPoint(uRow-1,uCol+1,color);//画点 
    			LCD_DrawPoint(uRow+1,uCol-1,color);//画点
    			LCD_DrawPoint(uRow-1,uCol-1,color);//画点  
    			LCD_DrawPoint(uRow-1,uCol,color);//画点 
    			LCD_DrawPoint(uRow,uCol-1,color);//画点  
    		}
    		xerr+=delta_x ; 
    		yerr+=delta_y ; 
    		if(xerr>distance) { 
    			xerr-=distance; 
    			uRow+=incx; 
    		} 
    		if(yerr>distance) { 
    			yerr-=distance; 
    			uCol+=incy; 
    		} 
    	}
    }

画三角形

// 画三角形
    void LCD_DrawTriangel(uint16_t x0,uint16_t y0,uint16_t x1,uint16_t y1,uint16_t x2,uint16_t y2,uint16_t color)
    {
    	LCD_DrawLine(x0,y0,x1,y1,color);
    	LCD_DrawLine(x1,y1,x2,y2,color);
    	LCD_DrawLine(x2,y2,x0,y0,color);
    }

画实心三角形

// 画实心三角形
    void LCD_DrawFillTriangel(uint16_t x0,uint16_t y0,uint16_t x1,uint16_t y1,uint16_t x2,uint16_t y2,uint16_t color)
    {
    	uint16_t a, b, y, last;
    	int dx01, dy01, dx02, dy02, dx12, dy12;
    	long sa = 0;
    	long sb = 0;
    	if (y0 > y1) {
    		LCD_Swap(&y0,&y1); 
    		LCD_Swap(&x0,&x1);
    	}
    	if (y1 > y2) {
    		LCD_Swap(&y2,&y1); 
    		LCD_Swap(&x2,&x1);
    	}
    	if (y0 > y1) {
    		LCD_Swap(&y0,&y1); 
    		LCD_Swap(&x0,&x1);
    	}
    	if(y0 == y2) { 
    		a = b = x0;
    		if(x1 < a){
    			a = x1;
    		}else if(x1 > b){
    			b = x1;
    		}
    		if(x2 < a){
    			a = x2;
    		}else if(x2 > b){
    			b = x2;
    		}
    		LCD_DrawFillRectangle(a,y0,b,y0,color);
    		return;
    	}
    	dx01 = x1 - x0;
    	dy01 = y1 - y0;
    	dx02 = x2 - x0;
    	dy02 = y2 - y0;
    	dx12 = x2 - x1;
    	dy12 = y2 - y1;
    	
    	if(y1 == y2){
    		last = y1; 
    	}else{
    		last = y1-1; 
    	}
    	for(y=y0; y<=last; y++) {
    		a = x0 + sa / dy01;
    		b = x0 + sb / dy02;
    		sa += dx01;
    		sb += dx02;
    		if(a > b){
    			LCD_Swap(&a,&b);
    		}
    		LCD_DrawFillRectangle(a,y,b,y,color);
    	}
    	sa = dx12 * (y - y1);
    	sb = dx02 * (y - y0);
    	for(; y<=y2; y++) {
    		a = x1 + sa / dy12;
    		b = x0 + sb / dy02;
    		sa += dx12;
    		sb += dx02;
    		if(a > b){
    			LCD_Swap(&a,&b);
    		}
    		LCD_DrawFillRectangle(a,y,b,y,color);
    	}
    }

画矩形

// 画矩形
    void LCD_DrawRectangle(uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2,uint16_t color)
    {
    	LCD_DrawLine(x1,y1,x2,y1,color);
    	LCD_DrawLine(x1,y1,x1,y2,color);
    	LCD_DrawLine(x1,y2,x2,y2,color);
    	LCD_DrawLine(x2,y1,x2,y2,color);
    }

画实心矩形

// 实心矩形
    void LCD_DrawFillRectangle(uint16_t sx,uint16_t sy,uint16_t ex,uint16_t ey,uint16_t color)
    {  	
    	uint16_t i,j;			
    	uint16_t width=ex-sx+1; 		//得到填充的宽度
    	uint16_t height=ey-sy+1;		//高度
    	LCD_SetWindows(sx,sy,ex,ey);//设置显示窗口
    	for(i=0;i<height;i++){
    		for(j=0;j<width;j++)
    		LCD_WriteDate16(color);	//写入数据 	 
    	}
    	LCD_SetWindows(0,0,LCD_Width-1,LCD_Height-1);//恢复窗口设置为全屏
    }

显示单个字符

// 显示单个字符
    void LCD_ShowChar(uint16_t x,uint16_t y,uint16_t bcolor,uint16_t fcolor, uint8_t ch,uint8_t size,uint8_t mode)
    {
    	uint8_t temp,pos,t;
    	ch=ch-' ';//得到偏移后的值
    	LCD_SetWindows(x,y,x+size/2-1,y+size-1);//设置单个文字显示窗口
    	if(!mode){ //非叠加方式
    		for(pos=0;pos<size;pos++){
    			if(size==12)temp=asc2_1206[ch][pos];//调用1206字体
    			else temp=asc2_1608[ch][pos];		 //调用1608字体
    			for(t=0;t<size/2;t++){
    				if(temp&0x01)LCD_WriteDate16(fcolor); 
    				else LCD_WriteDate16(bcolor); 
    				temp>>=1; 
    			}
    		}
    	}else{//叠加方式
    		for(pos=0;pos<size;pos++){
    			if(size==12)temp=asc2_1206[ch][pos];//调用1206字体
    			else temp=asc2_1608[ch][pos];		 //调用1608字体
    			for(t=0;t<size/2;t++){
    				if(temp&0x01)LCD_DrawPoint(x+t,y+pos,fcolor);//画一个点
    				temp>>=1; 
    			}
    		}
    	}
    	LCD_SetWindows(0,0,LCD_Width-1,LCD_Height-1);//恢复窗口为全屏
    }

显示字符串

// 显示字符串
    void LCD_ShowString(uint16_t x,uint16_t y,uint16_t bcolor,uint16_t fcolor,uint8_t size,char *p,uint8_t mode)
    {
    	while((*p<='~')&&(*p>=' ')){//判断是不是非法字符!
    		if(x>(LCD_Width-1)||y>(LCD_Height-1)) 
    		return;
    		LCD_ShowChar(x,y,bcolor,fcolor,*p,size,mode);
    		x+=size/2;
    		p++;
    	}
    }

显示数字

// 显示数字
    void LCD_ShowNum(uint16_t x,uint16_t y,uint16_t bcolor,uint16_t fcolor,uint32_t num,uint8_t len,uint8_t size)
    {
    	uint8_t t,temp,enshow=0;
    	for(t=0;t<len;t++){
    		temp=(num/LCD_pow(10,len-t-1))%10;
    		if(enshow==0&&t<(len-1)){
    			if(temp==0){
    				LCD_ShowChar(x+(size/2)*t,y,bcolor,fcolor,' ',size,0);
    				continue;
    			}else enshow=1;
    		}
    	 	LCD_ShowChar(x+(size/2)*t,y,bcolor,fcolor,temp+'0',size,0);
    	}
    }

显示图片

//显示40*40 QQ图片
    void LCD_Drawbmp16(uint16_t x,uint16_t y,const unsigned char *p) 
    {
      	int i; 
    	unsigned char picH,picL; 
    	LCD_SetWindows(x,y,x+40-1,y+40-1);//窗口设置
        for(i=0;i<40*40;i++)
    	{	
    	 	picL=*(p+i*2);	//数据低位在前
    		picH=*(p+i*2+1);				
    		LCD_WriteDate16(picH<<8|picL);  						
    	}	
    	LCD_SetWindows(0,0,LCD_Width-1,LCD_Height-1);//恢复窗口为全屏
    }

# 三、下载测试 #

打开ESP-IDF Command Prompt

cd命令进入此工程目录

cd F:\ESP32_DevBoard_File\23_LCD_Test

查看电脑设备管理器中开发板的串口号

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 1][]

执行idf.py -p COM9 flash monitor从串口9下载并运行打开口显示设备调试信息   Ctrl+c退出运行

显示效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 2][]

[https_item.taobao.com_item.htm_spm_a2oq0.12575281.0.0.50111deb2Ij1As_ft_t_id_626366733674]: https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674
[Link 1]: https://blog.csdn.net/cnicfhnui/article/details/108343442
[windows]: https://blog.csdn.net/cnicfhnui/article/details/108405073
[0_Hello Bug _ESP_LOGX_printf]: https://blog.csdn.net/cnicfhnui/article/details/108372259
[1_LED]: https://blog.csdn.net/cnicfhnui/article/details/108407571
[2_LED_Task]: https://blog.csdn.net/cnicfhnui/article/details/108444839
[3_LEDC_PWM]: https://blog.csdn.net/cnicfhnui/article/details/108445470
[4_ADC_LightR]: https://blog.csdn.net/cnicfhnui/article/details/108465952
[5_KEY_Short_Long]: https://blog.csdn.net/cnicfhnui/article/details/108483871
[6_TouchPad_Interrupt]: https://blog.csdn.net/cnicfhnui/article/details/108489470
[7_WS2812_RMT]: https://blog.csdn.net/cnicfhnui/article/details/108490311
[8_DHT11_RMT]: https://blog.csdn.net/cnicfhnui/article/details/108492118
[9_SPI_SDCard]: https://blog.csdn.net/cnicfhnui/article/details/108493320
[10_IIC_ADXL345]: https://blog.csdn.net/cnicfhnui/article/details/108507326
[11_IIC_AT24C02]: https://blog.csdn.net/cnicfhnui/article/details/108507982
[12_IR_Rev_RMT]: https://blog.csdn.net/cnicfhnui/article/details/108508379
[13_IR_Send_RMT]: https://blog.csdn.net/cnicfhnui/article/details/108510733
[14_WIFI_Scan]: https://blog.csdn.net/cnicfhnui/article/details/108511289
[15_WIFI_AP]: https://blog.csdn.net/cnicfhnui/article/details/108517633
[16_WIFI_AP_TCP_Server]: https://blog.csdn.net/cnicfhnui/article/details/108588735
[17_WIFI_AP_TCP_Client]: https://blog.csdn.net/cnicfhnui/article/details/108590279
[18_WIFI_AP_UDP]: https://blog.csdn.net/cnicfhnui/article/details/108590638
[19_WIFI_STA]: https://blog.csdn.net/cnicfhnui/article/details/108591462
[20_WIFI_STA_TCP_Server]: https://blog.csdn.net/cnicfhnui/article/details/108594214
[21_WIFI_STA_TCP_Client]: https://blog.csdn.net/cnicfhnui/article/details/108594746
[22_WIFI_STA_UDP]: https://blog.csdn.net/cnicfhnui/article/details/108595529
[23_LCD_Test]: https://blog.csdn.net/cnicfhnui/article/details/108612147
[24_XPT2046_Touch_Test]: https://blog.csdn.net/cnicfhnui/article/details/108655354
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70]: /images/20221123/a65a91d2b90e44d99eacdcc126c1004c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 1]: /images/20221123/2bfff2013088402499c6de6b98de4b57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 2]: /images/20221123/52ee28a96dd34b0d8674d3fbb83fd5e8.png