一、概述
此部件可以非常灵活地展示数据，其功能包括显示弧形（arcs）、指针（needles）、刻度线（ticks lines）以及标签（labels）。这意味着它可以模拟各种仪表盘样式。
二、包含组件元素
- LV_PART_MAIN：主体背景部分。
- LV_PART_TICKS：刻度线和标签。
- 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~200
lv_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中的50
lv_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~200
lv_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中的70
lv_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)
设置指示器的当前值、起始值、结束值。
1094
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
