今日头条/西瓜视频/抖音短视频 同名：正点原子原子哥感谢各位的关注和支持，你们的支持是原子哥无限前进的动力。
智能家居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.编写主界面函数：voidlv_mainstart(void){lv_tabview_win=lv_tabview_create(lv_scr_act(),LV_DIR_LEFT,80);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,"");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.实现相关功能：intlv_clz(unsignedint app_readly_list[]){intbit =0;for(inti =0;i<32;i++){if(app_readly_list[i]==1){break;}bit++;}returnbit;}unsignedint light_app_readly_list[32];intlv_light_trigger_bit =0;intlight_app[lv_light_info_mun]={0,0,0,0,0,0,0,0};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]){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所示：