基于LVGL的手表UI架构设计

1、软件信息

平台：ubuntu 18.04

lvgl：7.11

FreeRTOS：10.4.3

2、Activity manager system设计

(1)主要数据结构

a、activity 生命周期和事件管理

typedef struct __ams_ops_t
{
    app_prepare_t prepare;
    app_start_t start;
    app_stop_t stop;
    app_create_t create;
    app_destroy_t destroy;
    event_handle_t handler;
    gesture_handle_t gesture;
}ams_ops_t;

b、activity描述

typedef struct __ams_profile_t
{
    const lv_img_dsc_t *icon;
    char *name;
}ams_profile_t;

typedef struct __ams_item_t
{
    const lv_img_dsc_t *icon;
    char *name;
    void *ui;
    void *custom;
    ams_ops_t *ops;
}ams_activity_t;

c、手势事件定义

typedef enum __ams_gesture_t
{
    GESTRUE_SLIDE_TO_TOP = 0,
    GESTRUE_SLIDE_TO_BUTTOM,
    GESTRUE_SLIDE_TO_LEFT,
    GESTRUE_SLIDE_TO_RIGHT,
}ams_gesture_t;

d、屏幕切换方式定义

typedef enum __ams_dir_t
{
    DIR_SLIDE_TO_NONE = 0,
    DIR_SLIDE_TO_TOP,
    DIR_SLIDE_TO_BUTTOM,
    DIR_SLIDE_TO_LEFT,
    DIR_SLIDE_TO_RIGHT,
    DIR_COVER_TO_TOP,
    DIR_COVER_TO_BUTTOM,
    DIR_COVER_TO_LEFT,
    DIR_COVER_TO_RIGHT,
}ams_dir_t;

e、activity 示例

static void app_start(void *content)
{

}

static void app_stop(void *content)
{

}

static void app_prepare(void *content)
{
    ams_activity_t *activity = (ams_activity_t *)content;
    activity->custom = ams_malloc(sizeof(struct system_user_t));
}

static void *app_create(void *content)
{
    static lv_style_t style;
    lv_style_init(&style);

    lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_BLACK);

    lv_style_set_pad_top(&style, LV_STATE_DEFAULT, 10);
    lv_style_set_pad_bottom(&style, LV_STATE_DEFAULT, 10);
    lv_style_set_pad_left(&style, LV_STATE_DEFAULT, 10);
    lv_style_set_pad_right(&style, LV_STATE_DEFAULT, 10);

    lv_style_set_text_color(&style, LV_STATE_DEFAULT, LV_COLOR_RED);
    lv_style_set_text_letter_space(&style, LV_STATE_DEFAULT, 0);
    lv_style_set_text_line_space(&style, LV_STATE_DEFAULT, 20);
    lv_style_set_text_decor(&style, LV_STATE_DEFAULT, LV_TEXT_DECOR_NONE);

    lv_style_set_text_font(&style, LV_STATE_DEFAULT, &lv_font_montserrat_16);
    lv_style_set_text_color(&style, LV_STATE_DEFAULT, LV_COLOR_WHITE);

    ams_activity_t *activity = (ams_activity_t *)content;
    struct system_user_t *user = (struct system_user_t *)activity->custom;
    if(!activity->ui)
    {
        activity->ui = lv_obj_create(NULL, NULL);
    }
    lv_obj_add_style(activity->ui, LV_LABEL_PART_MAIN, &style);

    // ##
    #define X_START     40
    #define Y_START     20
    #define Y_DELTA     50
    int16_t cnt = 0;
    #define Y_POS(N)   (Y_START + (N) * Y_DELTA)
    user->device = lv_label_create(activity->ui, NULL);
    lv_obj_add_style(user->device, LV_LABEL_PART_MAIN, &style);
    lv_label_set_align(user->device, LV_LABEL_ALIGN_LEFT);
    lv_obj_set_pos(user->device, X_START, Y_POS(cnt++));
    lv_label_set_text_fmt(user->device, "Device : %s", DEVICE_NAME);

    user->model = lv_label_create(activity->ui, NULL);
    lv_obj_add_style(user->model, LV_LABEL_PART_MAIN, &style);
    lv_label_set_align(user->model, LV_LABEL_ALIGN_LEFT);
    lv_obj_set_pos(user->model, X_START, Y_POS(cnt++));
    lv_label_set_text_fmt(user->model, "Model : %s", DEVICE_MODEL);

    user->mac = lv_label_create(activity->ui, NULL);
    lv_obj_add_style(user->mac, LV_LABEL_PART_MAIN, &style);
    lv_label_set_align(user->mac, LV_LABEL_ALIGN_LEFT);
    lv_obj_set_pos(user->mac, X_START, Y_POS(cnt++));
    lv_label_set_text_fmt(user->mac, "MAC : %02X-%02X-%02X-%02X-%02X-%02X",
                                    0x12, 0x34, 0x56, 0x78, 0x90, 0xAB);

    user->sn = lv_label_create(activity->ui, NULL);
    lv_obj_add_style(user->sn, LV_LABEL_PART_MAIN, &style);
    lv_label_set_align(user->sn, LV_LABEL_ALIGN_LEFT);
    lv_obj_set_pos(user->sn, X_START, Y_POS(cnt++));
    lv_label_set_text_fmt(user->sn, "SN : %d", 12345678);

    user->sw_ver = lv_label_create(activity->ui, NULL);
    lv_obj_add_style(user->sw_ver, LV_LABEL_PART_MAIN, &style);
    lv_label_set_align(user->sw_ver, LV_LABEL_ALIGN_LEFT);
    lv_obj_set_pos(user->sw_ver, X_START, Y_POS(cnt++));
    lv_label_set_text_fmt(user->sw_ver, "Version : %s", SOFTWARE_VERSION);
    
    user->built_time = lv_label_create(activity->ui, NULL);
    lv_obj_add_style(user->built_time, LV_LABEL_PART_MAIN, &style);
    lv_label_set_align(user->built_time, LV_LABEL_ALIGN_LEFT);
    lv_obj_set_pos(user->built_time, X_START, Y_POS(cnt++));
    lv_label_set_text_fmt(user->built_time, "Built at : %s, %s", __TIME__, __DATE__);

    user->author = lv_label_create(activity->ui, NULL);
    lv_obj_add_style(user->author, LV_LABEL_PART_MAIN, &style);
    lv_label_set_align(user->author, LV_LABEL_ALIGN_LEFT);
    lv_obj_set_pos(user->author, X_START, Y_POS(cnt++));
    lv_label_set_text_fmt(user->author, "Author : %s", MANUFACTURER_NAME);

    return activity->ui;
}

static void *app_destroy(void *content)
{
    ams_activity_t *activity = (ams_activity_t *)content;
    ams_free(activity->custom);

    return NULL;
}

static void app_event_handle(void *event)
{

}

static void app_gesture_handle(void *event)
{
    ams_gesture_t evt = *((ams_gesture_t *)event);
    switch(evt)
    {
        case GESTRUE_SLIDE_TO_TOP:
            break;
        case GESTRUE_SLIDE_TO_BUTTOM:
            break;
        case GESTRUE_SLIDE_TO_LEFT:
            break;
        case GESTRUE_SLIDE_TO_RIGHT:
            ams_switch_by_name("app list", DIR_SLIDE_TO_RIGHT);
            break;
    }
}

static ams_ops_t ops =
{
    .prepare = app_prepare,
    .start = app_start,
    .stop = app_stop,
    .create = app_create,
    .destroy = app_destroy,
    .handler = app_event_handle,
    .gesture = app_gesture_handle,
};

const ams_activity_t ams_app_system =
{
    .icon = &icon_info,
    .name = "system",
    .ops = &ops,
};

(2)效果演示

表盘：

app list：

system app：

轨迹 app：

二维码 app：

演示视频：

基于LVGL的手表UI架构设计演示视频

*关注星空嵌入式微信公众号