LVGL项目实战之桌面UI绘制

实物购买：TB搜索：南山府嵌入式

1 - 整体UI介绍

在开始代码之前，我们先来看一下我们这个项目的界面。根据第二章的介绍，我们已经知道需要哪些东西了。

首先我们先来看桌面的UI：

在这里插入图片描述

上面就是我们项目的桌面设计，顶部两栏分别显示的是遥控/门磁和WIFI状态显示部分。

往下来是一行分割横线，紧接着显示的是时间、年月日、星期，在之后是分割横线，最底部是我们报警状态的图标显示，时间和日期是需要联网才能进行动态的切换。这就是我们桌面的整体部分。

接下来我们就来设计。

2- 桌面UI绘制

经过前面的介绍我们已经知道具体的架构。所以我们在这里不讲LVGL的基础。

这里的桌面UI绘制指的是创建一个桌面容器。

说点题外话，在LVGL中不管是标签、按钮、列表、菜单等基本上都是基于容器（也就是创建一个窗口）进行的。

首先我们需要撞见一个桌面窗口。

lv_obj_t *lv_desktop; // 声明一个指向 lv_obj_t 类型的指针变量 lv_desktop，用于表示桌面 UI 对象
void lv_desktop_dis(void)
{
  lv_desktop = lv_obj_create(lv_scr_act()); // 创建桌面对象
  lv_obj_set_size(lv_desktop, 240, 240); // 设置桌面大小
  lv_obj_set_style_border_color(lv_desktop, lv_color_make(0, 0, 0), LV_PART_MAIN | LV_STATE_DEFAULT); // 设置边框颜色
  lv_obj_set_style_bg_color(lv_desktop, lv_color_make(0, 0, 0), LV_PART_MAIN | LV_STATE_DEFAULT); // 设置背景颜色
  lv_obj_set_style_radius(lv_desktop, 0, LV_PART_MAIN); // 设置圆角半径
  lv_obj_set_scrollbar_mode(lv_desktop, LV_SCROLLBAR_MODE_OFF); // 关闭屏幕滚动条
  //
}

上面的代码是创建一个活动窗口，窗口大小是240*240，边框和背景都是黑色同时关闭窗口滚动。

注意：创建活动窗口分为两种，一种是活动窗口，一种是非活动窗口。活动窗口是在LVGL提供的原有的lv_obj_create(NULL)上进行创建的，我们可以不关心这个就行，要知道的就是活动窗口LVGL默认是有一个白色的边框的，如果你的背景不是白色，比如你的背景是绿色黄色、那么就会有一个白色边框。

一种是直接使用

lv_desktop = lv_obj_create(NULL); // 创建桌面对象

这种的是表示没有父对象，他代表他是最顶层，也就是老祖宗。

3- 桌面分割线创建

因这两个分割线是一样的，所以我们写一个函数就行，我们把坐标提取出来（如果修改颜色可以把颜色也提取出来）。

我们在这里定义两个结构体：

typedefstruct{lv_coord_t x;lv_coord_t y;} lv_line_str;typedefstruct{lv_coord_t x;lv_coord_t y;} lv_lab_str;

#defineline_num2lv_obj_t*lv_desktop_line[line_num];// 桌面分割线显示

lv_line_str lv_line_pos[]={{0,50},{0,190},};

lv_lab_str lv_top_tip_pos[]={{0,0},{120,0},};

上面的代码分别是顶部和底部的坐标。

// 函数：desktop_line_dis// 功能：在给定的父对象上创建桌面线条voiddesktop_line_dis(lv_obj_t*parent){uint8_t index =0;// 初始化桌面线条数组
  lv_desktop_line[index]=NULL;for(index =0; index < line_num; index++){// 创建线条对象
    lv_desktop_line[index]=lv_line_create(parent);staticlv_point_t lv_desktop_line1[]={{0,0},{240,0},};// 设置线条的点lv_line_set_points(lv_desktop_line[index], lv_desktop_line1,2);// 设置线条的位置lv_obj_set_pos(lv_desktop_line[index], lv_line_pos[index].x, lv_line_pos[index].y);// 设置线条的大小lv_obj_set_size(lv_desktop_line[index],238,1);// 设置线条的宽度lv_obj_set_style_line_width(lv_desktop_line[index],2, LV_PART_MAIN | LV_STATE_DEFAULT);// 设置线条的颜色lv_obj_set_style_line_color(lv_desktop_line[index],lv_color_hex(0x3ea87e), LV_PART_MAIN | LV_STATE_DEFAULT);// 设置线条的不透明度lv_obj_set_style_line_opa(lv_desktop_line[index],255, LV_PART_MAIN | LV_STATE_DEFAULT);// 设置线条的圆角lv_obj_set_style_line_rounded(lv_desktop_line[index], true, LV_PART_MAIN | LV_STATE_DEFAULT);}// 更新布局lv_obj_update_layout(parent);}

上面的代码是对桌面上绘制两分割线的代码。要注意的是：坐标，明确坐标的位置。这点最重要，其他的比较次要。只有确定坐标了，才能做好其他的。

3.1 . 下载验证

编译下载到开发板上得到下面信息：

在这里插入图片描述

4- 顶部标签实现

我们这里使用的是标签来实现顶部显示的，当然大家也可以尝试使用其他的进行尝试。顶部标签显示在这里的主要作用是用来显示设备和WIFI状态的信息提示。这个实现非常简单。

4.1 代码实现

/**
 * @description:  显示顶部wifi提示信息
 * @return {*}
 */voiddesktop_lab_wifi_dis(void){
    device_lab_wifi_dis =lv_label_create(lv_desktop);// 创建wifi显示标签lv_label_set_recolor(device_lab_wifi_dis, true);// 开启颜色重定义lv_label_set_text_fmt(device_lab_wifi_dis,"WIFI: ");// 设置文字内容lv_label_set_long_mode(device_lab_wifi_dis, LV_LABEL_LONG_SCROLL_CIRCULAR);// 开启滚动模式lv_obj_set_pos(device_lab_wifi_dis,120,0);// 设置位置lv_obj_set_size(device_lab_wifi_dis,120,45);// 设置大小lv_obj_set_style_text_color(device_lab_wifi_dis,lv_color_hex(0x00e7ff), LV_PART_MAIN | LV_STATE_DEFAULT);// 设置文字颜色}/**
 * @description:  显示顶部设备信息
 * @return {*}
 */voiddesktop_lab_device_dis(void){
    device_lab_dr_dis =lv_label_create(lv_desktop);// 创建设备显示标签lv_label_set_recolor(device_lab_dr_dis, true);// 开启颜色重定义lv_label_set_text_fmt(device_lab_dr_dis,"Remote:\n ""001-Zone");// 设置文字内容lv_label_set_long_mode(device_lab_dr_dis, LV_LABEL_LONG_SCROLL_CIRCULAR);// 开启滚动模式lv_obj_set_pos(device_lab_dr_dis,0,0);// 设置位置lv_obj_set_size(device_lab_dr_dis,120,45);// 设置大小lv_obj_set_style_text_color(device_lab_dr_dis,lv_color_hex(0x00e7ff), LV_PART_MAIN | LV_STATE_DEFAULT);// 设置文字颜色}

上面的代码注释已经比较清晰。这里主要说明在项目中是否需要一些提示信息的说明。基本上所有的项目代码都需要功能实现获取提示的实现。没有显示屏设备的是通过蜂鸣器、LED灯等实现功能提示的，有显示设备的是通过屏幕、LED状态等实现的，具体如何实现，这要看项目中实际的功能需求。有的功能简单实现提示可能比较单一，功能复杂的可能需要多个状态提示去实现，比如说空调外机的中除霜功能的实现，除霜你需要满足温度、电磁阀、压机运行时间等综合起来实现的功能，提示信息的也可以通过屏幕信息去实现进入除霜状态、也可以通过LED灯提示进入除霜状态等。

5- 中间日期实现

日期实现呢也是比较简单的，只是所有功能里的一种方式。我们来看看具体是怎么实现的。首先我们这里并没有使用RTC功能实现时间的显示，我们是通过涂鸦WIFI模块连接到涂鸦平台来实现时间的获取的。对于我们这个项目来说，因要通过网络来进行时间更新实现，因此我们先实现一个基本的部件即可，后面我们在一步步时间所有的功能，

5.1 代码实现

/**
 * @description:  显示时间初始化
 * @param {void}
 * @return void
 */voidlv_time_Init(void){
    lv_time_data.year =2021;
    lv_time_data.month =10;
    lv_time_data.day =1;
    lv_time_data.hour =10;
    lv_time_data.minute =10;
    lv_time_data.second =10;
    lv_time_data.week = Mon;}// 函数：time_lab_dis// 功能：在桌面上创建并设置时间、日期和星期的标签voidtime_lab_dis(void){
    device_lab_wifi_dis =lv_label_create(lv_desktop);// 创建日期标签并设置文本格式
    lv_date_lab =lv_label_create(lv_desktop);// 创建日期标签// 设置日期标签的文本格式lv_label_set_text_fmt(lv_date_lab,"%04d-%02d-%02d", lv_time_data.year, lv_time_data.month, lv_time_data.day);lv_label_set_long_mode(lv_date_lab, LV_LABEL_LONG_WRAP);// 开启自动换行lv_obj_set_pos(lv_date_lab,50,106);// 设置位置lv_obj_set_size(lv_date_lab,135,28);// 设置大小// 设置日期标签的样式lv_obj_set_style_border_width(lv_date_lab,0, LV_PART_MAIN | LV_STATE_DEFAULT);// 设置边框宽度lv_obj_set_style_radius(lv_date_lab,0, LV_PART_MAIN | LV_STATE_DEFAULT);// 设置圆角半径lv_obj_set_style_text_color(lv_date_lab,lv_color_hex(0xffffff), LV_PART_MAIN | LV_STATE_DEFAULT);// 设置文字颜色lv_obj_set_style_text_opa(lv_date_lab,255, LV_PART_MAIN | LV_STATE_DEFAULT);// 设置文字不透明度lv_obj_set_style_text_letter_space(lv_date_lab,2, LV_PART_MAIN | LV_STATE_DEFAULT);// 设置文字间距lv_obj_set_style_text_line_space(lv_date_lab,0, LV_PART_MAIN | LV_STATE_DEFAULT);// 设置文字行距lv_obj_set_style_text_align(lv_date_lab, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN | LV_STATE_DEFAULT);// 设置文字对齐方式lv_obj_set_style_bg_opa(lv_date_lab,0, LV_PART_MAIN | LV_STATE_DEFAULT);// 设置背景不透明度lv_obj_set_style_pad_top(lv_date_lab,0, LV_PART_MAIN | LV_STATE_DEFAULT);// 设置上内边距lv_obj_set_style_pad_right(lv_date_lab,0, LV_PART_MAIN | LV_STATE_DEFAULT);// 设置右内边距lv_obj_set_style_pad_bottom(lv_date_lab,0, LV_PART_MAIN | LV_STATE_DEFAULT);// 设置下内边距lv_obj_set_style_pad_left(lv_date_lab,0, LV_PART_MAIN | LV_STATE_DEFAULT);// 设置左内边距lv_obj_set_style_shadow_width(lv_date_lab,0, LV_PART_MAIN | LV_STATE_DEFAULT);// 设置阴影宽度// 创建星期标签并设置文本格式// 设置星期标签的样式// 设置文字颜色
···········

    // 创建时间标签并设置文本格式
    lv_time_lab =lv_label_create(lv_desktop);lv_label_set_text_fmt(lv_time_lab,"%02d:%02d:%02d", lv_time_data.hour, lv_time_data.minute, lv_time_data.second);lv_label_set_long_mode(lv_time_lab, LV_LABEL_LONG_WRAP);lv_obj_set_pos(lv_time_lab,54,58);lv_obj_set_size(lv_time_lab,127,28);// 设置时间标签的样式
······························
}

代码过多这里就不全部粘贴了，具体的可以看相关的这部分代码。

上面的代码中1-15行是对日期的初始化显示，19-62行是对日期文本样式显示等进行绘制。

在这里说明一下，时间显示部分，当然也包括后面所有的部分，像字体、中英文等这种具体使用哪些。这个要看项目中有没有对字体的要求。如果没有这方面的要求。这就要根据实际的情况来看了，一般情况下都会有说明的。

6-下载验证

把这章节的代码下载到开发板里面：
在这里插入图片描述

标签： ui 开发语言 c语言

本文转载自: https://blog.csdn.net/qq_38575895/article/details/140622368
版权归原作者 南山府嵌入式 所有，如有侵权，请联系我们删除。

LVGL项目实战之桌面UI绘制

1 - 整体UI介绍

2- 桌面UI绘制

3- 桌面分割线创建

3.1 . 下载验证

4- 顶部标签实现

4.1 代码实现

5- 中间日期实现

5.1 代码实现

6-下载验证

发表评论

“LVGL项目实战之桌面UI绘制”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航