ST MCU Finder
安装免费手机应用,
寻找理想的ST MCU

[应用相关] 【ST开发视频】+简单上手

[复制链接]
6241|15
 楼主 | 2019-3-17 17:47 | 显示全部楼层 |阅读模式
本帖最后由 LyCrystal 于 2019-3-20 09:18 编辑

A、听说论坛搞了了touchGFX的活动,便过来参与一把。顺带感受一下强大的designer。话不多少,下面开始一步一步创建工程。
B、这里我直接从打开designer之后开始说创建过程。安装过程是一路next的,我就不多罗嗦了。
1、打开designer,弹出工程创建界面
1.png
2、将光标移动到Blank UI 框内便会出现change按钮。如下图所示。点击按钮选择合适的模板
1.2.png
3、这里我选择使用第二个模板,AnimatedImage Example。通过选择合适的模板可以省略一些不必要的过程,加快进度。当然,也省得我们抄模板时抄错。选择好模板之后我们返回去修改工程信息

2.png
4、参照下图按需求修改信息
3.png
其中:
1、工程名称
2、保存地址
3、色彩深度
4、分辨率
5、创建按钮
修改完成之后点击创建按钮,至此一个工程创建出来了。
C、添加修改内容
1、工程创建完成之后自动弹出下面的界面,这里点击箭头4指向的按钮,我们需要删除和添加一下东西。当然也可以直接Run simulator看一下官方例子的效果。

4.png

2、点击进入出现如下界面,这一组以ani_开头的文件就是哪个转动的小手手。我们删除这一组图片换成st的素材
5.png
更换之后如下所示:
6.png
接下来修改动画配置:
主要是两项:
1、image中的FirstImage和LastImage
2、ANIMATION中的三个全部勾选上。
7.png

3、加入一个新的screen:点击下图所示按钮加入一个新的screen
8.png
4、修改start按钮的功能:
这里点击start按钮(其实不用点),并点选有点动作设定。删除原有的动作设定,并新建一个interaction:
设定如下图所示,用于切换到screen2

9.9.png 10.png

5、绘制screen2,整体效果如下图所示:
11.png
过程就是:
1)添加box,用来盛放背景
2)加入背景图片
3)加入两边的touchGFX图片
4)一次加入线段
5)红色圆环我用的是circleProcess,白色圆环用的是circle。
具体设置细节我就不多描述了。可以参照工程上的参数进行布置。
6、布置完毕后我们点击生成代码。

D、代码修改:
生成代码之后我们在工程下面的路径GFXDemo\simulator\msvs\内可以找到Visual studio的工程文件,我们直接打开工程文件。
准备添加代码:
1、修改头文件:
GFXDemo\gui\include\gui\screen2_screen\Screen2View.hpp
  1. class Screen2View : public Screen2ViewBase
  2. {
  3. private:
  4.         int ProcessVal;
  5.         int Step;
  6.         int CircleDet = 0;



  7. public:
  8.     Screen2View();
  9.     virtual ~Screen2View() {}
  10.     virtual void setupScreen();
  11.     virtual void tearDownScreen();
  12.         void ScreenEnter();
  13.         void handleTickEvent();
  14. protected:
  15. };
复制代码


2、setupScreen()修改为如下内容
GFXDemo\gui\src\screen2_screen\Screen2View.cpp

  1. void Screen2View::setupScreen()
  2. {
  3.         int x, y;
  4.     Screen2ViewBase::setupScreen();

  5.         //状态
  6.         ProcessVal = 0;
  7.         Step = 0;

  8.         //将线段隐藏
  9.         //line 0
  10.         line0.getStart(x,y);
  11.         line0.setEnd(x,y);

  12.         //line 1
  13.         line1.getStart(x, y);
  14.         line1.setEnd(x, y);

  15.         //line 2
  16.         line2.getStart(x, y);
  17.         line2.setEnd(x, y);

  18.         //line 3
  19.         line3.getStart(x, y);
  20.         line3.setEnd(x, y);

  21.         //line 4
  22.         line4.getStart(x, y);
  23.         line4.setEnd(x, y);

  24.         //line 5
  25.         line5.getStart(x, y);
  26.         line5.setEnd(x, y);

  27.         //line 6
  28.         line6.getStart(x, y);
  29.         line6.setEnd(x, y);

  30.         //line 7
  31.         line7.getStart(x, y);
  32.         line7.setEnd(x, y);

  33.         //circleProgress1
  34.         circleProgress1.setValue(0);

  35.         //circleProgress2
  36.         circleProgress2.setValue(0);

  37.         //circle1
  38.         circle1.setArc(0, 0);
  39.         circle1.setVisible(false);

  40. }
复制代码


3、重写函数handleTickEvent()
GFXDemo\gui\src\screen2_screen\Screen2View.cpp
  1. void Screen2View::handleTickEvent()
  2. {
  3. //        int x = 0, y = 0;
  4.         switch (Step)
  5.         {
  6.         case 0:
  7.                 line0.invalidate();
  8.                 line1.invalidate();
  9.                 line2.invalidate();
  10.                 line3.invalidate();
  11.                 line4.invalidate();
  12.                 line5.invalidate();
  13.                 line6.invalidate();
  14.                 line7.invalidate();
  15.                 circleProgress1.invalidate();

  16.                 //Process1
  17.                 circleProgress1.setValue(++ProcessVal);
  18.                 //line0
  19.                 line0.setEnd(5, 60 * ProcessVal / 360);
  20.                 //line1
  21.                 line1.setEnd(240*ProcessVal/360, 5);
  22.                 //line2
  23.                 line2.setEnd(5, 100 * ProcessVal / 360);
  24.                 //line3
  25.                 line3.setEnd(30 * ProcessVal / 360, 5);
  26.                 //line4
  27.                 line4.setEnd(15 * ProcessVal / 360, 5);
  28.                 //line5
  29.                 line5.setEnd(5, 100 * ProcessVal / 360);
  30.                 //line6
  31.                 line6.setEnd(240 * ProcessVal / 360, 5);
  32.                 //line7
  33.                 line7.setEnd(5, 60 * ProcessVal / 360);

  34.                 line0.invalidate();
  35.                 line1.invalidate();
  36.                 line2.invalidate();
  37.                 line3.invalidate();
  38.                 line4.invalidate();
  39.                 line5.invalidate();
  40.                 line6.invalidate();
  41.                 line7.invalidate();
  42.                 circleProgress1.invalidate();

  43.                 if (ProcessVal >= 360) {
  44.                         ProcessVal = 0;
  45.                         Step = 1;
  46.                         circle1.setVisible(true);
  47.                 }
  48.                 break;
  49.         case 1:
  50.                 if (CircleDet < 340) {
  51.                         CircleDet++;
  52.                         circle1.setArc(circle1.getArcStart(), circle1.getArcEnd() + 1);
  53.                 }
  54.                 else {
  55.                         Step = 2;
  56.                 }
  57.                 circle1.setArc(circle1.getArcStart() + 1, circle1.getArcEnd() + 1);
  58.                 circle1.invalidate();
  59.                 break;
  60.         case 2:
  61.                 if (CircleDet > 20) {
  62.                         CircleDet--;
  63.                         circle1.setArc(circle1.getArcStart() + 1, circle1.getArcEnd());
  64.                 }
  65.                 else {
  66.                         Step = 1;
  67.                 }
  68.                 circle1.setArc(circle1.getArcStart() + 1, circle1.getArcEnd() + 1);
  69.                 circle1.invalidate();
  70.                 break;
  71.         default:
  72.                 break;

  73.         }

  74. }
复制代码
4、代码修改完毕,之后可以点击编译运行就可以了。运行效果如下图所示:
program.gif

附录:
工程文件:放百度云吧,清理压缩之后文件还是过大
链接:https://pan.baidu.com/s/1KWxGokmGN20k-ESmBszRTw
提取码:6nv5





| 2019-3-18 09:39 | 显示全部楼层
很好的学习资料,我安装了软件,一直都不会用,以为需要配套的开发板才能使用呢。

使用特权

评论回复
| 2019-3-18 19:36 | 显示全部楼层
不错啊,这个是用电脑来仿真吧

使用特权

评论回复
| 2019-3-18 19:37 | 显示全部楼层
那板子跑着舒服

使用特权

评论回复
| 2019-3-18 19:37 | 显示全部楼层
资料收下了,谢谢

使用特权

评论回复
 楼主 | 2019-3-19 09:02 | 显示全部楼层
aizaixiyuanqian 发表于 2019-3-18 19:36
不错啊,这个是用电脑来仿真吧

对,直接仿真的

使用特权

评论回复
 楼主 | 2019-3-19 09:04 | 显示全部楼层

对于GUI设计来说大多数情况都是依赖仿真,而不是跑在板子上。只要到功能完成和程序对接的时候再跑到板子上

使用特权

评论回复
| 2019-3-29 09:30 | 显示全部楼层
强大

使用特权

评论回复
| 2019-4-4 14:40 | 显示全部楼层
非常感谢楼主分享啊

使用特权

评论回复
| 2019-4-4 14:50 | 显示全部楼层
看起来真的简单哦

使用特权

评论回复
| 2019-4-4 15:00 | 显示全部楼层
非常感谢楼主分享

使用特权

评论回复
 楼主 | 2019-4-9 12:42 | 显示全部楼层
xiaoqizi 发表于 2019-4-4 14:50
看起来真的简单哦

大多数动图和场景切换都可以直接配置。上手简单。我是为了演示需要才添加了一些用代码绘制的图形

使用特权

评论回复
| 2019-4-10 10:52 | 显示全部楼层
LyCrystal 发表于 2019-4-9 12:42
大多数动图和场景切换都可以直接配置。上手简单。我是为了演示需要才添加了一些用代码绘制的图形 ...

恩恩 入门应该不难吧

使用特权

评论回复
| 2019-4-16 16:57 | 显示全部楼层
学习了

使用特权

评论回复
| 2019-4-16 23:03 | 显示全部楼层
hu9jj 发表于 2019-3-18 09:39
很好的学习资料,我安装了软件,一直都不会用,以为需要配套的开发板才能使用呢。 ...

不用开发板就可以玩

使用特权

评论回复
| 2019-4-27 09:12 | 显示全部楼层
给楼主点赞

使用特权

评论回复
扫描二维码,随时随地手机跟帖
您需要登录后才可以回帖 登录 | 注册

本版积分规则

我要发帖 投诉建议 创建版块 申请版主

快速回复

您需要登录后才可以回帖
登录 | 注册
高级模式

论坛热帖

在线客服 快速回复 返回顶部 返回列表