立即注册 找回密码

微雪课堂

搜索
微雪课堂 图形用户界面(GUI) 查看内容

STM32之littlevGL系列教程:线表控件(lv_lmeter)

2020-3-29 12:26| 发布者: imliubo| 查看: 706| 评论: 0|原作者: IAMLIUBO

摘要: Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了列表控件(lv_list),本节课我们学习line meter——“线表”控件(lv_lmeter),之所以加引号,主要还是不确定翻译的是否准确,大家有什么好的翻译吗? ...
Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了列表控件(lv_list),本节课我们学习line meter——“线表”控件(lv_lmeter),之所以加引号,主要还是不确定翻译的是否准确,大家有什么好的翻译吗?废话不多说!
一 有图有真相

看到这个图,其实跟我们之前学习的仪表控件非常接近,只不过这里少了很多指针和文字。
二 代码分析
void lmeter_test(void)
{
    /*Create a style for the line meter*/
    static lv_style_t style_lmeter;
    lv_style_copy(&style_lmeter, &lv_style_pretty_color);
    style_lmeter.line.width = 2;
    style_lmeter.line.color = LV_COLOR_SILVER;
    style_lmeter.body.main_color = lv_color_hex(0x91bfed);         /*Light blue*/
    style_lmeter.body.grad_color = lv_color_hex(0x04386c);         /*Dark blue*/
    style_lmeter.body.padding.left = 16;                           /*Line length*/

    /*Create a line meter */
    lv_obj_t * lmeter;
    lmeter = lv_lmeter_create(lv_scr_act(), NULL);
    lv_lmeter_set_range(lmeter, 0, 100);                   /*Set the range*/
    lv_lmeter_set_value(lmeter, 80);                       /*Set the current value*/
    lv_lmeter_set_scale(lmeter, 240, 31);                  /*Set the angle and number of lines*/
    lv_lmeter_set_style(lmeter, LV_LMETER_STYLE_MAIN, &style_lmeter);           /*Apply the new style*/
    lv_obj_set_size(lmeter, 150, 150);
    lv_obj_align(lmeter, NULL, LV_ALIGN_CENTER, 0, 0);
}
还是一样的,我们先设置线表的样式,不过这里相比之前的仪表控件就简单多了,因为少了很多元素,我们来分析一下:
   /*Create a style for the line meter*/
    static lv_style_t style_lmeter;
    lv_style_copy(&style_lmeter, &lv_style_pretty_color);
    style_lmeter.line.width = 2;
    style_lmeter.line.color = LV_COLOR_SILVER;
    style_lmeter.body.main_color = lv_color_hex(0x91bfed);         /*Light blue*/
    style_lmeter.body.grad_color = lv_color_hex(0x04386c);         /*Dark blue*/
    style_lmeter.body.padding.left = 16;                           /*Line length*/
首先我们先设置线宽为2,也就是两个像素的宽度,然后设置了三个颜色,那这三个颜色都是对应的哪一些呢?我们仔细看上面图,应该可以看出是有三种颜色的,分别是蓝色、深蓝和银色,这三个颜色对应了三个区域,而且三个区域相对于线表来说是平分的,然后当我们设置的数值每达到一个区间就是显示相应的颜色,最后我们设置的是线条的长度,大家可能觉得代码的意思跟我们要设置的内容有点不对应,是的,没错,因为这个样式结构体基本上兼容所有的控件,所以对有些控件就闲的有点“驴唇不对马嘴”,所以我这里才给大家解释一下。
    lv_lmeter_set_range(lmeter, 0, 100);                   /*Set the range*/
    lv_lmeter_set_value(lmeter, 80);   
这里我们设置线表的数值区间为0到100,然后我们将数值设置为80,所以最后一部分显示的是银色,而不是深蓝色,当你设置成100的时候就全是蓝色了,就是颜色会随着数值的增大而改变。
    lv_lmeter_set_scale(lmeter, 240, 31);                  /*Set the angle and number of lines*/
    lv_lmeter_set_style(lmeter, LV_LMETER_STYLE_MAIN, &style_lmeter);    
这里我们将线表的角度(起始到结束的角度值)设置为了240度,然后平均分成了31个格,大家可能不太理解,你可以尝试修改成:
lv_lmeter_set_scale(lmeter, 360, 13);
你发现是不是跟钟表一样了?没错,间隔和角度我们都可以设置,接下来就是应用我们最开始设置的哪些样式了。
最后就是设置了一下大小和对齐方式,这里相对接单,也就不再做解释了。

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

Tab标签: STM32 littlevGL

56

顶一下

刚表态过的朋友 (56 人)

相关阅读

最新评论

微雪官网|产品资料|手机版|小黑屋|微雪课堂. ( 粤ICP备05067009号 )

GMT+8, 2020-12-4 03:51 , Processed in 0.018954 second(s), 14 queries .

返回顶部