二哲科技

  • 214 主题
  • 732 帖子
  • 2225 积分
  • 身份:版主
  • 论坛新秀 灌水之王
  • E币:1520

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

2020-12-13 11:36:32 显示全部楼层
本帖最后由 二哲科技 于 2020-12-13 12:09 编辑

21.gif


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

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

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

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

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

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

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

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

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

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

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

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

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

然后切回设计界面,点击右上角的【Generate Code】(图14),然后等待一会。
15.png
图14

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

进入的界面如下图16。
17.png
图16

这时候会弹出一个界面(图17),让修改SDK版本,点击确认就可以了。
18.png
图17

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

然后打开需要修改代码的文件,如图19所示。
20.png
图19

修改【Screen1View.cpp】代码如下所示。
  1. #include <gui/screen1_screen/Screen1View.hpp>
  2. #include <touchgfx/Color.hpp>

  3. Screen1View::Screen1View():
  4.     TickCount(0),
  5.     IcoAngle(0),
  6.     IcoScale(0),
  7.     BoxColor(255)
  8. {

  9. }

  10. void Screen1View::setupScreen()
  11. {
  12.     Screen1ViewBase::setupScreen();
  13. }

  14. void Screen1View::tearDownScreen()
  15. {
  16.     Screen1ViewBase::tearDownScreen();
  17. }

  18. void Screen1View::handleTickEvent()
  19. {
  20.     TickCount++;
  21.     if (TickCount < 30)
  22.     {
  23.         IcoScale -= 0.01f;
  24.         textureMapper1.setScale(IcoScale);
  25.     }
  26.     else if (TickCount < 344)
  27.     {
  28.         IcoAngle += 0.01f;
  29.         textureMapper1.updateZAngle(IcoAngle);
  30.     }
  31.     else if (TickCount <= 374)
  32.     {
  33.         IcoScale += 0.01f;
  34.         textureMapper1.setScale(IcoScale);
  35.     }
  36.     else
  37.     {
  38.         TickCount = 0;
  39.     }
  40.     if (TickCount % 125 == 0)
  41.     {
  42.         BoxColor++;
  43.         if(BoxColor % 3 == 0)
  44.             box1.setColor(touchgfx::Color::getColorFrom24BitRGB(0, 255, 255));
  45.         else if(BoxColor % 3 == 1)
  46.             box1.setColor(touchgfx::Color::getColorFrom24BitRGB(255, 0, 255));
  47.         else if(BoxColor % 3 == 2)
  48.             box1.setColor(touchgfx::Color::getColorFrom24BitRGB(255, 255, 0));
  49.         box1.invalidate();
  50.     }
  51.     textureMapper1.invalidate();
  52. }

修改【Screen1View.hpp】代码如下所示。
  1. #ifndef SCREEN1VIEW_HPP
  2. #define SCREEN1VIEW_HPP

  3. #include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
  4. #include <gui/screen1_screen/Screen1Presenter.hpp>

  5. class Screen1View : public Screen1ViewBase
  6. {
  7. public:
  8.     Screen1View();
  9.     virtual ~Screen1View() {}
  10.     virtual void setupScreen();
  11.     virtual void tearDownScreen();
  12.     virtual void handleTickEvent();

  13. protected:
  14.     uint32_t TickCount;
  15.     float IcoAngle;
  16.     float IcoScale;
  17.     uint8_t BoxColor;
  18. };

  19. #endif // SCREEN1VIEW_HPP

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

4.总结
TouchGFX让UI设计变的非常的简单,不过要学习的还有很多,希望和大家一块学习~
您需要登录后才可以评论 登录 | 立即注册

最新评论

楼层直达:

eeNick

  • 126 主题
  • 359 帖子
  • 3296 积分
  • 身份:管理员
  • 论坛新秀
  • E币:4675

fzyiye

  • 194 主题
  • 473 帖子
  • 1957 积分
  • 身份:版主
  • E币:1933

二哲科技

  • 214 主题
  • 732 帖子
  • 2225 积分
  • 身份:版主
  • 论坛新秀 灌水之王
  • E币:1520
二哲科技 2020-12-13 12:10:29 显示全部楼层
fzyiye 发表于 2020-12-13 11:47
这个挺有意思的,学习学习

不需要任何硬件就可以玩,可以玩玩看~
广告

二哲科技

  • 214 主题
  • 732 帖子
  • 2225 积分
  • 身份:版主
  • 论坛新秀 灌水之王
  • E币:1520

Awen

  • 377 主题
  • 1374 帖子
  • 3021 积分
  • 身份:版主
  • 论坛新秀 灌水之王
  • E币:4188

梨子12333

  • 2 主题
  • 26 帖子
  • 681 积分
  • 身份:LV3 中级技术员
  • E币:722
梨子12333 2020-12-15 17:39:02 显示全部楼层
兄嘚,touchgfx只能用st的片子,有时间来耍耍柿饼ui啊,

二哲科技

  • 214 主题
  • 732 帖子
  • 2225 积分
  • 身份:版主
  • 论坛新秀 灌水之王
  • E币:1520
二哲科技 2020-12-16 09:23:07 显示全部楼层
梨子12333 发表于 2020-12-15 17:39
兄嘚,touchgfx只能用st的片子,有时间来耍耍柿饼ui啊,

柿饼ui是用的哪个片子?
广告

梨子12333

  • 2 主题
  • 26 帖子
  • 681 积分
  • 身份:LV3 中级技术员
  • E币:722
梨子12333 2020-12-18 22:12:12 显示全部楼层
二哲科技 发表于 2020-12-16 09:23
柿饼ui是用的哪个片子?

这是跑在RT-Thread系统上的一个基于JS语言的UI设计器,能跑RT-Thread就成

小小毛

  • 86 主题
  • 370 帖子
  • 1146 积分
  • 身份:LV4 高级技术员
  • 热心工程师 技术达人
  • E币:2055
小小毛 2020-12-21 09:26:19 显示全部楼层
这个GUI底层是 C++吗?
有没有源码github

我的果果超可爱

  • 194 主题
  • 630 帖子
  • 2448 积分
  • 身份:LV5 资深技术员
  • 灌水之王
  • E币:2152
你这个能不能实现五彩斑斓的黑???

二哲科技

  • 214 主题
  • 732 帖子
  • 2225 积分
  • 身份:版主
  • 论坛新秀 灌水之王
  • E币:1520
二哲科技 2020-12-21 09:31:12 显示全部楼层
小小毛 发表于 2020-12-21 09:26
这个GUI底层是 C++吗?
有没有源码github

这个没有源码,底层是用C++,实际使用是C++和C混合编程!
广告

二哲科技

  • 214 主题
  • 732 帖子
  • 2225 积分
  • 身份:版主
  • 论坛新秀 灌水之王
  • E币:1520
二哲科技 2020-12-21 09:31:34 显示全部楼层
我的果果超可爱 发表于 2020-12-21 09:27
你这个能不能实现五彩斑斓的黑???

可以试一试,哈哈!
快速回复
12
54
广告
关闭 热点推荐上一条 /3 下一条
快速回复 返回列表