以下文章来源于：公_众_号开源电子网
读取更多技术文章，请扫码关注

关注公众号，后台回复：智能UI

（免费领取项目文件）
接下来，小编来讲解使用LVGL 8.2版本GUI图形库，制作智能家居灯光控制UI界面讲解，注意源码在本推文最后面。

智能家居UI–灯光控制

前期准备：

PC模拟器—LVGL模拟项目工程请在官方网址下载。
背景图片，在百度搜索自己喜欢的背景
图标下载：阿里巴巴图标矢量库(https://www.iconfont.cn/)
图片工具：博客(By 夏雨夜寐)制作的软件
字库生成软件：网友 【阿里】制作的(http://www.lfly.xyz/forum.php)

接下来，我们来制作灯光控制UI界面，如下图所示：

实现功能：

如果按下客厅灯时，左上角的LED显示红的以及“关“字符修改成”开“字符，再一次按下开关，那么LED显示灰色以及描述字符显示关闭。

界面整体布局：

从上述图可知：我们所需要img部件、tabview部件、LED部件、label部件即可完成。

图标图片制作：

打开Lvgl_image_convert_tool软件，如下图所示：

注意:其他图标也是一样，根据上图制作。

制作背景图片：

自行制作，这里不便演示。
制作字库字体：
打开软件LvglFontTool，如下图所示：
打开PC模拟器，编写代码：

1.声明字库和图片：

LV_IMG_DECLARE(light_contro_win)
LV_IMG_DECLARE(air_conditioning_control_win)
LV_IMG_DECLARE(curtain_control_wi)
LV_IMG_DECLARE(uase_win)
LV_IMG_DECLARE(music_win)

LV_IMG_DECLARE(lv_light_bg)
LV_FONT_DECLARE(myFont14)
LV_FONT_DECLARE(myFont18)
LV_FONT_DECLARE(myFont24)

typedef struct
{
    const void* app_image;
}app_image_info;


static const app_image_info app_image[] =
{
    {&light_contro_win},
    {&air_conditioning_control_win},
    {&curtain_control_wi},
    {&uase_win},
    {&music_win},
};
/* 获取路径的个数 */
#define image_mun (int)(sizeof(app_image)/sizeof(app_image[0]))

2.编写主界面函数：

/**
  * @brief  LVGL 入口
  * @param  无
  * @retval 无
  */
void lv_mainstart(void)
{
 /* 创建tabview部件 */
lv_tabview_win = lv_tabview_create(lv_scr_act(), LV_DIR_LEFT, 80);
/* 创建5个tab */
    lv_tabview_tab_light_win = lv_tabview_add_tab(lv_tabview_win, " ");
    lv_tabview_tab_air_win = lv_tabview_add_tab(lv_tabview_win, " ");
    lv_tabview_tab_win = lv_tabview_add_tab(lv_tabview_win, " ");
    lv_tabview_uase_win = lv_tabview_add_tab(lv_tabview_win, " ");
    lv_tabview_music_win = lv_tabview_add_tab(lv_tabview_win, " ");

/* 获取5个tab的父类就是矩阵部件 */
lv_obj_t* tab_btns = lv_tabview_get_tab_btns(lv_tabview_win);
/*矩阵部件设置颜色 */
lv_obj_set_style_bg_color(tab_btns, 
lv_color_make(59, 57, 71), LV_STATE_DEFAULT);
	/* 矩阵部件回调函数 */
lv_obj_add_event_cb(tab_btns, lv_tab_btns_event_cb, LV_EVENT_ALL, NULL);
/* 灯光控制界面 */
    lv_light_win(lv_tabview_tab_light_contro_win);
}

3.绘画左边的图标，如下图所示：

static void lv_tab_btns_event_cb(lv_event_t* e)
{
        lv_event_code_t code = lv_event_get_code(e);
        lv_obj_t* obj = lv_event_get_target(e);

        if (code == LV_EVENT_DRAW_PART_BEGIN) {
            lv_obj_draw_part_dsc_t* dsc = lv_event_get_param(e);

            if (dsc->id >= 0)
            {
                dsc->rect_dsc->radius = 0;
                dsc->rect_dsc->border_color = lv_color_make(0, 0, 0);
                dsc->rect_dsc->border_width = 1;
                dsc->rect_dsc->bg_img_recolor_opa = 255;
                dsc->rect_dsc->bg_img_recolor = lv_color_make(255, 255, 255);
            }
            if (dsc->id == 0)
            {
                dsc->rect_dsc->radius = 0;
                dsc->rect_dsc->border_color = lv_color_make(0, 0, 0);
                dsc->rect_dsc->border_width = 1;
                dsc->rect_dsc->bg_img_recolor_opa = 255;
                dsc->rect_dsc->bg_img_recolor = lv_color_make(255, 255, 255);
                lv_img_header_t header;
                lv_res_t res = lv_img_decoder_get_info
(app_image[0].app_image, &header);
                if (res != LV_RES_OK) return;

                lv_area_t a;
                a.x1 = dsc->draw_area->x1 + 
(lv_area_get_width(dsc->draw_area) - header.w) / 2;
                a.x2 = a.x1 + header.w - 1;
                a.y1 = dsc->draw_area->y1 + 
(lv_area_get_height(dsc->draw_area) - header.h) / 2;
                a.y2 = a.y1 + header.h - 1;

                lv_draw_img_dsc_t img_draw_dsc;
                lv_draw_img_dsc_init(&img_draw_dsc);
                img_draw_dsc.recolor = lv_color_white();
                img_draw_dsc.recolor_opa = 255;


                if (lv_btnmatrix_get_selected_btn(obj) == dsc->id)
                                   img_draw_dsc.recolor_opa = LV_OPA_30;

                lv_draw_img(dsc->draw_ctx, &img_draw_dsc, &a,
                              app_image[0].app_image);

            }
}

4.编写灯光控制界面：
由于代码幅度篇长，请在下面的网址下载相关的代码。
5.实现相关功能：

/**
  * @brief  计算前导置零
  * @param  无
  * @retval 无
  */
int lv_clz(unsigned int  app_readly_list[])
{
    int bit = 0;

    for (int i = 0; i < 32; i++)
    {
        if (app_readly_list[i] == 1)
        {
            break;
        }

        bit++;
    }

    return bit;
}

/* light_app就绪表 */
unsigned int  light_app_readly_list[32];
/* light_app触发位 */
int lv_light_trigger_bit = 0;
/* light_app状态表 */
int light_app[lv_light_info_mun] = {0,0,0,0,0,0,0,0};
/**
  * @brief  APP按键回调函数
  * @param  obj  :对象
  * @param  event:事件
  * @retval 无
  */
static void lv_light_control_event_handler(lv_event_t* event)
{
    lv_event_code_t code = lv_event_get_code(event);
    lv_obj_t* obj = lv_event_get_target(event);

    if (code == LV_EVENT_CLICKED)
    {
        for (int i = 0; i < lv_light_info_mun; i++)
        {
            if (obj == lv_light_app_t[i])
            {
/* app就绪表位置1 */
                light_app_readly_list[i] = 1;                                               
            }
        }
/* 计算前导指令 */
        lv_light_trigger_bit = 
((unsigned int)lv_clz((light_app_readly_list)));             
        light_app[lv_light_trigger_bit] ++;
/* 该位清零就绪表 */
        light_app_readly_list[lv_light_trigger_bit] = 0; 
/* 根据该位做相应的函数 */                                   
        switch (lv_light_trigger_bit)                                                       
        {
            case 1:
            case 2:
            case 3:
            case 4:
            case 5:
            case 6:
            case 7:
            case 8:
                if (light_app[lv_light_trigger_bit] == 2)
                {
                    /* 篇幅长省略 */
                }
                else
                {
                    /* 篇幅长省略 */
                }
                break;
            default:
                break;
        }
    }
}