[应用相关]

【ST开发视频】+简单上手

[复制链接]
7735|15
手机看帖
扫描二维码
随时随地手机跟帖
LyCrystal|  楼主 | 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
class Screen2View : public Screen2ViewBase
{
private:
        int ProcessVal;
        int Step;
        int CircleDet = 0;



public:
    Screen2View();
    virtual ~Screen2View() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
        void ScreenEnter();
        void handleTickEvent();
protected:
};


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

void Screen2View::setupScreen()
{
        int x, y;
    Screen2ViewBase::setupScreen();

        //状态
        ProcessVal = 0;
        Step = 0;

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

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

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

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

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

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

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

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

        //circleProgress1
        circleProgress1.setValue(0);

        //circleProgress2
        circleProgress2.setValue(0);

        //circle1
        circle1.setArc(0, 0);
        circle1.setVisible(false);

}


3、重写函数handleTickEvent()
GFXDemo\gui\src\screen2_screen\Screen2View.cpp
void Screen2View::handleTickEvent()
{
//        int x = 0, y = 0;
        switch (Step)
        {
        case 0:
                line0.invalidate();
                line1.invalidate();
                line2.invalidate();
                line3.invalidate();
                line4.invalidate();
                line5.invalidate();
                line6.invalidate();
                line7.invalidate();
                circleProgress1.invalidate();

                //Process1
                circleProgress1.setValue(++ProcessVal);
                //line0
                line0.setEnd(5, 60 * ProcessVal / 360);
                //line1
                line1.setEnd(240*ProcessVal/360, 5);
                //line2
                line2.setEnd(5, 100 * ProcessVal / 360);
                //line3
                line3.setEnd(30 * ProcessVal / 360, 5);
                //line4
                line4.setEnd(15 * ProcessVal / 360, 5);
                //line5
                line5.setEnd(5, 100 * ProcessVal / 360);
                //line6
                line6.setEnd(240 * ProcessVal / 360, 5);
                //line7
                line7.setEnd(5, 60 * ProcessVal / 360);

                line0.invalidate();
                line1.invalidate();
                line2.invalidate();
                line3.invalidate();
                line4.invalidate();
                line5.invalidate();
                line6.invalidate();
                line7.invalidate();
                circleProgress1.invalidate();

                if (ProcessVal >= 360) {
                        ProcessVal = 0;
                        Step = 1;
                        circle1.setVisible(true);
                }
                break;
        case 1:
                if (CircleDet < 340) {
                        CircleDet++;
                        circle1.setArc(circle1.getArcStart(), circle1.getArcEnd() + 1);
                }
                else {
                        Step = 2;
                }
                circle1.setArc(circle1.getArcStart() + 1, circle1.getArcEnd() + 1);
                circle1.invalidate();
                break;
        case 2:
                if (CircleDet > 20) {
                        CircleDet--;
                        circle1.setArc(circle1.getArcStart() + 1, circle1.getArcEnd());
                }
                else {
                        Step = 1;
                }
                circle1.setArc(circle1.getArcStart() + 1, circle1.getArcEnd() + 1);
                circle1.invalidate();
                break;
        default:
                break;

        }

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

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





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

使用特权

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

使用特权

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

使用特权

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

使用特权

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

对,直接仿真的

使用特权

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

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

使用特权

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

使用特权

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

使用特权

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

使用特权

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

使用特权

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

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

使用特权

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

恩恩 入门应该不难吧

使用特权

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

使用特权

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

不用开发板就可以玩

使用特权

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

使用特权

评论回复
发新帖 我要提问
您需要登录后才可以回帖 登录 | 注册

本版积分规则

7

主题

127

帖子

1

粉丝