Styling elements in Picture elements card: a small tutorial

[mmo (Martin)]

Hi … the example is simple.
I have one svg image with the house plan … e.g.

The size of this svg is 1000px x 500px. It is transparent with white path to be able to colorize it simply with css.

Then I have several svg icons of the same size and only one element e.g. 1 window, again white to be able to add color to it. These icons are put one over the other. When the window is closed, I colorize the window transparent, so it is invisible, when it is open I colorize it blue.
Then the result is following

It could be done as images, but then it is not possible to colorize it simply with css. Therefore I want to use icons.
Unfortuntely I am not a css expert, so I dont know how to tweak it to stretch the icon to the size of the element card. Using px moving and defining size works with one device size, but using different device or landscape mode the result is incorrect.

Other thing is that it works with rectangular icons (same height and width), which is not my case.

[Ildar_Gabdullin]

Sorry, not clear.
What do you mean by “icons”? Do not see any icons on your picture.

[mmo (Martin)]

The whole picture is an svg file which is put into UI as icon not image. e.g. fapro: floor_plan and fapro: window_livingroom and using card_mod is colorized.

It could be as well any icon eg. mdi:home.

The main picture is empty = transparent.

All picture elements are icon, all are places one over the other, have the same dimension and their visibility is controled via color - if set to some color = visible, if color is set to transparent = invisible

Or the question could be formulated: How to automatically stretch an icon in pisture elements to the width of underlaying main picture.

[Smarinof (Simon)]

Thank you so much IIdar for these explanations. I was going insane trying to position things around and that helped me a LOT.

Here’s couple of things that I’ve noted.
After trying a bunch of different cards sizes, I still had issues with a good 20px being off when resizing the browser. I was able to fix that by:

settings a fixed width of 280 in the view.

And also forcing the width of the card to 410px.
here’s the code:

type: picture-elements
style: |
  ha-card {
    width: 410px !important;
  }
elements:
  - type: image
    image: /local/smimages/testfg3.png
    style:
      left: 0%
      top: 0%
      transform: translate(-8px,0px) scale(0.5,0.5)
image: \local\smimages\testbg4.png

Changing the value over or under 410px was causing differences between the browser and my phone screen. It felt like the card was to wide but you could only see it when placing elements over it.

Now, the funny thing about that is that if I set the translate to (0,0) and play with the top and left percentage, the card get scaled. Here it is at left: 80%

Here it is at left: 0%

I have no idea why it’s behaving this way, but if I set the top and left to 0% and only play with the translate it works…

Anyway, I’m happy that I came across this post but I’m wondering if being able to set a fixed width and height in this card without card mod might help? this way you could refer to positions in pixels instead of percentage.

Thanks

[Ildar_Gabdullin]

@mmo

How to automatically stretch an icon in pisture elements to the width of underlaying main picture.

IMHO there are some limitations for resizing SVG; in my tests icon’s width/height could not be bigger than 300px - unless I manually set it bigger than 300px.

[kovacsla]

Hi,
I try to modify color of “state-label” in if statement, but doesn’t work. Could You anybody help me?

it does work:

     - type: state-label
        entity: sensor.remaning_time
        style:
          color: '#8df427'
          font-family: segment7
          font-size: 50px
          left: 100%
          top: 87%
          transform: translate(-100%,-50%)

it doesn’t work:

      - type: state-label
        entity: sensor.remaning_time
        style: |
          {% if is_state('sensor.remaning_time', '0:-1') %} color: '#555'
          {% else %} color: '#8df427'
          {% endif %} 
          font-family: segment7
          font-size: 50px
          left: 100%
          top: 87%
          transform: translate(-100%,-50%)

[Ildar_Gabdullin]

@kovacsla

try to modify color of “state-label” in if statement, but doesn’t work

It will not because you are doing smith which is not possible.
Templates are only supported in card-mod.

[kovacsla]

Thanks a lot.
Working:

  - type: state-label
    entity: sensor.remaning_time
    style: 
      font-family: segment7
      font-size: 50px
      left: 100%
      top: 55%
      transform: translate(-100%,-50%)
    card_mod:
      style: |
        :host {
          {% if is_state('sensor.remaning_time', '0:-1') %} color: #555
          {% else %} color: #8df427
          {% endif %} 
        }

[Ildar_Gabdullin]

Or you may create a variable by card-mod and then use it for color.
Described here.

[garylovesbeer (SadiBocbYetg3.)]

Hi, I have a card showing EV charging info. Can I change the background image when the car is charging? I would need to have the change take place when “switch.chalky_charger_switch” (not used in this card) is “on” and switch between a static image and a gif showing the charging animation.

I have already successfully manually changed the background image from a static screenshot image to “/local/charging.gif” and that works fine.

I have read the documentation but could not find a relevant reference to this use case.

Any and all help appeciated.

type: picture-elements
style: |
  ha-card { height: 30px !important; }
image: /local/charging.gif
elements:
  - type: state-badge
    entity: sensor.chalky_battery_sensor
    style:
      '--ha-label-badge-title-width': 100px
      top: 30%
      left: 10%
      transform: translate(-50%,-50%) scale(.75)
  - type: state-badge
    entity: sensor.chalky_range_sensor
    style:
      '--ha-label-badge-title-width': 100px
      top: 75%
      left: 10%
      transform: translate(-50%,-50%) scale(.75)
  - type: state-badge
    entity: sensor.chalky_charging_rate_sensor
    name: Charge Rate %
    state-label: kW
    style:
      '--ha-label-badge-title-width': 100px
      top: 75%
      left: 90%
      transform: translate(-50%,-50%) scale(.75)
  - type: state-badge
    entity: sensor.chalky_current_charging
    name: Charge Rate %
    state-label: kW
    style:
      '--ha-label-badge-title-width': 100px
      top: 30%
      left: 90%
      transform: translate(-50%,-50%) scale(.75)

[Ildar_Gabdullin]

Check here

[Lewis_P (Lewis)]

Great tutorials, much appreciated.

It’s early days, but I’ve started out with some basics:

https://global.discourse-cdn.com/monzo/original/3X/6/d/6d6142de6444ddba606780546757ae916c4068d6.gif(image larger than 3 MB)

[Ildar_Gabdullin]

Very nice & informative!

[garylovesbeer (SadiBocbYetg3.)]

Thanks for that. Didn’t see it in my browse.

[Mariusthvdb (Marius)]

right, so I think Ive read this topic 3 times now, did a full text search, but can not find a way how to get my states colored… mind you, this is my first and only picture-elements, so please be gentle…

trying to replicate:

I’ve managed to get to

using the following yaml:

type: picture-elements
image: /local/images/hoogspanningsmast.png
elements:

#links
  - type: state-label
    entity: sensor.calculated_totaal_dag_afname_t1
    prefix: 'T1: '
    style:
      top: 45%
      left: 25%
  - type: state-label
    entity: sensor.calculated_totaal_dag_afname_t2
    prefix: 'T2: '
    style:
      top: 50%
      left: 25%

  - type: state-label
    entity: sensor.calculated_totaal_dag_afname
    color: red
    style:
      top: 65%
      left: 25%

# right
  - type: state-label
    entity: sensor.calculated_totaal_dag_levering_t1
    prefix: '-T1: '
    style:
      top: 45%
      left: 75%
  - type: state-label
    entity: sensor.calculated_totaal_dag_levering_t2
    prefix: '-T2: '
    style:
      top: 50%
      left: 75%

  - type: state-label
    entity: sensor.calculated_totaal_dag_levering
    color: green
    style:
      top: 65%
      left: 75%

# middle

  - type: state-label
    entity: sensor.saldo_totaal_dag_energie_afname
    prefix: 'Saldo: '
    style:
      top: 85%
      left: 48%

color: does not do anything obviously, nor does the paper-item-color.

please help me out pointing me to some instructions how to

set the states color
set some font size and weight

preferable mimic the super script on the states (where I now use a prefix)

thanks for your feedback in advance!

[Ildar_Gabdullin]

@Mariusthvdb

  - type: state-label
    entity: sensor.calculated_totaal_dag_afname
    color: red
    style:
      top: 65%
      left: 25%

The “color” option must be inside the “style” option.

@Mariusthvdb

set some font size and weight

Same, inside “style” option.
Check a table of contents in the 1st post for a proper link about fonts.

[Mariusthvdb (Marius)]

thanks!
Dont see how I missed that, but I did…

much better. not yet perfect, but it’s improving

[Mariusthvdb (Marius)]

managed a link with an icon with:

  - type: icon
    icon: mdi:chart-sankey
    tap_action:
      action: navigate
      navigation_path: /ui-data/energie_sankey
    style:
      color: skyBlue
      top: 5%
      left: 5%

but id love to have a ‘button’ like text at the bottom to do so preferably:

  - type: ?
    title: Sankey chart
    style:
      color: skyBlue
      top: 95%
      left: 60%
    tap_action:
      action: navigate
      navigation_path: /ui-data/energie_sankey

is there no type to do so? I noticed the service-button in the examples:

  - type: service-button
    title: Turn lights off
    style:
      color: red # does Not work??
      top: 95%
      left: 48%
    service: homeassistant.turn_off
    service_data:
      entity_id: group.all_lights

providing at least the design I am looking for (although the style is not applied). Navigation is no service though, so I can not use this:

Also tried to attach the action to the main image, but that too is not supported…?

guess we need a custom card for that

  - type: custom:button-card
    name: GA NAAR SANKEY-CHART
    style:
      top: 90%
      left: 48%
    styles:
      card:
        - color: var(--mdc-theme-primary)
        - box-shadow: none
        - font-size: var(--mdc-typography-button-font-size, .875rem)
        - font-weight: var(--mdc-typography-button-font-weight,500)
        - font-family: var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif))
        - letter-spacing: var(--mdc-typography-button-letter-spacing,.0892857143em)
    tap_action:
      action: navigate
      navigation_path: /ui-data/energie_sankey

dark:

light:

[Ildar_Gabdullin]

@Mariusthvdb

Also tried to attach the action to the main image, but that too is not supported…?

Correct, not supported.
As a workaround:
– add an “image” element;
– it must cover whole card;
– define a tap_action for this element.
Check here.

[Mariusthvdb (Marius)]

I see yes, that would be a nice workaround, thanks. Was this discussed before? the card not being able to use the regular action configuration? Seems a bit odd imho and not consistent with all other cards.

btw, I moved the styling of the action_button to the button_card_templates. Figured it might come in handy in other spots as well:

styles_action_button:
  styles:
    card:
      - color: var(--mdc-theme-primary)
      - height: 36px
      - box-shadow: none
      - -webkit-font-smoothing: antialiased
      - font-size: var(--mdc-typography-button-font-size,.875rem)
      - font-weight: var(--mdc-typography-button-font-weight,500)
      - font-family: var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif))
      - text-transform: var(--mdc-typography-button-text-transform,uppercase)
      - letter-spacing: var(--mdc-typography-button-letter-spacing,.0892857143em)

resulting in the following config entry for that element in the picture-elements card:

  - type: custom:button-card
    template: styles_action_button
    name: ga naar sankey-chart
    style:
      top: 90%
      left: 20%
    tap_action:
      action: navigate
      navigation_path: /ui-data/energie_sankey

Ive outlined it horizontally with the icon at the top, might change that because I feel it’s a bit of a visual mess… otoh, the regular position of these action-buttons on eg the Powerflow card is a bit of a distraction too.

Only need to find a way to add a type:divider there now. Might need yet another custom element for that.

cool, with the exception of the Euro sign, this might even have become more informative than the original of my Zwave bridge