木子剑
生命不熄,学习不止!

位于\lvgl-release-v8.0\examples\widgets\chart下的lv_example_chart_2.c,这个例子非常有价值。

我在它基础之上,画出了一个三角波形,所有的更改只为测试一下效果,搞明白它们的原理。

其主要关键函数是:

lv_obj_add_event_cb(chart1, draw_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);// cahrt创建一个事件draw_event,

lv_timer_create(add_data, 40, NULL);    // 以毫秒为单位的周期调用,周期ADD—DATA数据

其过程原理是:chart1图表对像,在有数据更新时,会调用draw_event_cb函数,draw_event_cb函数

实现了所有的细节,内部主要是利用lv_draw xx这类功能进行操作。

所谓的数据更新其实就是add_data回调函数,这里按排了具体的数据更新,而lv_timer_create周期性

执行add_data函数,所以整个套路就打通了。

 

更改后的测试例程:

  1 static lv_obj_t * chart1;
  2 static lv_chart_series_t * ser1;
  3 
  4 // 事件回调函数,利用lv_draw xx进行实现,这是重点!
  5 static void draw_event_cb(lv_event_t * e)
  6 {
  7     lv_obj_t * obj = lv_event_get_target(e);
  8 
  9     /*Add the faded area before the lines are drawn*/
 10     lv_obj_draw_part_dsc_t * dsc = lv_event_get_draw_part_dsc(e);
 11     if(dsc->part == LV_PART_ITEMS) {
 12         if(!dsc->p1 || !dsc->p2) return;
 13 
 14         /*Add  a line mask that keeps the area below the line*/
 15         lv_draw_mask_line_param_t line_mask_param;
 16         lv_draw_mask_line_points_init(&line_mask_param, dsc->p1->x, dsc->p1->y, dsc->p2->x, dsc->p2->y, LV_DRAW_MASK_LINE_SIDE_BOTTOM);
 17         int16_t line_mask_id = lv_draw_mask_add(&line_mask_param, NULL);
 18 
 19         /*Add a fade effect: transparent bottom covering top*/
 20         lv_coord_t h = lv_obj_get_height(obj);
 21         lv_draw_mask_fade_param_t fade_mask_param;
 22         lv_draw_mask_fade_init(&fade_mask_param, &obj->coords, LV_OPA_COVER, obj->coords.y1 + h / 8, LV_OPA_TRANSP,obj->coords.y2);
 23         int16_t fade_mask_id = lv_draw_mask_add(&fade_mask_param, NULL);
 24 
 25         /*Draw a rectangle that will be affected by the mask*/
 26         lv_draw_rect_dsc_t draw_rect_dsc;
 27         lv_draw_rect_dsc_init(&draw_rect_dsc);
 28         draw_rect_dsc.bg_opa = LV_OPA_20;
 29         draw_rect_dsc.bg_color = dsc->line_dsc->color;
 30 
 31         lv_area_t a;
 32         a.x1 = dsc->p1->x;
 33         a.x2 = dsc->p2->x - 1;
 34         a.y1 = LV_MIN(dsc->p1->y, dsc->p2->y);
 35         a.y2 = obj->coords.y2;
 36         lv_draw_rect(&a, dsc->clip_area, &draw_rect_dsc);
 37 
 38         /*Remove the masks*/
 39         lv_draw_mask_remove_id(line_mask_id);
 40         lv_draw_mask_remove_id(fade_mask_id);
 41     }
 42     /*Hook the division lines too*/
 43     else if(dsc->part == LV_PART_MAIN) {
 44         if(dsc->line_dsc == NULL) return;
 45 
 46         /*Vertical line*/
 47         if(dsc->p1->x == dsc->p2->x) {
 48             dsc->line_dsc->color  = lv_palette_lighten(LV_PALETTE_GREY, 1);
 49             if(dsc->id == 3) {
 50                 dsc->line_dsc->width  = 2;
 51                 dsc->line_dsc->dash_gap  = 0;
 52                 dsc->line_dsc->dash_width  = 0;
 53             }
 54             else {
 55                 dsc->line_dsc->width = 1;
 56                 dsc->line_dsc->dash_gap  = 6;
 57                 dsc->line_dsc->dash_width  = 6;
 58             }
 59         }
 60         /*Horizontal line*/
 61         else {
 62             if(dsc->id == 2) {
 63                 dsc->line_dsc->width  = 2;
 64                 dsc->line_dsc->dash_gap  = 0;
 65                 dsc->line_dsc->dash_width  = 0;
 66             }
 67             else {
 68                 dsc->line_dsc->width = 2;
 69                 dsc->line_dsc->dash_gap  = 6;
 70                 dsc->line_dsc->dash_width  = 6;
 71             }
 72 
 73             if(dsc->id == 1  || dsc->id == 3) {
 74                 dsc->line_dsc->color  = lv_palette_main(LV_PALETTE_GREEN);
 75             } else {
 76                 dsc->line_dsc->color  = lv_palette_lighten(LV_PALETTE_GREY, 1);
 77             }
 78         }
 79     }
 80 }
 81 
 82 static void add_data(lv_timer_t * timer)
 83 {
 84     LV_UNUSED(timer);
 85     static uint32_t cnt = 30;
 86     static uint8_t cn = 1;
 87 
 88     lv_chart_set_next_value(chart1, ser1, cnt);
 89     if(cn)  // 三角波数据
 90     {
 91       cnt++;
 92       if(cnt>70)cn=0;
 93     }
 94     else
 95     {
 96       cnt--;
 97       if(cnt==30)cn=1;
 98     }
 99 }
100 
101 /*
102  * chrt图表例子
103  */
104 void lv_example_chart_2(void)
105 {
106     /*创建一个图表CHART*/
107     chart1 = lv_chart_create(lv_scr_act());
108     lv_obj_set_size(chart1, 800, 480);  // 大小,像素点
109     lv_obj_center(chart1);      //中央对齐
110     lv_chart_set_type(chart1, LV_CHART_TYPE_LINE);   /*将点连线*/
111     lv_chart_set_point_count(chart1, 240);   // 240个点连成线,默认是10个
112 
113     //lv_chart_set_div_line_count(chart1, 5, 7);  // 作用是???
114 
115     lv_obj_add_event_cb(chart1, draw_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);// cahrt创建一个事件draw_event,
116     lv_chart_set_update_mode(chart1, LV_CHART_UPDATE_MODE_CIRCULAR);  // 循环模式
117 
118     /*添加1个数据系列*/
119     ser1 = lv_chart_add_series(chart1, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
120 
121     lv_timer_create(add_data, 40, NULL);    // 以毫秒为单位的周期调用,周期ADD—DATA数据
122 }

 

执行效果:

  lv_timer_create(add_data, 40, NULL);我是设的40MS动态绘制的,速度相关快,基本上

满足速度要求。

 

以后,我们将ADC值绘画在屏上方便分析和观察!真舒坦啊~~~如果是数字传感器信号的话,直接

绘图就可以了,直观方便我们调试。加油!!

 

时间:2021-07-07

线的颗粒感很大,可以使用下面进行设置size大小:

    /* 没有点的数据显示 */
    lv_obj_set_style_size(chart1,            // 图表对像
                          0,                 // 点的size大小
                          LV_PART_INDICATOR);// 指示器

 

 

效果如下图:

 

时间:2021-07-13

图形CHART的例使用方法

void lv_example_chart_3(void)
{
    /*建一个图表*/
    lv_obj_t * chart = lv_chart_create(lv_scr_act());   // 建一个图表
    lv_obj_set_size(chart, 480, 272);              // 图表的大小
    lv_obj_center(chart);                          // 以父为参考,居中
    lv_chart_set_type(chart, LV_CHART_TYPE_BAR);   // 画列
    lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 100);   //设置轴上的最小和最大 y 值
    lv_chart_set_range(chart, LV_CHART_AXIS_SECONDARY_Y, 0, 400);
    lv_chart_set_point_count(chart, 12);      // 设置图表数据线上的12个点


    /* 在 X 中稍微放大 */
    lv_chart_set_zoom_x(chart, 512); // 规定参数:256不放大,  512放大一倍

    /*添加1个数据系列 */
    lv_chart_series_t * ser1 = lv_chart_add_series(chart, lv_palette_lighten(LV_PALETTE_RED, 2), LV_CHART_AXIS_PRIMARY_Y);

    /* 在“ser1”上设置下一个点 */
    lv_chart_set_next_value(chart, ser1, 31);    // 手动设置12个点的数值
    lv_chart_set_next_value(chart, ser1, 66);
    lv_chart_set_next_value(chart, ser1, 10);
    lv_chart_set_next_value(chart, ser1, 89);
    lv_chart_set_next_value(chart, ser1, 63);
    lv_chart_set_next_value(chart, ser1, 56);
    lv_chart_set_next_value(chart, ser1, 32);
    lv_chart_set_next_value(chart, ser1, 35);
    lv_chart_set_next_value(chart, ser1, 57);
    lv_chart_set_next_value(chart, ser1, 85);
    lv_chart_set_next_value(chart, ser1, 22);
    lv_chart_set_next_value(chart, ser1, 58);

    lv_chart_refresh(chart); /* 直接设置后刷新 */
}

关键lv_chart_set_zoom_x(chart, XX)放大功能,当为256时,有12个数据例条;当为512时,只有6个数据例条,因为放大了1倍,只够显示6个例,

如果触摸屏功能正常的话,可以左右进行滚动操作。。。

 

posted on 2021-06-29 23:00  木子剑  阅读(4486)  评论(0编辑  收藏  举报