purifier-card 2.0.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.json +2 -3
- package/README.md +57 -8
- package/dist/purifier-card.js +4 -605
- package/package.json +10 -2
- package/rollup.config.js +26 -1
- package/src/purifier-card-editor.js +2 -2
- package/src/purifier-card.js +68 -58
- package/src/styles.css +260 -0
- package/.prettierrc.json +0 -3
- package/src/styles.js +0 -254
package/.eslintrc.json
CHANGED
package/README.md
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
[](https://stand-with-ukraine.pp.ua/)
|
|
2
|
+
|
|
1
3
|
# Purifier Card
|
|
2
4
|
|
|
3
5
|
[![npm version][npm-image]][npm-url]
|
|
@@ -71,6 +73,10 @@ stats:
|
|
|
71
73
|
- attribute: motor_speed
|
|
72
74
|
unit: RPM
|
|
73
75
|
subtitle: Motor Speed
|
|
76
|
+
- value_template: >-
|
|
77
|
+
{{ (states('sensor.purifier_filter_life') | float(0) / 3600) | round(1) }}
|
|
78
|
+
unit: hours
|
|
79
|
+
subtitle: Filter Life
|
|
74
80
|
shortcuts:
|
|
75
81
|
- name: Silent
|
|
76
82
|
icon: 'mdi:weather-night'
|
|
@@ -103,7 +109,7 @@ Here is what every option means:
|
|
|
103
109
|
| `type` | `string` | **Required** | `custom:purifier-card` |
|
|
104
110
|
| `entity` | `string` | **Required** | An entity_id within the `fan` domain. |
|
|
105
111
|
| `show_name` | `boolean` | `true` | Show friendly name of the purifier. |
|
|
106
|
-
| `
|
|
112
|
+
| `show_state` | `boolean` | `true` | Show state of the purifier. |
|
|
107
113
|
| `show_preset_mode` | `boolean` | `true` | Show preset mode of the purifier in the header. |
|
|
108
114
|
| `show_toolbar` | `boolean` | `true` | Show toolbar with shortcuts. |
|
|
109
115
|
| `compact_view` | `boolean` | `false` | Compact view without image. |
|
|
@@ -124,12 +130,13 @@ Here is what every option means:
|
|
|
124
130
|
|
|
125
131
|
You can use any attribute of purifier or even any entity by `entity_id` to display by stats section:
|
|
126
132
|
|
|
127
|
-
| Name
|
|
128
|
-
|
|
|
129
|
-
| `entity_id`
|
|
130
|
-
| `attribute`
|
|
131
|
-
| `
|
|
132
|
-
| `
|
|
133
|
+
| Name | Type | Default | Description |
|
|
134
|
+
| ---------------- | :------: | -------- | ---------------------------------------------------- |
|
|
135
|
+
| `entity_id` | `string` | Optional | An entity_id with state, i.e. `sensor.purifier_aqi`. |
|
|
136
|
+
| `attribute` | `string` | Optional | Attribute name of the stat, i.e. `filter_left`. |
|
|
137
|
+
| `value_template` | `string` | Optional | Jinja2 template returning a value. |
|
|
138
|
+
| `unit` | `string` | Optional | Unit of measure, i.e. `hours`. |
|
|
139
|
+
| `subtitle` | `string` | Optional | Friendly name of the stat, i.e. `Filter`. |
|
|
133
140
|
|
|
134
141
|
### `shortcuts` object
|
|
135
142
|
|
|
@@ -150,6 +157,48 @@ The card will automatically try to figure out which one of shortcuts is currentl
|
|
|
150
157
|
2. `entity`'s `percentage` attribute is equal to `shortcut`'s `percentage`.
|
|
151
158
|
3. `entity`'s `preset_mode` attribute is equal to `shortcut`'s `preset_mode`.
|
|
152
159
|
|
|
160
|
+
## Theming
|
|
161
|
+
|
|
162
|
+
This card can be styled by changing the values of these CSS properties (globally or per-card via [`card-mod`][card-mod]):
|
|
163
|
+
|
|
164
|
+
| Variable | Default value | Description |
|
|
165
|
+
| --------------------------- | ---------------------------------------------------------------- | ------------------------------------ |
|
|
166
|
+
| `--pc-background` | `var(--ha-card-background, var(--card-background-color, white))` | Background of the card |
|
|
167
|
+
| `--pc-primary-text-color` | `var(--primary-text-color)` | Vacuum name, stats values, etc |
|
|
168
|
+
| `--pc-secondary-text-color` | `var(--secondary-text-color)` | Status, stats units and titles, etc |
|
|
169
|
+
| `--pc-icon-color` | `var(--secondary-text-color)` | Colors of icons |
|
|
170
|
+
| `--pc-slider-path-color` | `var(--round-slider-path-color)` | Color of the slider path |
|
|
171
|
+
| `--pc-slider-bar-color` | `var(--round-slider-bar-color)` | Color of the slider bar |
|
|
172
|
+
| `--pc-toolbar-background` | `var(--vc-background)` | Background of the toolbar |
|
|
173
|
+
| `--pc-toolbar-text-color` | `var(--secondary-text-color)` | Color of the toolbar texts |
|
|
174
|
+
| `--pc-toolbar-icon-color` | `var(--secondary-text-color)` | Color of the toolbar icons |
|
|
175
|
+
| `--pc-divider-color` | `var(--entities-divider-color, var(--divider-color))` | Color of dividers |
|
|
176
|
+
| `--pc-spacing` | `10px` | Paddings and margins inside the card |
|
|
177
|
+
|
|
178
|
+
### Styling via theme
|
|
179
|
+
|
|
180
|
+
Here is an example of customization via theme. Read more in the [Frontend documentation](https://www.home-assistant.io/integrations/frontend/).
|
|
181
|
+
|
|
182
|
+
```yaml
|
|
183
|
+
my-custom-theme:
|
|
184
|
+
pc-background: '#17A8F4'
|
|
185
|
+
pc-spacing: 5px
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
### Styling via card-mod
|
|
189
|
+
|
|
190
|
+
You can use [`card-mod`][card-mod] to customize the card on per-card basis, like this:
|
|
191
|
+
|
|
192
|
+
```yaml
|
|
193
|
+
type: 'custom:purifier-card'
|
|
194
|
+
style: |
|
|
195
|
+
ha-card {
|
|
196
|
+
--pc-background: #17A8F4;
|
|
197
|
+
--pc-spacing: 5px;
|
|
198
|
+
}
|
|
199
|
+
...
|
|
200
|
+
```
|
|
201
|
+
|
|
153
202
|
## Animations
|
|
154
203
|
|
|
155
204
|
I've added an animation for this card to make it alive:
|
|
@@ -239,7 +288,7 @@ MIT © [Denys Dovhan][denysdovhan]
|
|
|
239
288
|
|
|
240
289
|
[home-assistant]: https://www.home-assistant.io/
|
|
241
290
|
[hacs]: https://hacs.xyz
|
|
242
|
-
[preview-image]: https://user-images.githubusercontent.com/3459374/
|
|
291
|
+
[preview-image]: https://user-images.githubusercontent.com/3459374/164275676-504d92aa-2c61-4451-ae9b-23dad113ce14.png
|
|
243
292
|
[latest-release]: https://github.com/denysdovhan/purifier-card/releases/latest
|
|
244
293
|
[ha-scripts]: https://www.home-assistant.io/docs/scripts/
|
|
245
294
|
[xiaomi-miio-favorite-levels]: https://www.home-assistant.io/integrations/xiaomi_miio/#service-xiaomi_miiofan_set_favorite_level-air-purifiers-only
|