智能家居UI--灯光控制

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

关注公众号，后台回复：智能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