LVGL:拓展部件——仪表盘 lv_meter

2024-03-26 13:44

本文主要是介绍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的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/848695

相关文章

康拓展开(hash算法中会用到)

康拓展开是一个全排列到一个自然数的双射(也就是某个全排列与某个自然数一一对应) 公式: X=a[n]*(n-1)!+a[n-1]*(n-2)!+...+a[i]*(i-1)!+...+a[1]*0! 其中,a[i]为整数,并且0<=a[i]<i,1<=i<=n。(a[i]在不同应用中的含义不同); 典型应用: 计算当前排列在所有由小到大全排列中的顺序,也就是说求当前排列是第

安卓玩机工具------小米工具箱扩展工具 小米机型功能拓展

小米工具箱扩展版                     小米工具箱扩展版 iO_Box_Mi_Ext是由@晨钟酱开发的一款适用于小米(MIUI)、多亲(2、2Pro)、多看(多看电纸书)的多功能工具箱。该工具所有功能均可以免root实现,使用前,请打开开发者选项中的“USB调试”  功能特点 【小米工具箱】 1:冻结MIUI全家桶,隐藏状态栏图标,修改下拉通知栏图块数量;冻结

龙芯+FreeRTOS+LVGL实战笔记(新)——05部署主按钮

本专栏是笔者另一个专栏《龙芯+RT-Thread+LVGL实战笔记》的姊妹篇,主要的区别在于实时操作系统的不同,章节的安排和任务的推进保持一致,并对源码做了改进和优化,各位可以先到本人主页下去浏览另一专栏的博客列表(目前已撰写36篇,图1所示),再决定是否订阅。此外,也可以前往本人在B站的视频合集(图2所示)观看所有演示视频,合集首个视频链接为: 借助RT-Thread和LVGL

多线程并发拓展

死锁 死锁是指两个或两个以上的进程,因争夺资源而造成一种互相等待的作用,如果没有外力作用它们都将无法推进下去,此时我们就称系统进入死锁状态 死锁必要条件 互斥条件:进程对所分配的资源进行排他性的使用,在一段时间内某资源只有一个资源占用,如果此时还有其它进程请求资源,那么请求者只能等待 请求和保持条件:进程已经保持了至少一个资源,但又提出了新的资源请求,而该资源已被其它资源占用,此时请求进程

Python 爬虫入门 - 基础数据采集流程拓展

在网络爬虫的世界里,数据就是一切。通过爬虫技术,你可以自动化地收集各种类型的公开数据,从文本和图片到复杂的结构化信息,这些数据为各类分析和应用提供了基础。 本教程将引导你深入了解爬虫可以采集的数据种类,如何有效地获取这些数据,并探讨如何使用代理服务来规避限制与增强爬虫的灵活性。无论是初学者还是有经验的开发者,这些知识都将帮助你在网络数据采集中更加游刃有余。 文章目录 可采集的数据基本操作

仪表盘echarst

var bgColor = '#041F34',borderColor = "#fff"let dataVal=20option = {backgroundColor: bgColor,color: [borderColor],title: [{text: '处理率',x: 'center',top: '40%',textStyle: {color: '#FFE600',fontSize:

6、LVGL控件-线条、图片、按钮矩阵

本篇文章目录导航 ♠♠ LVGL控件-线条、图片、按钮矩阵 ♣♣♣♣ 一、LVGL 线条部件 ♦♦♦♦♦♦♦♦ 1.1 线条部件组成部分 ♦♦♦♦♦♦♦♦ 1.2 线条部件基本API ♦♦♦♦♦♦♦♦ 1.3 实验小演示 ♣♣♣♣ 二、LVGL 图片部件 ♦♦♦♦♦♦♦♦ 2.1 图片部件组成部分 ♦♦♦♦♦♦♦♦ 2.2 图片部件基本API ♦♦♦♦♦♦♦♦ 2.3 实验小演示(基础操作) ♦

LVGL 控件之复选框(lv_checkbox)和下拉列表(lv_dropdown)

目录 一、复选框1、组成2、设置复选框文本3、复选框部件的状态4、复选框事件5、API 函数 二、下拉列表1、组成2、选项2.1 添加选项2.2 获取当前选中的选项 3、设置3.1 设置列表展开方向3.2 设置下拉列表图标3.3 设置列表常显文本 4、事件5、API 函数 一、复选框 1、组成 复选框部件由两个部分组成:主体和勾选框,示意图如下: LV_PART_M

Grafana仪表盘设计最佳实践:如何创建有效的监控面板

Grafana仪表盘设计最佳实践:如何创建有效的监控面板 引言 Grafana是一个开源的数据可视化和监控平台,它提供了丰富的仪表盘功能,用于展示和分析各种数据源(如Prometheus、InfluxDB、Elasticsearch等)。有效的仪表盘设计能够帮助团队迅速识别和解决问题,提高系统的可靠性和性能。本文将深入探讨如何设计高效的Grafana仪表盘,涵盖最佳实践和实际应用。 1. 了

linux文件的拓展属性

一、概述 文件的扩展属性(EA) 即以名称-值对形式将任意元数据与文件 i 节点关联 起来的技术。 2. EA 可用于实现访问列表(第 17 章)和文件能力(第 39 章)。 二、EA 命名空间 EA 的命名格式为 namespace.name。其中 namespace 用来把 EA 从功能上划分为截然不同的几大类,而 name 则用来在既定命名空间内唯一标识某个 EA。 可