Styling elements in Picture elements card: a small tutorial

Share your Projects! Dashboards & Frontend
29

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:

30

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).

32

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.

33

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

34

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

35 
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

36

Nice!
Really appreciated!!

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

37

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.

38

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

39

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.

40

Do you have card-mod installed?

41

Yes, I have it installed

42

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:

изображение
изображение974×302 22.7 KB

43

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!

44

… and where is your code?

45

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!

46

ro1

  - type: picture-elements
    style: |
      ha-card {
        {% set ANGLE = states('input_number.test_number') + 'deg' %}
        --my-transform-style-2: translate(-50%,-50%) rotate({{ANGLE}});
        height: 150px !important;
      } 
    elements:
      - type: state-badge
        entity: sensor.processor_use
        style:
          top: 20%
          left: 50%
          transform: var(--my-transform-style-2)
    image: /local/images/blue.jpg
2 Likes
47

What browser do you use?
Recently I realized that Safari does not understand some CSS )))
Open Code inspector and check if the style is applied to the element.
If it reports an error like “wrong value” or “wrong property” - then it means that this browser does not understand it, you need to find another way…

At least this code works in Win+Chrome, iPadOS, Win+FF.

Check if the output of gives valid numbers.

48

Yes that code gives the correct output of the value of the sensor and I’m using Windows 10 with Chrome browser. If I don’t use use the variable and set the degrees to a fixed value it works correctly so that’s why I’m assuming the problem might be the variable

49

Copy/paste my code with input_number - does it work?
Actually, what I did is:

  • took you code;
  • replaced sensor.pitch with my helper;
  • replaced your image & a sensor for the badge.

And the code is working.

Also, try it with a default theme.