touchGFX控件学习一 Gauage仪表控件

一、效果展示

仪表是一种小部件，能够绘制指示指定范围内给定值的指针和圆弧。主要有两部分指针和表盘。

二、制作素材

主要是一些图片，大家另存为保存一下就行

三、touchGFX创建工程

1、桌面放置box控件，修改背景

2、添加图片

将需要的控件添加进来

2、添加控件

添加三个控件如图所示

对三个控件进行设置

icon控件

gauge控件

3、添加interaactions

4、添加生成工程

四、修改源码让指针动起来

1、找到Screen1View.hpp文件添加​​virtual void handleTickEvent();​​函数

2、找到Screen1View.cpp文件实现​​virtual void handleTickEvent();​​函数，在这个函数中更新控件的值，实现指针运动

#include "rtthread.h"
void Screen1View::handleTickEvent()
{
    static int incr = 1;
    static int timeoutCounter = 0;


    // Only update at a certain time interval (measured in ticks)
    if (timeoutCounter++ == 20)
    {
        timeoutCounter = 0;

        if (gauge.getValue() <= 0)
        {
            incr = +1;
        }
        else if (gauge.getValue() >= 100)
        {
            incr = -1;
        }

        // Use updateValue instead of setValue to have
        // the needle animate to the new value instead
        // of instantly move to the position.
        gauge.updateValue(gauge.getValue() + incr, 20);
    }


}

3、根据值不同更改icon控件图片

#include "rtthread.h"
void Screen1View::handleTickEvent()
{
    static int incr = 1;
    static int timeoutCounter = 0;


    // Only update at a certain time interval (measured in ticks)
    if (timeoutCounter++ >= 10)
    {
        timeoutCounter = 0;

        if (gauge.getValue() <= 0)
        {
            incr = +1;
        }
        else if (gauge.getValue() >= 100)
        {
            incr = -1;
        }

        // Use updateValue instead of setValue to have
        // the needle animate to the new value instead
        // of instantly move to the position.
        gauge.updateValue(gauge.getValue() + incr, 20);


        int gauageVal = gauge.getValue();
        rt_kprintf("gauage = %d\r\n",gauageVal);

        if (gauageVal < 15)
        {
            icon.setBitmap(Bitmap(BITMAP_GAUGE02_ICON_LEVEL00_ID));
        }
        else if (gauageVal < 50)
        {
            icon.setBitmap(Bitmap(BITMAP_GAUGE02_ICON_LEVEL01_ID));
        }
        else if (gauageVal < 67)
        {
            icon.setBitmap(Bitmap(BITMAP_GAUGE02_ICON_LEVEL02_ID));
        }
        else if (gauageVal < 83)
        {
            icon.setBitmap(Bitmap(BITMAP_GAUGE02_ICON_LEVEL03_ID));
        }
        else
        {
            icon.setBitmap(Bitmap(BITMAP_GAUGE02_ICON_LEVEL04_ID));
        }
        icon.invalidate();



    }


}

记得不要忘了​​icon.invalidate();​​调用这个函数哦！