企业宣传型的网站,php带数据库的网站,苏州市建设工程招投标信息网,北京通州网站建设公司1 meter介绍
lv_meter 是 LVGL v8 引入的一种图形控件#xff0c;用于创建仪表盘样式的用户界面元素#xff0c;它可以模拟像速度表、电压表、温度表这类模拟表盘。它通过可视化刻度、指针、颜色弧线等来展示数值信息#xff0c;是一种非常直观的数据展示控件。
1.1 核心特…1 meter介绍
lv_meter 是 LVGL v8 引入的一种图形控件用于创建仪表盘样式的用户界面元素它可以模拟像速度表、电压表、温度表这类模拟表盘。它通过可视化刻度、指针、颜色弧线等来展示数值信息是一种非常直观的数据展示控件。
1.1 核心特性 支持多个 刻度刻度表scale 每个刻度表可以有多个 刻度tick 每个刻度可以添加多个 指针needle/arc/image 支持多种类型的指针线针、弧线、图像 可以设置 最小值/最大值 和 角度范围 动态更新数据值模拟实时仪表
1.2 lv_meter 的结构组成
在逻辑上lv_meter 由三个核心部分组成 刻度盘scale 是整个仪表盘的“底盘”。定义了仪表盘的 值范围例如 0 ~ 100、显示的角度范围如 270°、以及 刻度线的数量和样式。一个 lv_meter 对象可以拥有多个刻度盘通常用一个就够了。 刻度线ticks 是刻度盘上的线条包括 主刻度线粗、带标签和 次刻度线细、不带标签。它们用于可视化数据分布帮助用户读数。可以自定义刻度数量、线宽、颜色、标签间隔等。 指示器indicator用于显示当前值。
指示器有三种主要类型
针状指示器needle像时钟的指针一样旋转。
弧形指示器arc显示某一段范围常用于区域显示。
图像指针image用图像作为指针更加美观。
每个指示器都与某个刻度盘绑定并根据数据自动旋转或变化。
1.3 工作原理 创建仪表先创建 lv_meter 对象。 添加刻度盘定义刻度盘的数值范围、角度范围。 设置刻度线设置次刻度和主刻度的外观。 添加指示器添加针或弧等指示器来展示当前值。 设置指针值调用函数实时更新指针的位置或弧度。
1.4 实际用途举例 电动车仪表盘显示速度、电量、温度等。 工业控制界面如气压表、水温表、转速表。 医疗设备 UI心率仪、氧气浓度计等。 智能家居如空调温度、湿度显示表盘。
2 常见函数介绍
2.1 创建仪表对象
lv_obj_t * meter lv_meter_create(lv_scr_act());2.2 添加刻度盘
lv_meter_scale_t * scale lv_meter_add_scale(meter);2.3 设置刻度盘范围数值范围 角度范围
lv_meter_set_scale_range(meter, scale, min_value, max_value, angle_range, rotation_offset);angle_range刻度盘覆盖的角度 rotation_offset起始角度 angle rotation_offset (value - min) × (angle_range / (max - min)) 2.4 设置刻度线
2.4.1 控制小刻度的数量和外观
lv_meter_set_scale_ticks(meter,scale,tick_num, // 刻度线总数含起点和终点tick_width, // 每条刻度线的宽度像素tick_length, // 每条刻度线的长度像素color // 刻度线的颜色
);tick_num (max_value - min_value) / 间隔 1 2.4.2 控制主刻度带数字的显示
主刻度Major Ticks即那些更长、更粗、带有标签文字的刻度线。这类刻度通常用于强调关键数值如 0、20、40 等。
lv_meter_set_scale_major_ticks(meter,scale,major_tick_every, // 每隔几个 tick 出现一个主刻度多少小刻度间隔width, // 主刻度的线宽length, // 主刻度的线长color, // 主刻度颜色label_gap // 标签数字与线之间的像素间距
);主刻度数 ≈ tick_num / major_tick_every 主刻度值 min i * (max - min) / (tick_num - 1) * major_tick_every
2.5 添加指针
2.5.1 创建一个线状指针
lv_meter_indicator_t * lv_meter_add_needle_line(lv_obj_t *meter, /* 表盘对象 */lv_meter_scale_t *scale, /* 对应的刻度盘 */uint16_t width, /* 指针的线宽单位像素 */lv_color_t color, /* 指针的颜色 */int16_t r_mod /* 指针的长度相对于半径的比例0-100 */
);2.5.2 创建一个弧形指示器可用于范围值显示
lv_meter_indicator_t * arc lv_meter_add_arc(meter, scale, thickness, color, r_mod);2.6 设置指针值
lv_meter_set_indicator_value(meter, indicator, value);3 简单示例
3.1 温度
3.1.1 数据标准 温度范围0°C ~ 100°C 仪表角度范围270°从左下到右下 主刻度每 10°C 一个次刻度每 5°C 一个 一个红色针状指针 可以通过定时器或动画更新温度值
3.1.2 具体代码
static lv_obj_t* meter;
static lv_meter_indicator_t* needle;/* 模拟温度值更新的回调函数 */
static void update_temperature_cb(lv_timer_t* timer) {static int temp 0;lv_meter_set_indicator_value(meter, needle, temp);temp (temp 1) % 101; // 循环 0 ~ 100
}void create_temperature_meter(void) {/* 创建仪表对象 */meter lv_meter_create(lv_scr_act());/* 设置大小和位置 */lv_obj_set_size(meter, 200, 200);lv_obj_center(meter);/* 添加刻度盘 */lv_meter_scale_t* scale lv_meter_add_scale(meter);///* 设置数值范围 0~100°C角度覆盖 270°从135°起始 */lv_meter_set_scale_range(meter, scale, 0, 100, 270, 135);/* 设置刻度线小刻度 */lv_meter_set_scale_ticks(meter, scale, 21, 2, 10, lv_palette_main(LV_PALETTE_GREY));///* 设置主刻度线带数字标签 */lv_meter_set_scale_major_ticks(meter, scale, 5, 4, 15, lv_color_black(), 10);/* 添加一个红色指针长度为90% */needle lv_meter_add_needle_line(meter, scale, 6, lv_palette_main(LV_PALETTE_RED), 1);lv_meter_indicator_t* arc_green lv_meter_add_arc(meter, scale,6,lv_palette_main(LV_PALETTE_GREEN), 4); // 线宽6px圆弧在刻度后面lv_meter_set_indicator_start_value(meter, arc_green, 0);lv_meter_set_indicator_end_value(meter, arc_green, 60);lv_meter_indicator_t* arc_orange lv_meter_add_arc(meter, scale,6,lv_palette_main(LV_PALETTE_ORANGE), 4);lv_meter_set_indicator_start_value(meter, arc_orange, 60);lv_meter_set_indicator_end_value(meter, arc_orange, 80);lv_meter_indicator_t* arc_red lv_meter_add_arc(meter, scale,6, lv_palette_main(LV_PALETTE_RED), 4);lv_meter_set_indicator_start_value(meter, arc_red, 80);lv_meter_set_indicator_end_value(meter, arc_red, 100);///* 初始温度设为25°C */lv_meter_set_indicator_value(meter, needle, 25);///* 创建定时器每500ms更新一次温度 */lv_timer_create(update_temperature_cb, 500, NULL);
}表盘
