智能家居UI--灯光控制

正点原子 · 发表于 2022-3-7 16:57:19

本帖最后由正点原子于 2022-3-7 16:57 编辑

以下文章来源于：公众号：开源电子网，读取更多技术文章，请扫码关注
讨论发帖图.png

智能家居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==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)
{
/*app就绪表位置1*/
light_app_readly_list=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;
}
}
}

复制代码

智能家居UI--灯光控制

阿莫论坛20周年了！感谢大家的支持与爱护！！

相关帖子