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 layout: page
title: "Picture Entity Card" title: Picture Entity Card
sidebar_label: Picture Entity 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 date: 2018-07-01 10:28 +00:00
sidebar: true sidebar: true
comments: false comments: false
@ -10,15 +10,11 @@ sharing: true
footer: 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. Displays the entity in form of an image. Instead of images from URL it can also show the picture of `camera` entities.
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`.
<p class='img'> <p class='img'>
<img src='/images/lovelace/lovelace_picture_entity.gif' alt='Screenshot of the picture entity card'> <img src='/images/lovelace/lovelace_picture_entity.gif' alt='Picture entity card'>
Screenshot of the picture entity card. Background changes according to the entity state.
</p> </p>
{% configuration %} {% configuration %}
@ -28,60 +24,39 @@ type:
type: string type: string
entity: entity:
required: true required: true
description: "An `entity_id` to control via picture." description: "An `entity_id` used for the picture."
type: string type: string
camera_image: camera_image:
required: false 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 type: string
default: None
image: image:
required: false required: false
description: URL of an image. description: URL of an image.
type: string type: string
default: None
state_image: state_image:
required: false 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 type: object
name: name:
required: false required: false
description: Custom name for entity. description: Overwrite entity name.
type: string type: string
default: None show_name:
show_info:
required: false 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 type: boolean
default: true default: true
tap_action: tap_action:
required: false 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 type: string
default: dialog default: more-info
{% endconfiguration %} {% endconfiguration %}
## {% linkable_title Examples %} ## {% linkable_title Examples %}
@ -90,22 +65,16 @@ Basic example:
```yaml ```yaml
- type: picture-entity - 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 entity: light.bed_light
image: /local/bed_light.png
``` ```
<p class='img'> Different images for each state:
<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:
```yaml ```yaml
- type: picture-entity - type: picture-entity
entity: light.bed_light entity: light.bed_light
image: http://farm7.static.flickr.com/6153/6220100622_88e64ec5d8_b.jpg
state_image: state_image:
"on": http://farm7.static.flickr.com/6220/6220100616_a877f41a66_b.jpg "on": /local/bed_light_on.png
title: Livingroom lights "off": /local/bed_light_off.png
``` ```

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 MiB