Add image type for picture-elements card.

[jeradM]

Depends on #1423

Allows adding images to a picture-elements card
Closes: home-assistant/ui-schema#75

Example using state_image and state_filter:

- type: image
  entity: light.living_room
  tap_action: toggle
  image: /local/living_room.png
  state_image:
    'off': /local/living_room_off.png
  filter: brightness(100%)
  state_filter:
    'on': brightness(130%) saturate(1.5)
  style:
    ... 

Example using camera and service call:

- type: image
  entity: camera.demo_camera
  tap_action: call_service
  service: camera.snapshot
  service_data:
    filename: /tmp/snapshot
  style:
    ... 

[balloob]

Please order imports by depth. This is a local Lovelace import, but it at the bottom.

[balloob]

Why?

[balloob]

If this is because of it being placed in entity-picture, the CSS should be added to entity-picture. We should never add CSS to web components because it helps styling it in a parent. The parent should contain the styling instead.

[jeradM]

This became apparent because of picture-elements, but I think it is the correct behavior in general. If the parent has a static height I feel like the expectation is that the image won't overflow. But the only place this is a factor right now is picture-elements, so I'll move this css there and reassess if it comes up other places too

[c727]

The name should be state-image for consistency.

MAYBE we can also use one click handler for all elements

[balloob]

One click handler per element is a lot easier to reason about.

[jeradM]

I added a separate one for images because images allow service calls where the others don't. We could allow service calls for the other element types too, or check the type in the handler if it's trying to call a service. I'll go with whatever solution you guys decide on though

[jeradM]

Also, @c727 I didn't use state-image because I was concerned people would get confused if they weren't trying to setup state_images. I will change it if you'd rather keep the naming consistent for all elements though

[c727]

yep, I thought someone might also wants to use servicecalls on the other state-elements instead of toggle/dialog, but we can also change this later.

If I suggest changes I'm always open for discussion, not every suggestion must be good :P

[jeradM]

You have done a lot more work on lovelace than me so I like to defer to your judgement, but you have to fight it out with balloob 😄

[balloob]

We can always add a helper method, _maybeAttachCallService(element, elementConfig)

[jeradM]

@balloob are you talking about a helper to add a separate click handler? Something like https://hastebin.com/oyuyeyifox.javascript

[balloob]

Yep. That way we don't need to implement that method for every element and enforce the same config

[jeradM]

I originally went with the helper, but it seemed really redundant. We need click handlers on 3 of the element types which are the same 3 that the helper would have been wrapping since the other 3 types handle clicks differently, so I just put the service call logic in the click handler. I will change it if you still think it would be better

[balloob]

Looks good.