Styling elements in Picture elements card: a small tutorial

Ildar_Gabdullin · February 8, 2023, 8:39am

Do you have card-mod installed?

Ildar_Gabdullin · February 8, 2023, 8:44am

Create a design in MS paint or something. Then you may choose a suitable element.
Do not forget about a possibility of using custom cards as elements; for instance, you may end up using custom:button-card for displaying complex data and/or tap_action.

maniackcrudelis · February 8, 2023, 8:44am

Yes I’ve installed it, I figured your example wouldn’t work without it.
But is there a way to be sure the mod is actually working ?

Ildar_Gabdullin · February 8, 2023, 8:47am

In case of using Chrome - open Code Inspector ; or whatever it is called in your browser.
Check the INFO panel, there must be a message about card-mod and it’s version.
Probably, if you say that my example did work - then it is really installed.
Now go to card mod thread - 1st post - link at the bottom - consolidation post - find an article about different clients

maniackcrudelis · February 8, 2023, 8:49am

Indeed, I have CARD-MOD 3.2.0 IS INSTALLED

maniackcrudelis · February 8, 2023, 9:02am

Oh thank you so much !!!
Finally found THE post that explained everything !!!

And now it work depending of the screen size.
Thank you again

sender · February 10, 2023, 7:20pm

Sorry, something like this

Ildar_Gabdullin · February 11, 2023, 12:45am

Ok, the card must contain:

main background image - satellite image
3 elements.

And now you should decide about these elements - absolutely same questions when designing any UI:

do you need displaying data on them? Is it one sensor or many? Is it some sensor’s state or attribute - or is it some processed data based on other sensor/sensors? Is it “text”, “text + icon”, “icon”? Any graphs, any tables?
do you need any tap_action for an element? A different actions for different parts of an element?

What you may need is custom:button-card; or it could be a stack of different cards; or it could be a simple markdown card.

Bagunda · February 11, 2023, 9:21am

How to connect a font downloaded from the Internet?

NCO3 · February 12, 2023, 8:19am

That’s awesome stuff.
Thank you very much for putting this together!
You made my day

mmo · February 12, 2023, 1:35pm

Hi, how is it possible to scale the icon to full width of the picture element container?

I have overlaying images as svg icon files, which change the color based on state. Using width defined in px it is possible to adjust the elements to one device size, but on the other (or e.g. in landscape mode) the width of the pictures element card is different.

thanks

Ildar_Gabdullin · February 12, 2023, 7:13pm

Give a SHORT code with an icon you wish to stretch.

mmo · February 13, 2023, 7:10pm

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 · February 13, 2023, 8:00pm

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

mmo · February 14, 2023, 6:23am

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 · February 23, 2023, 7:31pm

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 · February 25, 2023, 2:24am

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 · March 8, 2023, 1:43pm

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 · March 8, 2023, 7:40pm

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

kovacsla · March 9, 2023, 9:29am

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 %} 
        }