Styling elements in Picture elements card: a small tutorial

@Ildar_Gabdullin you seem to be the expert here! :smile:

I have a follow up question. I now want to have navigation overlays on my floorplan.

So I know how to create a light entity with toggle and position it.

I also saw in the documentation the navigation which is what I am trying to do.
The idea is you tap on a room and it navigates to a specific panel. I am thinking can it be done with transparent images of the specific rooms and how would it code?

But to try and use the floorplan and not buttons as they are at very different positions between devices.

  - type: image
    entity: light.garage
    tap_action: navigate
    navigate_path: /dashboard-panel/panel.garage
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Garage.png
      'off': local/floorplan/Transparent.png
      unavailable: local/floorplan/Transparent.png

This isnt working

Read docs regarding Actions, your syntax is wrong.

Ok I have redone the syntax according to the docs.

  - type: image
    entity: light.garage
    tap_action:
      action: navigate
      navigate_path: /dashboard-panel/panel.garage
    style:
      left: 50%
      top: 50%
      width: 100%
    state_image:
      'on': local/floorplan/Garage.png
      'off': local/floorplan/Transparent.png
      unavailable: local/floorplan/Transparent.png

But doesn’t do anything.

Try “navigation_path” instead of “navigate_path”!

1 Like

Thanks @Frank_Beetz that worked, but only if its the last entity in my floorplan.

What if I want to add navigation to more rooms?

At the moment its taking up the whole floorplan.

This happens when you have images which cover each other.
Then only the topmost image may intercept mouse events.

Assume you have 3 images of same size overflowing each other.
Only the 3rd (topmost) will process mouse events.
Assume you defined “pointer-events: none” for the 3rd image - then the next image in z-order will be able to process events; but the 1st image will still be not.

Read these:

In a similar case (floorplan + many overlapping images of SAME size) - I had to add elements (icons) above all these images; and these elements process mouse events.

2 Likes

Thanks will read and come back with questions I am sure!! :smile:

hello,

i do a floorplan for my covers like this :


When a cover close the floorplan is updating with the picture of the cover closed like this :

My question is i would like to do the real animation of the cover but i don’t really know how to do it.
I did this try but it doesn’t do an animation. I hope it is clear ^^

type: picture-elements
image: /local/Volet/Ouvert.png
elements:
  - type: image
    entity: cover.store_salon_est_rideau
    image: /local/Volet/Volet Salon Sud fermé.png
    style:
      top: 50%
      left: 50%
      width: 100%
      height: 100%
      transform: translate(-50%,-53%) scale(1,0.01)
    state_image:
      open: /local/Volet/bureau fermé.png

Anyone know how i get a black transparant horizontal box at the bottom of my card (containing elements) ?
Like wit hthe picture glance card (at the bottom) ?

Also how do i add just text as an element?

Ildar_Gabdullin,
Is there a way to get the icon color of an entity which changes colors in function of its state? I need to get its current color value. I tried the variables you suggested without success. I’m using custom-button-card. Many thanks

This thread is about using Picture elements card.
Are you using the button-card as a custom element?
Anyway, the button-card has its own effective mechanism for styling colors.
Post a SHORT example of what you wish to achieve.

Ildar,
I’m using a template and for some entities I want to control the icon color in function of the entity and/or state, but for some others I want to display their original color, which happens to change in function of the state. The problem is that if the icon color style is set for some entities, by filtering them using the entity_id, then for those entities that I want to display their original color, the color turns white. Thus, the only way to show the original color is not to change the color style at all? Sounds strange. So I need a workaround and this is why I was thinking to catch the original color…
The following is the code I’m using to set the color style:

  styles:
    icon:
      - color: |
          [[[
            var type = entity.entity_id.split(".")[0];
            if (type == "switch") {
              return states[entity.entity_id].state == 'on' ? 'rgb(0,100,255)' : 'Silver';
            } else if (variables.var_select_option_value) {
              if (states[entity.entity_id].state == variables.var_select_option_value) {
                return "rgb(0,100,255)";
              } else {
                return "Silver";
              }
            }
            //if the entity is not a switch or a select entity the original color should be used, but it's not !
          ]]]

Many thanks!

I would be happy to help. But this is not related to Picture elements card. So it is not supposed to be discussed here.
Please ask this question in a proper thread:

Now I am rather far from any PC and cannot test your code. In a week - if your question still is not answered in that button-card thread - I will be able to test it.

1 Like

@jmfargas Answered you in that button-card thread.