搜索
bottom↓
回复: 0

智能家居UI--灯光控制

[复制链接]

出0入234汤圆

发表于 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.png


                        (文末有动态图演示)

1. 实现功能

         如果按下客厅灯时,左上角的LED显示红的以及“关“字符修改成”开“字符,再一次按下开关,那么LED显示灰色以及描述字符显示关闭。


2. 界面整体布局


               2.jpg


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


3. 图标图片制作

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


                3.jpg


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


4. 制作背景图片

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


5. 制作字库字体

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


            4.jpg


6. 打开PC模拟器,编写代码

        01.声明字库和图片:

  1. <font size="4">LV_IMG_DECLARE(light_contro_win)</font>
  2. <font size="4">LV_IMG_DECLARE(air_conditioning_control_win)</font>
  3. <font size="4">LV_IMG_DECLARE(curtain_control_wi)</font>
  4. <font size="4">LV_IMG_DECLARE(uase_win)</font>
  5. <font size="4">LV_IMG_DECLARE(music_win)</font>

  6. <font size="4">LV_IMG_DECLARE(lv_light_bg)</font>
  7. <font size="4">LV_FONT_DECLARE(myFont14)</font>
  8. <font size="4">LV_FONT_DECLARE(myFont18)</font>
  9. <font size="4">LV_FONT_DECLARE(myFont24)</font>

  10. <font size="4">typedef struct</font>
  11. <font size="4">{</font>
  12. <font size="4">    const void* app_image;</font>
  13. <font size="4">}app_image_info;</font>


  14. <font size="4">static const app_image_info app_image[] =</font>
  15. <font size="4">{</font>
  16. <font size="4">    {&light_contro_win},</font>
  17. <font size="4">    {&air_conditioning_control_win},</font>
  18. <font size="4">    {&curtain_control_wi},</font>
  19. <font size="4">    {&uase_win},</font>
  20. <font size="4">    {&music_win},</font>
  21. <font size="4">};</font>
  22. <font size="4">/* 获取路径的个数 */</font>
  23. <font size="4">#define image_mun (int)(sizeof(app_image)/sizeof(app_image[0]))</font>
复制代码



       02.编写主界面函数:

  1. <font size="4">/**</font>

  2. <font size="4">*@brief  LVGL 入口</font>

  3. <font size="4">*@param  无</font>

  4. <font size="4">*@retval 无</font>

  5. <font size="4">*/</font>

  6. <font size="4">voidlv_mainstart(void)</font>

  7. <font size="4">{</font>

  8. <font size="4">/*创建tabview部件*/</font>

  9. <font size="4">lv_tabview_win=lv_tabview_create(lv_scr_act(),LV_DIR_LEFT,80);</font>

  10. <font size="4">/*创建5个tab*/</font>

  11. <font size="4">lv_tabview_tab_light_win=lv_tabview_add_tab(lv_tabview_win,"");</font>

  12. <font size="4">lv_tabview_tab_air_win=lv_tabview_add_tab(lv_tabview_win,"");</font>

  13. <font size="4">lv_tabview_tab_win=lv_tabview_add_tab(lv_tabview_win,"");</font>

  14. <font size="4">lv_tabview_uase_win=lv_tabview_add_tab(lv_tabview_win,"");</font>

  15. <font size="4">lv_tabview_music_win=lv_tabview_add_tab(lv_tabview_win,"");</font>

  16. <font size="4">/*获取5个tab的父类就是矩阵部件*/</font>

  17. <font size="4">lv_obj_t*tab_btns =lv_tabview_get_tab_btns(lv_tabview_win);</font>

  18. <font size="4">/*矩阵部件设置颜色*/</font>

  19. <font size="4">lv_obj_set_style_bg_color(tab_btns,</font>

  20. <font size="4">lv_color_make(59,57,71),LV_STATE_DEFAULT);</font>

  21. <font size="4">/*矩阵部件回调函数*/</font>

  22. <font size="4">lv_obj_add_event_cb(tab_btns,lv_tab_btns_event_cb,LV_EVENT_ALL,NULL);</font>

  23. <font size="4">/*灯光控制界面*/</font>

  24. <font size="4">lv_light_win(lv_tabview_tab_light_contro_win);</font>

  25. <font size="4">}</font>
复制代码

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


             5.jpg


  1. <font size="4">staticvoidlv_tab_btns_event_cb(lv_event_t*e)</font>

  2. <font size="4">{</font>

  3. <font size="4">lv_event_code_tcode =lv_event_get_code(e);</font>

  4. <font size="4">lv_obj_t*obj =lv_event_get_target(e);</font>

  5. <font size="4">if(code==LV_EVENT_DRAW_PART_BEGIN){</font>

  6. <font size="4">lv_obj_draw_part_dsc_t*dsc =lv_event_get_param(e);</font>

  7. <font size="4">if(dsc->id>=0)</font>

  8. <font size="4">{</font>

  9. <font size="4">dsc->rect_dsc->radius=0;</font>

  10. <font size="4">dsc->rect_dsc->border_color=lv_color_make(0,0,0);</font>

  11. <font size="4">dsc->rect_dsc->border_width=1;</font>

  12. <font size="4">dsc->rect_dsc->bg_img_recolor_opa=255;</font>

  13. <font size="4">dsc->rect_dsc->bg_img_recolor=lv_color_make(255,255,255);</font>

  14. <font size="4">}</font>

  15. <font size="4">if(dsc->id==0)</font>

  16. <font size="4">{</font>

  17. <font size="4">dsc->rect_dsc->radius=0;</font>

  18. <font size="4">dsc->rect_dsc->border_color=lv_color_make(0,0,0);</font>

  19. <font size="4">dsc->rect_dsc->border_width=1;</font>

  20. <font size="4">dsc->rect_dsc->bg_img_recolor_opa=255;</font>

  21. <font size="4">dsc->rect_dsc->bg_img_recolor=lv_color_make(255,255,255);</font>

  22. <font size="4">lv_img_header_theader;</font>

  23. <font size="4">lv_res_tres =lv_img_decoder_get_info</font>

  24. <font size="4">(app_image[0].app_image,&header);</font>

  25. <font size="4">if(res!=LV_RES_OK)return;</font>

  26. <font size="4">lv_area_ta;</font>

  27. <font size="4">a.x1=dsc->draw_area->x1+</font>

  28. <font size="4">(lv_area_get_width(dsc->draw_area)-header.w)/2;</font>

  29. <font size="4">a.x2=a.x1+header.w-1;</font>

  30. <font size="4">a.y1=dsc->draw_area->y1+</font>

  31. <font size="4">(lv_area_get_height(dsc->draw_area)-header.h)/2;</font>

  32. <font size="4">a.y2=a.y1+header.h-1;</font>

  33. <font size="4">lv_draw_img_dsc_timg_draw_dsc;</font>

  34. <font size="4">lv_draw_img_dsc_init(&img_draw_dsc);</font>

  35. <font size="4">img_draw_dsc.recolor=lv_color_white();</font>

  36. <font size="4">img_draw_dsc.recolor_opa=255;</font>

  37. <font size="4">if(lv_btnmatrix_get_selected_btn(obj)==dsc->id)</font>

  38. <font size="4">img_draw_dsc.recolor_opa=LV_OPA_30;</font>

  39. <font size="4">lv_draw_img(dsc->draw_ctx,&img_draw_dsc,&a,</font>

  40. <font size="4">app_image[0].app_image);</font>

  41. <font size="4">}</font>

  42. <font size="4">}</font>
复制代码


          03.编写灯光控制界面:

          由于代码幅度篇长,请在公众号获取下载相关的代码。


           04.实现相关功能:

  1. <font size="4">/**</font>

  2. <font size="4">*@brief  计算前导置零</font>

  3. <font size="4">*@param  无</font>

  4. <font size="4">*@retval 无</font>

  5. <font size="4">*/</font>
  6. <font size="4">intlv_clz(unsignedint app_readly_list[])</font>

  7. <font size="4">{</font>

  8. <font size="4">intbit =0;</font>

  9. <font size="4">for(inti =0;i<32;i++)</font>

  10. <font size="4">{</font>

  11. <font size="4">if(app_readly_list==1)</font>

  12. <font size="4">{</font>

  13. <font size="4">break;</font>

  14. <font size="4">}</font>

  15. <font size="4">bit++;</font>

  16. <font size="4">}</font>

  17. <font size="4">returnbit;</font>

  18. <font size="4">}</font>
  19. <font size="4">/*light_app就绪表*/</font>
  20. <font size="4">unsignedint light_app_readly_list[32];</font>
  21. <font size="4">/*light_app触发位*/</font>
  22. <font size="4">intlv_light_trigger_bit =0;</font>
  23. <font size="4">/*light_app状态表*/</font>
  24. <font size="4">intlight_app[lv_light_info_mun]={0,0,0,0,0,0,0,0};</font>
  25. <font size="4">/**</font>

  26. <font size="4">*@brief  APP按键回调函数</font>

  27. <font size="4">*@param  obj  :对象</font>

  28. <font size="4">*@param  event:事件</font>

  29. <font size="4">*@retval 无</font>

  30. <font size="4">*/</font>
  31. <font size="4">staticvoidlv_light_control_event_handler(lv_event_t*event)</font>

  32. <font size="4">{</font>

  33. <font size="4">lv_event_code_tcode =lv_event_get_code(event);</font>

  34. <font size="4">lv_obj_t*obj =lv_event_get_target(event);</font>

  35. <font size="4">if(code==LV_EVENT_CLICKED)</font>

  36. <font size="4">{</font>

  37. <font size="4">for(inti =0;i<lv_light_info_mun;i++)</font>

  38. <font size="4">{</font>

  39. <font size="4">if(obj==lv_light_app_t)</font>

  40. <font size="4">{</font>
  41. <font size="4">/*app就绪表位置1*/</font>
  42. <font size="4">light_app_readly_list=1;</font>

  43. <font size="4">}</font>

  44. <font size="4">}</font>
  45. <font size="4">/*计算前导指令*/</font>
  46. <font size="4">lv_light_trigger_bit=</font>

  47. <font size="4">((unsignedint)lv_clz((light_app_readly_list)));</font>

  48. <font size="4">light_app[lv_light_trigger_bit]++;</font>
  49. <font size="4">/*该位清零就绪表*/</font>
  50. <font size="4">light_app_readly_list[lv_light_trigger_bit]=0;</font>
  51. <font size="4">/*根据该位做相应的函数*/</font>
  52. <font size="4">switch(lv_light_trigger_bit)</font>

  53. <font size="4">{</font>

  54. <font size="4">case1:</font>

  55. <font size="4">case2:</font>

  56. <font size="4">case3:</font>

  57. <font size="4">case4:</font>

  58. <font size="4">case5:</font>

  59. <font size="4">case6:</font>

  60. <font size="4">case7:</font>

  61. <font size="4">case8:</font>

  62. <font size="4">if(light_app[lv_light_trigger_bit]==2)</font>

  63. <font size="4">{</font>
  64. <font size="4">/*篇幅长省略*/</font>
  65. <font size="4">}</font>

  66. <font size="4">else</font>

  67. <font size="4">{</font>
  68. <font size="4">/*篇幅长省略*/</font>

  69. <font size="4">}</font>

  70. <font size="4">break;</font>

  71. <font size="4">default:</font>

  72. <font size="4">break;</font>

  73. <font size="4">}</font>

  74. <font size="4">}</font>

  75. <font size="4">}</font>
复制代码
         

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

本版积分规则

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

GMT+8, 2022-7-7 04:02

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

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