搜索
bottom↓
回复: 3

智能家居UI--空调控制

[复制链接]

出0入234汤圆

发表于 2022-3-11 17:30:17 | 显示全部楼层 |阅读模式
以下文章来源于:公众号:开源电子网,读取更多技术文章,请扫码关注
讨论发帖图.png


智能家居UI--空调控制


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

前期准备


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

背景图片

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

图标下载

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

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

字库生成软件

       网友【阿里】制作(http://www.lfly.xyz/forum.php)

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

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


       1.png

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

2. 界面整体布局
         2.png

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

3. 图标图片制作

      打开Lvgl_image_convert_tool软件,如下图所示:

       3.png
          (注意:其他图标也是一样,根据上图制作。)

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

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

         4.png

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. LV_IMG_DECLARE(lv_light_bg)
  7. LV_FONT_DECLARE(myFont14)
  8. LV_FONT_DECLARE(myFont18)
  9. LV_FONT_DECLARE(myFont24)

  10. typedef struct
  11. {
  12.     const void* app_image;
  13. }app_image_info;


  14. static const app_image_info app_image[] =
  15. {
  16.     {&light_contro_win},
  17.     {&air_conditioning_control_win},
  18.     {&curtain_control_wi},
  19.     {&uase_win},
  20.     {&music_win},
  21. };
  22. /* 获取路径的个数 */
  23. #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. /* 获取5个tab的父类就是矩阵部件 */
  17. lv_obj_t* tab_btns = lv_tabview_get_tab_btns(lv_tabview_win);
  18. /*矩阵部件设置颜色 */
  19. lv_obj_set_style_bg_color(tab_btns,
  20. lv_color_make(59, 57, 71), LV_STATE_DEFAULT);
  21.   /* 矩阵部件回调函数 */
  22. lv_obj_add_event_cb(tab_btns, lv_tab_btns_event_cb, LV_EVENT_ALL, NULL);
  23. /* 空调控制界面 */
  24. lv_air_conditioning_win(lv_tabview_tab_air_conditioning_control_win);
  25. }</font>
复制代码


      03.绘画左边的图标,如下图所示:

            5.png

         注意:上图的图标如何制作,大家可以看智能家居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. #define lv_object_number                        6
  5. #define lv_air_btn_w                            150
  6. #define lv_air_btn_h                            70
  7. #define lv_air_btn_number_of_rows               3
  8. #define lv_air_btn_object_clearance             15
  9. #define lv_air_btn_Top_and_bottom_clearance   15

  10. /* air_app就绪表 */
  11. unsigned int  air_app_readly_list[32];
  12. /* air_app触发位 */
  13. int lv_air_trigger_bit = 0;
  14. /* air_app状态表 */
  15. int air_app[lv_object_number] = { 0,0,0,0,0,0 };

  16. void lv_air_conditioning_win(lv_obj_t* parent)
  17. {
  18.     int lv_index = 0;

  19.     lv_obj_clear_flag(parent, LV_OBJ_FLAG_SCROLLABLE);

  20.     lv_obj_t* lv_air_image_bg = lv_img_create(parent);
  21.     lv_img_set_src(lv_air_image_bg, &lv_light_bg);
  22.     lv_obj_center(lv_air_image_bg);

  23.     lv_obj_t* lv_air_t = lv_img_create(parent);
  24.     lv_img_set_src(lv_air_t, &air_conditioning_control_win);
  25.     lv_obj_align(lv_air_t, LV_ALIGN_TOP_LEFT, 0, 0);
  26.     lv_obj_set_style_img_recolor_opa(lv_air_t, 255, LV_PART_MAIN);
  27.    
  28. /* 代码篇幅过长,请在公众号获取源码 */

  29.     lv_index++;

  30.     for (lv_index = 1; lv_index < 6; lv_index++)
  31.     {
  32.         /* 代码篇幅过长,请在公众号获取源码 */
  33.     }
  34. }</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.     if (code == LV_EVENT_CLICKED)
  12.     {
  13.         for (int i = 0; i < lv_object_number; i++)
  14.         {
  15.             if (obj == lv_air_btn)
  16.             {
  17.                 air_app_readly_list = 1; /* app就绪表位置1 */                                             
  18.             }
  19.         }
  20. /* 计算前导指令 */
  21.         lv_air_trigger_bit = ((unsigned int)lv_clz((air_app_readly_list)));            
  22.         air_app[lv_air_trigger_bit] ++;
  23. /* 该位清零就绪表 */
  24.         air_app_readly_list[lv_air_trigger_bit] = 0;                                    
  25. /* 根据该位做相应的函数 */
  26.         switch (lv_air_trigger_bit)                                                     
  27.         {
  28.             case 0:
  29.             case 1:
  30.             case 2:
  31.             case 3:
  32.             case 4:
  33.             case 5:
  34.             case 6:
  35.                 for (int i = 0; i < lv_object_number; i++)
  36.                 {
  37.                     if (obj == lv_air_btn)
  38.                     {
  39.                         lv_obj_set_style_bg_color(lv_air_btn,
  40.                                                    lv_palette_main(LV_PALETTE_BLUE),
  41.                                                    LV_STATE_DEFAULT);
  42.                     }
  43.                     else
  44.                     {
  45.                         lv_obj_set_style_bg_color(lv_air_btn,
  46.                                                    lv_palette_main(LV_PALETTE_GREY),
  47.                                                    LV_STATE_DEFAULT);
  48.                     }
  49.                 }
  50.                 break;
  51.             default:
  52.                 break;
  53.         }
  54.     }
  55. }</font>
复制代码
        上述回调函数主要作用是:判断那个按键按下,然后填充背景颜色以及其他按键按下时,会把上一个状态翻转。

出0入0汤圆

发表于 2022-3-11 20:18:48 | 显示全部楼层
正在学习,标记一下

出0入85汤圆

发表于 2022-3-11 20:26:19 来自手机 | 显示全部楼层
不错,界面效果还可以

出10入10汤圆

发表于 2022-3-12 07:14:52 | 显示全部楼层
跟着一起学习
回帖提示: 反政府言论将被立即封锁ID 在按“提交”前,请自问一下:我这样表达会给举报吗,会给自己惹麻烦吗? 另外:尽量不要使用Mark、顶等没有意义的回复。不得大量使用大字体和彩色字。
您需要登录后才可以回帖 登录 | 注册

本版积分规则

手机版|Archiver|amobbs.com 阿莫电子论坛 ( 公安交互式论坛备案:44190002001997 粤ICP备09047143号 )

GMT+8, 2022-8-14 04:54

© Since 2004 www.amobbs.com, 原www.ourdev.cn, 原www.ouravr.com

快速回复 返回顶部 返回列表