智能家居UI-灯光控制 (amobbs.com 阿莫电子技术论坛) -

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

智能家居UI--灯光控制

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

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

智能家居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))

 02.编写主界面函数：

/**

*@briefLVGL 入口

*@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.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.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;
/*light_app触发位*/
intlv_light_trigger_bit =0;
/*light_app状态表*/
intlight_app={0,0,0,0,0,0,0,0};
/**

*@briefAPP按键回调函数

*@paramobj:对象

*@paramevent:事件

*@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++;
/*该位清零就绪表*/
light_app_readly_list=0;
/*根据该位做相应的函数*/
switch(lv_light_trigger_bit)

{

case1:

case2:

case3:

case4:

case5:

case6:

case7:

case8:

if(light_app==2)

{
/*篇幅长省略*/
}

else

{
/*篇幅长省略*/

}

break;

default:

break;

}

}

}

页: [1]

amobbs.com 阿莫电子技术论坛's Archiver

智能家居UI--灯光控制