Styling elements in Picture elements card: a small tutorial

tapanileppanen · March 19, 2024, 12:24pm

Hi,

This is propably something stupid, but I cannot get this to work.
Inside picture element I would like to move the icon according to detected sensor values. The icon is stuck on the lower left corner.

  - type: state-icon
    entity: binary_sensor.liiketunnistin_ld2450_presence
    title: Olohuone läsnäolo
    style:
      color: red
    card_mod:
      style: |
        :host { 
         {% if states('binary_sensor.liiketunnistin_ld2450_presence') == 'off'
         and states('binary_sensor.liiketunnistin_ld2450_p0x') > '0.0' %} 
           left: 23%; 
           top: 50%;
           color: black;
         {% else %}
           left: {{ 43 - (states('sensor.liiketunnistin_ld2450_p0y') | float / 20) }}%; 
           top: {{ 88 -((states('sensor.liiketunnistin_ld2450_p0x') | float + 150) / 40) }}%;
           color: red;
         {% endif %}
        }

Ildar_Gabdullin · March 19, 2024, 12:35pm

Convert to float first.
You are comparing strings now.
UPDATE: this is a binary sensor, you cannot convert it to float!!!

No default value specified, the sensor could be unavailable/unknown.

Also,

what do you want to achieve by specifying “color”? It will not work.

tapanileppanen · March 19, 2024, 12:45pm

Thank you for the fast reply.

Color is not significant, just the icon position, so I can leave that out

Like I wrote, I’m missing the basics.

I get an error trying to convert to float

         {% if states('binary_sensor.liiketunnistin_ld2450_presence') == 'off'
         and states('binary_sensor.liiketunnistin_ld2450_p0x') | float > 0.0 %}

ValueError: Template error: float got invalid input ‘unknown’ when rendering template ‘- type: state-icon entity: binary_sensor.liiketunnistin_ld2450_presence title: Olohuone läsnäolo style: color: red card_mod: style: | :host { {% if states(‘binary_sensor.liiketunnistin_ld2450_presence’) == ‘off’ and states(‘binary_sensor.liiketunnistin_ld2450_p0x’) | float > 0.0 %} left: 23%; top: 50%; color: black; {% else %} left: {{ 43 - (states(‘sensor.liiketunnistin_ld2450_p0y’) | float / 20) }}%; top: {{ 88 -((states(‘sensor.liiketunnistin_ld2450_p0x’) | float + 150) / 40) }}%; color: red; {% endif %} }’ but no default was specified

Also do not know, how to specify default.

Can you fix my code and I try to learn more with that?

Ildar_Gabdullin · March 19, 2024, 12:51pm

I cannot “fix” it since I do not have your entities.
May only give you suggestions.

The 1st part should be

{% if is_state('binary_sensor.liiketunnistin_ld2450_presence','off') .... %}

And the 2nd part is completely wrong since a binary_sensor may only be on/off.
If this is a sensor - then it should be

 and states('sensor.liiketunnistin_ld2450_p0x') | float(default=0) > 0

In general, suggest to discuss jinja templates in separate threads & leave THIS thread for discussing using picture-elements.

tapanileppanen · March 19, 2024, 12:55pm

Thank you for the suggestions. I will try to fix this now.

And for the record, I am using picture-element and trying to get the icon move according to sensor values in real time.

typxxi · March 20, 2024, 1:18am

I am looking for a method to hide the sensors name which is always shown in case of a state-badge.

Previous suggestions had been to use the colour of the background but in this case crossing multiple colours it will not work.

Is there another way to hide this text or replace it for display only ?

LiQuid_cOOled · March 20, 2024, 1:45am

instead of using the color of the background just use transparent as the color.

typxxi · March 20, 2024, 1:59am

PERFECT AND VERY FAST RESULT cause i have 20 sensors and this way a find and replace was easy done.
Meanwhile I had found another way with
style
height: 8%
overflow: hidden

but that required also moving the top by 3% up.
Great, thanks a lot !

LiQuid_cOOled · March 20, 2024, 2:01am

Happy to assist!

Ildar_Gabdullin · March 20, 2024, 8:41am

It is also described in:
1st post → other styles for state-badge

typxxi · March 20, 2024, 9:22am

great, I have to read your introduction later when I will have more time cause I had started to read when I found it but could not find in the HA documentation all the valueable stuff here and in other topics cause I have started picture elements card yesterday for the first time where I was in need for it.

I had missed so many things possible in the HA documentation which also might be a result of CSS add on like

  - type: state-badge
    entity: sensor.pv_ue1_1_energie_heute_je_kwp
    suffix: ''
    prefix: ''
    title: 'Ü 1.1: O1'
    style:
      top: 14%
      left: 85%
      color: transparent
      transform: translate(-50,-50%) scale(1.2, 1.2)
      font-size: 17px
      font-weight: bold

which made the “FLOOR PLAN of the ROOF” aka STRING PLAN usable and readable cause first the font was so small, not bold and the badge too small before I found missing bits and pieces here and I bet that there are tons of other things I will need later on. This is my first use case and not the classic floorplan.

Satelitte picture resized and put into EXCEL to add the STRING boxes and TEXT elements (cause at that time had not found out how to implement text boxes while i know now the blank sensor trick and the pre- or suffix.

Great help this summary but I had not much time to read and play around cause I had to finish this floor plan of the strings first to have it running this morning.

And again thanks for following all your topics and adding value with such additional comments like the last small one which I had read twice to understand it fully. I let these tabs open when I have no time to study just to do it later on the weekend.

Hats off, great idea to present and collect the knowledge to 1 card in 1 spot here.

UPDATE:
the plan shows WATT / kWp and I have also added now kWh / kWp cause this shows the long time performance and per kWp makes each string comparable to any other regardless if long or short.
If you mulitply for example the 2,68 kWp of String W3.6 x 228 Watt you will get the current power of the whole string, DC power of cause
That means 3,2 % losses to get the ac figure

Neo2a · April 15, 2024, 8:28am

Hello,
Unfortunately I can’t get over a problem.
I want to superimpose another image on top of one image based on the value of a sensor, but for some reason it doesn’t match. I would like to ask for help with this.
What have I done wrong?
Please help me.

type: picture-elements
elements:
  - type: image
    image: |
      {% if is_number('sensor.plant1_sunlight_sensor') | float(0.00) < 2 %}
        /local/sun.png
      {% endif %}
    style:
      top: 30%
      left: 40%
image: >-
  https://www.freepnglogos.com/uploads/plant-png/plant-png-barter-new-sales-ims-barter-trade-exchange-network-33.png

Ildar_Gabdullin · April 15, 2024, 8:42am

Your code is unformatted. You should learn how to format a code.
The standard “image” option does not support templates.

Either use config-template-card for this particular element, or use a corr. option “state_image” (if I recall it properly).

wgumaa · April 17, 2024, 5:46pm

Hello all,

I have run into a little problem with picture elements and cant seem to solve the problem.

I have created a floorplan - which has 4 variants Morning, Afternoon, Evening and Night. I then created a time of day sensor for each of the 4 times.

My floorplans are all png and are 1920x1080

Here is the morning one:

For the background I have a transparent image of the same size.

Here is my code:

type: picture-elements
elements:
  - entity: sensor.time_of_day
    type: image
    state_image:
      Morning: local/floorplan/Morning.png
      Afternoon: local/floorplan/Afternoon.png
      Evening: local/floorplan/Evening.png
      Night: local/floorplan/Night.png
image: local/floorplan/Transparent.png

However it displays like this:

As you can see the image is of to the bottom left. However the corresponding time of day displays the correct card.

Any ideas as to what’s wrong?

Ildar_Gabdullin · April 17, 2024, 6:06pm

You have no specified top & left.

wgumaa · April 17, 2024, 6:48pm

Thanks Ildar,

Here is a full version of my card and its still displaying the same behavior even with top and left specified.

As you can see other entities are displayed correctly.

type: picture-elements
elements:
  - entity: sensor.time_of_day
    type: image
    state_image:
      Morning: local/floorplan/Morning.png
      Afternoon: local/floorplan/Afternoon.png
      Evening: local/floor/plan/Evening.png
      Night: local/floorplan/Night.png
      top: 50%
      left: 50%
      width: 100%
  - type: image
    entity: light.front_facade
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Facade.png
      'off': local/floorplan/Transparent.png
      unavailable: local/floorplan/Transparent.png
  - type: image
    entity: light.outside_entrance
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/FrontTerrace.png
      'off': local/floorplan/Transparent.png
      unavailable: local/floorplan/Transparent.png
  - type: image
    entity: light.outside_columns
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Columns.png
      'off': local/floorplan/Transparent.png
      unavailable: local/floorplan/Transparent.png
  - type: image
    entity: light.living_zone_lights_group
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Living.png
      'off': local/floorplan/Transparent.png
      unavailable: local/floorplan/Transparent.png
  - type: image
    entity: light.corridor_lights_group
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Corridor.png
      'off': local/floorplan/Transparent.png
      unavailable: local/floorplan/Transparent.png
  - type: image
    entity: light.light_group_hallway
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Hallway.png
      'off': local/floorplan/Transparent.png
      unavailable: local/floorplan/Transparent.png
  - type: image
    entity: light.kitchen_spots
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Kitchen.png
      'off': local/floorplan/Transparent.png
      unavailable: local/floorplan/Transparent.png
  - type: image
    entity: light.lights_group_bathroom
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Bathroom.png
      'off': local/floorplan/Transparent.png
      unavailable: local/floorplan/Transparent.png
image: local/floorplan/Transparent.png

The other entities (room lights) are displaying correctly

Ildar_Gabdullin · April 17, 2024, 7:08pm

Must be inside “style” option (the 1st element).
Read docs.
You did it right for other elements.

wgumaa · April 17, 2024, 7:15pm

Same thing!!

Here is my cut down code and the result:

type: picture-elements
elements:
  - entity: sensor.time_of_day
    type: image
    state_image:
      Morning: local/floorplan/Morning.png
      Afternoon: local/floorplan/Afternoon.png
      Evening: local/floor/plan/Evening.png
      Night: local/floorplan/Night.png
      style:
        top: 50%
        left: 50%
        width: 100%
image: local/floorplan/Transparent.png

Ildar_Gabdullin · April 17, 2024, 7:17pm

wrong indents

wgumaa · April 17, 2024, 7:20pm

Thanks!!! That did the trick!!! I have been wracking my brains out over this for the past 3 days!!!