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- 桌面分割线创建

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

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

typedef struct
{
  lv_coord_t x;
  lv_coord_t y;
} lv_line_str;

typedef struct
{
  lv_coord_t x;
  lv_coord_t y;
} lv_lab_str;

#define line_num 2

lv_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
// 功能：在给定的父对象上创建桌面线条
void desktop_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);
    static lv_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 {*}
 */
void desktop_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 {*}
 */
void desktop_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
 */
void lv_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
// 功能：在桌面上创建并设置时间、日期和星期的标签
void time_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-下载验证

把这章节的代码下载到开发板里面：