Show off your picture-elements uses

[Ildar_Gabdullin]

Please help me ).
Cannot understand "translate()" function.

There is a Picture elements card with:

• background image;
• icons.

According to this, a default "translate()" is (-50%,-50%).
My rotated icons a shifted. To prevent it, I have to explicitly deifine "translate(-50%,50%)":

type: picture-elements
elements:
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 18%
      left: 10%
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 18%
      left: 30%
      transform: rotate(0.25turn)
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 18%
      left: 50%
      transform: 'translate(-50%,-50%) rotate(-0.25turn)'
  - type: state-badge
    entity: sensor.cleargrass_1_co2
    style:
      top: 18%
      left: 70%
      transform: 'translate(-50%,-50%) rotate(0.5turn)'
image: /local/images/blue.jpg

Why does rotation cause this shift?

[Ildar_Gabdullin]

And there is a question about using image inside Picture elements card.

There are two images of SAME size:

• solid blue (jpg);
• pink with transparent scribbles (png).
  

Please check this code:

  - type: picture-elements
    elements:
      - type: image
        image: /local/images/pink_mask.png
        style:
          top: 0%
          left: 0%
    image: /local/images/blue.jpg

Default translate() is (-50%,-50%)
Here a center of the 2nd image (pink) is located on the left top corner.
This is OK (expected behaviour).

Next:

  - type: picture-elements
    elements:
      - type: image
        image: /local/images/pink_mask.png
        style:
          top: 50%
          left: 50%
    image: /local/images/blue.jpg

Here a center of the 2nd image (pink) is located on the center of the card.
Also the 2nd image is scaled - WHY???

Next:

  - type: picture-elements
    elements:
      - type: image
        image: /local/images/pink_mask.png
        style:
          top: 0%
          left: 0%
          transform: 'translate(0,0)'
    image: /local/images/blue.jpg

Here a left top corner of the 2nd image (pink) is located on the left top corner of the card.
This is OK (expected behaviour).

But in “Panel mode” it looks bad, WHY?

When I start resizing the browser’s window (from full screen to a smaller size), at some point pink & blue images become of one size (as required).

Update:
Seems this is a bug:

1. The main image (property of Picture elements card) is resized properly.
2. The child image (property of the embedded “image” object) is resized NOT MORE than it’s actual size.
   So I found a workaround - all images must be at least 1920x1200 (resolution of my screen).

[marrossko]

Hi,
I have a little issue with the alignment of the label elements in my picture-element card. Here is my code:

- type: picture-elements
              image: /local/lovelace/images/top_section.png
              elements:
                - type: state-icon
                  entity: sensor.ha_update_available
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/0
                  style:
                    top: 5%
                    left: 3%
                    transform: scale(1.5,1.5)
                - type: custom:text-element
                  text: "HASS.io"
                  style:
                    top: 21%
                    left: 11%
                    font-size: 20px
                    font-weight: bold
                - type: state-label
                  entity: sensor.ha_installed_version
                  style:
                    top: 43%
                    left: 11%
                - type: state-label
                  entity: sensor.ha_last_reboot
                  style:
                    top: 64%
                    left: 11%

all labels are aligned from left: 11px, However, on the screen it seems as the elements are aligned as center to each other. …

How can I align all three elements to the left?

[Ildar_Gabdullin]

@marrossko

How can I align all three elements to the left?

Each element has a “center point” which is by default at the real center of the element.
And position of each element (top, right) is defined for the center.
That is why all text labels are placed aligned centrally.
To prevent this use:
transform: translate(0,0)
By default transform = translate(-50%,-50%).

Have a look at this:

type: vertical-stack
cards:
  - type: picture-elements
    image: /local/images/blue.jpg
    elements:
      - type: state-icon
        entity: sensor.ha_version_latest_haio
        style:
          top: 5%
          left: 3%
          transform: 'scale(1.5,1.5)'
      - type: state-label
        entity: sensor.ha_version_latest_haio
        style:
          top: 21%
          left: 11%
          font-size: 20px
          font-weight: bold
      - type: state-label
        entity: sensor.rpi_last_boot_formatted
        style:
          top: 64%
          left: 11%
      - type: state-label
        entity: sensor.ha_version_current
        style:
          top: 43%
          left: 11%
      - type: state-label
        entity: sensor.rpi_last_boot_formatted
        style:
          top: 64%
          left: 11%
  - type: picture-elements
    image: /local/images/blue.jpg
    elements:
      - type: state-icon
        entity: sensor.ha_version_latest_haio
        style:
          top: 5%
          left: 3%
          transform: 'translate(0,0) scale(1.5,1.5)'
      - type: state-label
        entity: sensor.ha_version_latest_haio
        style:
          top: 21%
          left: 11%
          font-size: 20px
          font-weight: bold
          transform: 'translate(0,0)'
      - type: state-label
        entity: sensor.ha_version_current
        style:
          top: 43%
          left: 11%
          transform: 'translate(0,0)'
      - type: state-label
        entity: sensor.rpi_last_boot_formatted
        style:
          top: 64%
          left: 11%
          transform: 'translate(0,0)'

[marrossko]

perfect. it works! thanks

[olealm (Ole)]

Almost 2 years and a few hour of smart home hobbying, you might say it’s getting (way too) crowded
Guess I just like a total overview in addition to the room-by-room cards.

[brenninger01]

Did you ever figure out what was causing the hui-picture-elements-card error?

I’ve been getting the same thing. It works once, then whenever I refresh the page, it causes the error again.

[Steveuk]

From what I remember it’s some kind of cache issue.
I installed a custom component from hacs called “Lovelace Card Preloader”
And then in my raw configuration I entered which cards I wanted pre loading like it mentions in the documentation.
From what I remember though I had to delete all the cache from the browser and force close etc.
I’ve stopped using it now though as I could never get the avatars changing correctly and my wife wasn’t keen on every road and movement being displayed

[LeFab (Fabien Dostie)]

I have been using the Material interface since day one, it completely changed the game for LMS

Now its most definitely the best server/interface combo around, specially with PicorePlayer its fast reliable the sound is incredible too I tweaked the DSD and the sox filters etc… I have some of the best sounding audio i’ve heard in my house plus it looks good!

[Sian]

A while ago I showed my floorplan which has now evolved into a more sophisticated user friendly interface. I just made a YouTube video demonstrating this and I hope the reception will be positive in which i can start looking at future videos involving tutorials also.

Introduction to Home Assistant floorplan and Honeycomb menu module

[Night_Lightning]

Please share how you did those sprinkler schedules, they look so awesome!!!

[joseecm]

Hi all!
I’m trying to show a blinking warning notification when a binary sensor is active using an image inside a picture elements. I have the code below but it doesn’t work. Does anyone know how to do it?

type: picture-elements
image: 'https://demo.home-assistant.io/stub_config/floorplan.png'
elements:
  - type: image
    entity: binary_sensor.alarm
    style:
      top: 35%
      left: 49%
      animation: blink 2s linear infinite

    state_image:
      'on': /local/images/icon-alert.png

[theone (Dan Kessler)]

Code available on Github

theone11/HomeAssistantConfig

r/homeassistant - My Home Assistant Floorplan Dashboard

[Night_Lightning]

That is AWESOME! I think my head might explode trying to piece it together, but I’m gonna give it my best shot! Thanks!

[Posreg (Daros)]

Using your hints I’m getting closer and closer!
Still have to work on backgrounds and colors etc (currently no access to photoshop)

2 questions, would you know the image got in the grey scale ? config exactly like yours, would it be something in Lovelace ?

second, would you mind sharing what is behind `

sensor.mike_in_bed

motion sensor ? light ? geo ?

appreciate!
thanks

[Posreg (Daros)]

Steve, did you resolve the issue with the Piccture in the grey scale :)?

[Steveuk]

Not really no.
I gave up on that type of card as I couldn’t figure things out in my head
I just use a basic non changing avatar picture now with the status zone location underneath.
I think it may have been some kind of state overlay causing it.

[obaldius]

My old kindle fire 7 doesn’t allow any custom cards, so the only way I found to build a decent dashboard with the stock lovelace tools was by creating a picture-elements card that coverered the whole screen and set all the elements on top of that picture. The picture in the botton is just a black screen same size as the kindle’s screen. All the elements on top are picture elements.

[LSD70]

Here is my main dashboard based on picture-elements. I have tried to collect as many information possible but still keeping the look nice and neat. Several conditional elements are also active, for example, when a dimmer is switched an additional icon appear to adjust the level, or when the lights are on consumed power is visualized.
Any feedback is welcome.

[Posreg (Daros)]

Somehow, managed to get it working

card:
  cards:
    - elements:
        - entity: ${'device_tracker.life360_' + vars[0]}
          image: >-
            "${states['sensor.' + vars[0]
            +'_status'].attributes['entity_picture']}"

I replaced entity directly

card:
  cards:
    - elements:
        - entity: device_tracker.life360_your_name
          image: >-
            "${states['sensor.' + vars[0]
            +'_status'].attributes['entity_picture']}"