接入小米空气净化器2S【含滤芯使用情况】【更新lovelace UI】

cosmo

2019年7月13日更新：

使用了card-mod，card-tools，secondaryinfo-entity-row，感谢土豆的主题分享和K大的插件贴。

第一步：下载三个插件的js文件到www目录，没有www目录先创建，和configuration.yaml平级。

第二步：添加resources记录到ui-lovelace.yaml配置文件。

resources:
#card-mod通过hacs安装选择下面这条：
  - url:  /community_plugin/lovelace-card-mod/card-mod.js
    type: js
#card-mod放到www目录选择下面这条：
  - url: /local/card-mod.js
    type: js

  - url: /local/card-tools.js
    type: js
  - url: /local/secondaryinfo-entity-row.js
    type: module
  - url: /local/layout-card.js
    type: js

复制代码

第三步，开始操作lovelace配置文件。

  

 - type: vertical-stack
            cards: 
              - type: entities
                title: 主卧空净
                show_header_toggle: false
                style: |
                  ha-card {
                    background: url(/local/images/zkj_01.png);
                    border-top-left-radius:15px;
                    border-top-right-radius:15px;
                    backdrop-filter: blur(100px); 
                    --paper-item-icon-color: Gainsboro; 
                    --primary-text-color: white;
                    --secondary-text-color: #B3E5FC;
                    -webkit-backdrop-filter: blur(10px);
                  }
                entities:
                  - entity: fan.xiaomi_air_purifier_2s
                    type: 'custom:secondaryinfo-entity-row'
                    secondary_info: >-
                      滤芯已用:[[ fan.xiaomi_air_purifier_2s.attributes.filter_hours_used ]]小时,剩余:[[ fan.xiaomi_air_purifier_2s.attributes.filter_life_remaining ]]%
                  - input_select.xiaomi_ap_mode
              - type: glance
                style: |
                  ha-card {
                    background: url(/local/images/zkj_02.png);
                    backdrop-filter: blur(100px); 
                    --paper-item-icon-color: black; 
                    --primary-text-color: white;
                    --secondary-text-color: #9dccfb;
                    -webkit-backdrop-filter: blur(10px);
                  }
                aspect_ratio: 492:232
                entities:
                  - entity: switch.xiaomi_ap_buzzer
                    tap_action:
                      action: toggle
                  - entity: switch.xiaomi_ap_light
                    tap_action:
                      action: toggle                  
                  - entity: switch.xiaomi_ap_childlock
                    tap_action:
                      action: toggle
              - type: glance
                style: |
                  ha-card {
                    background: url(/local/images/zkj_03.png);
                    border-bottom-left-radius:15px;
                    border-bottom-right-radius:15px;
                    backdrop-filter: blur(100px); 
                    --paper-item-icon-color: Black; 
                    --primary-text-color: Black;
                    --secondary-text-color: #9dccfb;
                    -webkit-backdrop-filter: blur(10px);
                  }
                aspect_ratio: 492:232
                entities:
                  - sensor.xiaomi_ap_aqi
                  - sensor.xiaomi_ap_temp
                  - sensor.xiaomi_ap_humid

复制代码

第四步，在www/images目录下放置zkj_01 , zkj_02 , zkj_03 三张png图片。

images.zip (254.56 KB, 下载次数: 81)

2019-7-13 11:26 上传

点击文件名下载附件

第五步，刷新你的页面！！！

不折腾不HA，分享下最近作业：

以下是7月13日前的内容：

复制代码

此贴主要根据jeffrey的萌新指北和官方文档做修改，添加滤芯情况。
----------------------------------我是一条刺激的分割线---------------------------------------------

传送门：
萌新指北：https://bbs.hassbian.com/thread-6143-1-1.html
官方文档：Xiaomi Air Purifier

由于本人也是萌新，并没有用囧大说的custome ui，直接lovelace骚了下。
PS:没图说个XX

----------------------------------我是一条自己的分割线---------------------------------------------

下面上图：



然后是packages文件，由于囧大和萌新指北里都有提及该文件怎么安排，所以如果不会的大家自己回去再看看吧。
xiaomi_air_purifier.zip (1.25 KB, 下载次数: 147)

2019-7-11 22:10 上传

点击文件名下载附件
我是附件

----------------------------------我是一条自己的分割线---------------------------------------------
另外，在苹果官网看到Homekit支持空气净化器了，不知道现在是否支持把空气净化器设置成其他实例了木有，求解答！！
附送lovelace【简单暴力】：

      
     - type: entities
        title: 主卧空净
        show_header_toggle: false
        entities:
          - fan.xiaomi_air_purifier_2s
          - switch.xiaomi_ap_buzzer
          - switch.xiaomi_ap_light
          - switch.xiaomi_ap_childlock
          - sensor.xiaomi_ap_aqi
          - sensor.xiaomi_ap_temp
          - sensor.xiaomi_ap_humid
          - sensor.xiaomi_ap_lxh
          - sensor.xiaomi_ap_sylx
          - input_select.xiaomi_ap_mode

复制代码

谢谢大家！

yylwhy

小白在此论坛要看好多帖子才能搞定一个问题。。。继续学习去了。谢谢楼主

cosmo

yylwhy 发表于 2019-7-11 22:27
小白在此论坛要看好多帖子才能搞定一个问题。。。继续学习去了。谢谢楼主 ...

哈哈哈，不过这样解决的比较有成就感。

aimei

学习了

chinyaolin

https://github.com/custom-cards/vertical-stack-in-card
這張卡片可以讓圖片之間不留空, 可以使用看看

killadm

楼上说的vertical-stack-in-card和card-modder配合也可以

                               
登录/注册后可看大图

https://github.com/TheRealBadRob ... r%20purifier%20card
不过总感觉直接用picture-elements比较好吧

嗳逗趣

学习了！！

cosmo

chinyaolin 发表于 2019-7-13 22:01
https://github.com/custom-cards/vertical-stack-in-card
這張卡片可以讓圖片之間不留空, 可以使用看看 ...

学习了，明天用用看~~

howieshih

感謝, 學習了

longerli

请问能用在max上吗？