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

原创专注于无线通信的蓬勃 2021-02-28 08:07

【应用手册】TI 全新MCU及C29内核的能源设施应用方案 如何增强电动汽车的实时控制能力？

一. 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);
}