基于lvgl的表盘设计

Neil-slice

基于lvgl的表盘设计 [复制链接]

 

（1）main函数部分：

int main(void)

{

    delay_init();

    LCD_Init();

    uart_initwBaudRate(115200);

 

    TIM_Int_Init(999,71);

    //tp_dev.init();                  //触摸屏初始化

   

     lv_init();                          //lvgl系统初始化

      lv_port_disp_init();        //lvgl显示接口初始化,放在lv_init()的后面

      lv_port_indev_init();       //lvgl输入接口初始化,放在lv_init()的后面

      lv_demo_widgets();

 

    while(1) {

             // tp_dev.scan(0);//触摸扫描

             lv_task_handler();          

    }

}

 

（2）窗口创建

void lv_demo_widgets(void)

{

    tv = lv_tabview_create(lv_scr_act(), NULL);

     

          uint32_t flag = LV_THEME_MATERIAL_FLAG_LIGHT;

 

       flag = LV_THEME_MATERIAL_FLAG_DARK;

    LV_THEME_DEFAULT_INIT(lv_theme_get_color_primary(), lv_theme_get_color_secondary(),

            flag,

            lv_theme_get_font_small(), lv_theme_get_font_normal(), lv_theme_get_font_subtitle(), lv_theme_get_font_title());

 

    t2 = lv_tabview_add_tab(tv, "RISC-V  2022");
 

    lv_style_init(&style_box);

    lv_style_set_value_align(&style_box, LV_STATE_DEFAULT, LV_ALIGN_OUT_TOP_LEFT);

    lv_style_set_value_ofs_y(&style_box, LV_STATE_DEFAULT, - LV_DPX(10));

    lv_style_set_margin_top(&style_box, LV_STATE_DEFAULT, LV_DPX(30));

 

    visuals_create(t2);

 

#if LV_DEMO_WIDGETS_SLIDESHOW

    lv_task_create(tab_changer_task_cb, 8000, LV_TASK_PRIO_LOW, NULL);

#endif

 

}

 

(3) 构件创建

static void visuals_create(lv_obj_t * parent)

{

    lv_page_set_scrl_layout(parent, LV_LAYOUT_PRETTY_TOP);

 

    lv_disp_size_t disp_size = lv_disp_get_size_category(NULL);

 

    lv_coord_t grid_h_chart = lv_page_get_height_grid(parent, 1, 1);

    lv_coord_t grid_w_chart = lv_page_get_width_grid(parent, disp_size <= LV_DISP_SIZE_LARGE ? 1 : 2, 1);

 

//    lv_obj_t * chart = lv_chart_create(parent, NULL);

//    lv_obj_add_style(chart, LV_CHART_PART_BG, &style_box);

//    if(disp_size <= LV_DISP_SIZE_SMALL) {

//        lv_obj_set_style_local_text_font(chart, LV_CHART_PART_SERIES_BG, LV_STATE_DEFAULT, lv_theme_get_font_small());

 

//    }

//    lv_obj_set_drag_parent(chart, true);

//    lv_obj_set_style_local_value_str(chart, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, "Line chart");

//    lv_obj_set_width_margin(chart, grid_w_chart);

//    lv_obj_set_height_margin(chart, grid_h_chart);

//    lv_chart_set_div_line_count(chart, 3, 0);

//    lv_chart_set_point_count(chart, 8);

//    lv_chart_set_type(chart, LV_CHART_TYPE_LINE);

//    if(disp_size > LV_DISP_SIZE_SMALL) {

//        lv_obj_set_style_local_pad_left(chart,  LV_CHART_PART_BG, LV_STATE_DEFAULT, 4 * (LV_DPI / 10));

//        lv_obj_set_style_local_pad_bottom(chart,  LV_CHART_PART_BG, LV_STATE_DEFAULT, 3 * (LV_DPI / 10));

//        lv_obj_set_style_local_pad_right(chart,  LV_CHART_PART_BG, LV_STATE_DEFAULT, 2 * (LV_DPI / 10));

//        lv_obj_set_style_local_pad_top(chart,  LV_CHART_PART_BG, LV_STATE_DEFAULT, 2 * (LV_DPI / 10));

//        lv_chart_set_y_tick_length(chart, 0, 0);

//        lv_chart_set_x_tick_length(chart, 0, 0);

//        lv_chart_set_y_tick_texts(chart, "600\n500\n400\n300\n200", 0, LV_CHART_AXIS_DRAW_LAST_TICK);

//        lv_chart_set_x_tick_texts(chart, "Jan\nFeb\nMar\nApr\nMay\nJun\nJul\nAug", 0, LV_CHART_AXIS_DRAW_LAST_TICK);

//    }

//    lv_chart_series_t * s1 = lv_chart_add_series(chart, LV_THEME_DEFAULT_COLOR_PRIMARY);

//    lv_chart_series_t * s2 = lv_chart_add_series(chart, LV_THEME_DEFAULT_COLOR_SECONDARY);

 

//    lv_chart_set_next(chart, s1, 10);

//    lv_chart_set_next(chart, s1, 90);

//    lv_chart_set_next(chart, s1, 30);

//    lv_chart_set_next(chart, s1, 60);

//    lv_chart_set_next(chart, s1, 10);

//    lv_chart_set_next(chart, s1, 90);

//    lv_chart_set_next(chart, s1, 30);

//    lv_chart_set_next(chart, s1, 60);

//    lv_chart_set_next(chart, s1, 10);

//    lv_chart_set_next(chart, s1, 90);

 

//    lv_chart_set_next(chart, s2, 32);

//    lv_chart_set_next(chart, s2, 66);

//    lv_chart_set_next(chart, s2, 5);

//    lv_chart_set_next(chart, s2, 47);

//    lv_chart_set_next(chart, s2, 32);

//    lv_chart_set_next(chart, s2, 32);

//    lv_chart_set_next(chart, s2, 66);

//    lv_chart_set_next(chart, s2, 5);

//    lv_chart_set_next(chart, s2, 47);

//    lv_chart_set_next(chart, s2, 66);

//    lv_chart_set_next(chart, s2, 5);

//    lv_chart_set_next(chart, s2, 47);

 

//    lv_obj_t * chart2 = lv_chart_create(parent, chart);

//    lv_chart_set_type(chart2, LV_CHART_TYPE_COLUMN);

//    lv_obj_set_style_local_value_str(chart2, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, "Column chart");

 

//    s1 = lv_chart_add_series(chart2, LV_THEME_DEFAULT_COLOR_PRIMARY);

//    s2 = lv_chart_add_series(chart2, LV_THEME_DEFAULT_COLOR_SECONDARY);

 

//    lv_chart_set_next(chart2, s1, 10);

//    lv_chart_set_next(chart2, s1, 90);

//    lv_chart_set_next(chart2, s1, 30);

//    lv_chart_set_next(chart2, s1, 60);

//    lv_chart_set_next(chart2, s1, 10);

//    lv_chart_set_next(chart2, s1, 90);

//    lv_chart_set_next(chart2, s1, 30);

//    lv_chart_set_next(chart2, s1, 60);

//    lv_chart_set_next(chart2, s1, 10);

//    lv_chart_set_next(chart2, s1, 90);

 

//    lv_chart_set_next(chart2, s2, 32);

//    lv_chart_set_next(chart2, s2, 66);

//    lv_chart_set_next(chart2, s2, 5);

//    lv_chart_set_next(chart2, s2, 47);

//    lv_chart_set_next(chart2, s2, 32);

//    lv_chart_set_next(chart2, s2, 32);

//    lv_chart_set_next(chart2, s2, 66);

//    lv_chart_set_next(chart2, s2, 5);

//    lv_chart_set_next(chart2, s2, 47);

//    lv_chart_set_next(chart2, s2, 66);

//    lv_chart_set_next(chart2, s2, 5);

//    lv_chart_set_next(chart2, s2, 47);

 

    lv_coord_t grid_w_meter;

    if(disp_size <= LV_DISP_SIZE_SMALL) grid_w_meter = lv_page_get_width_grid(parent, 1, 1);

    else if(disp_size <= LV_DISP_SIZE_MEDIUM) grid_w_meter = lv_page_get_width_grid(parent, 2, 1);

    else grid_w_meter = lv_page_get_width_grid(parent, 3, 1);

 

    lv_coord_t meter_h = lv_page_get_height_fit(parent);

    lv_coord_t meter_size = LV_MATH_MIN(grid_w_meter, meter_h);

 

    lv_obj_t * lmeter = lv_linemeter_create(parent, NULL);

    lv_obj_set_drag_parent(lmeter, true);

    lv_linemeter_set_value(lmeter, 50);

    lv_obj_set_size(lmeter, meter_size, meter_size);

    lv_obj_add_style(lmeter, LV_LINEMETER_PART_MAIN, &style_box);

    lv_obj_set_style_local_value_str(lmeter, LV_LINEMETER_PART_MAIN, LV_STATE_DEFAULT, "Line meter");

 

    lv_obj_t * label = lv_label_create(lmeter, NULL);

    lv_obj_align(label, lmeter, LV_ALIGN_CENTER, 0, 0);

    lv_obj_set_style_local_text_font(label, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_theme_get_font_title());

 

    lv_anim_t a;

    lv_anim_init(&a);

    lv_anim_set_var(&a, lmeter);

    lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t)linemeter_anim);

    lv_anim_set_values(&a, 0, 100);

    lv_anim_set_time(&a, 4000);

    lv_anim_set_playback_time(&a, 1000);

    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);

    lv_anim_start(&a);

 

    lv_obj_t * gauge = lv_gauge_create(parent, NULL);

    lv_obj_set_drag_parent(gauge, true);

    lv_obj_set_size(gauge, meter_size, meter_size);

    lv_obj_add_style(gauge, LV_GAUGE_PART_MAIN, &style_box);

    lv_obj_set_style_local_value_str(gauge, LV_GAUGE_PART_MAIN, LV_STATE_DEFAULT, "      Gauge");

 

    label = lv_label_create(gauge, label);

    lv_obj_align(label, gauge, LV_ALIGN_CENTER, 0, grid_w_meter / 3);

 

    lv_anim_set_var(&a, gauge);

    lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t)gauge_anim);

    lv_anim_start(&a);

 

    lv_obj_t * arc = lv_arc_create(parent, NULL);

    lv_obj_set_drag_parent(arc, true);

    lv_arc_set_bg_angles(arc, 0, 360);

    lv_arc_set_rotation(arc, 270);

    lv_arc_set_angles(arc, 0, 0);

    lv_obj_set_size(arc,  meter_size, meter_size);

    lv_obj_add_style(arc, LV_ARC_PART_BG, &style_box);

    lv_obj_set_style_local_value_str(arc, LV_ARC_PART_BG, LV_STATE_DEFAULT, "        Arc");

 

    label = lv_label_create(arc, label);

    lv_obj_align(label, arc, LV_ALIGN_CENTER, 0, 0);

 

    lv_anim_set_var(&a, arc);

    lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t)arc_anim);

    lv_anim_set_values(&a, 0, 360);

    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);

    lv_anim_start(&a);

 

    /*Create a bar and use the background's value style property to display the current value*/

    lv_obj_t * bar_h = lv_cont_create(parent, NULL);

    lv_cont_set_fit2(bar_h, LV_FIT_NONE, LV_FIT_TIGHT);

    lv_obj_add_style(bar_h, LV_CONT_PART_MAIN, &style_box);

    lv_obj_set_style_local_value_str(bar_h, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, "Bar");

 

//    if(disp_size <= LV_DISP_SIZE_SMALL) lv_obj_set_width(bar_h, lv_page_get_width_grid(parent, 1, 1));

//    else if(disp_size <= LV_DISP_SIZE_MEDIUM) lv_obj_set_width(bar_h, lv_page_get_width_grid(parent, 2, 1));

//    else lv_obj_set_width(bar_h, lv_page_get_width_grid(parent, 3, 2));

    lv_obj_set_width(bar_h, lv_page_get_width_grid(parent, 1, 1));

 

    bar = lv_bar_create(bar_h, NULL);

    lv_obj_set_width(bar, lv_obj_get_width_fit(bar_h));

    lv_obj_set_style_local_value_font(bar, LV_BAR_PART_BG, LV_STATE_DEFAULT, lv_theme_get_font_small());

    lv_obj_set_style_local_value_align(bar, LV_BAR_PART_BG, LV_STATE_DEFAULT, LV_ALIGN_OUT_BOTTOM_MID);

    lv_obj_set_style_local_value_ofs_y(bar, LV_BAR_PART_BG, LV_STATE_DEFAULT, LV_DPI / 20);

    lv_obj_set_style_local_margin_bottom(bar, LV_BAR_PART_BG, LV_STATE_DEFAULT, LV_DPI / 7);

    lv_obj_align(bar, NULL, LV_ALIGN_CENTER, 0, 0);

 

//    lv_obj_t * led_h = lv_cont_create(parent, NULL);

//    lv_cont_set_layout(led_h, LV_LAYOUT_PRETTY_MID);

//    if(disp_size <= LV_DISP_SIZE_SMALL) lv_obj_set_width(led_h, lv_page_get_width_grid(parent, 1, 1));

//    else if(disp_size <= LV_DISP_SIZE_MEDIUM) lv_obj_set_width(led_h, lv_page_get_width_grid(parent, 2, 1));

//    else lv_obj_set_width(led_h, lv_page_get_width_grid(parent, 3, 1));

 

//    lv_obj_set_height(led_h, lv_obj_get_height(bar_h));

//    lv_obj_add_style(led_h, LV_CONT_PART_MAIN, &style_box);

//    lv_obj_set_drag_parent(led_h, true);

//    lv_obj_set_style_local_value_str(led_h, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, "LEDs");

 

//    lv_obj_t * led = lv_led_create(led_h, NULL);

//    lv_coord_t led_size = lv_obj_get_height_fit(led_h);

//    lv_obj_set_size(led, led_size, led_size);

//    lv_led_off(led);

 

//    led = lv_led_create(led_h, led);

//    lv_led_set_bright(led, (LV_LED_BRIGHT_MAX - LV_LED_BRIGHT_MIN) / 2 + LV_LED_BRIGHT_MIN);

 

//    led = lv_led_create(led_h, led);

//    lv_led_on(led);

 

//    if(disp_size == LV_DISP_SIZE_MEDIUM) {

//        lv_obj_add_protect(led_h, LV_PROTECT_POS);

//        lv_obj_align(led_h, bar_h, LV_ALIGN_OUT_BOTTOM_MID, 0, lv_obj_get_style_margin_top(led_h, LV_OBJ_PART_MAIN) + lv_obj_get_style_pad_inner(parent, LV_PAGE_PART_SCROLLABLE));

//    }

 

//      lv_bar_set_anim_time(bar, 2000);

//    lv_bar_set_value(bar, 100, LV_ANIM_ON);

//    lv_task_create(bar_anim, 1, LV_TASK_PRIO_MID, bar);

    lv_anim_set_var(&a, bar);

    lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t)bar_anim);

    lv_anim_set_values(&a, 0, 100);

    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);

    lv_anim_start(&a);

}

注：在创建表盘的时候，我们将所需要的素材图片转化成.c文件进行存储，关于lvgl我们使用了NXP开发的辅助工具GUI Guider

 

lugl4313820

其实我建议呀，注释掉的代码，可以劳苦一下你发财的小手，删了再发上来，节约的美德，咱们要发扬！