功率测试仪littlevgl使用心得
1. label标签
1.1 label标签的创建
label3 = lv_label_create(scr,NULL);
lv_label_set_style(label3,LV_LABEL_STYLE_MAIN,&style1);//设置具有背景色
lv_label_set_text(label3,"txt");//设置文本 ,中文要在UTF-8编码
lv_label_set_body_draw(label3,true); //设置绘制背景
lv_obj_align(label3,NULL,LV_ALIGN_CENTER,-150,-250);
1.2 浮点数在label标签上显示
label标签上设置文本要求字符形式的,固将float转换成char型,然后再在label上显示。
//data为要转换的数字,
//num1为整数部分的个数,num2为小数部分的个数
//size为大小12/16/24
void float_to_char(float data,u8 num,u8 lable_num)
{
char buf[10];//储存浮点数转换后的字符
char fmt[]="%.3f";//初始值,fmt[0]=% fmt[1]=. fmt[1]=3 fmt[1]处可以为浮点可以显示的任意小数位数
fmt[2]=num+0x30;//小数点左移一位fmt[2]加1
sprintf(buf, fmt, data);//将data转换为fmt样式的字符
printf("%s",buf);//调试时用的
lv_label_set_text(label7,buf); //在label上设置文本
}
1.3 浮点数直接在LCD上显示
//浮点数显示
//x,y为起始坐标
//data为要显示的数字,
//num1为整数部分的个数,num2为小数部分的个数
//size为大小12/16/24
void LCD_Display_FloatNum(u16 x,u16 y,float data,u16 num1,u16 num2,u16 size)
{
u16 temp;//定义整形数字
temp=data;//赋值,此时temp为number的整数部分
LCD_ShowNum(x,y,temp,num1,size);//显示整数部分
//显示电压三位小数
LCD_ShowChar(x+size/2*num1,y,'.',size,0);//显示小数点
data-=temp;//为带显示的小数部分(0.abcdef)
data*=100;//
LCD_ShowNum(x+size*(num1+1)/2,y,data,num2,size);//显示小数部分数字
}
2. 按键
2.1 按键创建
//设置清零按键
btn1=lv_btn_create(scr,NULL);//创建样式
lv_obj_align(btn1,NULL,LV_ALIGN_CENTER,-10,0);//中心向X轴左偏10
lv_obj_set_size(btn1,90,50);//设置按键长90,高50
lv_obj_set_event_cb(btn1,btn_event_cb);//给按键设置事件回调函数
label2 = lv_label_create(btn1,NULL);//给 btn1 添加 label 子对象
lv_label_set_text(label2,"Clear");//label设置文本
//lv_btn_set_toggle(btn1,true);//设置为toggle按钮 toggle按钮的状态转换有点迷
//lv_btn_set_state(btn1,LV_BTN_STATE_TGL_REL);
// //设置按钮切换态下的释放状态样式
// lv_btn_set_style(btn1,LV_BTN_STYLE_TGL_REL,&my_style_btn_release);
2.2 按键样式设置
lv_style_t my_style_btn_release;//按钮释放状态下的样式
//1.1 释放状态下的样式
lv_style_copy(&my_style_btn_release,&lv_style_plain_color);//拷贝littlevgl自带的样式
//设置纯色的背景
my_style_btn_release.body.main_color = LV_COLOR_MAKE(0x1E,0x9F,0xFF);
my_style_btn_release.body.grad_color = my_style_btn_release.body.main_color;
my_style_btn_release.body.opa = LV_OPA_COVER;//设置背景色完全不透明
my_style_btn_release.body.radius = LV_RADIUS_CIRCLE;//绘制圆角按钮
my_style_btn_release.body.shadow.color = LV_COLOR_MAKE(0x1E,0x9F,0xFF);
my_style_btn_release.body.shadow.type = LV_SHADOW_FULL;//设置四边都有阴影
my_style_btn_release.body.shadow.width = 3;//设置阴影的宽度
my_style_btn_release.body.border.color = LV_COLOR_MAKE(0x1E,0x9F,0xFF);
my_style_btn_release.body.border.part = LV_BORDER_FULL;//四条边框都绘制
my_style_btn_release.body.border.width = 2;//设置边框的宽度
my_style_btn_release.body.border.opa = LV_OPA_COVER;//设置边框完全不透明
my_style_btn_release.text.color = LV_COLOR_WHITE;
my_style_btn_release.body.padding.left = 10;//设置左内边距
my_style_btn_release.body.padding.right = 10;//设置右内边距
3. 图表
//1.创建样式
lv_style_copy(&main_style,&lv_style_pretty);
main_style.body.main_color = LV_COLOR_WHITE;//主背景为纯白色
main_style.body.grad_color = main_style.body.main_color;
main_style.body.border.color = LV_COLOR_BLACK;//边框的颜色
main_style.body.border.width = 2;//边框的宽度
main_style.body.border.opa = LV_OPA_COVER;
main_style.body.radius = 0;
main_style.line.color = LV_COLOR_GRAY;//分割线和刻度线的颜色
main_style.text.color = LV_COLOR_BLUE;//主刻度标题的颜色
//创造图表对象
chart1=lv_chart_create(scr,NULL);
lv_obj_set_size(chart1,350,230);
lv_obj_align(chart1,NULL,LV_ALIGN_CENTER,10,200);
//设置为折线图
lv_chart_set_type(chart1,LV_CHART_TYPE_LINE);
//设置数据线的透明度
lv_chart_set_series_opa(chart1,LV_OPA_80);
lv_chart_set_series_width(chart1,5);//设置数据线的宽度
lv_chart_set_series_darking(chart1,LV_OPA_80);//设置数据线的黑阴影效果
lv_chart_set_style(chart1,LV_CHART_STYLE_MAIN,&main_style);//设置样式
//设置每条数据线所具有的数据点个数,如果不设置的话,则默认值是 10
lv_chart_set_point_count(chart1,POINT_COUNT);
lv_chart_set_div_line_count(chart1,10,6);//设置水平和垂直分割线数量
lv_chart_set_range(chart1,0,100);//设置 y 轴的数值范围,[0,100]也是默认值
//设置 y 轴的主刻度线长度和次刻度线长度
lv_chart_set_y_tick_length(chart1,10,3);
lv_chart_set_y_tick_texts(chart1,"P\n10\n9\n8\n7\n6\n5\n4\n3\n2\n1\n0",5,
LV_CHART_AXIS_DRAW_LAST_TICK);//0~10,P一共12个主刻度线,相邻两个主刻度线间有5-1=4根次刻度线,画最后一条主刻度线。
//设置 x 轴的主刻度线长度和次刻度线长度
lv_chart_set_x_tick_length(chart1,10,3);
lv_chart_set_x_tick_texts(chart1,"0\n10\n20\n30\n40\n50\n60\nt",5,
LV_CHART_AXIS_DRAW_LAST_TICK);
lv_chart_set_margin(chart1,30);
//往图表中添加第 1 条数据线
series1 = lv_chart_add_series(chart1,LV_COLOR_YELLOW);//指定为黄色
lv_chart_init_points(chart1,series1,0);
lv_chart_set_update_mode(chart1,LV_CHART_UPDATE_MODE_SHIFT);