touchGFX控件学习一 Gauage仪表控件

最新推荐文章于 2025-05-24 15:36:36 发布

小灰灰搞电子

最新推荐文章于 2025-05-24 15:36:36 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： touchGFX开发技术文章标签：学习 c++ 算法

本文链接：https://blog.csdn.net/qq_15181569/article/details/127005090

touchGFX开发技术专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了如何使用touchGFX工具创建一个动态仪表盘，包括设置背景、添加图片和控件，以及通过修改源码实现指针的动态运动。此外，还展示了根据指针位置改变icon控件图片的方法，确保视觉效果与数值变化同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果展示

仪表是一种小部件，能够绘制指示指定范围内给定值的指针和圆弧。主要有两部分指针和表盘。
在这里插入图片描述

二、制作素材

主要是一些图片，大家另存为保存一下就行
在这里插入图片描述

三、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();



    }


}