Styling elements in Picture elements card: a small tutorial

newneo · August 6, 2024, 7:03pm

Please help!
How can I place and align text “content-text” in the middle between the images?

button-text

type: custom:button-card
entity: sensor.tennis_atp_alexander_zverev_card
name: false
show_name: false
show_state: false
show_icon: false
styles:
  card:
    - border-radius: 0.5rem
    - overflow: hidden
    - position: relative
    - padding: 0
    - display: flex
    - flex-direction: column
    - justify-content: center
    - align-items: center
  custom_fields:
    background-images:
      - position: absolute
      - inset: 0
      - display: flex
      - justify-content: space-between
      - align-items: center
      - opacity: 0.3
    foreground-images:
      - position: absolute
      - inset: 0
      - display: flex
      - justify-content: space-between
      - align-items: center
      - z-index: 1
    content-text:
      - position: relative
      - z-index: 2
      - color: white
      - font-size: 1rem
      - font-weight: bold
      - text-align: center
      - padding: 5px
      - display: flex
      - justify-content: center
      - align-items: center
      - width: 100%
      - height: 100%
      - box-sizing: border-box
custom_fields:
  background-images: |
    [[[
      return `
        <img src="/local/sportpng/flagen/ger.png" alt="Left Background" style="height: 10rem; width: 10rem;">
        <img src="${states['sensor.tennis_atp_alexander_zverev'].attributes.opponent_logo}" alt="Right Background" style="height: 10rem; width: 10rem;">
      `;
    ]]]
  foreground-images: |
    [[[
      return `
        <img src="/local/sportpng/zverev.png" alt="Left Foreground" style="height: 7.5rem; width: 10rem;">
        <img src="https://a.espncdn.com/combiner/i?img=/i/headshots/tennis/players/full/${states['sensor.tennis_atp_alexander_zverev'].attributes.opponent_id}.png" alt="Right Foreground" style="height: 7.5rem; width: 10rem;">
      `;
    ]]]
  content-text: |
    [[[
      return 'Text <br/> Text <br/>';
    ]]]

Ildar_Gabdullin · August 7, 2024, 12:12am

This is not related to Picture-elements. Ask in the main button-card thread (find it).

Ildar_Gabdullin · August 7, 2024, 12:16am

Not supported, you can only use vars for css properties.

Lewis_P · September 1, 2024, 6:08pm

UPDATE: ok, I should have read this thread more carefully. Looks like card-mod is what I need to use. Will have a play around with that!

ORIGINAL POST:

No mention of the ‘state_filter’ options in this thread. I’m assuming it only support “on” / “off” states (as per the documentation here), and that I’ll need to do something different if I want the appearance of an element to vary based on a sensor reading rather an a binary on/off.
e.g.:

Current code for the bit I’m working on:

  - type: state-label
    tap_action: toggle
    entity: sensor.myenergi_home_power_export
    style:
      font-size: 75%
      text-align: right
      top: 46%
      left: 97%
    state_filter:
      "0": opacity(0%)   ## Does not work, not supported

I have a separate binary sensor called binary_sensor.exporting which can tell me if I’m exporting i.e. if the value circled in red above should be shown or not.

What would the syntax be for using the state of this binary sensor to determine the visibility of the separate sensor (sensor.myenergi_home_power_export). So that if I’m not exporting, no value is shown?

diegoves · September 6, 2024, 3:59am

Hi everyone!
Is there a way to change the size of the clickable area?
Screenshot 2024-09-06 alle 05.57.02
it’s too big and overlaps with the others

Thank you!
Diego

wgumaa · September 6, 2024, 6:00am

@diegoves

use these parameters to manage in your code:

style:
      left: 53%
      top: 30%
      opacity: 0%
      scale: 1

They are self explanatory!

diegoves · September 10, 2024, 2:03pm

Than you @wgumaa but this is not what I mean. If you want to trigger the action you could tap on the arrow or also in the white space near the arrow but inside the circle I’m showing. The problem is that the circle goes above the label “100%”.

I have another question: how could I use a variable (or something else) to change for example the font size of every card inside a picture elements?

Thank you,
Diego

wgumaa · September 10, 2024, 5:04pm

@diegoves what device are you displaying this on? I have encountered similar issues when displaying it on a PC vs a mobile phone. I resorted to creating transparent images with fixed sizes (in my case room layouts) relative to the overall image size.

As to font size, i don’t have experience with that in Picture Elements. I only use it for a floorplan - When i click a room, a pop up appears with all the entities and buttons that i want to control for that room.

diegoves · September 17, 2024, 4:30am

The screenshot comes from a PC, but I have to use it in a tablet (an old iPad mini) and, in some case, also in a smartphone. Now I find a workaround: the tapping area of the first element is “under” the tapping area of the second element, that is under the tapping area of the third element etc… so in my case I used for the first element the percentage and for the other two the arrows. One tap action start moving the cover and the double tap stop it.

Other 2 questions:

could I set the dimension of the Picture element?
could I use some variable? And how?

Thank you,
Diego

wgumaa · September 17, 2024, 5:44am

I’m not sure how to do the variables if they are even possible.

As for the image you can set the size ratio. But not the actual dimensions. That’s why I use layers.

I maybe wrong and someone else with more knowledge can weigh in.

Sargon · September 28, 2024, 4:33pm

I am in the process of creating a floor plan based on the Picture Element Card and am actually quite happy with it.

However, I am currently trying to display my switched-on lights differently. I would like to have them with a yellow button background, preferably a little blurred and the icon itself also in yellow. However, the icon background is very small and I can’t get it any bigger, can anyone help me here, also with the blurred effect?

  - type: state-icon
    state_color: false
    entity: light.wohnzimmer_spots
    tap_action:
      action: toggle
    style:
      top: 39%
      left: 44%
      border-radius: 50%
      background-color: rgba(102, 102, 102, 0.2)
    card_mod:
      style:
        state-badge $: |
          ha-state-icon {
            {% if is_state('light.wohnzimmer_spots','on') %}
              color: red !important;
              background-color: #f5ff00 !important;
              border-radius: 50% !important;
              background-size: 45px !important;
            {% else %}
            color: white;
            {% endif %}
          }

bigscience · September 28, 2024, 5:13pm

Not sure about the blurred effect but try adding width under the style.
example:

        style:
          top: 22%
          left: 80%
          width: 4%

Sargon · September 28, 2024, 6:31pm

I changed to:

  - type: state-icon
    state_color: false
    entity: light.wohnzimmer_spots
    tap_action:
      action: toggle
    style:
      top: 39%
      left: 44%
      width: 4%
      border-radius: 50%
      background-color: rgba(102, 102, 102, 0.2)
    card_mod:
      style:
        state-badge $: |
          ha-state-icon {
            {% if is_state('light.wohnzimmer_spots','on') %}
              color: red !important;
              background-color: #f5ff00 !important;
              border-radius: 50% !important;
              background-size: 45px !important;
            {% else %}
            color: white;
            {% endif %}
          }

However, this only moves the icon to the left, but the yellow background behind the icon has not been enlarged.

Sargon · September 30, 2024, 8:15pm

I have found a solution for myself with the “custom:config-template-card”, and I also use variables that are defined in card-mod.

      - type: custom:config-template-card
        entities:
          - light.wohnzimmer_spots
        element:
          type: state-icon
          state_color: false
          entity: light.wohnzimmer_spots
          tap_action:
            action: toggle
        style:
          top: 39%
          left: 45%
          border-radius: 50%
          "--paper-item-icon-color": >-
            ${states['light.wohnzimmer_spots'].state === 'on' ? 'var(--light-button-active-state-colour)' : 'var(--light-button-inactive-state-colour)'}
          background-color: >-
            ${states['light.wohnzimmer_spots'].state === 'on' ? 'var(--light-button-active-state-background-colour)' : 'var(--light-button-inactive-state-background-colour)'}

type: vertical-stack
cards:
  - type: picture-elements
    image: /local/floorplan/EG/Night.png
    style:
      left: 50%
      top: 45%
      width: 160%
    card_mod:
      style: |
        ha-card {
          color: #ffffff; border: solid 2px #A0A2A8; box-shadow: none;
          
          --light-button-active-state-colour: yellow;
          --light-button-active-state-background-colour: #fafacd66;
          --light-button-inactive-state-colour: white;
          --light-button-inactive-state-background-colour: #66666699;
        }

1mwbandy · October 15, 2024, 8:19pm

Hello, can you pls say me: how can I make a smaller this card?
But the card or picture is too big. I will be very happy when it go to half of the height.

This is me code:

thank you

ciscolyon69 · October 31, 2024, 9:37pm

What’s wrong?
It’s always written in black

type: picture-elements
image: local/jbb/plan-32-lafontaine-rdc-1er.png
card_mod:
  style: |
    ha-card { 
      {% if is_state('climate.chambrecam','off') %} 
      --color-state-climate: cyan;
      {% else %}
      --color-state-climate: red ;
      {% endif %}
    }
elements:  - type: state-label
    attribute: current_temperature
    style:
      left: 75%
      top: 10%
      font-size: 10px
      font-weight: bold
      color: var(--color-state-climate)
      # color: blue
    entity: climate.chambrecam