littevGL:软键盘和表盘

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()设置文本中心对齐没有起作用。看来只能通过判断位数修改文本框位置来对齐了。