STM32单片机项目实例：基于TouchGFX的智能手表设计（6）Designer软件UI设计
STM32单片机项目实例：基于TouchGFX的智能手表设计（6）Designer软件UI设计
目录
一、概述
二、Designer软件的使用
一、概述
通过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 |
居中 |
|
| textStep |
Default |
左对齐 |
|
| extTemp |
Default |
左对齐 |
|
| systemWeek |
Chinese20 |
居中 |
W: |
| systemYear |
Chinese20 |
居中 |
|
| systemDate |
Chinese20 |
居中 |
|
点击左侧的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)源码进行设置。