智能家居UI--空调控制/智能家居UI--空调控制

正点原子运营

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




智能家居UI--空调控制

接下来，小编来讲解使用LVGL8.2版本GUI图形库，制作智能家居空调控制UI界面讲解，注意：源码请在公众号获取。

前期准备：

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

n  背景图片，在百度搜索自己喜欢的背景

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

n  图片工具：博客(By 夏雨夜寐)制作的软件

n  字库生成软件：网友【阿里】制作的(http://www.lfly.xyz/forum.php)

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

       实现功能：

       选择空调模式，例如干燥、静音、制冷等等模式，注意：只能选择一个模式。

       界面整体布局：

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

       图标图片制作：

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

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

       制作背景图片：

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

       制作字库字体：

       注意：字库制作请看智能家居UI—灯光控制推文。

       打开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_air_conditioning_win(lv_tabview_tab_air_conditioning_control_win);

}

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

注意：上图的图标如何制作，大家可以看智能家居UI—灯光控制推文。

4.     编写空调控制界面：

1. char* lv_air_btn_name[6] = { "干燥","静音","制冷","健康","节能","制热"};
   
2. 
   
3. lv_obj_t* lv_air_btn[6];
   
4. 
   
5. lv_obj_t* lv_air_btn_label[6];
   
6. 
   
7. 
   
8. 
   
9. #define lv_object_number                          6
   
10. 
    
11. #define lv_air_btn_w                               150
    
12. 
    
13. #define lv_air_btn_h                               70
    
14. 
    
15. #define lv_air_btn_number_of_rows               3
    
16. 
    
17. #define lv_air_btn_object_clearance             15
    
18. 
    
19. #define lv_air_btn_Top_and_bottom_clearance    15
    
20. 
    
21. 
    
22. 
    
23. /* air_app就绪表 */
    
24. 
    
25. unsigned int  air_app_readly_list[32];
    
26. 
    
27. /* air_app触发位 */
    
28. 
    
29. int lv_air_trigger_bit = 0;
    
30. 
    
31. /* air_app状态表 */
    
32. 
    
33. int air_app[lv_object_number] = { 0,0,0,0,0,0 };
    
34. 
    
35. 
    
36. 
    
37. void lv_air_conditioning_win(lv_obj_t* parent)
    
38. 
    
39. {
    
40. 
    
41.     int lv_index = 0;
    
42. 
    
43. 
    
44. 
    
45.     lv_obj_clear_flag(parent, LV_OBJ_FLAG_SCROLLABLE);
    
46. 
    
47. 
    
48. 
    
49.     lv_obj_t* lv_air_image_bg = lv_img_create(parent);
    
50. 
    
51.     lv_img_set_src(lv_air_image_bg, &lv_light_bg);
    
52. 
    
53.     lv_obj_center(lv_air_image_bg);
    
54. 
    
55. 
    
56. 
    
57.     lv_obj_t* lv_air_t = lv_img_create(parent);
    
58. 
    
59.     lv_img_set_src(lv_air_t, &air_conditioning_control_win);
    
60. 
    
61.     lv_obj_align(lv_air_t, LV_ALIGN_TOP_LEFT, 0, 0);
    
62. 
    
63.     lv_obj_set_style_img_recolor_opa(lv_air_t, 255, LV_PART_MAIN);
    
64. 
    
65.    
    
66. 
    
67. /* 代码篇幅过长，请在公众号获取源码 */
    
68. 
    
69. 
    
70. 
    
71.     lv_index++;
    
72. 
    
73. 
    
74. 
    
75.     for (lv_index = 1; lv_index < 6; lv_index++)
    
76. 
    
77.     {
    
78. 
    
79.         /* 代码篇幅过长，请在公众号获取源码 */
    
80. 
    
81.     }
    
82. 
    
83. }
    
84. 
    

复制代码

上述源码：主要设置空调控制的主界面以及设置各个控件的样式属性和回调函数。

5.     实现相关功能：

1. /**
   
2. 
   
3.   * @brief  APP按键回调函数
   
4. 
   
5.   * @param  obj  :对象
   
6. 
   
7.   * @param  event:事件
   
8. 
   
9.   * @retval 无
   
10. 
    
11.   */
    
12. 
    
13. static void lv_air_control_event_handler(lv_event_t* event)
    
14. 
    
15. {
    
16. 
    
17.     lv_event_code_t code = lv_event_get_code(event);
    
18. 
    
19.     lv_obj_t* obj = lv_event_get_target(event);
    
20. 
    
21. 
    
22. 
    
23.     if (code == LV_EVENT_CLICKED)
    
24. 
    
25.     {
    
26. 
    
27.         for (int i = 0; i < lv_object_number; i++)
    
28. 
    
29.         {
    
30. 
    
31.             if (obj == lv_air_btn[i])
    
32. 
    
33.             {
    
34. 
    
35.                 air_app_readly_list[i] = 1; /* app就绪表位置1 */                                            
    
36. 
    
37.             }
    
38. 
    
39.         }
    
40. 
    
41. /* 计算前导指令 */
    
42. 
    
43.         lv_air_trigger_bit = ((unsigned int)lv_clz((air_app_readly_list)));            
    
44. 
    
45.         air_app[lv_air_trigger_bit] ++;
    
46. 
    
47. /* 该位清零就绪表 */
    
48. 
    
49.         air_app_readly_list[lv_air_trigger_bit] = 0;                                   
    
50. 
    
51. /* 根据该位做相应的函数 */
    
52. 
    
53.         switch (lv_air_trigger_bit)                                                   
    
54. 
    
55.         {
    
56. 
    
57.             case 0:
    
58. 
    
59.             case 1:
    
60. 
    
61.             case 2:
    
62. 
    
63.             case 3:
    
64. 
    
65.             case 4:
    
66. 
    
67.             case 5:
    
68. 
    
69.             case 6:
    
70. 
    
71.                 for (int i = 0; i < lv_object_number; i++)
    
72. 
    
73.                 {
    
74. 
    
75.                     if (obj == lv_air_btn[i])
    
76. 
    
77.                     {
    
78. 
    
79.                         lv_obj_set_style_bg_color(lv_air_btn[i],
    
80. 
    
81.                                                    lv_palette_main(LV_PALETTE_BLUE),
    
82. 
    
83.                                                    LV_STATE_DEFAULT);
    
84. 
    
85.                     }
    
86. 
    
87.                     else
    
88. 
    
89.                     {
    
90. 
    
91.                         lv_obj_set_style_bg_color(lv_air_btn[i],
    
92. 
    
93.                                                    lv_palette_main(LV_PALETTE_GREY),
    
94. 
    
95.                                                    LV_STATE_DEFAULT);
    
96. 
    
97.                     }
    
98. 
    
99.                 }
    
100. 
     
101.                 break;
     
102. 
     
103.             default:
     
104. 
     
105.                 break;
     
106. 
     
107.         }
     
108. 
     
109.     }
     
110. 
     
111. }

复制代码

       上述回调函数主要作用是：判断那个按键按下，然后填充背景颜色以及其他按键按下时，会把上一个状态翻转。

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

橘子汁真好喝

感谢分享

passby

点赞，码一下

lwd001

好例程

lwd001

很好，不错的源码