littevGL自带软键盘控件和表盘控件。表盘有两种,Gauge和Line Meter。
1.软键盘
软键盘有两种形式,一种是常规的字母键盘,一种是数字和标点符号键盘。
lv_obj_t * kb=NULL;
lv_obj_t *ta=NULL;
void demoKeyboard(void)
{
lv_obj_t * btn1 = lv_btn_create(lv_scr_act(), NULL); /*Create a button on the currently loaded screen*/
lv_btn_set_action(btn1, LV_BTN_ACTION_CLICK, btn_click_action); /*Set function to be called when the button is released*/
lv_obj_set_size(btn1,500,100);
lv_obj_set_pos(btn1,4,10);
ta= lv_ta_create(lv_scr_act(), NULL);
lv_obj_set_size(ta,500,100);
lv_obj_set_pos(ta,4,10);
lv_ta_set_cursor_type(ta,LV_CURSOR_LINE);
lv_obj_set_click(ta,0);
lv_ta_add_text(ta, "insret text") ;
kb=lv_kb_create(lv_scr_act(), NULL);
lv_kb_set_ta(kb,ta);
lv_kb_set_cursor_manage(kb, true);
lv_kb_set_ok_action(kb,btn_click_action);
lv_kb_set_hide_action(kb,btn_click_action);
}
/**
* Called when a button is released
* @param btn pointer to the released button
* @return LV_RES_OK because the object is not deleted in this function
*/
static lv_res_t btn_click_action(lv_obj_t * btn)
{
if(kb!=NULL)
lv_obj_set_hidden( kb,!lv_obj_get_hidden(kb) );
return LV_RES_OK;
}
因为文本框没有相应的点击事件接口,只能开同样的位置下面放置一个按钮,响应点击事件。
使用起来,感觉画面显示与点击响应都不是很顺畅。
2.表盘
Gauge带有圆弧刻度和若干个指针。
Line Meter使用重新着色一径向线条的方法显示当前值。其实可以认为,此控件是一种弧形进度条(Bar)。
下面代码演示使用这两个控件。表盘的各部分的颜色,刻度的长短与范围,都可以自定义。但是指针长度无法修改。
lv_obj_t * gauge;
lv_obj_t * lmeter;
lv_obj_t * label_for_lmeter;
void demoGauge(void)
{
static lv_color_t colorArray[2] ;
colorArray[0]=LV_COLOR_RED;
colorArray[1]=LV_COLOR_GREEN;
gauge=lv_gauge_create(lv_scr_act(), NULL);
lv_obj_set_size(gauge,250,250);
lv_obj_set_pos(gauge,10,100);
lv_gauge_set_range(gauge,10,10+5*20);
lv_gauge_set_critical_value(gauge,90);
lv_gauge_set_needle_count(gauge,2,colorArray);
lv_gauge_set_value(gauge,0,10);
lv_gauge_set_value(gauge,1,20);
/*Create a Label*/
lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);
lv_label_set_text(label1, "Gauge");
lv_obj_align(label1, gauge, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);
}
void demoLmeter(void)
{
static lv_style_t style;
lv_style_copy(&style, &lv_style_pretty);
style.body.main_color = LV_COLOR_GREEN;
style.body.grad_color = LV_COLOR_RED;
style.body.padding.hor = 20;
style.body.border.color= LV_COLOR_GRAY; /*Means the needle middle*/
style.line.width = 4;
style.line.color = LV_COLOR_SILVER;
lmeter=lv_lmeter_create(lv_scr_act(), NULL);
lv_obj_set_style(lmeter, &style);
lv_obj_set_size(lmeter,200,200);
lv_obj_set_pos(lmeter,10+250+20,100);
lv_lmeter_set_range(lmeter,0,200);
lv_lmeter_set_value(lmeter,0);
static lv_style_t style1;
lv_style_copy(&style1, &lv_style_plain);
style1.text.font = &lv_font_dejavu_40;
label_for_lmeter = lv_label_create(lv_scr_act(), NULL);
lv_label_set_text(label_for_lmeter, "0");
lv_label_set_align(label_for_lmeter,LV_LABEL_ALIGN_CENTER);
lv_obj_align(label_for_lmeter, lmeter, LV_ALIGN_CENTER, 0, 0);
lv_label_set_style(label_for_lmeter, &style1);
/*Create Label*/
lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);
lv_label_set_text(label1, "Lmeter");
lv_obj_align(label1, lmeter, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);
}
可以通过修改style更细致地自定义表盘。
typedef struct
{
uint8_t glass :1; /*1: Do not inherit this style*/
struct {
lv_color_t main_color;
lv_color_t grad_color; /*`grad_color` will be removed in v6.0, use `aux_color` instead*/
lv_coord_t radius;
lv_opa_t opa;
struct {
lv_color_t color;
lv_coord_t width;
lv_border_part_t part;
lv_opa_t opa;
} border;
struct {
lv_color_t color;
lv_coord_t width;
lv_shadow_type_t type;
} shadow;
struct {
lv_coord_t ver;
lv_coord_t hor;
lv_coord_t inner;
} padding;
uint8_t empty :1; /*Transparent background (border still drawn)*/
} body;
struct {
lv_color_t color;
const lv_font_t * font;
lv_coord_t letter_space;
lv_coord_t line_space;
lv_opa_t opa;
} text;
struct {
lv_color_t color;
lv_opa_t intense;
lv_opa_t opa;
} image;
struct {
lv_color_t color;
lv_coord_t width;
lv_opa_t opa;
uint8_t rounded :1; /*1: rounded line endings*/
} line;
} lv_style_t;
Line Meter控件本身不显示数字,下图的LMeter中心数字是自己添加的label。如何让数字位数在变化中仍然保持在控件中心似乎有点麻烦。使用函数lv_label_set_align()设置文本中心对齐没有起作用。看来只能通过判断位数修改文本框位置来对齐了。