网站链接: element-ui dtcms
当前位置: 首页 > 技术博文  > 技术博文

基于LVGL的手表UI架构设计

2021/6/6 18:05:10 人评论

1、软件信息平台:ubuntu 18.04lvgl:V7.11FreeRTOS:V10.4.3参考代码:lvgl:https://github.com/lvgl/lvgl.git模拟器:https://github.com/lvgl/lv_sim_eclipse_sdl.git主要数据结构(1)…

1、软件信息

    • 平台:ubuntu 18.04
    • lvgl:V7.11
    • FreeRTOS:V10.4.3
    • 参考代码:
      • lvgl:https://github.com/lvgl/lvgl.git
      • 模拟器:https://github.com/lvgl/lv_sim_eclipse_sdl.git
  • 主要数据结构
    • (1)activity生命周期及事件管理
    • (2)activity描述
    • (3)手势事件定义
    • (4)屏幕切换方式定义
    • activity 示例
    • activity 效果演示
      • 表盘:
      • app list:
      • system app:
      • 轨迹 app:
      • 二维码 app:
      • 演示视频:

平台:ubuntu 18.04

lvgl:V7.11

FreeRTOS:V10.4.3

参考代码:

lvgl:https://github.com/lvgl/lvgl.git

模拟器:https://github.com/lvgl/lv_sim_eclipse_sdl.git

2、Activity manager system设计

    • 平台:ubuntu 18.04
    • lvgl:V7.11
    • FreeRTOS:V10.4.3
    • 参考代码:
      • lvgl:https://github.com/lvgl/lvgl.git
      • 模拟器:https://github.com/lvgl/lv_sim_eclipse_sdl.git
  • 主要数据结构
    • (1)activity生命周期及事件管理
    • (2)activity描述
    • (3)手势事件定义
    • (4)屏幕切换方式定义
    • activity 示例
    • activity 效果演示
      • 表盘:
      • app list:
      • system app:
      • 轨迹 app:
      • 二维码 app:
      • 演示视频:

主要数据结构

(1)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;

(2)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;

(3)手势事件定义

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;

(4)屏幕切换方式定义

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;

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,
};

activity 效果演示

表盘:

在这里插入图片描述

app list:

在这里插入图片描述

system app:

在这里插入图片描述

轨迹 app:

在这里插入图片描述

二维码 app:

在这里插入图片描述

演示视频:

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

相关资讯

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?