智能家居UI--灯光控制

今日头条/西瓜视频/抖音短视频 同名：正点原子原子哥

感谢各位的关注和支持，你们的支持是原子哥无限前进的动力。

智能家居UI--灯光控制

今天小编来讲解使用LVGL8.2版本GUI图形库，制作智能家居灯光控制UI界面讲解，文件源码在下方“开源电子网”公众号免费获取。

前期准备

PC模拟器

LVGL模拟项目工程请在官方网址下载。

背景图片

在百度搜索自己喜欢的背景

图标下载

阿里巴巴图标矢量库(https://www.iconfont.cn/)

图片工具

博客(By 夏雨夜寐)制作的软件

字库生成软件

网友【阿里】制作(http://www.lfly.xyz/forum.php)

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

（文末有动态图演示）

1.实现功能

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

2.界面整体布局

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

3.图标图片制作

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

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

4.制作背景图片

自行制作，这里不便演示。

5.制作字库字体

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

6.打开PC模拟器，编写代码

01.声明字库和图片：

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]))

02.编写主界面函数：

/***@brief  LVGL 入口*@param  无*@retval 无*/voidlv_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);}

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

staticvoidlv_tab_btns_event_cb(lv_event_t*e){lv_event_code_tcode =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_theader;lv_res_tres =lv_img_decoder_get_info(app_image[0].app_image,&header);if(res!=LV_RES_OK)return;lv_area_ta;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_timg_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);}}

03.编写灯光控制界面：

由于代码幅度篇长，请在公众号获取下载相关的代码。

04.实现相关功能：

/***@brief  计算前导置零*@param  无*@retval 无*/intlv_clz(unsignedint app_readly_list[]){intbit =0;for(inti =0;i<32;i++){if(app_readly_list[i]==1){break;}bit++;}returnbit;}/*light_app就绪表*/unsignedint light_app_readly_list[32];/*light_app触发位*/intlv_light_trigger_bit =0;/*light_app状态表*/intlight_app[lv_light_info_mun]={0,0,0,0,0,0,0,0};/***@brief  APP按键回调函数*@param  obj  :对象*@param  event:事件*@retval 无*/staticvoidlv_light_control_event_handler(lv_event_t*event){lv_event_code_tcode =lv_event_get_code(event);lv_obj_t*obj =lv_event_get_target(event);if(code==LV_EVENT_CLICKED){for(inti =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=((unsignedint)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){case1:case2:case3:case4:case5:case6:case7:case8:if(light_app[lv_light_trigger_bit]==2){/*篇幅长省略*/}else{/*篇幅长省略*/}break;default:break;}}}

最后，PC模拟器模拟，如以下GIF所示：