Picture Elements width and title issues

[juansa (Juan)]

Hi all,

Hope you’re doing well!

I’m trying to create a floor plan with all the lights and things that I have at home, but I’m having a couple of issues. Right now I’m using this code to do the tests:

panel: true
type: picture-elements
image: local/Casa_plano.png
elements:
  - type: state-badge
    entity: sensor.netatmo_meteo_barcelona_comedor_temperature
    style:
      top: 55%
      left: 50%
  - type: state-icon
    Title: Salita
    entity: light.salita
    tap_action:
      action: toggle
    style:
      top: 82%
      left: 65%

I tried to use the codes in this link: https://www.home-assistant.io/lovelace/picture-elements/

I want to reduce the width of the plan, I tried to use the “width” command, but I was unable to reduce the picture, adding the width command such as:

panel: true
type: picture-elements
image: local/Casa_plano.png
width: 90%

The other issue that I have is that I cannot change the name of the entity, I tried with command “Title”, “Name”, “prefix”, sufix" but no luck. I add this line just below the Entity one. Such as:

elements:
  - type: state-badge
    entity: sensor.netatmo_meteo_barcelona_comedor_temperature
    title: Comedor
    style:

The last issue that I have is the width of the Icon. I tried with command width and iron-icon, but no luck.

  - type: state-icon
    Title: Salita
    entity: light.salita
    tap_action:
      action: toggle
    style:
      top: 82%
      left: 65%
      --iron-icon-height: 120px
      --iron-icon-width: 120px

Thanks in advance for your help and suggestions.

Regards,

[petro]

@juansa

I want to reduce the width of the plan, I tried to use the “width” command, but I was unable to reduce the picture, adding the width command such as:

width is not a valid field for the picture-elements card. Take a look at the documentation. It lists all available fields.

If you want to change the width of the card, you’ll need to use a custom card because the base picture-elements does not support this feature. The custom “card” called card mod will allow you to modify this.

@juansa

Title: Salita

All fields should be lowercase. title is correct, Title is not. Also, this is just for the tool tip, not the name that appears. If you want to change the name that appears, change the name of the sensor in the customize section or on your device page.

If you just want to modify this in the picture-elements card only, you’ll need a custom card. I can’t think of any card that does this but I’m sure others might have a custom solution.

[juansa (Juan)]

Hi,

Cap used in title was a mistake adding it to the post, as in the code I tried without using the caps. Retried now, but issue is till there.

Will check now that link. Thanks!

[petro]

@juansa

Cap used in title was a mistake adding it to the post, as in the code I tried without using the caps. Retried now, but issue is till there.

Yes because you didn’t read what I said, it’s not an issue it changes the tooltip only.

@petro

All fields should be lowercase. title is correct, Title is not. Also, this is just for the tool tip, not the name that appears. If you want to change the name that appears, change the name of the sensor in the customize section or on your device page.

[juansa (Juan)]

Hi,

Thanks for the name change in the sensor section that helped a lot and of other cards. Also if the idea was to leave it blank, but with the new name it helps.

Still having issues for the width of the icon inside the Picture Element.

Regards,