Show off your picture-elements uses

picture-elements is a great introduction to hass. Would love to see how others use it.

6 Likes

Here’s a good link with a few examples.
Others are welcome to contribute too!
https://sharethelove.io/

9 Likes

Here is the start of mine

16 Likes

I like your theme (dark grery in the background) how you do that?

looks amazing @jimpower. Quick question; when you turn your lights off does it change on the image that you have shown i.e. of the house?

1 Like

Yes it changes icon colour depending on state

1 Like

cool!
How to get the icon and the state of your battery into the picture-glance ?

Thx.

Can you share the code?

@ElGrande72 & @Abeksis
All code is contained in my repo I am OS atm but will add more updates in September.

3 Likes

very nice!
how to get the dark border at the base of the pictures in the picture-elements cards ?

You make it yourself on the actual background picture, or you could use a transparent strip image as another element in the picture element, its up to you!

I made it myself using paint, the easiest way would be to use the image in a picture glance card and take a screen shot of that then use that as your background image :slight_smile:

My Lovelace for Mi Flora

7 Likes

My living room setup with Pi element to select the source so logo of source suits what’s playing. Eg kodi ps4 Xbox live tv netflix

7 Likes

Could you share your code regarding TV remote (numbers) interface.

TIA

Hi,

this is my approach to picture-elements:


All values are generated by Netatmo sensors.
Darker background under icons is realized with Photoshop.
My inspiration: https://sharethelove.io/picture-elements-cards/temperature-glance :wink:

Edit: updated screenshot

1 Like

Thank you for your reply. Last night I figured out this and implemented Harmony remote using picture-elements.

Here is the post.

Started to fiddle around with lovelace and wanted to share an image on how versatile the picture-elements card is for putting in a lot of information on a small footprint.

Here is “state cards” for me and my wife.
It’s really nice to be able to have multiple “layers” of images to mimic diffrent states.

Lovelace code for one of the cards:

id: home
title: Home
cards:
  - type: picture-elements
    image: /local/ll_matte_home.png
    elements:
      - style:
          top: 50%
          left: 50%
          width: 100%
        type: image
        entity: input_select.matte_home_status
        state_image:
          "Home": /local/ll_matte_home.png
          "Just Arrived": /local/ll_matte_home.png
          "Away": /local/ll_matte_not_home.png
          "Just Left": /local/ll_matte_not_home.png
          "Extended Away": /local/ll_matte_not_home.png
      - style:
          top: 50%
          left: 50%
          width: 100%
        type: image
        entity: input_boolean.matte_charging
        state_image:
          "on": /local/ll_status_charging1.png
          "off": /local/ll_status_blank.png
      - style:
          color: white
          top: 9%
          left: 12%
        type: state-icon
        entity: sensor.matte_battery
      - style:
          color: white
          top: 92%
          left: 50%
        type: state-label
        entity: sensor.matte_presence
      - style:
          color: white
          top: 10%
          left: 89%
        type: state-label
        entity: sensor.matte_battery
      - style:
          color: white
          top: 73%
          left: 88%
        type: state-label
        entity: proximity.home_matte
      - style:
          color: white
          top: 73%
          left: 12%
        type: state-label
        entity: sensor.matte_hem
37 Likes

Thanks for sharing! That one is great Copying straight away

That’s quite interesting, Thanks for sharing!

Would you mind also share the configuration for input_boolean.matte_charging and the battery images?

Also, for the proximity, did you had to create one per-person for the home zone? I guess so unless I am doing something wrong, if I set one proximity for home with both device track it just provides the closest one, not both, so presumambly (well, this is what I did), you need to create a proximity entity per persone for the “home” zone, right?

Cheers :slight_smile:
Andrea