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

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

智能家居UI--灯光控制相关推荐

玩转树莓派 —智能家居（语音控制电器开关及语音模块的二次开发）
本文内容为玩转树莓派 -智能家居(语音控制电器开关及语音模块的二次开发) 1.语音模块本人使用的是ld3320二代语音识别开发板通过和电脑连接的是ttl转接口连接的时候大家注意l连接方式 2 ...
智能车灯台灯灯光控制智能台灯控制系统的设计，主要内容为就是当台灯检测到有人来它就亮起，没人的话它就灭掉
智能车灯台灯灯光控制智能台灯控制系统的设计,主要内容为就是当台灯检测到有人来它就亮起,没人的话它就灭掉,灯光的强度会随着外界光强自动变化. 而且,有久坐提醒功能显示. 硬件部分主要有控制器.光照强度 ...
智能家居系列——灯光篇
一灯,一世界, 明暗自如,随心所变, 或冷艳高贵,或绚丽如春, LivingLab智能灯光, 轻轻一点,温暖你的生活, 智能照明,幻彩你的生活. 回家时,一键点亮预设灯光, 家就是温暖的港湾就餐时, ...
毕业设计——基于STM32的智能窗户系统(物联网、智能家居、APP控制、APP显示温湿度等信息、自动工作模式)
本工程包括一下功能:1.远程控制工作功能:手机端app远程控制窗户开关(手机app自主开发) 2.自动监测工作功能:自动监测天气,并控制窗户开关 3.远程监测数据功能:温度.可燃气体浓度及各种状态在手 ...
ChatGPT直出1.5w字论文查重率才30% - 基于物联网技术的智能家居控制系统设计与实现
文章目录 ChatGPT直出1.5w字论文查重率才30% - 基于物联网技术的智能家居控制系统设计与实现一.绪论 1.1 研究背景与意义 1.2 国内外研究现状分析 1.3 研究内容与目标 1.4 ...
智能家居语音控制及人脸识别报告设计（树莓派）
智能家居语音控制及人脸识别目录摘要................................................................................. ...
WIFI、蓝牙、射频、Zigbee 浅谈智能家居的几种控制协议
对于普通使用智能家居的用户来说,智能家居是如何控制的不需要了解太多,需要知道的就是这个家电是否可以控制.那个家电是否可以控制.但是对于做智能家居产品的人来说,不得不面对这个问题. 简单而言,控制其实就 ...
智能家居控制模拟套件
智能家居控制模拟套件针对有编程基础的学生开发的一套蓝牙局域网控制模拟套件.版本号[1.0] 下一版本将更新WiFi远程控制系统. 郑州三松信息技术有限公司出品. 电路图如下: 1.可实现的功能: 1 ...
智能家居的几种控制协议
对于普通使用智能家居的用户来说,智能家居是如何控制的不需要了解太多,需要知道的就是这个家电是否可以控制.那个家电是否可以控制.但是对于做智能家居产品的人来说,不得不面对这个问题. 简单而言,控制其实就 ...

智能家居UI--灯光控制