Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 17 additions & 10 deletions source/_lovelace/picture-elements.markdown
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ style:
required: true
description: Position and style the element using CSS.
type: object
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %}

### {% linkable_title Icon representing an entity state %}
Expand Down Expand Up @@ -89,6 +90,7 @@ style:
required: true
description: Position and style the element using CSS.
type: object
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %}

### {% linkable_title Label with state text %}
Expand Down Expand Up @@ -123,6 +125,7 @@ style:
required: true
description: Position and style the element using CSS.
type: object
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %}

### {% linkable_title Service Call Button %}
Expand All @@ -148,6 +151,7 @@ style:
required: true
description: Position and style the element using CSS.
type: object
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %}

### {% linkable_title Icon Element %}
Expand Down Expand Up @@ -190,6 +194,7 @@ style:
required: true
description: Position and style the element using CSS.
type: object
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %}

### {% linkable_title Image Element %}
Expand All @@ -201,7 +206,7 @@ type:
type: string
entity:
required: false
description: Entity to use for state_image and state_filter and also target for actions.
description: Entity to use for state_image and state_filter and also target for actions.
type: string
tap_action:
required: false
Expand Down Expand Up @@ -232,7 +237,7 @@ state_image:
required: false
description: '[State-based images](#how-to-use-state_image)'
type: object
filter:
filter:
required: false
description: Default CSS filter
type: string
Expand All @@ -244,6 +249,7 @@ style:
required: true
description: Position and style the element using CSS.
type: object
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %}

### {% linkable_title Custom Elements %}
Expand All @@ -257,10 +263,11 @@ style:
required: true
description: Position and style the element using CSS.
type: object
{% endconfiguration %}
default: "position: absolute, transform: translate(-50%, -50%)"
{% endconfiguration %}

The process for creating and referencing custom elements is the same as for custom cards.
Please see the [developer docs on creating custom cards](https://developers.home-assistant.io/docs/en/lovelace_custom_card.html)
The process for creating and referencing custom elements is the same as for custom cards.
Please see the [developer docs on creating custom cards](https://developers.home-assistant.io/docs/en/lovelace_custom_card.html)
for more information.

## {% linkable_title How to use the style object %}
Expand Down Expand Up @@ -291,7 +298,7 @@ state_image:
Specify different [CSS filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)

```yaml
state_filter:
state_filter:
"on": brightness(110%) saturate(1.2)
"off": brightness(50%) hue-rotate(45deg)
```
Expand Down Expand Up @@ -333,7 +340,7 @@ state_filter:
navigation_path: /lovelace/0
style:
top: 10%
left: 10%
left: 10%
```

## {% linkable_title Images Example %}
Expand All @@ -347,20 +354,20 @@ state_filter:
entity: light.living_room
tap_action: toggle
image: /local/living_room.png
state_image:
state_image:
"off": /local/living_room_off.png
filter: saturate(.8)
state_filter:
"on": brightness(120%) saturate(1.2)
style:
style:
top: 25%
left: 75%
width: 15%
# Camera, red border, rounded-rectangle - show more-info on click
- type: image
entity: camera.driveway_camera
camera_image: camera.driveway_camera
style:
style:
top: 5%
left: 10%
width: 10%
Expand Down