智能家居UI--空调控制

正点原子

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

智能家居UI--空调控制

       上一章我们讲了智能家居UI--灯光控制，今天小编来讲解使用LVGL8.2版本GUI图形库，制作智能家居空调控制UI界面讲解        注意：源码在【公众号免费获取】

前期准备

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

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

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

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

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

工程文件获取
       关注公众号，回复“空调UI”免费获取项目文件

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

      

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

2. 界面整体布局
        

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

3. 图标图片制作
      打开Lvgl_image_convert_tool软件，如下图所示：

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

4. 制作背景图片
     自行制作，这里不便演示。

5. 制作字库字体
      打开软件LvglFontTool，如下图所示：

        

6. 打开PC模拟器，编写代码
      01.声明字库和图片：

1. <font size="2">LV_IMG_DECLARE(light_contro_win)
   
2. LV_IMG_DECLARE(air_conditioning_control_win)
   
3. LV_IMG_DECLARE(curtain_control_wi)
   
4. LV_IMG_DECLARE(uase_win)
   
5. LV_IMG_DECLARE(music_win)
   
6. 
   
7. LV_IMG_DECLARE(lv_light_bg)
   
8. LV_FONT_DECLARE(myFont14)
   
9. LV_FONT_DECLARE(myFont18)
   
10. LV_FONT_DECLARE(myFont24)
    
11. 
    
12. typedef struct
    
13. {
    
14.     const void* app_image;
    
15. }app_image_info;
    
16. 
    
17. 
    
18. static const app_image_info app_image[] =
    
19. {
    
20.     {&light_contro_win},
    
21.     {&air_conditioning_control_win},
    
22.     {&curtain_control_wi},
    
23.     {&uase_win},
    
24.     {&music_win},
    
25. };
    
26. /* 获取路径的个数 */
    
27. #define image_mun (int)(sizeof(app_image)/sizeof(app_image[0]))</font>

复制代码

       02.编写主界面函数：

1. <font size="2">/**
   
2.   * @brief  LVGL 入口
   
3.   * @param  无
   
4.   * @retval 无
   
5.   */
   
6. void lv_mainstart(void)
   
7. {
   
8. /* 创建tabview部件 */
   
9. lv_tabview_win = lv_tabview_create(lv_scr_act(), LV_DIR_LEFT, 80);
   
10. /* 创建5个tab */
    
11.     lv_tabview_tab_light_win = lv_tabview_add_tab(lv_tabview_win, " ");
    
12.     lv_tabview_tab_air_win = lv_tabview_add_tab(lv_tabview_win, " ");
    
13.     lv_tabview_tab_win = lv_tabview_add_tab(lv_tabview_win, " ");
    
14.     lv_tabview_uase_win = lv_tabview_add_tab(lv_tabview_win, " ");
    
15.     lv_tabview_music_win = lv_tabview_add_tab(lv_tabview_win, " ");
    
16. 
    
17. /* 获取5个tab的父类就是矩阵部件 */
    
18. lv_obj_t* tab_btns = lv_tabview_get_tab_btns(lv_tabview_win);
    
19. /*矩阵部件设置颜色 */
    
20. lv_obj_set_style_bg_color(tab_btns,
    
21. lv_color_make(59, 57, 71), LV_STATE_DEFAULT);
    
22.   /* 矩阵部件回调函数 */
    
23. lv_obj_add_event_cb(tab_btns, lv_tab_btns_event_cb, LV_EVENT_ALL, NULL);
    
24. /* 空调控制界面 */
    
25. lv_air_conditioning_win(lv_tabview_tab_air_conditioning_control_win);
    
26. }</font>

复制代码

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

           

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

        04.编写空调控制界面：

1. <font size="2">char* lv_air_btn_name[6] = { "干燥","静音","制冷","健康","节能","制热"};
   
2. lv_obj_t* lv_air_btn[6];
   
3. lv_obj_t* lv_air_btn_label[6];
   
4. 
   
5. #define lv_object_number                        6
   
6. #define lv_air_btn_w                            150
   
7. #define lv_air_btn_h                            70
   
8. #define lv_air_btn_number_of_rows               3
   
9. #define lv_air_btn_object_clearance             15
   
10. #define lv_air_btn_Top_and_bottom_clearance   15
    
11. 
    
12. /* air_app就绪表 */
    
13. unsigned int  air_app_readly_list[32];
    
14. /* air_app触发位 */
    
15. int lv_air_trigger_bit = 0;
    
16. /* air_app状态表 */
    
17. int air_app[lv_object_number] = { 0,0,0,0,0,0 };
    
18. 
    
19. void lv_air_conditioning_win(lv_obj_t* parent)
    
20. {
    
21.     int lv_index = 0;
    
22. 
    
23.     lv_obj_clear_flag(parent, LV_OBJ_FLAG_SCROLLABLE);
    
24. 
    
25.     lv_obj_t* lv_air_image_bg = lv_img_create(parent);
    
26.     lv_img_set_src(lv_air_image_bg, &lv_light_bg);
    
27.     lv_obj_center(lv_air_image_bg);
    
28. 
    
29.     lv_obj_t* lv_air_t = lv_img_create(parent);
    
30.     lv_img_set_src(lv_air_t, &air_conditioning_control_win);
    
31.     lv_obj_align(lv_air_t, LV_ALIGN_TOP_LEFT, 0, 0);
    
32.     lv_obj_set_style_img_recolor_opa(lv_air_t, 255, LV_PART_MAIN);
    
33.    
    
34. /* 代码篇幅过长，请在公众号获取源码 */
    
35. 
    
36.     lv_index++;
    
37. 
    
38.     for (lv_index = 1; lv_index < 6; lv_index++)
    
39.     {
    
40.         /* 代码篇幅过长，请在公众号获取源码 */
    
41.     }
    
42. }</font>
    

复制代码

        05.实现相关功能：

1. <font size="2">/**
   
2.   * @brief  APP按键回调函数
   
3.   * @param  obj  :对象
   
4.   * @param  event:事件
   
5.   * @retval 无
   
6.   */
   
7. static void lv_air_control_event_handler(lv_event_t* event)
   
8. {
   
9.     lv_event_code_t code = lv_event_get_code(event);
   
10.     lv_obj_t* obj = lv_event_get_target(event);
    
11. 
    
12.     if (code == LV_EVENT_CLICKED)
    
13.     {
    
14.         for (int i = 0; i < lv_object_number; i++)
    
15.         {
    
16.             if (obj == lv_air_btn)
    
17.             {
    
18.                 air_app_readly_list = 1; /* app就绪表位置1 */                                             
    
19.             }
    
20.         }
    
21. /* 计算前导指令 */
    
22.         lv_air_trigger_bit = ((unsigned int)lv_clz((air_app_readly_list)));            
    
23.         air_app[lv_air_trigger_bit] ++;
    
24. /* 该位清零就绪表 */
    
25.         air_app_readly_list[lv_air_trigger_bit] = 0;                                    
    
26. /* 根据该位做相应的函数 */
    
27.         switch (lv_air_trigger_bit)                                                     
    
28.         {
    
29.             case 0:
    
30.             case 1:
    
31.             case 2:
    
32.             case 3:
    
33.             case 4:
    
34.             case 5:
    
35.             case 6:
    
36.                 for (int i = 0; i < lv_object_number; i++)
    
37.                 {
    
38.                     if (obj == lv_air_btn)
    
39.                     {
    
40.                         lv_obj_set_style_bg_color(lv_air_btn,
    
41.                                                    lv_palette_main(LV_PALETTE_BLUE),
    
42.                                                    LV_STATE_DEFAULT);
    
43.                     }
    
44.                     else
    
45.                     {
    
46.                         lv_obj_set_style_bg_color(lv_air_btn,
    
47.                                                    lv_palette_main(LV_PALETTE_GREY),
    
48.                                                    LV_STATE_DEFAULT);
    
49.                     }
    
50.                 }
    
51.                 break;
    
52.             default:
    
53.                 break;
    
54.         }
    
55.     }
    
56. }</font>

复制代码

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

liang_work

正在学习，标记一下

akey3000

不错，界面效果还可以

szxszx

跟着一起学习