Styling elements in Picture elements card: a small tutorial

[JHarrington (Jonathan Harrington)]

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!

[Ildar_Gabdullin]

… and where is your code?

[JHarrington (Jonathan Harrington)]

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!

[Ildar_Gabdullin]

  - 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

[Ildar_Gabdullin]

@JHarrington

translate(-50%,-50%)

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.

@JHarrington

states('sensor.pitch')

Check if the output of gives valid numbers.

[JHarrington (Jonathan Harrington)]

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

[Ildar_Gabdullin]

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.

[FelisucoVFR (Felix)]

It is finally working after a reboot and finishing other things.
Thanks a lot

[JHarrington (Jonathan Harrington)]

Ok I tried it with a default theme and didn´t work. Then I noticed my sensor output had 1 decimal. Changed it to 0 decimals and now IT IS WORKING!!!

Thanks for your time and sharing your knowledge!

One last question: On a Picture Elements Card, can I rotate the background image with the same method? How?

Thanks again!

[Ildar_Gabdullin]

@JHarrington

can I rotate the background image with the same method? How?

You only can do it by using “pure card-mod” - but results may not satisfy you:

type: vertical-stack
cards:
  - type: picture-elements
    elements:
      - type: state-icon
        entity: sun.sun
        style:
          top: 50%
          left: 50%
    image: "/local/images/blue_low_2.jpg"
  - type: picture-elements
    elements:
      - type: state-icon
        entity: sun.sun
        style:
          top: 50%
          left: 50%
    image: "/local/images/blue_low_2.jpg"
    card_mod:
      style:
        hui-image $: |
          img {
            transform: rotate(45deg);
          }

[schneemensch]

Thanks for the tutorial which helped al lot. So far I did not manage to display the entity’s name. I can show state-label as well as state-icon, but is there a way to show the entity name or write a name as I’d prefer names instead of icon in this case?

best Florian

[Ildar_Gabdullin]

Consider using Entities card for displaying icon/name/states - w/o a border, with transparent background, with defined width.

[schneemensch]

That’s what I used so far, but no option for a background image, right?

[Ildar_Gabdullin]

Use card mod to set transparent background and removing borders and any other styling

[GoodyGizmos]

I’m trying to recreate an Apple Remote using Photoshop by exporting each layer individually for each button. I thought this would be the best way since it would preserve the exact base dimensions for the base image and overlaid image elements (i.e. autoscale), but it appears that the picture elements card resizes image elements. Is there a way around this so that the elements scale in relation to the base image?

Photoshop

Picture Elements Card Configuration

[bigscience]

There are width and height parameters you can set in style. Not sure that’s what you’re looking for but that’s how I set my doors and windows to scale off of a green or red rectangle.

     - type: image
        entity: binary_sensor.l_gate_opened
        state_image:
          "on": /local/redwall.png
          "off": /local/greenwall.png
          "unknown": /local/red_x.png
          "unavailable": /local/red_x.png
        style:
          top: 93%
          left: 5%
          width: 6%
          height: 1%

[GoodyGizmos]

@bigscience Thanks. I’m aware of those parameters and was able to get it to look right, but if the picture element is already at the same scale as the base picture, why is it resized to begin with?

[bigscience]

So if I’m following you, you made the buttons and background at the right sizes they shouldn’t need any adjustments but they do? I can’t say for sure but my guess is that it puts regular icons in at a normal size and then other pictures at the size of the background. Here you can see my floor plan with the pictures adjusted to the size I want with the height/width settings:

      - type: image
        entity: binary_sensor.living_room_motion_detected
        state_image:
          "on": /local/motion_red.png
          "off": /local/motion_grey.png
          "unknown": /local/red_x.png
          "unavailable": /local/red_x.png
        style:
          top: 60%
          left: 88%
          width: 5%

If I add in a picture with no scaling, it makes it full size:

      - type: image
        entity: binary_sensor.living_room_motion_detected
        state_image:
          "on": /local/motion_red.png
          "off": /local/motion_grey.png
          "unknown": /local/red_x.png
          "unavailable": /local/red_x.png
        style:
          top: 50%
          left: 50%
#          width: 5%

[GoodyGizmos]

You’re addressing my question. I suppose I still don’t understand why it works this way and am trying to determine if it’s a good feature request to have non-CSS scaled picture elements to essentially auto-scale with the background/base image.

[GoodyGizmos]

Here’s another question. Is there a way to get this card to use the transparency data for the action zones of non-rectangular .png’s used as picture elements?

The picture elements I used are .png’s with transparency, but it appears that this card does not use that information to determine the “action zones” (or whatever they’re called). Here’s a screenshot with the elements’ opacity at 50% (will eventually be set to 0%). My cursor focus is at the top left corner of the info popup which is in the transparent area of the picture element image, but within the horizontal and vertical dimensions of the image.