立即注册 找回密码

微雪课堂

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

STM32之littlevGL系列教程:图表控件(lv_chart)

2020-3-29 10:53| 发布者: imliubo| 查看: 1042| 评论: 0|原作者: IAMLIUBO

摘要: Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了复选框控件(lv_cb),本节课带大家来学习一下图表控件,是的,这里的图表就是你理解的那个图表,通过图表我们可以很直观的看一些趋势走势,而且也会 ...
Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了复选框控件(lv_cb),本节课带大家来学习一下图表控件,是的,这里的图表就是你理解的那个图表,通过图表我们可以很直观的看一些趋势走势,而且也会让你的项目更加优秀!本节课程相对来说稍微有点难,大家一定好好阅读每一行哦~ 那废话少说,先看图!
一 有图有真相

上面图片从左到右,依次是折线图、区域图、锚点图,当然其它类型的,这里没有给大家展示,大家可以自己尝试。大家看到这个控件后有没有想到应用场景呢?暂时没想到没关系,下面我们先来看一下代码!

二 代码分析
static void chart_test(void)
{
    /*Create chart1*/
    lv_obj_t * chart1;
    chart1 = lv_chart_create(lv_scr_act(), NULL);
    lv_obj_set_size(chart1, 200, 150);
    lv_obj_align(chart1, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_chart_set_type(chart1, LV_CHART_TYPE_AREA );   /*Show lines and points too*/
    lv_chart_set_series_opa(chart1, LV_OPA_70);       /*Opacity of the data series*/
    lv_chart_set_series_width(chart1, 4);            /*Line width and point radious*/
	  lv_chart_set_range(chart1, 0, 100);
	
		/*Create chart2*/
	  lv_obj_t * chart2;
    chart2 = lv_chart_create(lv_scr_act(), NULL);
    lv_obj_set_size(chart2, 200, 150);
    lv_obj_align(chart2, NULL, LV_ALIGN_CENTER, -250, 0);
    lv_chart_set_type(chart2, LV_CHART_TYPE_LINE );   /*Show lines and points too*/
    lv_chart_set_series_opa(chart2, LV_OPA_70);       /*Opacity of the data series*/
    lv_chart_set_series_width(chart2, 4);            /*Line width and point radious*/
		lv_chart_set_range(chart2, 0, 100);
	
		/*Create chart3*/
		lv_obj_t * chart3;
    chart3 = lv_chart_create(lv_scr_act(), NULL);
    lv_obj_set_size(chart3, 200, 150);
    lv_obj_align(chart3, NULL, LV_ALIGN_CENTER, 250, 0);
    lv_chart_set_type(chart3, LV_CHART_TYPE_POINT );   /*Show lines and points too*/
    lv_chart_set_series_opa(chart3, LV_OPA_70);       /*Opacity of the data series*/
    lv_chart_set_series_width(chart3, 4);            /*Line width and point radious*/
		lv_chart_set_range(chart3, 0, 100);
	
    /*Add two data series*/
    lv_chart_series_t * ser1 = lv_chart_add_series(chart1, LV_COLOR_RED);
    lv_chart_series_t * ser2 = lv_chart_add_series(chart1, LV_COLOR_GREEN);

    /*Set the next points on 'dl1'*/
    lv_chart_set_next(chart1, ser1, 10);
    lv_chart_set_next(chart1, ser1, 10);
    lv_chart_set_next(chart1, ser1, 10);
    lv_chart_set_next(chart1, ser1, 10);
    lv_chart_set_next(chart1, ser1, 10);
    lv_chart_set_next(chart1, ser1, 10);
    lv_chart_set_next(chart1, ser1, 10);
    lv_chart_set_next(chart1, ser1, 30);
    lv_chart_set_next(chart1, ser1, 70);
    lv_chart_set_next(chart1, ser1, 90);

    /*Directly set points on 'dl2'*/
    ser2->points[0] = 90;
    ser2->points[1] = 70;
    ser2->points[2] = 65;
    ser2->points[3] = 65;
    ser2->points[4] = 65;
    ser2->points[5] = 65;
    ser2->points[6] = 65;
    ser2->points[7] = 65;
    ser2->points[8] = 65;
    ser2->points[9] = 65;

    lv_chart_refresh(chart1); /*Required after direct set*/
		
		    /*Add two data series*/
    lv_chart_series_t * ser3 = lv_chart_add_series(chart2, LV_COLOR_RED);
    lv_chart_series_t * ser4 = lv_chart_add_series(chart2, LV_COLOR_GREEN);

    /*Set the next points on 'dl1'*/
    lv_chart_set_next(chart2, ser3, 10);
    lv_chart_set_next(chart2, ser3, 10);
    lv_chart_set_next(chart2, ser3, 10);
    lv_chart_set_next(chart2, ser3, 10);
    lv_chart_set_next(chart2, ser3, 10);
    lv_chart_set_next(chart2, ser3, 10);
    lv_chart_set_next(chart2, ser3, 10);
    lv_chart_set_next(chart2, ser3, 30);
    lv_chart_set_next(chart2, ser3, 70);
    lv_chart_set_next(chart2, ser3, 90);

    /*Directly set points on 'dl2'*/
    ser4->points[0] = 90;
    ser4->points[1] = 70;
    ser4->points[2] = 65;
    ser4->points[3] = 65;
    ser4->points[4] = 65;
    ser4->points[5] = 65;
    ser4->points[6] = 65;
    ser4->points[7] = 65;
    ser4->points[8] = 65;
    ser4->points[9] = 65;

    lv_chart_refresh(chart2); /*Required after direct set*/
		
		    /*Add two data series*/
    lv_chart_series_t * ser5 = lv_chart_add_series(chart3, LV_COLOR_RED);
    lv_chart_series_t * ser6 = lv_chart_add_series(chart3, LV_COLOR_GREEN);

    /*Set the next points on 'dl1'*/
    lv_chart_set_next(chart3, ser5, 10);
    lv_chart_set_next(chart3, ser5, 10);
    lv_chart_set_next(chart3, ser5, 10);
    lv_chart_set_next(chart3, ser5, 10);
    lv_chart_set_next(chart3, ser5, 10);
    lv_chart_set_next(chart3, ser5, 10);
    lv_chart_set_next(chart3, ser5, 10);
    lv_chart_set_next(chart3, ser5, 30);
    lv_chart_set_next(chart3, ser5, 70);
    lv_chart_set_next(chart3, ser5, 90);

    /*Directly set points on 'dl2'*/
    ser6->points[0] = 90;
    ser6->points[1] = 70;
    ser6->points[2] = 65;
    ser6->points[3] = 65;
    ser6->points[4] = 65;
    ser6->points[5] = 65;
    ser6->points[6] = 65;
    ser6->points[7] = 65;
    ser6->points[8] = 65;
    ser6->points[9] = 65;

    lv_chart_refresh(chart3); /*Required after direct set*/
}

可以看到,这里的代码还是相对比较多的,不过其实也没有那么复杂,大多数还是在设置每个点的数据而已,那么这里我们先分析几个比较重要的API,首先就是图表类型,上面几幅图中我们展示了好几种图表类型,其实我们通过lv_chart_set_type这个函数就可以很简单的设置我们所要显示的图表类型,那么默认的类型有哪些呢?我们还是来看一下图表类型的枚举结构体:
/** Chart types*/
enum {
    LV_CHART_TYPE_NONE          = 0x00, /**< 不显示(隐藏)*/
    LV_CHART_TYPE_LINE          = 0x01, /**< 折线*/
    LV_CHART_TYPE_COLUMN        = 0x02, /**< 柱形*/
    LV_CHART_TYPE_POINT         = 0x04, /**< 点*/
    LV_CHART_TYPE_VERTICAL_LINE = 0x08, /**< 竖直线*/
    LV_CHART_TYPE_AREA          = 0x10, /**< 区域*/
};
typedef uint8_t lv_chart_type_t;

没错,默认的图表类型一共有这些,而且图表类型还可以叠加,比如我们想要即画点又连起曲线来,可以这样设置:

lv_chart_set_type(chart, LV_CHART_TYPE_LINE | LV_CHART_TYPE_POINT);
然后是lv_chart_set_series_opa这个函数,其主要作用是设置我们画的点或者柱形的透明度的,取值范围是 0 ~ 2550的时候是完全透明,255的时候完全不透明,这里的透明与不透明是相对于我们的网格来说的。
再就是lv_chart_set_series_width这个函数,主要是就是设置我们画的点的直径或者线宽等,当然对区域覆盖的图表类型来说是不起作用的。
然后lv_chart_set_range这个函数是设置的数据区间,就是我们纵坐标的最小值和最大值。
设置完上面的这些基本属性后,就是给我们的图表设置数据了,毕竟图表的作用就是用来展示数据的,再填充数据前我们要先增加图表序列,就是那根红线或者绿线,我们通过lv_chart_add_series这个函数去增加,其中第二个参数是数据点的颜色,返回值是指向图表序列结构的一个指针结构体,那么这个结构体都有哪些成员呢,我们可以看一下源码:
typedef struct
{
    lv_coord_t * points;
    lv_color_t color;
    uint16_t start_point;
} lv_chart_series_t;

那么我们可以通过例程的两种方式向图表数据,第一种就是通过lv_chart_set_next函数不断的去填充数据,其中第一个参数是我们的图表对象,然后第二个参数是我们的数据序列对象,第三个参数是我们的数据值,我们还可以用第二种方式去设置我们的图表中的数据,就是直接对结构体成员的每个数据点直接复制,不过最重要的是在我们设置完成数据后,一定要调用lv_chart_refresh这个函数,否则数据是不会刷新显示的!


OK,那么本节课先到这里,关于图表控件还有些不太常用的属性以及API,这里也就不再做介绍,不过相信随着你学习的深入,肯定自己也会摸索出很多方法的,那么我们下节课学习容器控件,我们下节课再见!



32

顶一下

刚表态过的朋友 (32 人)

关键词STM32 littlevGL

相关阅读

最新评论

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

GMT+8, 2021-1-18 21:33 , Processed in 0.012539 second(s), 14 queries .

返回顶部