本文主要是介绍LVGL:拓展部件——仪表盘 lv_meter,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一、概述
此部件可以非常灵活地展示数据,其功能包括显示弧形(arcs)、指针(needles)、刻度线(ticks lines)以及标签(labels)。这意味着它可以模拟各种仪表盘样式。
二、包含组件元素
- LV_PART_MAIN:主体背景部分。
- LV_PART_TICK:刻度线和标签。
- LV_PART_INDICATOR:指示数值变化的指针线或指针图像,采用线条和图像样式的属性。同时,该部分还会利用背景属性在指针旋转轴心处绘制一个方形(或圆形)区域。通过调整内边距(padding),可以使得这个轴心方块变得更大。
- LV_PART_ITEMS:弧形部分。
三、相关函数
1、lv_meter_scale_t *lv_meter_add_scale(lv_obj_t *obj)
向仪表盘添加一个刻度盘。
lv_meter_scale_t 的定义:
typedef struct {lv_color_t tick_color; //次要刻度线的颜色uint16_t tick_cnt; //次要刻度线总数uint16_t tick_length; //次要刻度线的长度uint16_t tick_width; //次要刻度线的宽度lv_color_t tick_major_color;//主要刻度线的颜色uint16_t tick_major_nth; //两主刻度线之间的间隔uint16_t tick_major_length; //主要刻度线的长度uint16_t tick_major_width; //主要刻度线的宽度int16_t label_gap; //标签(文字)与刻度线之间的间距int32_t min; //表示的值的范围int32_t max;int16_t r_mod; //貌似是刻度线与外边界的间距相关uint16_t angle_range; //刻度盘的角度范围int16_t rotation; //刻度盘的初始旋转角度 } lv_meter_scale_t;
lv_obj_t * meter = lv_meter_create(lv_scr_act());lv_meter_scale_t * scale = lv_meter_add_scale(meter);scale->tick_cnt = 20; //次要刻度线总数scale->tick_color = lv_color_make(0xff,0x00,0x00); //次要刻度线颜色scale->tick_width = 3; //次要刻度线宽度scale->tick_length = 30; //次要刻度线长度scale->tick_major_nth = 4; //两根主刻度线间隔scale->tick_major_length = 50; //主刻度线长度scale->tick_major_width = 6; //主刻度线宽度scale->tick_major_color = lv_color_make(0xff,0x00,0xff); //主刻度线颜色scale->label_gap = 15; //刻度线与标签文字的距离scale->r_mod = 15; //调整与外边界的距离scale->angle_range = 270; //角度范围scale->rotation = 90; //起始角度lv_obj_set_size(meter,400,400);
2、以下几个是添加指示器的函数,指示器的定义:
//指示器类型
enum
{LV_METER_INDICATOR_TYPE_NEEDLE_IMG, //使用图片作为指针的指示器类型LV_METER_INDICATOR_TYPE_NEEDLE_LINE, //使用线条作为指针的指示器类型LV_METER_INDICATOR_TYPE_SCALE_LINES, //使用线条作为刻度线的指示器类型LV_METER_INDICATOR_TYPE_ARC, //表示使用弧形(扇区)作为指示器类型类型
};
typedef uint8_t lv_meter_indicator_type_t;//指示器结构体
typedef struct
{lv_meter_scale_t * scale;lv_meter_indicator_type_t type;lv_opa_t opa; //不透明度int32_t start_value; //开始值int32_t end_value; //结束值union{struct{const void * src; //图片资源指针lv_point_t pivot; //旋转中心点坐标} needle_img;struct{uint16_t width; //线条宽度int16_t r_mod; //半径修饰值,增加到原始半径上得到最终线条长度lv_color_t color; //线条颜色} needle_line;struct{uint16_t width; //弧形线条宽度lv_color_t color; //弧形颜色int16_t r_mod; //半径修饰值} arc;struct{int16_t width_mod; //刻度线宽度修饰值lv_color_t color_start; //渐变开始颜色lv_color_t color_end; //渐变结束颜色uint8_t local_grad : 1; //是否使用局部渐变标志位} scale_lines;} type_data;
} lv_meter_indicator_t;
lv_meter_indicator_t *lv_meter_add_needle_line(lv_obj_t *obj, lv_meter_scale_t *scale, uint16_t width, lv_color_t color, int16_t r_mod)
添加线条类型的指示器。
lv_obj_t * meter = lv_meter_create(lv_scr_act());lv_meter_scale_t * scale = lv_meter_add_scale(meter);scale->tick_cnt = 20; //次要刻度线总数scale->tick_color = lv_color_make(0xff,0x00,0x00); //次要刻度线颜色scale->tick_width = 3; //次要刻度线宽度scale->tick_length = 30; //次要刻度线长度scale->tick_major_nth = 4; //两根主刻度线间隔scale->tick_major_length = 50; //主刻度线长度scale->tick_major_width = 6; //主刻度线宽度scale->tick_major_color = lv_color_make(0xff,0x00,0xff); //主刻度线颜色scale->label_gap = 15; //刻度线与标签文字的距离scale->r_mod = 15; //调整与外边界的距离scale->angle_range = 270; //角度范围scale->rotation = 90; //起始角度scale->min = 0;scale->max = 200; //角度的90~270对应于0~200lv_meter_indicator_t *indicator = lv_meter_add_needle_line(meter, scale, 6, lv_palette_main(LV_PALETTE_RED), 0);indicator->type_data.needle_line.width = 12;indicator->type_data.needle_line.color = lv_color_make(0x00,0xff,0xff);lv_meter_set_indicator_value(meter, indicator,50);//0~200中的50lv_obj_set_size(meter,400,400);
lv_meter_indicator_t *lv_meter_add_needle_img(lv_obj_t *obj, lv_meter_scale_t *scale, const void *src, lv_coord_t pivot_x, lv_coord_t pivot_y)
添加图片类型的指示器。
lv_obj_t * meter = lv_meter_create(lv_scr_act());lv_meter_scale_t * scale = lv_meter_add_scale(meter);scale->tick_cnt = 20; //次要刻度线总数scale->tick_color = lv_color_make(0xff,0x00,0x00); //次要刻度线颜色scale->tick_width = 3; //次要刻度线宽度scale->tick_length = 30; //次要刻度线长度scale->tick_major_nth = 4; //两根主刻度线间隔scale->tick_major_length = 50; //主刻度线长度scale->tick_major_width = 6; //主刻度线宽度scale->tick_major_color = lv_color_make(0xff,0x00,0xff); //主刻度线颜色scale->label_gap = 15; //刻度线与标签文字的距离scale->r_mod = 15; //调整与外边界的距离scale->angle_range = 360; //角度范围scale->rotation = 0; //起始角度scale->min = 0;scale->max = 200; //角度的0~360对应于0~200lv_meter_indicator_t *indicator = lv_meter_add_needle_img(meter,scale,"M:point.png", //此图片尺寸是64*64的0,0);lv_point_t pivot;pivot.x = 32;pivot.y = 32;indicator->type_data.needle_img.pivot = pivot;//图片中心lv_meter_set_indicator_value(meter, indicator,70);//0~200中的70lv_obj_set_size(meter,400,400);
lv_meter_indicator_t *lv_meter_add_arc(lv_obj_t *obj, lv_meter_scale_t *scale, uint16_t width, lv_color_t color, int16_t r_mod)
添加弧形类型的指示器。
lv_obj_t * meter = lv_meter_create(lv_scr_act());lv_meter_scale_t * scale = lv_meter_add_scale(meter);scale->tick_cnt = 20; //次要刻度线总数scale->tick_color = lv_color_make(0xff,0x00,0x00); //次要刻度线颜色scale->tick_width = 3; //次要刻度线宽度scale->tick_length = 30; //次要刻度线长度scale->tick_major_nth = 4; //两根主刻度线间隔scale->tick_major_length = 50; //主刻度线长度scale->tick_major_width = 6; //主刻度线宽度scale->tick_major_color = lv_color_make(0xff,0x00,0xff); //主刻度线颜色scale->label_gap = 15; //刻度线与标签文字的距离// scale->r_mod = 15; //调整与外边界的距离scale->angle_range = 180; //角度范围scale->rotation = 90; //起始角度scale->min = 0;scale->max = 200;lv_color_t arc_color = lv_palette_main(LV_PALETTE_GREEN);lv_meter_indicator_t *indicator = lv_meter_add_arc(meter, scale, 100 /* 宽度 */, arc_color, 10 /* 半径修饰 */);lv_meter_set_indicator_end_value(meter, indicator, 120);lv_meter_set_indicator_start_value(meter, indicator, 0);lv_obj_set_size(meter,400,400);
lv_meter_indicator_t *lv_meter_add_scale_lines(lv_obj_t *obj, lv_meter_scale_t *scale, lv_color_t color_start, lv_color_t color_end, bool local, int16_t width_mod)
添加颜色渐变刻度线指示器。
lv_obj_t * meter = lv_meter_create(lv_scr_act());lv_meter_scale_t * scale = lv_meter_add_scale(meter);scale->tick_cnt = 20; //次要刻度线总数scale->tick_color = lv_color_make(0xff,0x00,0x00); //次要刻度线颜色scale->tick_width = 3; //次要刻度线宽度scale->tick_length = 30; //次要刻度线长度scale->tick_major_nth = 4; //两根主刻度线间隔scale->tick_major_length = 50; //主刻度线长度scale->tick_major_width = 6; //主刻度线宽度scale->tick_major_color = lv_color_make(0xff,0x00,0xff); //主刻度线颜色scale->label_gap = 15; //刻度线与标签文字的距离// scale->r_mod = 15; //调整与外边界的距离scale->angle_range = 180; //角度范围scale->rotation = 90; //起始角度scale->min = 0;scale->max = 200;// 添加一个颜色渐变且宽度可调整的刻度线指示器lv_color_t start_color = lv_palette_main(LV_PALETTE_YELLOW);lv_color_t end_color = lv_palette_main(LV_PALETTE_GREEN);bool use_local_values = true;int16_t width_increase = 10; // 增加刻度线的宽度2个像素lv_meter_indicator_t *scale_lines_indicator = lv_meter_add_scale_lines(meter, scale, start_color, end_color,use_local_values, width_increase);// 设置指示器的起始和结束值,如果local为true,则这些值用于颜色渐变lv_meter_set_indicator_start_value(meter, scale_lines_indicator, 0);lv_meter_set_indicator_end_value(meter, scale_lines_indicator, 100);lv_obj_set_size(meter,400,400);
参数6表示范围内线增加的宽度。
参数5表示颜色渐变的方式。如果为true,则颜色渐变基于指示器自身的起始和结束值;如果为false,则基于整个刻度盘的最小值和最大值。
即上面的例子,如果为true,则基于此设置进行颜色渐变:
lv_meter_set_indicator_start_value(meter, scale_lines_indicator, 0);lv_meter_set_indicator_end_value(meter, scale_lines_indicator, 100);
如果为false,则基于此设置进行颜色渐变:
scale->min = 0;scale->max = 200;
3、void lv_meter_set_indicator_value(lv_obj_t *obj, lv_meter_indicator_t *indic, int32_t value)
void lv_meter_set_indicator_start_value(lv_obj_t *obj, lv_meter_indicator_t *indic, int32_t value)
void lv_meter_set_indicator_end_value(lv_obj_t *obj, lv_meter_indicator_t *indic, int32_t value)
设置指示器的当前值、起始值、结束值。
这篇关于LVGL:拓展部件——仪表盘 lv_meter的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!