【原创】使用TouchGFX让面包板社区图标动起来~

本帖最后由 二哲科技 于 2020-12-13 12:09 编辑



1.介绍
最近公司在开发手表，刚好就学习了TouchGFX的设计，TouchGFX是单片机开发UI的好帮手，后面看看有没有机会来个连载TouchGFX的Demo，可以实现的效果非常的多，只有你想不到的，没有它做不到的~去ST官网搜索TouchGFX既可以了，这里放上传送门【TouchGFX Designer 4.15】。
2.界面设计
安装完成之后，打开软件，进入设计界面如下图1。

这里直接用模拟器跑，如果需要不同的平台（STM32开发板），修改左边的框就可以了，如果要用官方提供的Demo，修改右边框就可以了，这里直接点击蓝色【CREATE】创建，进入设计界面（图2）。

这里添加一个动画图片，先点击+号弹出控件界面，点击【Texture Mapper】即可如图3，【Texture Mapper】是一个类似3D一样的处理图片控件。

可以看到这是一个默认的图像，且图像是经过3D旋转的，如图4。

这里把【textureMapper1】的长和宽修改为480，X、Y和Z的角度修改为0，这样图片就正了，如图5。

切换到图片管理界面，点击【Images】，如图6。

然后将图片拖到该界面下就可以了，如图7。

然后回到设计界面，修改【textureMapper1】的控件目标图片，如图8。

可以看到面包板图标被添加进来了，如图9，不过图片位置和大小有点不对，我们来调整一下。

修改【textureMapper1】参数，由于图片是960*960的，所以图像的大小要缩小一半，然后就是图片的起始位置了，最后锁定图片中心点就可以了，修改内容如图10。

然后给界面添加上文字和背景，背景使用Box控件，这个控件只能使用纯色背景，然后再添加一些文字，修改文字的颜色，如果要显示中文，需要修改【Texts】的内容，效果如图11。

切换到【Texts】界面，然后进入字体版式【】界面，修改目前使用的字体类型的字体格式，如图12。

然后修改字体为【YouYuan】即可（图13），当然可以添加自己想要的字体，这个字体添加后面专门写一帖子。

然后切回设计界面，点击右上角的【Generate Code】（图14），然后等待一会。

到这里界面就整体设计完成了，然后就是修改代码做动作了。
3.动画设计
这里使用模拟功能需要先安装VS，这里就大家自行安装，我安装的是VS2019 桌面 C++，放上传送门【VS2019】。
找到工程目录，打开【Application.vcxproj】，如图15。

进入的界面如下图16。

这时候会弹出一个界面（图17），让修改SDK版本，点击确认就可以了。

然后按下【Ctrl+F5】编译运行即可，最终运行的效果如图18所示。

然后打开需要修改代码的文件，如图19所示。

修改【Screen1View.cpp】代码如下所示。

修改【Screen1View.hpp】代码如下所示。

修改这两个代码即可，编译运行即可，最终的效果如开头图片所示。

4.总结
TouchGFX让UI设计变的非常的简单，不过要学习的还有很多，希望和大家一块学习~