jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-27 19:26:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

state_filter for picture cards (#10442)

Browse Source
This commit is contained in:
Ian Richardson 2019-10-01 05:05:08 -05:00 committed by Franck Nijhof
parent a0d2949e4b
commit 3f86c56a20
3 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/_lovelace/picture-elements.markdown
View File

@ -30,6 +30,10 @@ title:
required: false required: false
description: Card title description: Card title
type: string type: string
state_filter:
required: false
description: '[State-based CSS filters](#how-to-use-state_filter)'
type: map
{% endconfiguration %} {% endconfiguration %}
## Elements ## Elements

14
source/_lovelace/picture-entity.markdown
View File

@ -37,6 +37,10 @@ state_image:
required: false required: false
description: "Map entity states to images (`state: image URL`, check the example below)." description: "Map entity states to images (`state: image URL`, check the example below)."
type: map type: map
state_filter:
required: false
description: '[State-based CSS filters](#how-to-use-state_filter)'
type: map
aspect_ratio: aspect_ratio:
required: false required: false
description: "Forces the height of the image to be a ratio of the width. You may enter a value such as: `16x9`, `16:9`, `1.78`." description: "Forces the height of the image to be a ratio of the width. You may enter a value such as: `16x9`, `16:9`, `1.78`."
@ -117,6 +121,16 @@ hold_action:
default: none default: none
{% endconfiguration %} {% endconfiguration %}
## How to use state_filter
Specify different [CSS filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
```yaml
state_filter:
"on": brightness(110%) saturate(1.2)
"off": brightness(50%) hue-rotate(45deg)
```
## Examples ## Examples
Basic example: Basic example:

14
source/_lovelace/picture-glance.markdown
View File

@ -46,6 +46,10 @@ state_image:
type: string type: string
required: false required: false
description: "`state: image-url`, check the example below." description: "`state: image-url`, check the example below."
state_filter:
required: false
description: '[State-based CSS filters](#how-to-use-state_filter)'
type: map
aspect_ratio: aspect_ratio:
required: false required: false
description: "Forces the height of the image to be a ratio of the width. You may enter a value such as: `16x9`, `16:9`, `1.78`." description: "Forces the height of the image to be a ratio of the width. You may enter a value such as: `16x9`, `16:9`, `1.78`."
@ -131,6 +135,16 @@ icon:
type: string type: string
{% endconfiguration %} {% endconfiguration %}
## How to use state_filter
Specify different [CSS filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
```yaml
state_filter:
"on": brightness(110%) saturate(1.2)
"off": brightness(50%) hue-rotate(45deg)
```
## Examples ## Examples
```yaml ```yaml