Lovelace: Pic entity show name, state options (#5880)

* Lovelace: cleanup picture entity (#5855)

* Lovelace: Pic entity show name, state options
This commit is contained in:
c727 2018-07-25 04:18:42 +02:00 committed by Alok Saboo
parent 91dfff7cff
commit c8146e5720
2 changed files with 22 additions and 53 deletions

View File

@ -1,8 +1,8 @@
---
layout: page
title: "Picture Entity Card"
title: Picture Entity Card
sidebar_label: Picture Entity
description: "A very useful card for controlling entities. By default, you will get `more-info-dialog` but using `tap_action` you can directly control entities that have `on`/`off` states."
description: Displays the entity in form of an image. Instead of images from URL it can also show the picture of `camera` entities.
date: 2018-07-01 10:28 +00:00
sidebar: true
comments: false
@ -10,15 +10,11 @@ sharing: true
footer: true
---
A very useful card for controlling entities. By default, you will get `more-info-dialog` but using `tap_action` you can directly control entities that have `on`/`off` states. It allows you to generate a very nice looking card with a big touch area, highly recommended for mobile dashboards on small screens.
You can use different image combination to get a more realistic view for images with lights. The image setup also allows enough flexibility to get your garage picture with the door opened and closed.
You can also use `camera` domain entities to use that as `camera_image`.
Displays the entity in form of an image. Instead of images from URL it can also show the picture of `camera` entities.
<p class='img'>
<img src='/images/lovelace/lovelace_picture_entity.gif' alt='Screenshot of the picture entity card'>
Screenshot of the picture entity card.
<img src='/images/lovelace/lovelace_picture_entity.gif' alt='Picture entity card'>
Background changes according to the entity state.
</p>
{% configuration %}
@ -28,60 +24,39 @@ type:
type: string
entity:
required: true
description: "An `entity_id` to control via picture."
description: "An `entity_id` used for the picture."
type: string
camera_image:
required: false
description: "Camera `entity_id` to use."
description: "Camera `entity_id` to use. (not required if `entity` is already a camera-entity)."
type: string
default: None
image:
required: false
description: URL of an image.
type: string
default: None
state_image:
required: false
description: "See `state_image` object structure."
description: "Map entity states to images (`state: image URL`, check the example below)."
type: object
keys:
"on":
required: true
description: URL of an image used for on state.
type: string
"off":
required: true
description: URL of an image used for off state.
type: string
default: None
home:
required: false
description: URL of an image used for home state.
type: string
not_home:
required: false
description: URL of an image used for not_home state.
type: string
default: None
any:
required: false
description: Any state that is supported by the entity works.
type: object
name:
required: false
description: Custom name for entity.
description: Overwrite entity name.
type: string
default: None
show_info:
show_name:
required: false
description: Set to false to hide infobar.
description: Shows name in footer.
type: boolean
default: true
show_state:
required: false
description: Shows state in footer.
type: boolean
default: true
tap_action:
required: false
description: "Set to `toggle` for turning entity on/off without opening a dialog."
description: "Set to `toggle` for turning entity on/off."
type: string
default: dialog
default: more-info
{% endconfiguration %}
## {% linkable_title Examples %}
@ -90,22 +65,16 @@ Basic example:
```yaml
- type: picture-entity
image: https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=295&w=490
entity: light.bed_light
image: /local/bed_light.png
```
<p class='img'>
<img src='/images/lovelace/lovelace_picture_entity_2.gif' alt='Screenshot of the picture entity card'>
Screenshot of the picture entity card.
</p>
Example with night/day:
Different images for each state:
```yaml
- type: picture-entity
entity: light.bed_light
image: http://farm7.static.flickr.com/6153/6220100622_88e64ec5d8_b.jpg
state_image:
"on": http://farm7.static.flickr.com/6220/6220100616_a877f41a66_b.jpg
title: Livingroom lights
"on": /local/bed_light_on.png
"off": /local/bed_light_off.png
```

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 MiB