├── README.md
├── air-filter-card.js
└── hacs.json
/README.md:
--------------------------------------------------------------------------------
1 |
9 | # Lovelace Xiaomi Air Filter Card
10 |
11 | [](https://github.com/custom-components/hacs)
12 |
13 | This is a card for Lovelace's Xiaomi Air Purifier that supports most devices.
14 | Currently only tested on Xiaomi devices, if other devices have problems, please welcome Issues
15 |
16 | I need to know the following information:
17 | Services needed `fan.set_speed`, Need to provide the speed value
18 | 
19 |
20 |
21 | ## Update
22 | v1.1.3
23 | + fix #8
24 |
25 | ## Preview
26 | 
27 |
28 | ## HACS Installation
29 | Search for air filter
30 | ## Manual Installation
31 | 1. Download `air-filter-card.js`
32 | 1. Copy to `www\community\lovelace-air-filter-card`
33 | 1. Add the following to your Lovelace resources
34 | ``` yaml
35 | resources:
36 | - url: /community_plugin/lovelace-air-filter/air-filter-card.js
37 | type: module
38 | ```
39 | 1. Add the following to your Lovelace config views.cards key
40 | ```yaml
41 | type: 'custom:air-filter'
42 | modes:
43 | - auto
44 | - silent
45 | - Strong
46 | entity: fan.kong_qi_jing_hua_qi
47 | title: air_filter
48 | aspect_ratio: '.6'
49 | ```
50 |
51 | ## Options
52 |
53 | | Name | Type | Default | Description
54 | | ---- | ---- | ------- | -----------
55 | | type | string | **Required** | custom:air-filter
56 | | entity | entity id | **Required** | The entity id of climate
57 | | modes | array | **Required** | Operating mode, currently includes `auto,silent,favorite,strong,medium,high,low,humidity,interval`
58 | | title | string | optional | Card title entity. Example:`fan.kong_qi_jing_hua_qi`
59 | | aspect_ratio | Number | optional | Aspect ratio, Ratio of height to width
60 |
--------------------------------------------------------------------------------
/air-filter-card.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @Author : fineemb
3 | * @Github : https://github.com/fineemb
4 | * @Description :
5 | * @Date : 2019-10-12 02:38:30
6 | * @LastEditors : fineemb
7 | * @LastEditTime : 2020-07-20 19:28:37
8 | */
9 |
10 | console.info("%c AIR FILTER CARD \n%c Version 1.1.3 ",
11 | "color: orange; font-weight: bold; background: black",
12 | "color: white; font-weight: bold; background: dimgray");
13 |
14 | // import(`https://unpkg.com/@juggle/resize-observer`);
15 |
16 | const deps = ['paper-input', 'paper-dropdown-menu', 'paper-item', 'paper-listbox'];
17 | deps.map(dep => {
18 | if (!customElements.get(dep)) {
19 | console.log("imported", dep);
20 | import(`https://unpkg.com/@polymer/${dep}/${dep}.js?module`);
21 | }
22 | });
23 |
24 | function loadCSS(url) {
25 | const link = document.createElement("link");
26 | link.type = "text/css";
27 | link.rel = "stylesheet";
28 | link.href = url;
29 | document.head.appendChild(link);
30 | }
31 |
32 |
33 | loadCSS("https://fonts.googleapis.com/css2?family=Anton&display=swap");
34 |
35 | const LitElement = Object.getPrototypeOf(
36 | customElements.get("ha-panel-lovelace")
37 | );
38 | const html = LitElement.prototype.html;
39 | const css = LitElement.prototype.css;
40 | export class AirFilterCard extends HTMLElement {
41 | constructor() {
42 | super();
43 | this.root = this.attachShadow({ mode: 'open' });
44 | this.root.innerHTML = this._gethtml();
45 | this.root.querySelector("#container").appendChild(this.getBg());
46 | this.modes = ["auto","silent","strong"]
47 | }
48 | static getConfigElement() {
49 | return document.createElement("air-filter-editor");
50 | }
51 | static getStubConfig() {
52 | return {modes: ["auto","silent","strong"],
53 | spect_ratio:1,
54 | entity:"" }
55 | }
56 | set hass(hass) {
57 |
58 | setTimeout(() => {
59 | let airBox = this.root.querySelector("#air").getBoundingClientRect();
60 |
61 | this.root.querySelector("#pm25u").style.fontSize = airBox.height*.8/12+'px';
62 | this.root.querySelector("#pm25u").style.lineHeight = airBox.height*.8/12+'px';
63 |
64 | this.root.querySelector("#title").style.fontSize = airBox.height*.8/10+'px';
65 | this.root.querySelector("#title").style.lineHeight = airBox.height*.8/10+'px';
66 |
67 | this.root.querySelector("#pm25").style.fontSize = airBox.height*.8/5*2+'px';
68 | this.root.querySelector("#pm25").style.lineHeight = airBox.height*.8/5*2+'px';
69 | },1)
70 | let entityId
71 | var patt = new RegExp("^fan")
72 | if(this._config.entity){
73 | entityId = this._config.entity;
74 | }else{
75 | Object.keys(hass.states).filter(a => patt.test(a) ).map(entId => {
76 | entityId = entId;
77 | });
78 | }
79 | let aqi = hass.states[entityId].attributes.aqi;
80 | this.root.querySelector("#pm25").innerHTML = aqi<10?"0"+aqi:aqi;
81 | this.root.querySelector("#bg").className = hass.states[entityId].state?hass.states[entityId].state:"N/C";
82 | this.root.querySelector("#title").innerHTML = this._config.title||hass.states[entityId].attributes.friendly_name||"Air purifier";
83 |
84 | // 质量
85 | let quality = '优'
86 | let air = this.root.querySelector("#air")
87 | if (aqi < 50) {
88 | quality = '优'
89 | air.className='level-1'
90 | }
91 | else if (aqi < 100) {
92 | quality = '良'
93 | air.className='level-2'
94 | }
95 | else if (aqi < 150) {
96 | quality = '轻度污染'
97 | air.className='level-3'
98 | }
99 | else if (aqi < 200) {
100 | quality = '中度污染'
101 | air.className='level-4'
102 | }
103 | else if (aqi < 300) {
104 | quality = '重度污染'
105 | air.className='level-5'
106 | }
107 | else {
108 | quality = '严重污染'
109 | air.className='level-6'
110 | }
111 |
112 | this.root.querySelector("#pm25").onclick = () => {
113 | hass.callService('fan', 'toggle', {
114 | entity_id: entityId
115 | });
116 | }
117 |
118 | this.root.querySelector('#buttons :nth-child(1)').onclick = () => {
119 | hass.callService('fan', 'set_speed', {
120 | entity_id: entityId,
121 | speed: this.modes[0]
122 | });
123 | }
124 | this.root.querySelector('#buttons :nth-child(2)').onclick = () => {
125 | hass.callService('fan', 'set_speed', {
126 | entity_id: entityId,
127 | speed: this.modes[1]
128 | });
129 | }
130 | this.root.querySelector('#buttons :nth-child(3)').onclick = () => {
131 | hass.callService('fan', 'set_speed', {
132 | entity_id: entityId,
133 | speed: this.modes[2]
134 | });
135 | }
136 |
137 | let mode = hass.states[entityId].attributes.mode;
138 | for(var i=0;i<3;i++){
139 | if((this.modes[i]+"").toLowerCase()===(mode+"").toLowerCase()){
140 | this.root.querySelector('#buttons :nth-child('+(i+1)+')').className = "active"
141 | }else{
142 | this.root.querySelector('#buttons :nth-child('+(i+1)+')').className = ""
143 | }
144 | }
145 |
146 | }
147 |
148 | setConfig(config) {
149 | this._config = deepClone(config);
150 | let entityid = this._config.entity;
151 | this.modes = this._config.modes;
152 |
153 | const icons = {
154 | auto: "mdi:brightness-auto",
155 | silent: "mdi:weather-night",
156 | favorite: "mdi:cards-heart",
157 | strong: "mdi:weather-windy",
158 | medium: "mdi:chili-medium",
159 | high: "mdi:chili-hot",
160 | low: "mdi:chili-mild",
161 | humidity: "mdi:air-humidifier",
162 | interval: "mdi:av-timer"
163 | }
164 | for(var i=0;i<3;i++){
165 | this.root.querySelector('#buttons :nth-child('+(i+1)+')').setAttribute("icon",icons[this._config.modes[i].toLowerCase()])
166 | }
167 | let d = this.root.querySelector("#aspect-ratio")
168 | d.style.paddingBottom = 100*(this._config.aspect_ratio||1)+"%"
169 | d.style.width = 100*(this._config.aspect_ratio||1)+"%"
170 |
171 | this.root.querySelector('.prop').onclick = () => {
172 | this.fire('hass-more-info', { entityId: entityid });
173 | }
174 | }
175 |
176 | _gethtml() {
177 | return this._getstyles()+`
178 |
179 |
180 |
181 |
182 |
PM2.5
183 |
00
184 |
185 |
186 |
187 |
188 |
189 |
Air purifier
190 |
191 |
192 |
193 |
194 |
195 |
7262 |
7268 |
7274 |
7275 |
7276 |
7277 |
7282 |
7283 |
${this.hass.localize("ui.card.climate.operation")}
7284 |
7285 |
7299 |
7310 |