Styling elements in Picture elements card: a small tutorial

Awesome, i really appretiate your work here!:):

1 Like

Does anyonne know how to make the hitbox of the icons bigger and how to remove the shadow of the picturelement?
I want to get rid of the black line at the bottom.
image

type: picture-elements
elements:
  - type: icon
    icon: mdi:chevron-up
    tap_action:
      action: call-service
      service: script.fernseher_up
    style:
      top: 18%
      left: 50%
      transform: translate(-50%, -50%) scale(2, 2)

Great examples. How would you set the height of an image element based on a sensor value?
The use case is using overlays with transparent parts over the main image to show levels in tanks.

The element size is better to set dynamically by card-mod since it supports templates.

1 Like

Hi!

I’m building my floorplan with picture-elements card and I run into a problem: I cannot change the icon color of a switch when it is turned on.

My code is the following:

          - type: state-icon
            tap_action:
              action: toggle
            entity: light.terasz_szoba_lampa
            style:
              bottom: 33%
              right: 7%
              border-radius: 50%
              "--paper-item-icon-color": black
              "--paper-item-icon-active-color" : yellow
              text-align: center
              background-color: rgba(102, 102, 102, 0.2)

I’d like to have the “switched on” color yellor.

Any ideas? :slight_smile:

Useless here since there is no name displayed.

This works - you may check it if change “black” to “cyan” to be sure.

This does not work due to the light entity.
Check this:

type: picture-elements
elements:
  - type: state-icon
    entity: light.virtual_light_1
    tap_action: &ref_tap_action
      action: toggle
    style:
      bottom: 33%
      right: 7%
      <<: &ref_settings
        border-radius: 50%
        '--paper-item-icon-color': cyan
        '--paper-item-icon-active-color': red
        background-color: rgba(102, 102, 102, 0.2)
  - type: state-icon
    entity: input_boolean.test_boolean
    tap_action: *ref_tap_action
    style:
      bottom: 53%
      right: 7%
      <<: *ref_settings
image: /local/images/blue.jpg

изображение

It works for the input_boolean entity and does not for the light entity.
You need to “override” this by some way - kind of using “!important” in CSS.
Seems that card-mod may be the only solution (provided here).

Hi all,

Thanks for all these great ideas!

Is there any way to rotate an icon according a variable?
Let’s say, something like this:

 - type: icon
     icon: mdi:bike
     style:
       top: 38%
       right: 7%
       transform:
         rotate({{ states('sensor.mower_yaw')|int  }}deg)

It is to set an icon according the position of the mower.

Check this.
Specify a variable by card-mod, then use it.

It sound easy… but how I specify and use it?

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_number.test_number
  - type: picture-elements
    style: |
      ha-card {
        {% set ANGLE = states('input_number.test_number') + 'deg' %}
        --my-transform-style: translate(-50%,-50%) rotate({{ANGLE}});
      }
    elements:
      - type: icon
        icon: mdi:arrow-up-thin
        style:
          top: 18%
          color: orange
          left: 20%
          transform: var(--my-transform-style)
    image: /local/images/blue.jpg

image

Nice!
Really appreciated!!

Still cannot use as icon, but this is another option.
Thanks again

Nop. Copy/pasted the code, created the test_number and the image, but does not rotate

image

Anyway, I will keep trying with this idea.

Did you try changing a value of the input_number?
Or do you expect a continuous rotation?

I did, yes. You can see it in my picture.
I see in your picture that worked for you, but for any reason it does not rotate mine.

Do you have card-mod installed?

Yes, I have it installed

Then check again. Copy / paste exactly my code, check if the input_number is created.
Check whether you card-mod working with a simple examples, is it of the latest version.

Paste that code into the Template (dev-tool):

{% set ANGLE = states('input_number.test_number') + 'deg' %}
{{ANGLE}}

See what it returns:

Hi!

I have card-mod 3.1.5 installed and tested with simple rotate and translate examples. I came across this post and I´m also trying to achieve something like this. I tried your code and on the Template (dev-tool) that code works as expected but does not work when using it on the card configuration.
I´m a newbie so I don´t know if it has something to do with the variable “–my-transform-style” because I tried modifying the variable so that it would rotate 15deg instead of using the “ANGLE” value and didn´t rotate either.

Thanks for your help! Really appreciate it!

… and where is your code?

I tried yours first then mine. Here´s mine

type: picture-elements
style: |
  ha-card {
    {% set ANGLE = states('sensor.pitch') + 'deg' %}
    --my-transform-style: translate(-50%,-50%) rotate({{ANGLE}});
  } 
elements:
  - type: state-badge
    entity: sensor.front
    style:
      top: 84%
      left: 50%
      transform: var(--my-transform-style)
image: >-
  https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRbI_TB-oQI1xUV4iHDzRDf7ocC-F09qP6nHw&usqp=CAU

What I´m trying to do is an inclinometer. So at the end what I want to accomplish is having a couple images rotate according to roll and pitch values coming from a sensor.

Thanks!