Agile平台搭建指南（基于STM32H7芯片的TOUCHGFX GUI开发环境建设 @Like）-摩杜云开发者社区

Agile平台搭建指南（基于STM32H7芯片的TOUCHGFX GUI开发环境建设 @Like）

1. 功能需求

2. 硬件平台

3. 软件工具环境

4. 建设基础

5. 安装开发工具和环境

6. 创建应用工程

6.1. 生成工程

6.2. 设置TouchGFX

6.3. 设置外设时钟

6.4. 重新生成工程

6.5. 生成TouchGFX应用

6.6. 打开IDE工程编译运行

6.6.1. STM32CubeIDE工程

6.6.2. Keil MDK工程

7. 完善工程

7.1. 给TouchGFX应用工程填加驱动

7.2. 给TouchGFX应用加入触摸屏控制

7.3. MPV编程架构

7.4. Model开发注意事项

7.5. GUI运行效率及空间研究

7.6. 人机交互设计

8. GUI应用编程

8.1. 生成空的应用框架

8.2. 填加资源

8.2.1. 增加图片资源

8.2.2. 使用图片

8.2.3. 增加字库资源

8.2.4. 增加字符资源

8.2.5. 使用文本字符

8.3. UI界面设计

8.3.1. 填加界面Screen

8.3.2. 界面布局

8.4. 控件使用

8.4.1. 数字指示

8.4.2. 模拟仪表

8.4.3. 进度条

8.4.4. 按钮区设计

8.4.5. 列表设计

8.4.6. 文本设计

8.4.7. 图标设计

9. 工程进阶

9.1. HAL库源文件编译成.a或.lib库

9.1.1. 创建库工程

9.1.2. 把完整的HAL库拷贝到工程

9.1.3. 生成MDK的.lib文件

9.1.4. 生成IDE的.a文件

9.1.5. MDK中加入.lib静态库文件

9.1.6. STM32CubeIDE中加入.a静态库文件

9.2. bootload启动程序

9.2.1. 从内部启动加载QSPI FLASH应用程序

9.3. ISP在线升级

9.3.1. 应用镜像文件生成与校验（加密）

9.4. 外部FLASH烧写算法

9.5. 从SDRAM调试程序

9.6. 从外部QSPI FLASH调试程序

9.7. 内部FLASH存储数据

9.8. 独立语音文件烧录

9.9. 图片资源分离与联合调试

9.10. 应用程序剥离资源并单独烧录

10. 外设功能开发

10.1. SAI之WAV语音合成与播放

10.2. DCMI之PAL模拟摄像头

10.2.1. 模拟摄像头硬件设计（TVP5150）

10.2.2. 模拟摄像头硬件设计（ADV7280A）

10.2.3. 模拟摄像头DMA数据采集

10.2.4. 模拟摄像头YUV（yCbCr）转RGB

10.3. I2C触摸屏设计

10.4. USB MSC（U盘）

10.5. SDMC（SD卡）

10.6. UART DEBUG

10.7. SPI接口

10.8. FDCAN

10.9. ADC（及温度检测）

10.10. RTC时钟

10.11. PWM与定时器设计

10.12. 键盘设计

10.13. 文件系统FATS

11. 问题集锦

11.1. MDK 中文显示编译

11.2. ARM编译器

11.3. TouchGFX 生成MDK代码时的BUG

11.4. 同一代码STM32CUBEIDE工程比MDK工程运行慢

1. 功能需求

基本硬件模块有核心电路（CPU、QSPI FLASH、SDRAM），外设有TFT液晶显示屏RGB接口和LVDS接口、电容触摸屏、模拟摄像头、扬声器、蜂鸣器、物理按键、SD card、USB、CAN、RS485、RS232等，基本软件功能需求有GUI界面、触摸控制、按键事件、视频监控、中文语音、蜂鸣发声、日志存储、USB升级、串行通信等。

2. 硬件平台

u STM32H743I-EVAL Rev.B

u APOLO-STM32H743IIT-DB

u EmbedFire-H743_Pro_V-DB

u Fire-DAP-High

u ST-Link-III

3. 软件工具环境

u STM32CubeMX V6.3.0

u STM32CubeIDE V1.7.0

u STM32CubeProgrammer V2.8.0

u TouchGFX V1.18.0

u ARM KEIL MDK V5.36.0.0

u STM32Cube_FW_H7_V1.9.0 V1.9.0

u Keil.STM32H7xx_DFP.2.8.0.pack V2.8.0

注：STM32CubeMX V6.5.0 BUG ADC RCC自动配置失效。

4. 建设基础

嵌入式系统开发基本知识

ARM处理器基础知识

C语言、C++语言基础

STM32系列MCU基本知识

5. 安装开发工具和环境

按顺序正常安装所有软件。注意：TouchGFX V1.18.0需要手动增加到STM32CubeMX V6.3.0中。

准备硬件开发平台

硬件平台采用EmbedFire-H743_Pro_V-DB，屏幕选用800*480（开发板原配），1024*600，1024*768三种。

6. 创建应用工程

6.1. 生成工程

u 打开STM32CubeMX，新建项目File->New Project。

u 选择硬件平台，选MCU/MPU selector页面，在Part Number框中输入STM32H743XI，从MCUs/MPUs List中选择STM32H743XI，点Start Project开始新项目。

u 项目基本设置

n Pinout & Configuration页面设置

² 调试接口设置

在Pinout & Configuration页面Trace and Debug->DEBUG项目Mode中Debug项选择Serial Wire，其它设置项保持默认不动。或者选择其它与JTAG下载仿真器相对应的接口形式。此处使用DAP-Link的SWD模式，SWD接口只有2根信号线节省GPIO资源。

² 系统时基设置

System Core->SYS项保持Timebase Source默认选择Systick，默认产生1m的tick。

² 系统时钟设置

System Core->RCC项Mode中High Speed Clock（HSE）设置为Crystal/Ceramic Resonator，其他保持默认，LSE可根据需要进行设置。

n Clock & Configuration页面设置

² 系统频率设置

PLL Source Mux选HSE，DIVM1选5，DIVN1选192，DIVP1选2，System Clock Mux选PLLCLK，SYSCLK=480MHz（STM32H743的最高主频，可根据需要设置为400MHz或其他主频），D1CPRE Prescaler选1，480HHz max，HPRE Prescaler选2，240MHz max，D1PPRE、D2PPRE1、D2PPRE2、D3PPRE全选2，其他不动。

² 外设频率设置

DIVM2选5，DIVM3选5，fracn1、fracn2、fracn3全等0，DIVQ1=2，DIVR1选8 120MHz，DIVN2选144，DIVN3选144，其他时钟等外设开启设置后再设置合适的值。

n Project Manager页面设置

输入项目名称、路径，选择IDE及版本，Heap Size=0x1000，Stack Size=0x1000。其他保持默认，保存STM32CubeMX文件XXX.ioc，点击GENERATE CODE生成。此处选用STM32CubeIDE和MDK V5.32两种IDE的工程。

6.2. 设置TouchGFX

打开之前生成的XXX.ioc工程，或继续上面已打开的工程进行设置。STM32H743上运行TouchGFX仅需要进行CRC、DMA2D、LTDC、FMC及Software Packs Component X-CUBE-TOUCHGFX设置，实际的工程应用中还需要对QSPI及其他所需要的外设进行设置，注意最后开启ICache、DCache否则系统运行速度达不到理想效果，这里还需要配置的外设包含有GPIO、DMA、QSPI、I2C、FDCAN、USART、SAI、DCMI、ADC、RTC、PWM、SDMMC、USB、FATFS等。

u FMC设置

这里仅需设置SDRAM（显存需要，大分辨率的显示器内部512KB的SRAM不够用，这里FrameBuffer会用到1024*768*2（RGB565），然后TouchGFX开双缓冲，即总共3MB），SDRAM设置参数具体参考SDRAM芯片手册，此处设定芯片为双片W9825G6KH-6并接。

Connectivity->FMC->Mode->SDRAM 1，设置Clock and chip enable为SDCKE1+SDEN1，Internal bank number为4 banks，Address为13 bits，Data为32 bits，Byte enable为32-bit byte enable。

Configuration->SDRAM1->SDRAM control 设置Bank为SDRAM bank 2，Number of column address bits为9 bits，Number of row address bits为13 bits，CAS latency为3 memory clock cycles，Write protection为Disabled，SDRAM common clock为2 HCLK clock cycles，SDRAM common burst read为Enabled，SDRAM common read pipe delay为2 HCLK clock cycles。

Configuration->SDRAM1->SDRAM time in memory clock cycles设置Load mode register to active delay=2,Exit self-refresh delay=8,Self-refresh time=5,SDRAM common row cycle delay=8,Write recovery time=4,SDRAM common row precharge delay=2,Row to column delay=2。

Configuration->GPIO Settings，按硬件电路连接配置，此处所有GPIO设置FMC_A0~A12、FMC_BA0~1、FMC_D0~31、FMC_NBL0~3采用默认值不动，FMC_SDCKE1设置为PH7，FMC_SDCLK设置为PG8，FMC_SDNCAS设置为PG15，FMC_SDNE1设置为PH6，FMC_SDNRAS设置为PF11，FMC_SDNWE设置为PC0。这些引脚的Maximum out speed全部配置为Very High。

FMC配置完成，其它项目保持不变。

u LTDC设置

LTDC设置TFT液晶RGB接口的显示屏，具体参数参照液晶规格书。

Multimedia->LTDC->Mode->Display Type，选RGB565。实际电路液晶屏是支持RGB888，为了节省系统硬件资源和内存空间，采用RGB565接口，且显示效果差别不会太大。

n Multimedia->LTDC->Configuration->Parameter Settings

² Synchronization for Width

Horizontal Synchronization Width=1pixels（或2）

Horizontal Back Porch=46pixels（或48）

Active Width=800（或1024）

Horizontal Front Porch=22pixels（或237）

² Synchronization for Height

Horizontal Synchronization Height=1pixels（或2）

Horizontal Back Porch=23pixels（或48）

Active Height=480（或768）

Horizontal Front Height=22pixels（或20）

² Signal Polarity

Horizontal Synchronization Polarity=Active Low

Vertical Synchronization Polarity=Active Low

Not Data Enable Polarity=Active Low

Pixel Clock Polarity=Normal Input

² Back Ground Color

Red=0

Green=0

Blue=0

n Multimedia->LTDC->Configuration->Layer Settings

² Windows Position

Layer 0 - Window Horizontal Start=0

Layer 0 - Window Horizontal Stop=800（或1024）

Layer 0 - Window Horizontal Start=0

Layer 0 - Window Horizontal Start=480（或768）

² Pixel Parameters

Layer 0 - Pixel Format=RGB565

² Blending

Layer 0 - Alpha constant for blending=255

Layer 0 - Default Alpha value=0

Layer 0 - Blending Factor1=Alpha constant

² Frame Buffer

Layer 0 - Color Frame Buffer Start Address=0xD0000000

Layer 0 - Color Frame Buffer Line Length(Image Width)=640(或1024)

Layer 0 - Color Frame Buffer Number of Lines(Image Height)=480(或768)

² BackGround Color

Layer 0 - Blue=0

Layer 0 - Green=0

Layer 0 - Red=0

² Number of Layers

Number of Layers=1 layer

n Multimedia->LTDC->Configuration->NVIC Settings

LTDC global error interrupt Enabled（不选）

LTDC global interrupt Enabled（必选）且Preemption Priority设置为较大的值，这个在System Core->NVIC->Configuration->NVIC->LTDC global interrupt->Preemption Priority=15。

n Multimedia->LTDC->Configuration->GPIO Settings，按硬件电路连接配置，此处所有GPIO设置LTDC_B3-PJ15、LTDC_B4-PK3、LTDC_B5-PK4、LTDC_B6-PK5、LTDC_B7-PK6、LTDC_CLK-PI14、LTDC_BDE-PK7、LTDC_G2-PJ9、LTDC_G3-PJ10、LTDC_G4-PJ11、LTDC_G5-PK0、LTDC_G6-PK1、LTDC_G7-PK2、LTDC_HSYNC-PI12、LTDC_R3-PJ2、LTDC_R4-PJ3、LTDC_R5-PJ4、LTDC_R6-PJ5、LTDC_R7-PJ6、LTDC_VSYNC-PI13。这些引脚的Maximum out speed全部配置为High。

n System Core->GPIO 增加LCD背光驱动，此处选择PD13，设置为GPIO_Output，设置GPIO output level 为High，设置GPIO mode 为Output Push Pull，设置GPIO Pull-up/Pull-down为Pull-up，设置Maximum output speed为High，设置User Label = LCD_BL

u DMA2D设置

n Multimedia->DMA2D->Mode->Activated，勾选。开启图形加速。

n Multimedia->DMA2D->Configuration->Parameter Setting

² Basic Parameters

Transfer Mode 设置为Memory to Memory

Color Mode 设置为RGB565

Output offset = 0

² Foreground layer Configuration 所有项保持不变。

n Multimedia->DMA2D->Configuration->NVIC Settings

DMA2D global interrupt Enabled（必选）且Preemption Priority设置为5，这个在System Core->NVIC->Configuration->NVIC->DMA2D global interrupt->Preemption Priority=5。

u CRC设置

n Computing->CRC->Mode->Activated，勾选。开启CRC，TouchGFX需要。

n Computing->CRC->Configuration->Parameter Setting 所有项保持不变。

u 增加TouchGFX组件

Pinout & Configuration页面打开Software Packs->Select Component，选择X-CUBE-TOUCHGFX相应版本，如果软件包没有安装，先联网点组件后面的Install安装后再选择。Application选择TouchGFX Generator，点OK加入，Pinout & Configuration最下面增加Software Packs条目，设置STMicroeaectronics.X-CUBE-TOUCHGFX...，Mode中选择Graphics Application激活TouchGFX。

n Software.Packs->STMicroelectronics.X-CUBE-TOUCHGFX.4.18.0->Mode->Graphics Application，勾选。开启TouchGFX GUI。

n Software.Packs->STMicroelectronics.X-CUBE-TOUCHGFX.4.18.0->Configuration->TouchGFX Generator设置

² Display

Interface 设置为Parallel RGB（LTDC）

Framebuffer Pixel Format（LTDC）设置为RGB565

Width（LTDC）= LCD_WIDTH = 800（或1024）

Height（LTDC）= LCD_HEIGHT = 480（或768）

Framebuffer Strategy设置为Double Buffer

Buffer Location设置为By Address

Start Address = 0xD00000000

Start Address 2 = 0xD0180000

² Driver

Application Tick Source 设置为LTDC

Graphics Accelerator 设置为ChromART（DMA2D）

Real-Time Operating System 设置为No OS

² Additional Features

External Data Reader 设置为Disabled

² Video Decoding

Type 设置为Disabled

6.3. 设置外设时钟

n Clock & Configuration页面设置

接着之前生成工程中时钟设置继续设置，以后每增加外设都要检查调整相应开启外设的时钟。

此时需要设计FMC和LTDC的时钟：

FMC Clock Mux 选HCLK3 =240Mhz to FMC

DIVR3选24(或10)，=30（72）MHz to LTDC

6.4. 重新生成工程

每次变更STM32CubeMX工程后，重新保存XXX.ioc文件并重新生成工程。Project Manager页面点击GENERATE CODE重新生成，注：建议先生成MDK工程再生成STM32CubeIDE工程，在Toolchain / IDE项选择STM32CubeIDE时，建议把Generate Under Root的勾去掉，这样目录比较清晰。生成工程建议先不要打开，做完下一步“生成TouchGFX应用”后再打开编译。

6.5. 生成TouchGFX应用

第一次创建的工程，先在打开工程下的TouchFGX目录中的ApplicationTemplate.touchgfx.part文件，生成XXX.touchfgx应用，之后使用XXX.touchfgx修改UI界面应用。打开ApplicationTemplate.touchgfx.part后需要选择Blank UI生成空的UI应用或导入之前已经存在的UI应用。建议初次生成后在Screen1中加入一个按钮和图片控件，方便查看运行效果。

然后点击Generat code和Run simulator，生成完整的工程代码。注意：这步之后再打开STM32CubeIDE或MDK工程进行编译才能通过。

此后打开XXX.touchfgx修改UI，修改后点击Generat code和Run simulator，生成亲的工程代码。

6.6. 打开IDE工程编译运行

6.6.1. STM32CubeIDE工程

打开工程目录下的.project文件，点Build编译工程。

可能出现以下错误，需要修改。

n 缺少头文件编译出错

建议把STM32CubeIDE文件夹整体删除，重新用MX生成。发现TouchGFX V1.18.0的一个问题，就是Generat code时仅生成MX文件ioc中选中的Toolchain / IDE的工程，所以要TouchGFX生成IDE和MDK代码时需要来回切换。

n Videos.s

打开工程Properties，C/C++ General->Paths and Symbols->Source Location->/XXX/TouchGFX，打开Filter，点Add...，加入../TouchGFX/generated/videos/src/keil/Videos.s文件，应用退出再编译。

n Memset

在相应的源文件中加入#include <string.h>

n 多余的文件

建议删除相应的目录，依次用STM32CubeMX打开XXX.ioc和TouchGFX Designer 打开XXX.touchgfx文件重新生成工程。

注意：如果同时使用STM32CubeIDE和Keil MDK两种工程，把STM32CubeIDE 菜单Edit中Set Encoding中编码格式从默认修改为Other UTF-8 即（BOM）编码格式。

6.6.2. Keil MDK工程

打开工程目录下MDK-ARM中的XXX.uvprojx工程文件，建议编译之前先打开Project->Options->Output->Browse Information 勾选去除，否则第一次编译时会很慢。

点Build编译完成。编译过程如果出现问题，删除错误文件，用MX重新生成代码。

至此代码全部自动生成，离目标板上运行ToucgGFX界面仅只需1步，这步需要手动增加代码。在main函数中加入SDRAM序列初始化。这样就用STM32CubeMX生成了一个纯净的TouchGFX工程。

代码贴在下方：

/**

* @brief FMC SDRAM

/* Private defines -----------------------------------------------------------*/

#define SDRAM_MODEREG_BURST_LENGTH_1 ((uint16_t)0x0000)

#define SDRAM_MODEREG_BURST_LENGTH_2 ((uint16_t)0x0001)

#define SDRAM_MODEREG_BURST_LENGTH_4 ((uint16_t)0x0002)

#define SDRAM_MODEREG_BURST_LENGTH_8 ((uint16_t)0x0004)

#define SDRAM_MODEREG_BURST_TYPE_SEQUENTIAL ((uint16_t)0x0000)

#define SDRAM_MODEREG_BURST_TYPE_INTERLEAVED ((uint16_t)0x0008)

#define SDRAM_MODEREG_CAS_LATENCY_2 ((uint16_t)0x0020)

#define SDRAM_MODEREG_CAS_LATENCY_3 ((uint16_t)0x0030)

#define SDRAM_MODEREG_OPERATING_MODE_STANDARD ((uint16_t)0x0000)

#define SDRAM_MODEREG_WRITEBURST_MODE_PROGRAMMED ((uint16_t)0x0000)

#define SDRAM_MODEREG_WRITEBURST_MODE_SINGLE ((uint16_t)0x0200)

#define SDRAM_TIMEOUT ((uint32_t)0xFFFF)

void SDRAM_InitSequence(void)

{

static FMC_SDRAM_CommandTypeDef Command;

uint32_t tmpr = 0;

/* 1 ----------------------------------------------------------------*/

Command.CommandMode = FMC_SDRAM_CMD_CLK_ENABLE;

Command.CommandTarge t= FMC_SDRAM_CMD_TARGET_BANK2; //FMC_COMMAND_TARGET_BANK;

Command.AutoRefreshNumber = 1;

Command.ModeRegisterDefinition = 0;

HAL_SDRAM_SendCommand(&hsdram1, &Command, SDRAM_TIMEOUT);

/* 2 ----------------------------------------------------------------*/

HAL_Delay(1);

/* 3 ----------------------------------------------------------------*/

Command.CommandMode = FMC_SDRAM_CMD_PALL;

Command.CommandTarget = FMC_SDRAM_CMD_TARGET_BANK2; //FMC_COMMAND_TARGET_BANK;

Command.AutoRefreshNumber = 1;

Command.ModeRegisterDefinition = 0;

HAL_SDRAM_SendCommand(&hsdram1, &Command, SDRAM_TIMEOUT);

/* 4 ----------------------------------------------------------------*/

Command.CommandMode = FMC_SDRAM_CMD_AUTOREFRESH_MODE;

Command.CommandTarget = FMC_SDRAM_CMD_TARGET_BANK2; //FMC_COMMAND_TARGET_BANK;

Command.AutoRefreshNumber = 8;

Command.ModeRegisterDefinition = 0;

HAL_SDRAM_SendCommand(&hsdram1, &Command, SDRAM_TIMEOUT);

/* 5 ----------------------------------------------------------------*/

tmpr = (uint32_t)SDRAM_MODEREG_BURST_LENGTH_1 |

SDRAM_MODEREG_BURST_TYPE_SEQUENTIAL |

SDRAM_MODEREG_CAS_LATENCY_3 |

SDRAM_MODEREG_OPERATING_MODE_STANDARD |

SDRAM_MODEREG_WRITEBURST_MODE_SINGLE;

Command.CommandMode = FMC_SDRAM_CMD_LOAD_MODE;

Command.CommandTarget = FMC_SDRAM_CMD_TARGET_BANK2; //FMC_COMMAND_TARGET_BANK;

Command.AutoRefreshNumber = 1;

Command.ModeRegisterDefinition = tmpr;

HAL_SDRAM_SendCommand(&hsdram1, &Command, SDRAM_TIMEOUT);

/* 6 ----------------------------------------------------------------*/

HAL_SDRAM_ProgramRefreshRate(&hsdram1, 824);

}

int main(void)

{

MX_TouchGFX_Init();

/* USER CODE BEGIN 2 */

SDRAM_InitSequence();

/* USER CODE END 2 */

/* Infinite loop */

/* USER CODE BEGIN WHILE */

while (1)

｝

7. 完善工程

7.1. 给TouchGFX应用工程填加驱动

一个完整的应用工程除了GUI界面，还需要其它许多功能外设。比如这里会用到的电容触摸屏、模拟摄像头、扬声器、蜂鸣器、物理按键、SD card、USB、CAN、RS485、RS232等。应用工程中填加各种驱动的步骤大致相同。这里预定了一个基本的原则，所有CPU外设的初始化尽量使用STM32CubeMX完成配置，这样方便工程移植、易于与硬件设计保持一致、保证软件可靠性。一个配置好的CubeMX工程，只需要一个.ioc文件和少量BSP驱动就能完全从头重新生成一个可用的新应用工程，光想想都开心啊，而且后面TouchGFX工程也只需一个.touchgfx和assets资源文件就能完全加入一个新GUI应用，光想想就无敌了。

有些外设用STM32CubeMX配置完成就可以直接使用了，是不需要填加专门驱动的，或者使用尽量少的代码实现功能，但有的功能必须填加标准的驱动，甚至为自己的应用需求定制封装驱动。用STM32CubeMX配置生成的TouchGFX应用工程，DMA2D、LTDC等无需另加驱动；SDRAM、QSPI等仅需少量配置代码；Touch Screen等编写标准驱动即可；而合成语音播放(SAI接口)和模拟摄像头(DCMI接口)等则需要自己开发复杂的驱动程序；另外像U盘（USB）、SD卡（SDMMC）用FATFS文件系统用STM32CubeMX配置完，也只需少量代码就可使用。

给应用工程填加驱动共需要三步。

第一步，在工程目录\Drivers\文件夹下新建BSP（或者BSP_XXX）文件夹，在BSP文件内新建Inc和Src文件夹，新建或拷贝驱动程序头文件和源文件分别到这两个文件夹内。

第二步，将源文件和头文件加入到工程中，用MDK打开GUI应用工程，在Project Driver/STM32H7XX_HAL_Driver目录组右击打开Options for Group 把Include in Target Build的勾去掉，把HAL库源文件从工程中移除。

在Project下新建Lib文件组（或者已有的Lib），打开Manage Project Items选项页面，在Project Items卡下Groups中增加Lib或选中Lib，在Files下点Add Files加入工程目录\Drivers\STM32H7xx_HAL_Driver\lib路径中的.lib文件。

7.2. 给TouchGFX应用加入触摸屏控制

这里需要触摸屏的驱动，如果有可用的驱动就方便很多了，否则需要移植或重写比较费工夫。写驱动是另外一个课题不是这里重点，先假如已经有触摸驱动了。把触摸驱动填加到应用工程中编译通过。

7.3. MPV编程架构

7.4. Model开发注意事项

7.5. GUI运行效率及空间研究

7.6. 人机交互设计

8. GUI应用编程

8.1. 生成空的应用框架

如前所述，首次打开TouchGFX工程应用时选择Blank UI生成空的UI应用。

8.2. 填加资源

8.2.1. 增加图片资源

n 将设计好的UI进行切图，切图注意原则：尽量减少图片占用空间并且兼具考虑运行效率，尽量复用图片，图片采用png格式，图片一般需要透明。同时切图考虑布图的方便性。

n 将设计好的图片进行重新命名和分目录，注意TouchGFX仅认为以字母开头的英文字符为合法资源名称，名称尽量易于快速识别，可适当使用“_”做分隔，其它尽量不采用特殊字符。目录整理建议按“Screen”划分，共用的单独放目录下。

n 把整理好的图片目录整体拷贝到应用工程\TouchGFX\assets\images\目录下，这个目录下放进来的图片都将会被编译，但只有用的会被链接到目标中，图片资源默认存储位置是(ExtFlashSection)段。

n 所有图片资源在TouchGFX的Images页面下进行管理。

n 增加图片的格式对存储空间影响很大，建议大屏幕和影响效果时尽量采用RGB565格式。增加时自动为默认格式，可在增加后TouchGFX的Images页面中全选然后选择一下统一改成RGB565格式。

8.2.2. 使用图片

n 使用图片，只要在“Screen”给相应的控件指定image即可。例如在工具条中选择image控件点击增加到Screen中，在右侧Properties属性页下“Image”栏中点No image选择Project自动呈现\TouchGFX\assets\images\目录，在此选择相应的图片即可。

n 加入屏幕的图片在Properties首行框中重新命名，命名要易于识别和使用，比如所有icon图片可以icon开头命名。

n 加入图片前建议按区域建立“Container”，放到相应的区域便于管理，加入的图片在用鼠标拖动到Container下即可。

n 图片放置顺序遵循，先底图后前图，先大图后小图的原则。参照UI设计进行布图。

n 主要图片放置建议使用Properties坐标，输入坐标值以精确定位，其它图片可用坐标或者使用TouchGFX的自动对齐功能放置。

n 有相互覆盖遮挡的图片显示要注意在左侧“Screen”资源列表中的上下位置，排在上面的覆盖排在下面的图片。

8.2.3. 增加字库资源

注意在TouchGFX使用文字必须增加相应的字型库并指定相应的字型，TouchGFX Designer生成应用工程后默认指定了Verdana字体库，及Default,20px、Large,40px、Small,10px三种字型可用。

注意Verdana字体库是英文字库，无法显示中文。如果要显示中文或者其它字体，需要指定相应的字体库和字型大小。增加库及字型的方法是在TouchGFX Designer的Texts页面点Add New Typography按钮，在下方列表中修改Name，选择Font，这里Font中可选的是Windows系统自带的已有字库，如果需要自定义的字库需要将相应的“XX.TTF”字库文件放到工程目录的\TouchGFX\assets\fonts文件夹内。注意需要重启TouchGFX Designer，然后再从Font选项中找到它。

注意增加进来的每种字型都会生成对应的字库编译到程序中在（FontFlashSection）段中，但是不是把整个字型库全部生成到程序中，而是通过Wildcard指定哪些字符会编译到程序中去，有关Wildcard说明见下面，字型设计时请考虑这个因素以达到满足显示效果又尽量节省存储空间的目的。如果不指定Wildcard则程序只编译且显示当前Designer该字型已经使用的字符，程序中该字型下设置的其它字符将不被编译和显示。

l Users栏中统计应用中使用该种字型的次数；

l Name栏中设置字库名称；

l Font栏中设置字库类型；

l Size栏中设置字型大小；

l Bpp默认为4，这个Bpp是指文字每个像素所占的位数，位数越高显示效果越好，但是占用存储空间越大；

l Fallback Character栏是表示如果字库中找不到相应的字符时显示这个符号，默认为“？”。

l Wildcard Characters栏是通配符，表示这种字型可用于显示的字符，例如"0123456789-.℃"就表示这种字型在程序中可显示的字符只有这13个。结合下面两项一起使用。

l Widget Wildcard Characters栏是控件通配符。

l Wildcard Ranges 栏是通配符范围，如“0-9,A-Z”显示0到9数字和A到Z的字母，如果在程序中使用UNICODE中文，需要填入“0-9,a-z,A-Z,0x4E00-0x9FEF”。

l Ellipsis Character栏官方翻译是此字符用于截断文本区域中的长文本。

8.2.4. 增加字符资源

TouchGFX 中有两种文本资源，一种是Singe Use另一种是Resources，Singe Use是仅在程序中使用一次的字符串，修改时需要在GUI中单个修改，这个字条串在GUI的TEXT属性中填写。Resources是可以共用的字符串，需要预先在Resources页面中增加后再使用，如果需要修改只要在这个页面内修改就统一替换了，不用逐个到GUI中去修改。文本资源可以在Texts页面统一管理以及指定左中右的对齐方式。

实际开发中遇到一个问题，Designer在Single Use中会自动生成许多无用的New Text，删除方法是把工程目录下的TouchGFX\assets\texts\texts.xml文件打开，找到所有New Text手动删除，可别删错了哦。旧版本的TouchGFX是texts.xlsx文件。这个问题分析可能是软件的一个小Bug，因为在设计时用Ctrl＋Z撤销操作，而文本TEXT还在。另个简便的解决办法是选中这些Text从Single Use转换为Resources资源里去，再从Resources里找到它全部选中后删除。同样大小字型的字符串在编译时按单个字符编译再组织，不会重复占用空间。

8.2.5. 使用文本字符

在TouchGFX Designer的Canvas中Screens中增加控件，右侧栏Properties中找到控件中的Text属性。例如Button或Text Area等控件在该属性下选择Singe Use或Resource，在Text输入框内输入文本字符或选择字符。如果在应用中需要修改该字符的内容动态显示需要增加wildcards属性（可创建2个），然后Text输入框中输入<XXX>,“XXX”可以是任何字符，例如“tag”或“value”等，在wildcards中输入默认值如“123”，注意再把Use wildcard buffer勾上，这样程序中修改字符串内容，只需向文本变量中赋值即可，之后根据实际情况填写该文本的Buffer size长度。下方还有对齐方式和颜色设置项。gui程序中填加如下代码：

Unicode::snprintf(textAreaBuffer, TEXTAREA_SIZE, "%d", (int)1);

textArea.invalidate();

如果显示浮点数代码如下：

Unicode::snprintfFloat(textAreaBuffer, TEXTAREA_SIZE, "%2.2f", (float)(12.12));

textArea.invalidate();

注意：这里不要再使用textArea.setWildcard();textArea.resizeToCurrentText();，否则会出现不预期的显示混乱。

字符串显示用UTF8转Unicode代码如下：

Char* sTime[] = {"2021-12-06 13:59:59:999"};

Unicode::fromUTF8((const uint8_t*)sListItemFault->sTime, tTimeBuffer,TTIME_SIZE);

注意用Unicode::snprintf中的%s的参数是Unicode::UnicodeChar*类型：

Unicode::UnicodeChar* ucString;

Unicode::fromUTF8((const uint8_t*)sListItemFault->sTime, ucString,TTIME_SIZE);

Unicode::snprintf(textAreaBuffer, TEXTAREA_SIZE, "%s",ucString);

8.3. UI界面设计

8.3.1. 填加界面Screen

8.3.2. 界面布局

u 建议多使用container，一是对设计区域进行合理划分,二是可以局部设计布局，三是可以整体复制，对于重复同样类型布局可大大提升效率，设计好一个复制container，就会出现多个同样的拷贝，而后只要修改名称和资源即可。

8.4. 控件使用

8.4.1. 数字指示

8.4.2. 模拟仪表

调试中发现仪表指针不显示的问题是是为LCD16bpp被禁用

"FrameworkFeatures": {

"LCD16bpp": {

"Id": "LCD16bpp",

"IsEnabled": true

}

8.4.3. 进度条

8.4.4. 按钮区设计

8.4.5. 列表设计

8.4.6. 文本设计

8.4.7. 图标设计

9. 工程进阶

9.1. HAL库源文件编译成.a或.lib库

9.1.1. 创建库工程

调试发现使用静态库编译后的镜像比原来用库源文件编译出来的要大。待查！！！！！！

用STM32CubeMX新建工程以CPU Selector输入STM32H743XI在MCUs List中选择STM32H743XIHx 点Start Project生成。

打开Project Manager页面，打开Code Generator页面，STM3Cube MCU package and embedded software packs项选择第一个Copy all used libraries into the project folder。

打开Project Manager->Project页面，Project Name中输入项目名称如“STM32Hxx_HAL_lib_V1.9.0”，选择工程路径。在Toolchain / IDE项选择STM32CubeIDE，把Generate Under Root的勾去掉，点GENERATE CODE生成STM32CubeIDE工程。在Toolchain / IDE项选择MDK-ARM，版本选择V5.32，点GENERATE CODE生成STM32CubeIDE工程。

9.1.2. 把完整的HAL库拷贝到工程

找到HAL库源文件，MDK一般在\Arm\Packs\Keil\STM32H7xx_DFP\2.8.0\Drivers\ STM32H7xx_HAL_Driver路径，STM3CubeMX和STM3CubeIDE一般在C:\Users\Administrator\STM32Cube\Repository\STM32Cube_FW_H7_V1.9.0\Drivers\ STM32H7xx_HAL_Driver，把Inc和Src完全拷贝到我们新建的工程\Drivers\STM32H7xx_HAL_Driver目录中覆盖源有文件。需要注意官方的源库中除了包含HAL库文件还有LL库文件及文件模板需要去除。Inc中的LL文件除stm32h7xx_ll_adc.h、stm32h7xx_ll_delayblock.h、stm32h7xx_ll_fmc.h、stm32h7xx_ll_sdmmc.h、stm32h7xx_ll_usb.h这5个其他所有LL库的头文件全部删除，Src中的LL文件除stm32h7xx_ll_fmc.c（不知官方为何HAL库中需要这个LL库文件）这1个其他所有LL库的源文件全部删除。Inc中还需要删除stm32_assert_template.h、stm32h7xx_hal_conf_template.h这2个文件模板，Src中还需要删除stm32h7xx_hal_msp_template.c,stm32h7xx_hal_timebase_rtc_alarm_template.c、stm32h7xx_hal_timebase_rtc_wakeup_template.c、stm32h7xx_hal_timebase_tim_template.c这4个源文件模板。

保留所有需要的库文件的头文件和源文件，或者根据自己的情况只保留需要的文件。

然后打开工程目录中\Core\Incstm32h7xx_hal_conf.h文件修改模块选择，可以根据需要选择，这里全部选择打开。Module Selection下面的所有#define打开生效。

9.1.3. 生成MDK的.lib文件

打开刚创建的MDK库工程，点开Manage Run-Time Environment，把这里的选项全部勾去除，一般生成工程会自动加入CMSIS->CORE，要去掉。在Project中分别右击MDK-ARM、Core、CMSIS等目录点Options for Group 把Include in Target Build 的勾去掉，保证库文件的纯净。点开Options for Target，点Output选项卡，选择Create Library：XXX.Lib。

然后编译工程生成.lib文件，默认在工程目录\MDK-ARM\XXX（工程名）目录中找到XXX.lib文件，这就是最终的MDK版本的HAL库的静态库。

9.1.4. 生成IDE的.a文件

打开刚创建的STM32CubeIDE库工程，首先加入所有的源文件，方法是在Windows资源管理器中打开工程目录的\Drivers\STM32H7xx_HAL_Driver\Src目录，全选所有文件XX.c，用鼠标左键拖动，拖到CubeIDE->Project Explorer下对应刚打开的工程的Drivers\STM32H7xx_HAL_Driver文件夹下，会弹出File Operation框，选择Link to files,Create link location relative to:PROJECT_LOC保持默认选项。点OK再点Don’t Overwite或点覆盖所有也没问题。

在Project Explorer中右击工程名点Properties打开工程属性页，C/C++ Build->Settings->Build Artifact->Artifact Type：选择Staic Library，Artifact extension：输入a，Output prefix：可输入a或其它。这一步是为了使STM32CubeIDE工程生成静态库而不是可执行镜像。

C/C++ General->Path and Symbols->Source Location点开Filter点Add...加入工程目录中的Application和Drivers下的CMSIS两个文件夹，保持库工程纯净。

然后编译工程生成.a文件，默认在工程目录\STM32CubeIDE\Debug目录中找到XXX.a文件，这就是最终的STM32CubeIDE版本的HAL库的静态库。

9.1.5. MDK中加入.lib静态库文件

把刚才生成的.lib文件拷贝到GUI应用工程目录的\Drivers\STM32H7xx_HAL_Driver\lib（需要新建这个文件夹）中。

用MDK打开GUI应用工程，在Project Driver/STM32H7XX_HAL_Driver目录组右击打开Options for Group 把Include in Target Build的勾去掉，把HAL库源文件从工程中移除。

编译工程，这时HAL库源文件不再编译，直接用.lib静态库链接。节省编译时间。

9.1.6. STM32CubeIDE中加入.a静态库文件

把刚才生成的.a文件拷贝到GUI应用工程目录的\Drivers\STM32H7xx_HAL_Driver\lib（需要新建这个文件夹）中。

用STM32CubeIDE打开GUI应用工程，在Project Explorer中右击工程名点Properties打开工程属性页，C/C++ General->Path and Symbols->Source Location点开Filter点Add...加入工程目录中的\Drivers\STM32H7xx_HAL_Driver文件夹，把HAL库源文件从工程中移除。

C/C++ General->Path and Symbols->Library Paths，点Add 加入库文件目录选File syste...选中应用工程目录\Drivers\STM32H7xx_HAL_Driver\lib文件夹。C/C++ General->Path and Symbols->Libraries，点Add 在File：框中输入“:XXX.a”。

编译工程，这时HAL库源文件不再编译，直接用.a静态库链接。节省编译时间。

9.2. bootload启动程序

9.2.1. 从内部启动加载QSPI FLASH应用程序

9.3. ISP在线升级

9.3.1. 应用镜像文件生成与校验（加密）

9.4. 外部FLASH烧写算法

9.5. 从SDRAM调试程序

9.6. 从外部QSPI FLASH调试程序

9.7. 内部FLASH存储数据

9.8. 独立语音文件烧录

9.9. 图片资源分离与联合调试

9.10. 应用程序剥离资源并单独烧录

10. 外设功能开发

10.1. SAI之WAV语音合成与播放

10.2. DCMI之PAL模拟摄像头

10.2.1. 模拟摄像头硬件设计（TVP5150）

10.2.2. 模拟摄像头硬件设计（ADV7280A）

10.2.3. 模拟摄像头DMA数据采集

10.2.4. 模拟摄像头YUV（yCbCr）转RGB

10.3. I2C触摸屏设计

10.4. USB MSC（U盘）

10.5. SDMC（SD卡）

10.6. UART DEBUG

10.7. SPI接口

10.8. FDCAN

10.9. ADC（及温度检测）

10.10. RTC时钟

10.11. PWM与定时器设计

10.12. 键盘设计

10.13. 文件系统FATS

11. 问题集锦

11.1. MDK 中文显示编译

中文编译错误“ error: #8: missing closing quote”，显示乱码，可用Notepad++，打开出错文件选择“编码”转为UTF8-BOM编码并保存，再编译即通过。

另一个方法MDK Operation C/C++栏目Mis Controls项中增加“--no-multibyte-chars”。

11.2. ARM编译器

有部分摘自ARM编译器文档对齐部分

对齐的使用:

1.__align(num)

这个用于修改最高级别对象的字节边界。在汇编中使用LDRD或者STRD时

就要用到此命令__align(8)进行修饰限制。来保证数据对象是相应对齐。

这个修饰对象的命令最大是8个字节限制,可以让2字节的对象进行4字节

对齐,但是不能让4字节的对象2字节对齐。

是存储类修改,他只修饰最高级类型对象不能用于结构或者函数对象。

2.__packed

是进行一字节对齐

不能对packed的对象进行对齐

所有对象的读写访问都进行非对齐访问

及包含float的结构联合及未用__packed的对象将不能字节对齐

对局部整形变量无影响

强制由unpacked对象向packed对象转化是未定义,整形指针可以合法定

义为packed。

则没有意义

对齐或非对齐读写访问带来问题

11.3. TouchGFX 生成MDK代码时的BUG

TouchGFX 每次生成MDK代码时都会在.uvprojx的Include头文件重复包含。可在MDK Operation C/C++栏目Include Paths中手动删除多余项。

11.4. 同一代码STM32CUBEIDE工程比MDK工程运行慢

打开Cache，设置MPU；

选择编译器和版本；

设置编译优化等级。