Show off your picture-elements uses

Share your Projects! Lovelace & Frontend
#386

I am trying to keep the images pure so I can change the text etc. without editing the image everytime.

I managed to create the background bar by using type: icon without an icon.
I wanted to use ‘title’ in the icon element but that does not seem to work. Maybe I am missing something?

  - type: icon
    icon: mdi
    title: Living room
    style:
      background-color: rgba(0, 0, 0, 0.5)
      bottom: 0
      color: white
      font-size: 12px
      left: 0
      line-height: 300%
      padding: 0 0px
      transform: initial
      width: 100%

P.S.: The icon is left blank on purpose. That way I can create an “empty” bar at the bottom.

#387

Why not using state-label & image as elements?

1 Like
#388

Because I would need an image (required) and I would need an entity who’s label I can use. Meaning, I would have to manually create an entity just so I can display a label. Actually I would need to create a bunch of entities as I need different labels.

#389

Imho creating a bunch of entities for service purpose - not a big deal.
Alternatively you may use a markdown card: create a decluttering template for a card w/o background and with required font-size, then use it in 100 places.

1 Like
#390

Thank you @Ildar_Gabdullin , I will look into that and give it a try :slight_smile:

#391

Styling Picture elements
Using card-mod for Picture elements
Styling conditional elements

1 Like
#392

Sorry, found the information when I googled for css styling, so I removed the question before you answered.

But what I hae not fixed yet:
I would like the main image to have a tap_action.

Tap_action for the picture of picture elements card is not supported. So I figured I would simply use my target image in ‘type: image’.
But that leaves me with the issue of defining the (invisible) background image of the picture elements card.

I wanted to use a small “dummy” image to reduce the loading time etc. But I cannot figure out how to scale it to size.

type: picture-elements
elements:
  - type: image
    image: /local/images/alex_half.jpg
    style:
      width: 100%
      height: 100%
      transform: initial
      top: 0%
      left: 0%
    tap_action:
      action: navigate
      navigation_path: /lovelace-home/areas/
  - type: state-label
    entity: person.alex
    style:
      background-color: rgba(0, 0, 0, 0.5)
      bottom: 0
      color: white
      font-size: 12px
      text-align: left
      left: 0
      line-height: 100%
      padding: 0 0
      transform: initial
      width: 100%
image: /local/images/alex_half.jpg

This works, but it loads my alex_half_jpg twice, which is a waste of resources.
If I wanted to change the picture card image to e.g. a 1x1px image, how could I scale it to the size of the ‘type: image’ image?

#393

I noticed that the layout looks quite different in my browser compared to the companion app. So it seems that the layout is not being applied correclty even though I am specifying everything in relative values (%) rather than absolute (px).
Is this a known issue or am I defining something wrongly?

Browser Editor Preview:
image
Browser dashboard after saving:
image

Companion app:

Screenshot_20220423-230118_Home Assistant
Screenshot_20220423-230118_Home Assistant1434×198 103 KB

Code:

type: picture-elements
elements:
  - type: image
    image: /local/images/black_50.png
    style:
      bottom: 0%
      left: 0%
      width: 100%
      height: 15%
      transform: none
      background-color: rgba(0, 0, 0, 0.0)
    tap_action:
      action: navigate
      navigation_path: /lovelace-home/persons
    hold_action:
      action: none
  - type: state-icon
    entity: light.ambient_light_lr
    icon: mdi:ceiling-light-outline
    tap_action:
      action: toggle
    style:
      bottom: 0%
      right: 5%
      transform: none
      '--paper-item-icon-color': white
      border-radius: 5px
  - type: state-icon
    entity: light.main_light_lr
    icon: mdi:ceiling-light
    style:
      bottom: 0%
      right: 20%
      transform: none
      '--paper-item-icon-color': white
      border-radius: 5px
    tap_action:
      action: toggle
  - type: custom:slider-entity-row
    entity: climate.eq_3_living_room
    name: Living Room
    full_row: true
    min: 4.5
    max: 23
    step: 0.5
    hide_state: false
    style:
      bottom: 0%
      left: 10%
      transform: none
      '--paper-item-icon-color': white
      border-radius: 5px
  - type: state-label
    entity: sensor.eq_3_battery_living_room
    prefix: (
    suffix: )
    style:
      bottom: 0%
      left: 44%
      transform: none
      color: black
      font-weight: bold
      text-transform: lowercase
      text-shadow: 1px 1px 1px white
      opacity: 50%
      border-radius: 5px
image: /local/images/living_room_16_9.jpg
#394

You can use text-element. It is available via HACS. The code in picture element card looks then following:

type: picture-elements
image: /local/ups_background.png
elements:
  - type: custom:text-element
    text: Your Label
    style:
      top: 90%
      left: 15%
1 Like
#395

Am I the only one to observe this? Or am I doing something wrong?

#396

No, that is common with picture element cards.
As far as I know there is only two ways to deal with it.

Live with it

or

Create different cards for different devices.

I believe a lot of us just sigh and go with #1.

1 Like
#397

Strange. Has an issue been raised on github on this? Relative positions should be identical on all devices. I am terrible at living with things :joy:
Especially since the whole purpose of the picture elements card is to create something “pretty” :wink:

#398

There are problems with scaling.
The same card may look differently on the same Chrome after resizing a windows, not to mention other screen sizes.
For example:

#399

It could be just rounding the numbers that makes those differences.

#400

I doubt that rounding is an issue given the extreme variations.
And if you look at my example above, the shift is not only horizontal but also vertical. So at least the base line should be identical given the identical vertical percentage used.

Scaling should also not be the issue given again that there is a baseline shift. So at least the base line should be identical. Scaling would cause a problem towards the top, not the bottom, IMHO.

#401

The scaling/rounding has to be done both vertical and horizontal.

#402

Yes, but if you define the base line at 0% from bottom then, unless there are multiple problems aside from the actual scaling, the object should be placed at the lowest possible point and then scaled upwards and sidewards from there.
So a horizontal shift would be explained by scaling problems. But a shift downwards if you are already at the lowest point (bottom: 0%), would not be a simple scaling problem. It would be a problem of the initial positioning.

And if the base line is e.g. at pixel 10 from bottom on one display and pixel 50 from bottom at another (each representing 0%), then all objects should be placed at pixel 10 from bottom or pixel 50 from bottom.
You should not see some at pixel 45, some 50 and some 55. Rounding cannot result in different values if the factor is a constant and the rounding is applied to the same variable.

#403

Is it possible to somehow use the horizontal-stack card in picture elements? It seems like it is possible to use custom cards so I am not sure why an integrated card should be any different from a custom card.

#404

Thomas Lovén’s custom hui-element card is usually the way to get around this limitation, but I’ve not tried it myself with a picture elements card, so can’t 100% guarantee it will work in this case. But worth a try I would think.

2 Likes
#405

Thank you @reste_narquois , that seems to do the trick!

I think I get there by now combining grid & button & card-mod. Let’s see how it goes :slight_smile: