基于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:
system app:
轨迹 app:
二维码 app:
演示视频:
https://www.bilibili.com/video/BV1eq4y1j7Mh?share_source=copy_web
以上是关于基于LVGL的手表UI架构设计的主要内容,如果未能解决你的问题,请参考以下文章
基于STM32的OLED多级菜单GUI实现(简化版智能手表)