功率测试仪littlevgl使用心得

功率测试仪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);