Styling elements in Picture elements card: a small tutorial

wgumaa · April 19, 2024, 11:44am

@Ildar_Gabdullin you seem to be the expert here!

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

Ildar_Gabdullin · April 19, 2024, 11:51am

Read docs regarding Actions, your syntax is wrong.

wgumaa · April 19, 2024, 11:59am

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.

Frank_Beetz · April 19, 2024, 12:03pm

Try “navigation_path” instead of “navigate_path”!

wgumaa · April 19, 2024, 12:07pm

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.

Ildar_Gabdullin · April 19, 2024, 12:34pm

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.

wgumaa · April 19, 2024, 12:50pm

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

juju64 · April 20, 2024, 4:45pm

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

skank · May 13, 2024, 12:26pm

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?

jmfargas · June 29, 2024, 5:05pm

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

Ildar_Gabdullin · June 29, 2024, 5:11pm

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.

jmfargas · June 29, 2024, 9:03pm

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!

Ildar_Gabdullin · June 29, 2024, 10:03pm

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.

Ildar_Gabdullin · July 10, 2024, 10:04pm

@jmfargas Answered you in that button-card thread.

newneo · July 30, 2024, 10:07am

Hello community! Can anyone help me create a dashboard card that consists of images and templates?

So far I have only found “tailwindcss-template-card” which works well, but with multiple cards the CPU is heavily used and loading takes longer.

POST

my html-css tailwindcss-template-card code that I have used so far.

type: custom:tailwindcss-template-card
content: >
  <div class="container">
    <!-- Hintergrund Bilder -->
    <div class="background-images">
      <img src="/local/sportpng/flagen/spanien.png" alt="Left Background">
      <img src="{{state_attr('sensor.tennis_atp_rafael_nadal', 'opponent_logo')}}" alt="">
    </div>
  
    <div class="foreground-images">
      <img src="/local/sportpng/nadal.png" alt="Left Foreground">
      <img src="https://a.espncdn.com/combiner/i?img=/i/headshots/tennis/players/full/{{state_attr('sensor.tennis_atp_rafael_nadal', 'opponent_id')}}.png" alt="">
    </div>
  
    <div class="content">
      <center>
        <p>
  
    {% set down_distance_text = state_attr('sensor.tennis_atp_rafael_nadal', 'down_distance_text') %}
    {% set date_attr = state_attr('sensor.tennis_atp_rafael_nadal', 'date') %} 
    {% if date_attr %}
        {% set date = date_attr | as_timestamp | timestamp_custom('%d.%m.%y um %H:%M Uhr') %}
    {% else %}
        {% set date = 'Kein Datum vorhanden' %}
    {% endif %}
  
    {% set uhr_attr = state_attr('sensor.tennis_atp_rafael_nadal', 'date') %}
    {% if uhr_attr %}
        {% set uhr = uhr_attr | as_timestamp | timestamp_custom('%H:%M Uhr') %}
    {% else %}
        {% set uhr = 'Keine Uhrzeit vorhanden' %}
    {% endif %}
  
    {% set kickoff_in = state_attr('sensor.tennis_atp_rafael_nadal', 'kickoff_in') %}
    {% set event_name = state_attr('sensor.tennis_atp_rafael_nadal', 'event_name') %}
    {% set venue = state_attr('sensor.tennis_atp_rafael_nadal', 'venue') %}
    {% set location = state_attr('sensor.tennis_atp_rafael_nadal', 'location') %}
    {% set clock = state_attr('sensor.tennis_atp_rafael_nadal', 'clock') %}
    {% set team_score = state_attr('sensor.tennis_atp_rafael_nadal', 'team_score') %}
    {% set translations = {'Round 1': 'Runde 1', 'Round 2': 'Runde 2', 'Round 3': 'Runde 3', 'Round 4': 'Runde 4', 'Quarterfinal': 'Viertelfinale', 'Semifinal': 'Halbfinale', 'Final': 'Finale'} %}
    {% set down_distance_text = translations.get(state_attr('sensor.tennis_atp_rafael_nadal', 'down_distance_text'), state_attr('sensor.tennis_atp_rafael_nadal', 'down_distance_text')) %}
    {% set opponent_score = state_attr('sensor.tennis_atp_rafael_nadal', 'opponent_score') %}
    {% set gegner_name = state_attr('sensor.tennis_atp_rafael_nadal', 'opponent_name') %}
    {% set spieler_name = state_attr('sensor.tennis_atp_rafael_nadal', 'team_name') %}
    {% set spieler_win_set = state_attr('sensor.tennis_atp_rafael_nadal', 'team_sets_won') %}
    {% set gegner_win_set = state_attr('sensor.tennis_atp_rafael_nadal', 'opponent_sets_won') %} 
    {% set last_play = state_attr('sensor.tennis_atp_rafael_nadal', 'last_play') %} 
  
    {% set result_set = "<font color=red>Abgesagt</font>" if clock == "Walkover"
                 else "<font color=green>Satz-Gewinn</font>" if spieler_win_set is not none and gegner_win_set is not none and spieler_win_set > gegner_win_set
                 else "<font color=red>Satz-Verlust</font>" if spieler_win_set is not none and gegner_win_set is not none and spieler_win_set < gegner_win_set
                 else "<font color=yellow>Satz-Gleich</font>" %}
  
    {% set result = "<font color=red>Abgesagt</font>" if clock == "Walkover"
                 else "<font color=green>Gewinnt</font>" if team_score is not none and opponent_score is not none and team_score > opponent_score
                 else "<font color=red>Verliert</font>" if team_score is not none and opponent_score is not none and team_score < opponent_score
                 else "<font color=yellow>Unentschieden</font>" %}
  
    {% if is_state('sensor.tennis_atp_rafael_nadal', 'PRE') %}
      {{ spieler_name }} gegen {{ gegner_name }}<br />
      ({{ down_distance_text }}) um {{ uhr }}<br />
      
    {% elif is_state('sensor.tennis_atp_rafael_nadal', 'IN') %}
      
       ({{ down_distance_text }}) {{ result_set }} {{ spieler_win_set }}:{{ gegner_win_set }}<br />
      {% if team_score is not none and opponent_score is not none %} 
      LIVE {{ result }} {{ team_score | int }} zu {{ opponent_score | int }} im {{ clock }} <br />
      {% else %}
        Keine Ergebnisse verfügbar.
      {% endif %}
  
      {% if last_play %}
        {% set spieler = last_play.split(' ;')|regex_findall('(\d+)(?=\s)') %}
        {% set gegner = last_play.split(' ;')|regex_findall('\d+(?=\s*;)') %}
  
            <div class="inline-block-right">
              <p class="text-white text-base font-bold">
  				{{ spieler_name }}: {{ spieler|join('|') }}<br />    
  				{{ gegner_name }}: {{ gegner|join('|') }}
  				{% else %}
  				  Keine Daten gefunden.
  				{% endif %}
              </p>
            </div>
  
    {% elif is_state('sensor.tennis_atp_rafael_nadal', 'POST') %}
     Ergebnis ({{ down_distance_text }}) {{ result }} 
    {% if team_score is not none and opponent_score is not none %}:
        {{ team_score | int }} zu {{ opponent_score | int }} <br/>
      {% else %}
        Keine Ergebnisse verfügbar.
      {% endif %}
  
      {% if last_play %}
        {% set spieler = last_play.split(' ;')|regex_findall('(\d+)(?=\s)') %}
        {% set gegner = last_play.split(' ;')|regex_findall('\d+(?=\s*;)') %}
            
            <div class="inline-block-right">
              <p class="text-white text-base font-bold">
  				{{ spieler_name }}: {{ spieler|join('|') }}<br />
  				{{ gegner_name }}: {{ gegner|join('|') }}
  				{% else %}
  				  Keine Daten gefunden.
  				{% endif %}
             </p>
            </div>
          
    {% elif is_state('sensor.tennis_atp_rafael_nadal', 'NOT_FOUND') %}
      Momentan Keine Tennis ATP Spiele.
    {% endif %}
        </p>
      </center>
    </div>
  
    <!-- Linke transparente Klickfläche -->
    <a href="/dashboard-sport/tennis" class="transparent-link transparent-link-left"></a>
    <!-- Rechte transparente Klickfläche -->
    <a href="{{ state_attr('sensor.tennis_atp_rafael_nadal', 'event_url')}}" target="_blank" class="transparent-link transparent-link-right"></a>
  </div>
  <hr class="hr-style" />
  <p class="footer-text">
    {{ event_name }} - {{ venue }} - {{ location }}
  </p>
  <style>
    .container, .background-images, .foreground-images {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0;
    }
    .container {
      flex-direction: column;
      min-height: 0;
      border-radius: 0.5rem;
      overflow: hidden;
      position: relative;
    }
    .background-images { opacity: 0.3; }
    .background-images img, .foreground-images img {
      height: 10rem;
      width: 10rem;
    }
    .foreground-images img { height: 7.5rem; }
    .content {
      flex: 1;
      padding: 0.75rem;
      position: relative;
      z-index: 0;
      color: white;
      font-size: 1rem;
      font-weight: bold;
      text-align: center;
    }
    .inline-block-right {
      display: inline-block;
      text-align: right;
    }
    .text-white { color: white; }
    .text-base { font-size: 1rem; }
    .font-bold { font-weight: bold; }
    .transparent-link {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 10rem;
      background-color: transparent;
      z-index: 1;
    }
    .transparent-link-left { left: 0; }
    .transparent-link-right { right: 0; }
    .hr-style { border-color: #cbd5e0; width: 100%; }
    .footer-text {
      color: #f7fafc;
      text-align: center;
      font-size: 1rem;
      padding: 0.25rem 0;
    }
  </style>

Ildar_Gabdullin · July 30, 2024, 10:50pm

Sorry, how is this related to picture-elements?

newneo · July 31, 2024, 9:50am

is it possible to create the image arrangement with the “picture-elements”? or something like that.

Bikey · August 3, 2024, 3:51pm

Hi,
I would like to change the icon and the color of some icons on my picture-elements card depending on the state of the entry.
I understand that I have to use card-mod for that , which I did, similar to the examples. I’m also using the ‘–paper-item-icon-color’ style element as I see from the examples.

However this does not work. The icon color does not change. The icon itself even is not shown anymore if I set that with a variable that was set via the card-mod template.

If I set the icon color or name manually instead of using the variable it works fine, so it seems as if the conditional part in the {% if xxx %| section is not evaluated.

This is my code, what am I doing wrong here?

type: picture-elements
image: local/pictures/Tesla-model3-new.png
card_mod:
  style: |
    ha-card {
      --tesla-state-color: 
        {% if is_state('sensor.tesla_state', 'online') %}
          green
        {% elif is_state('sensor.tesla_state', 'asleep') %}
          blue
        {% elif is_state('sensor.tesla_state', 'offline') %}
          grey
        {% else %}
          purple
        {% endif %};
      --tesla-lock-color: 
        {% if is_state('binary_sensor.tesla_locked', 'on') %}
         green
        {% else %}
          orange
        {% endif %};
      --tesla_state_icon-name: 
        {% if is_state('sensor.tesla_state', 'online') %}
          mdi:check-circle
        {% elif is_state('sensor.tesla_state', 'asleep') %}
          mdi:sleep
        {% elif is_state('sensor.tesla_state', 'offline') %}
          mdi:alert-circle
        {% else %}
          mdi:help-circle        
    }   
elements:
  - type: state-icon
    entity: sensor.tesla_state
    tap_action:
      action: more-info
    hold_action:
      action: none
    style:
      top: 7%
      left: 50%
      '--paper-item-icon-color': var(--tesla-state-color)
    icon: var(--tesla_state_icon-name)
  - type: state-icon
    entity: binary_sensor.tesla_locked
    tap_action:
      action: more-info
    hold_action:
      action: none
    style:
      top: 7%
      left: 57%
      '--paper-item-icon-color': var(--tesla-lock-color)

Ildar_Gabdullin · August 3, 2024, 11:17pm

Use Dev tools - Templates for validating your templates before putting them into cards.
Your templates are wrong, no closing end f.

Bikey · August 4, 2024, 10:43am

Oh, thanks! That was silly as I did test it but somehow it got lost with all the iterations.
The template now properly evaluates to:

    ha-card {
      --tesla-state-color: 
        
          purple
        ;
      --tesla-lock-color: 
        
          green
        ;
      --tesla_state_icon-name: 
        
          mdi:help-circle 
        ;          
    }

So now the icons change the color properly, great!

Now we are at it, I also would like to change the icon itself based on the state.
But if I change the code for the sensor.tesla_state entry to the below, the icon is no longer visible.
(if I don’t use the variable but set the icon to a fixed value it works fine).

elements:
  - type: state-icon
    entity: sensor.tesla_state
    tap_action:
      action: more-info
    hold_action:
      action: none
#    icon: mdi:car-electric-outline
    icon: var(--tesla_state_icon-name)
    style:
      top: 8%
      left: 50%
      '--paper-item-icon-color': var(--tesla-state-color)

Thanks for your tips!