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

只看该作者 · 2019-3-17 17:47

本帖最后由 LyCrystal 于 2019-3-20 09:18 编辑

A、听说论坛搞了了touchGFX的活动，便过来参与一把。顺带感受一下强大的designer。话不多少，下面开始一步一步创建工程。
B、这里我直接从打开designer之后开始说创建过程。安装过程是一路next的，我就不多罗嗦了。
1、打开designer，弹出工程创建界面

2、将光标移动到Blank UI 框内便会出现change按钮。如下图所示。点击按钮选择合适的模板

3、这里我选择使用第二个模板，AnimatedImage Example。通过选择合适的模板可以省略一些不必要的过程，加快进度。当然，也省得我们抄模板时抄错。选择好模板之后我们返回去修改工程信息

4、参照下图按需求修改信息

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

2、点击进入出现如下界面，这一组以ani_开头的文件就是哪个转动的小手手。我们删除这一组图片换成st的素材

更换之后如下所示：

接下来修改动画配置:
主要是两项:
1、image中的FirstImage和LastImage
2、ANIMATION中的三个全部勾选上。

3、加入一个新的screen：点击下图所示按钮加入一个新的screen

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

5、绘制screen2，整体效果如下图所示:

过程就是：
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;



        }



}