制作一个GUI仪表盘，安排！LVGL『Gauge仪表盘控件』介绍

最新推荐文章于 2025-03-07 16:54:46 发布

Wireless_Link

最新推荐文章于 2025-03-07 16:54:46 发布

阅读量9.1k

点赞数 4

分类专栏： # LVGL GUI 文章标签： LVGL 仪表盘

本文链接：https://blog.csdn.net/XiaoXiaoPengBo/article/details/113992225

版权

LVGL GUI 专栏收录该内容

44 篇文章

订阅专栏

本文详细介绍了LVGL GUI库中的仪表盘控件，包括其概念、组成部分和样式设置。通过示例代码展示了如何创建、设置指针、调整比例、设置范围、使用指针图片和临界值等功能，帮助开发者更好地理解和使用LVGL仪表盘控件进行GUI设计。

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

一. LVGL GUI仪表盘控件的概念

仪表盘是一种带有刻度标签和一根或多根针的仪表。比如车速/车转速等

二. LVGL GUI仪表盘小部件和样式

量规的主要部分称为 LV_GAUGE_PART_MAIN 。它使用典型的背景样式属性绘制背景，并使用线和比例样式属性绘制“较小”比例线。它还使用 text 属性设置比例标签的样式。pad_inner 用于设置刻度线和刻度标签之间的空间。
LV_GAUGE_PART_MAJOR 是一个虚拟小部件，它使用 line 和 scale 样式属性描述了主要的比例尺线（添加了标签）。
LV_GAUGE_PART_NEEDLE 也是虚拟小部件，它通过线型属性来描述针。的大小和典型的背景属性用于描述在所述针（多个）的枢转点的矩形（或圆形）。 pad_inner 用于使针比刻度线的外半径小。

三. LVGL GUI仪表盘控件的使用

1. 设置指针跟值(Set value and needles)

用这个函数来设置指针的数量lv_gauge_set_needle_count(gauge, needle_num, color_array)

用这个函数来设置指定ID的指针的值lv_gauge_set_value(gauge, needle_id, value)

写代码看效果来了：

void lvgl_guage_value_needle_test(void)
{
    static lv_color_t needle_colors[3];
    needle_colors[0] = LV_COLOR_BLUE;
    needle_colors[1] = LV_COLOR_ORANGE;
    needle_colors[2] = LV_COLOR_PURPLE;

    /*Create a gauge*/
    lv_obj_t* gauge1 = lv_gauge_create(lv_scr_act(), NULL);
    lv_gauge_set_needle_count(gauge1, 3, needle_colors);

    lv_gauge_set_value(gauge1, 0, 10);
    lv_gauge_set_value(gauge1, 1, 20);
    lv_gauge_set_value(gauge1, 2, 30);
}

2. 比例(Scale)

在说明这个之前，我们先来看下上图仪表盘，他又他是220度的显示圆盘，有22个刻度，有6个刻度标签(0/20/40/60/80/100),所以就有了这个函数来设置角度，刻度数，标签书

lv_gauge_set_scale(gauge, angle, line_num, label_cnt)，我们创建了两个仪表盘，一个是默认的，一个修改了值，我们来看下实验效果，

void lvgl_guage_scale_test(void)
{
    /*Create a gauge*/
    lv_obj_t* gauge1 = lv_gauge_create(lv_scr_act(), NULL);
    lv_obj_set_pos(gauge1, 100, 200);

    /*Create a gauge*/
    lv_obj_t* gauge2 = lv_gauge_create(lv_scr_act(), NULL);
    lv_obj_set_pos(gauge2, 400, 200);
    lv_gauge_set_scale(gauge2,270,11,11);
    
}

3. 范围(Range)

用这个函数来设置范围，默认范围是[0:100],我们写一个代码测试下

void lvgl_guage_range_test(void)
{
    /*Create a gauge*/
    lv_obj_t* gauge1 = lv_gauge_create(lv_scr_act(), NULL);
    lv_obj_set_pos(gauge1, 100, 200);

    /*Create a gauge*/
    lv_obj_t* gauge2 = lv_gauge_create(lv_scr_act(), NULL);
    lv_obj_set_pos(gauge2, 400, 200);
    lv_gauge_set_range(gauge2, 0, 180);
}

4. 指针图片(Needle image)

用这个函数来设置下指针图标lv_gauge_set_needle_img(gauge1, &img, pivot_x, pivot_y)

void lvgl_guage_needle_image_test(void)
{
    LV_IMG_DECLARE(img_hand);
    /*Create a gauge*/
    lv_obj_t* gauge1 = lv_gauge_create(lv_scr_act(), NULL);
    lv_obj_set_pos(gauge1, 100, 200);
    lv_gauge_set_needle_img(gauge1, &img_hand, 0, 0);

    lv_obj_t* gauge2 = lv_gauge_create(lv_scr_act(), NULL);
    lv_obj_set_pos(gauge2, 400, 200);
    lv_gauge_set_needle_img(gauge2, &img_hand, 40, 40);
}

5. 临界值(Critical value)

你观察以上仪表盘都是一个颜色不同的刻度，这个就是临界值，默认是80，下面我们创建两个，一个默认，一个改成90的

void lvgl_guage_critical_test(void)
{
    /*Create a gauge*/
    lv_obj_t* gauge1 = lv_gauge_create(lv_scr_act(), NULL);
    lv_obj_set_pos(gauge1, 100, 200);

    lv_obj_t* gauge2 = lv_gauge_create(lv_scr_act(), NULL);
    lv_obj_set_pos(gauge2, 400, 200);
    lv_gauge_set_critical_value(gauge2,90);
}