STM32单片机项目实例：基于TouchGFX的智能手表设计（6）Designer软件UI设计

一、概述

通过STM32CubeMX进行工程的创建、外设配置以及外设驱动代码的添加，可参考《基于TouchGFX的智能手表设计-硬件驱动层程序设计》一文，在资料光盘源代码中，0B-1_STM32U575_MVP_Interactive例程是本节的基础例程，采用TouchGFX 4.21.2 Designer软件进行UI组件的使用讲解。

二、Designer 软件的使用

在自己的工程目录下新建文件夹0B-2_STM32U575_MVP_Interactive，然后打开0B-1_STM32U575_MVP_Interactive 文件夹下的0B-1_STM32U575_MVP_Interactive.ioc，点击File->Save Project AS...将文件另存为新建的文件夹0B-2_STM32U575_MVP_Interactive。

然后打开0B-2_STM32U575_MVP_Interactive 文件夹下的0B-2_STM32U575_MVP_Interactive.ioc，并重新生成代码。

重新生成的代码，不包含相关底层驱动文件，此处可参考《基于TouchGFX的智能手表设计-硬件驱动层程序设计》一文的第4章增加 TouchGFX 关键驱动。

在该路径下...\0B-2_STM32U575_MVP_Interactive\TouchGFX\assets\images增加文件夹，并将需要设计的UI界面图标拷贝至相关文件夹（便于管理）。

APPPage文件夹下主要包含：

Container文件夹下主要包含：

DialPage文件夹下主要包含：

打开...\0B-2_STM32U575_MVP_Interactive\TouchGFX文件夹下的0B-2_STM32U575_MVP_Interactive.touchgfx，点击左侧Add Screen右侧的+号，增加两个屏幕显示区，双击新建的screen/screen1修改名字为DialPage和ApplicationPage。

鼠标移动至DialPage点击选择中，在Images中选择scalableImage1，重命名scalableImage1为Dial_F_Color，用于智能手表的前景色。

修改Dial_F_Color的属性，增加前景色图片，修改属性为H:240,W:240，位置X：40,Y:0。

在Containers中选择swip Container，增加滑动容器，用于智能手表页面的滑动切换。

双击swipeContainer1修改名字为DialSwipe，在右侧属性框，调整位置X:40，Y：0;调整大小W240，H：240,Pages属性框点击+号，增加3个滑动页面。取消Show page indicator前面的选择。

双击左侧swipeContainer1Page1/swipeContainer1Page2/swipeContainer1Page3,修改名称为分ToolSwipe/AnalogSwipe/DigitalSwipe。

在ToolSwipe页面下增加1个背景色Image，并修改名字为Tool_B_Color；增加4个button；按住Ctrl选中这些组件后，拖到ToolSwipe下。分别重命名为ButtonAlipay/ButtonStress/ButtonBreathe/ButtonCount，坐标分别为129，134；41，134；131，45；39，45；分别调整Image的Released Image与Pressed Image。注意，为了防止产生的误拖动，可以在相应控件属性的位置将Lock选中。

点击ToolSwipe右边的眼睛，将该页面隐藏，进行AnalogSwipe页面的设计。

在AnalogSwipe添加4个textArea1控件，分别重命名textPulse_an/ textStep_an/ textTemp_an/ DateWindow，属性框中取消Auto-size，坐标与大小分别为X:123,Y:180,W40,H:24、X:38,Y:124,W60,H:24、X:120,Y:45,W50,H:24、X:165,Y:124,W30,H:24，修改字体颜色为白色，设置完成后点击Lock；增加1个模拟时钟，重命名为analogClock，坐标位置设置为X:0,Y:0，设置完成后点击Lock。

点击analogClock，更换背景图标。

点击模拟表盘的Clock Hands，调整指针的先后顺序为Minute Hand、Hour Hand、Second Hand，点击相应的文本进行指针图标的更换，坐标分别为Minute Hand- X:6,Y:92、Hour Hand- X:1,Y:55、Second Hand- X:1,Y:101。

点击左侧Texts，在Typographies中设置默认的，最大，最小的参数与通配符，新增Chinese16，Chinese20，Chinese26并设置其参数。

|-------------------|-----------------|
| 0123456789+- :()= | 0123456789 :APM |
| 0-9,A-Z,a-z | !-~ |

|-------------------|---------------------|
| 0123456789+- :()= | 0123456789+- :()=/. |
| 0-9,A-Z,a-z | 0-9,A-Z,a-z |

|-------------------|------------------------------|
| 0123456789+- :()= | 健康监测姿态感知环境信息芯片信息外部控制电池电量无线连接 |
| 0-9,A-Z,a-z | |

点击左侧Texts，在Texts的Groups1增加新的字体。

|------------|------------|-----------|------------------|
| Id | Typography | Alignment | GB |
| extPulse | Default | 居中 | <VAL> |
| textStep | Default | 左对齐 | <VAL> |
| extTemp | Default | 左对齐 | <VAL>° |
| systemWeek | Chinese20 | 居中 | W:<VAL> |
| systemYear | Chinese20 | 居中 | <VAL>年 |
| systemDate | Chinese20 | 居中 | <VAL>月<VAL>日 |

点击左侧的Canvas,在AnalogSwipe中进行字体的设置。

继续点击+，增加通配符。

设置通配符的初始显示值，增加字符的buff，用于底层数据的显示。

如果没有设置字体，ID采用自动生成，去直接设置通配符也可以，如下面。

点击DialSwipe，设置页面为DigitalSwipe，进行DigitalSwipe页面控件的添加。

在DigitalSwipe添加6个textArea1控件，分别重命名textPulse/textStep/textTemp/textWeekDay/textSystemYear/textSystemDate，属性框中取消Auto-size，坐标与大小分别为X:40,Y:74,W40,H:24、X:90,Y:74,W60,H:24、X:155,Y:74,W51,H:24，属性框中Auto-size，X:105,Y:191、X:49,Y:157、X:112,Y:157，修改字体颜色为白色，设置完成后点击Lock。

分别进行通配符的设置。设置textPulse。

textTemp设置

textWeekDay设置

textSystemYear设置

textSystemDate设置，添加两个通配符设置。

增加1个数字时钟，重命名为digitalClock，坐标位置设置为X:38,Y:104，W171,H:51，调整字体为Large，40px，之后点击Lock。

增加一个Image，重命名为watchface，坐标位置设置为X:0,Y:0，用于数字表盘的前景色。

点击Containers，应用程序的组件容器CustomContainer1，并重命名为MenuElement，设置W：240，H:64。添加textArea1与scalableImage1控件，重命名为text（坐标X:64,Y:15,W150,H34,）与icon（坐标X:11,Y:11,W43,H4）。

对icon进行设置图标与点击事件，用于图标点击后的触发操作。

返回至Screens页面，在ApplicationPage增加scalableImage/scrollWheel/image三个控件，并重命名为App_F_Color/AppScrollWheel/App_B_Color。

点击右下角的生成代码与运行仿真，PC端界面进行仿真运行。

点击ApplicationPage，设置该页面为启动界面，运行仿真。仿真完成后，设置DialPage为启动界面。

打开MDK工程，进行全编译，下载至开发板后运行查看。

其它页面的设置与本文基本相同，可参考FS-STM32U575-WATCH(Release)源码进行设置。