位于\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个例,
如果触摸屏功能正常的话,可以左右进行滚动操作。。。