基于LVGL的手表UI架构设计

Posted 星空嵌入式

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于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:

基于LVGL的手表UI架构设计


system app:

基于LVGL的手表UI架构设计


轨迹 app:


二维码 app:


演示视频:

https://www.bilibili.com/video/BV1eq4y1j7Mh?share_source=copy_web


以上是关于基于LVGL的手表UI架构设计的主要内容,如果未能解决你的问题,请参考以下文章

什么手表用lvgl

基于STM32的OLED多级菜单GUI实现(简化版智能手表)

lvgl gui项目|基于编写的lvgl 8.1的GUI,欢迎学习体验

UI 设计代码化:低代码式设计语言 —— Unflow

UI 设计代码化:低代码式设计语言 —— Unflow

具有相同功能的活动和片段