请选择 进入手机版 | 继续访问电脑版

『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 429|回复: 8

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

[复制链接]

1

主题

35

帖子

123

积分

论坛分享达人

积分
123
金钱
88
HASS币
0
发表于 2019-7-11 22:13:31 | 显示全部楼层 |阅读模式
本帖最后由 cosmo 于 2019-7-16 23:31 编辑

2019年7月13日更新:

微信截图_20190713103504.png


第一步:下载三个插件的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



  
 - 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图片。

zkj_01.png zkj_02.png zkj_03.png
images.zip (254.56 KB, 下载次数: 7)

评分

参与人数 1金钱 +20 收起 理由
+ 20 论坛有你更精彩!

查看全部评分

回复

使用道具 举报

5

主题

209

帖子

542

积分

论坛分享达人

积分
542
金钱
333
HASS币
0
发表于 2019-7-11 22:27:40 | 显示全部楼层
小白在此论坛要看好多帖子才能搞定一个问题。。。继续学习去了。谢谢楼主
回复

使用道具 举报

1

主题

35

帖子

123

积分

论坛分享达人

积分
123
金钱
88
HASS币
0
 楼主| 发表于 2019-7-11 22:41:57 | 显示全部楼层
yylwhy 发表于 2019-7-11 22:27
小白在此论坛要看好多帖子才能搞定一个问题。。。继续学习去了。谢谢楼主 ...

哈哈哈,不过这样解决的比较有成就感。
回复

使用道具 举报

0

主题

94

帖子

490

积分

中级会员

Rank: 3Rank: 3

积分
490
金钱
396
HASS币
0
发表于 2019-7-13 21:14:05 | 显示全部楼层
学习了
回复

使用道具 举报

17

主题

232

帖子

1724

积分

金牌会员

Rank: 6Rank: 6

积分
1724
金钱
1492
HASS币
86

教程狂人

发表于 2019-7-13 22:01:59 | 显示全部楼层
https://github.com/custom-cards/vertical-stack-in-card
這張卡片可以讓圖片之間不留空, 可以使用看看
ASRock H370 PRO4, 48GB, 8TBx3 + 2TBx3
ESXi 6.7 + Ununtu + Docker + HASS.IO
回复

使用道具 举报

4

主题

482

帖子

2479

积分

金牌会员

Rank: 6Rank: 6

积分
2479
金钱
1987
HASS币
120
发表于 2019-7-13 23:38:47 | 显示全部楼层
楼上说的vertical-stack-in-card和card-modder配合也可以

                               
登录/注册后可看大图

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


回复

使用道具 举报

1

主题

46

帖子

113

积分

注册会员

Rank: 2

积分
113
金钱
67
HASS币
0
发表于 2019-7-14 11:05:44 | 显示全部楼层
学习了!!
回复

使用道具 举报

1

主题

35

帖子

123

积分

论坛分享达人

积分
123
金钱
88
HASS币
0
 楼主| 发表于 2019-7-14 23:29:34 | 显示全部楼层
chinyaolin 发表于 2019-7-13 22:01
https://github.com/custom-cards/vertical-stack-in-card
這張卡片可以讓圖片之間不留空, 可以使用看看 ...

学习了,明天用用看~~
回复

使用道具 举报

0

主题

25

帖子

96

积分

注册会员

Rank: 2

积分
96
金钱
71
HASS币
0
发表于 2019-7-24 14:56:14 | 显示全部楼层
感謝, 學習了
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2019-10-19 20:05 , Processed in 0.084365 second(s), 26 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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