purifier-card 2.0.2 → 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 +55 -8
- package/dist/purifier-card.js +4 -601
- package/package.json +10 -2
- package/rollup.config.js +26 -1
- package/src/purifier-card-editor.js +2 -2
- package/src/purifier-card.js +70 -52
- package/src/styles.css +260 -0
- package/.prettierrc.json +0 -3
- package/src/styles.js +0 -258
package/.eslintrc.json
CHANGED
package/README.md
CHANGED
|
@@ -73,6 +73,10 @@ stats:
|
|
|
73
73
|
- attribute: motor_speed
|
|
74
74
|
unit: RPM
|
|
75
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
|
|
76
80
|
shortcuts:
|
|
77
81
|
- name: Silent
|
|
78
82
|
icon: 'mdi:weather-night'
|
|
@@ -105,7 +109,7 @@ Here is what every option means:
|
|
|
105
109
|
| `type` | `string` | **Required** | `custom:purifier-card` |
|
|
106
110
|
| `entity` | `string` | **Required** | An entity_id within the `fan` domain. |
|
|
107
111
|
| `show_name` | `boolean` | `true` | Show friendly name of the purifier. |
|
|
108
|
-
| `
|
|
112
|
+
| `show_state` | `boolean` | `true` | Show state of the purifier. |
|
|
109
113
|
| `show_preset_mode` | `boolean` | `true` | Show preset mode of the purifier in the header. |
|
|
110
114
|
| `show_toolbar` | `boolean` | `true` | Show toolbar with shortcuts. |
|
|
111
115
|
| `compact_view` | `boolean` | `false` | Compact view without image. |
|
|
@@ -126,12 +130,13 @@ Here is what every option means:
|
|
|
126
130
|
|
|
127
131
|
You can use any attribute of purifier or even any entity by `entity_id` to display by stats section:
|
|
128
132
|
|
|
129
|
-
| Name
|
|
130
|
-
|
|
|
131
|
-
| `entity_id`
|
|
132
|
-
| `attribute`
|
|
133
|
-
| `
|
|
134
|
-
| `
|
|
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`. |
|
|
135
140
|
|
|
136
141
|
### `shortcuts` object
|
|
137
142
|
|
|
@@ -152,6 +157,48 @@ The card will automatically try to figure out which one of shortcuts is currentl
|
|
|
152
157
|
2. `entity`'s `percentage` attribute is equal to `shortcut`'s `percentage`.
|
|
153
158
|
3. `entity`'s `preset_mode` attribute is equal to `shortcut`'s `preset_mode`.
|
|
154
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
|
+
|
|
155
202
|
## Animations
|
|
156
203
|
|
|
157
204
|
I've added an animation for this card to make it alive:
|
|
@@ -241,7 +288,7 @@ MIT © [Denys Dovhan][denysdovhan]
|
|
|
241
288
|
|
|
242
289
|
[home-assistant]: https://www.home-assistant.io/
|
|
243
290
|
[hacs]: https://hacs.xyz
|
|
244
|
-
[preview-image]: https://user-images.githubusercontent.com/3459374/
|
|
291
|
+
[preview-image]: https://user-images.githubusercontent.com/3459374/164275676-504d92aa-2c61-4451-ae9b-23dad113ce14.png
|
|
245
292
|
[latest-release]: https://github.com/denysdovhan/purifier-card/releases/latest
|
|
246
293
|
[ha-scripts]: https://www.home-assistant.io/docs/scripts/
|
|
247
294
|
[xiaomi-miio-favorite-levels]: https://www.home-assistant.io/integrations/xiaomi_miio/#service-xiaomi_miiofan_set_favorite_level-air-purifiers-only
|