树莓派littlevGL系列教程：线表控件(lv_lmeter)

2019-12-8 20:09| 发布者: imliubo| 查看: 8217| 评论: 0|原作者: IAMLIUBO

摘要: Hi，大家好，欢迎来到树莓派之littlevGL课堂，我们在上节课中学习了列表控件(lv_list)，本节课我们学习line meter——“线表”控件(lv_lmeter)，之所以加引号，主要还是不确定翻译的是否准确，大家有什么好的翻译吗 ...

Hi，大家好，欢迎来到树莓派之littlevGL课堂，我们在上节课中学习了列表控件(lv_list)，本节课我们学习line meter——“线表”控件(lv_lmeter)，之所以加引号，主要还是不确定翻译的是否准确，大家有什么好的翻译吗？废话不多说！

一 有图有真相
看到这个图，其实跟我们之前学习的仪表控件非常接近，只不过这里少了很多指针和文字。
二 代码分析
用户可下载"圆弧对象(lv_arc)的使用"文章末尾的Demo工程(点击我直接下载),参考圆弧对象(lv_arc)的使用文章,将以下Demo代码复制到Demo工程test.c文件空白处.然后在test.c文件的create_test()函数中增加lmeter_test()函数测试。
view source
print?
01void lmeter_test(void)
02{
03    /*Create a style for the line meter*/
04    static lv_style_t style_lmeter;
05    lv_style_copy(&style_lmeter, &lv_style_pretty_color);
06    style_lmeter.line.width = 2;
07    style_lmeter.line.color = LV_COLOR_SILVER;
08    style_lmeter.body.main_color = lv_color_hex(0x91bfed);         /*Light blue*/
09    style_lmeter.body.grad_color = lv_color_hex(0x04386c);         /*Dark blue*/
10    style_lmeter.body.padding.left = 16;                           /*Line length*/
11 
12    /*Create a line meter */
13    lv_obj_t * lmeter;
14    lmeter = lv_lmeter_create(lv_scr_act(), NULL);
15    lv_lmeter_set_range(lmeter, 0, 100);                   /*Set the range*/
16    lv_lmeter_set_value(lmeter, 80);                       /*Set the current value*/
17    lv_lmeter_set_scale(lmeter, 240, 31);                  /*Set the angle and number of lines*/
18    lv_lmeter_set_style(lmeter, LV_LMETER_STYLE_MAIN, &style_lmeter);           /*Apply the new style*/
19    lv_obj_set_size(lmeter, 150, 150);
20    lv_obj_align(lmeter, NULL, LV_ALIGN_CENTER, 0, 0);
21}
 还是一样的，我们先设置线表的样式，不过这里相比之前的仪表控件就简单多了，因为少了很多元素，我们来分析一下：
view source
print?
1/*Create a style for the line meter*/
2static lv_style_t style_lmeter;
3lv_style_copy(&style_lmeter, &lv_style_pretty_color);
4style_lmeter.line.width = 2;
5style_lmeter.line.color = LV_COLOR_SILVER;
6style_lmeter.body.main_color = lv_color_hex(0x91bfed);         /*Light blue*/
7style_lmeter.body.grad_color = lv_color_hex(0x04386c);         /*Dark blue*/
8style_lmeter.body.padding.left = 16;
 首先我们先设置线宽为2，也就是两个像素的宽度，然后设置了三个颜色，那这三个颜色都是对应的哪一些呢？我们仔细看上面图，应该可以看出是有三种颜色的，分别是蓝色、深蓝和银色，这三个颜色对应了三个区域，而且三个区域相对于线表来说是平分的，然后当我们设置的数值每达到一个区间就是显示相应的颜色，最后我们设置的是线条的长度，大家可能觉得代码的意思跟我们要设置的内容有点不对应，是的，没错，因为这个样式结构体基本上兼容所有的控件，所以对有些控件就闲的有点“驴唇不对马嘴”，所以我这里才给大家解释一下。
view source
print?
1lv_lmeter_set_range(lmeter, 0, 100);                   /*Set the range*/
2lv_lmeter_set_value(lmeter, 80);
 这里我们设置线表的数值区间为0到100，然后我们将数值设置为80，所以最后一部分显示的是银色，而不是深蓝色，当你设置成100的时候就全是蓝色了，就是颜色会随着数值的增大而改变。
view source
print?
1lv_lmeter_set_scale(lmeter, 240, 31);                  /*Set the angle and number of lines*/
2lv_lmeter_set_style(lmeter, LV_LMETER_STYLE_MAIN, &style_lmeter);           /*Apply the new style*/
 这里我们将线表的角度(起始到结束的角度值)设置为了240度，然后平均分成了31个格，大家可能不太理解，你可以尝试修改成：
view source
print?
1lv_lmeter_set_scale(lmeter, 360, 13);
 你发现是不是跟钟表一样了？没错，间隔和角度我们都可以设置，接下来就是应用我们最开始设置的哪些样式了。
最后就是设置了一下大小和对齐方式，这里相对简单，也就不再做解释了。

OK，本节课就到这里，下节课我们学习消息弹窗控件(lv_mbox)，那我们下节课再见！

269 顶一下

刚表态过的朋友 (269 人)

收藏邀请

上一篇：树莓派littlevGL系列教程：列表控件(lv_list)下一篇：树莓派littlevGL系列教程：消息弹窗控件(lv_mbox)

树莓派littlevGL系列教程：线表控件(lv_lmeter)

刚表态过的朋友 (269 人)

相关阅读

最新评论