Help me figure out the 'card_mod'

m.vladislav · March 23, 2024, 4:52pm

2024-03-23_19-45-54

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: 'Воды в баке: {{ states(entity) }}%'
    secondary: 'Температура: {{ states(''sensor.temperature_water'') }}C'
    icon: none
    entity: sensor.water_level
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            {% set water_level = states(config.entity) | int %}
            {% if water_level > 95 %}
              background: url("/local/water-level-png/water_level_3_100.png") no-repeat center;
            {% elif water_level > 85 %}
              background: url("/local/water-level-png/water_level_3_90.png") no-repeat center;
            {% elif water_level > 75 %}
              background: url("/local/water-level-png/water_level_3_80.png") no-repeat center;
            {% elif water_level > 65 %}
              background: url("/local/water-level-png/water_level_3_70.png") no-repeat center;
            {% elif water_level > 55 %}
             background: url("/local/water-level-png/water_level_3_60.png") no-repeat center;
            {% elif water_level > 45 %}
              background: url("/local/water-level-png/water_level_3_50.png") no-repeat center;
            {% elif water_level > 35 %}
              background: url("/local/water-level-png/water_level_3_40.png") no-repeat center;
            {% elif water_level > 25 %}
              background: url("/local/water-level-png/water_level_3_30.png") no-repeat center;
            {% elif water_level > 15 %}
              background: url("/local/water-level-png/water_level_3_20.png") no-repeat center;
            {% elif water_level > 5 %}
              background: url("/local/water-level-png/water_level_3_10.png") no-repeat center;
            {% else %}
              background: url("/local/water-level-png/water_level_3_0.png") no-repeat center;
            {% endif %}
            background-size: contain;
            --shape-color: none;
            {% if is_state('binary_sensor.water_level_full', 'on') %}
              --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;;
            {% endif %}
          }
          @keyframes ping {
            0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
            100% { box-shadow: 0 0 5px 15px transparent; }
          }
          @keyframes blink {
            100% {opacity: 0;}
          }
      .: |
        ha-card {
          border: none;
          margin: 0px;
          padding: 0px;
        }
  - type: custom:button-card
    entity: input_boolean.water_pump_auto
    show_name: false
    styles:
      card:
        - width: 100%
    card_mod:
      style: |
        ha-card {
          border: none;
          margin: 0px;
          padding: 0px;
        }
card_mod:
  style: |
    ha-card {
      opacity: 90%;
      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66);
      margin-bottom: 10px;
    }

2024-03-23_19-43-40

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: 'Воды в баке: {{ states(entity) }}%'
    secondary: 'Температура: {{ states(''sensor.temperature_water'') }}C'
    icon: none
    entity: sensor.water_level
    card_mod:
      style: |
        ha-card {
          border: none;
          margin: 0px;
          padding: 0px;
        }
      .:
        mushroom-shape-icon$: |
          .shape {
            {% set water_level = states(config.entity) | int %}
            {% if water_level > 95 %}
              background: url("/local/water-level-png/water_level_3_100.png") no-repeat center;
            {% elif water_level > 85 %}
              background: url("/local/water-level-png/water_level_3_90.png") no-repeat center;
            {% elif water_level > 75 %}
              background: url("/local/water-level-png/water_level_3_80.png") no-repeat center;
            {% elif water_level > 65 %}
              background: url("/local/water-level-png/water_level_3_70.png") no-repeat center;
            {% elif water_level > 55 %}
             background: url("/local/water-level-png/water_level_3_60.png") no-repeat center;
            {% elif water_level > 45 %}
              background: url("/local/water-level-png/water_level_3_50.png") no-repeat center;
            {% elif water_level > 35 %}
              background: url("/local/water-level-png/water_level_3_40.png") no-repeat center;
            {% elif water_level > 25 %}
              background: url("/local/water-level-png/water_level_3_30.png") no-repeat center;
            {% elif water_level > 15 %}
              background: url("/local/water-level-png/water_level_3_20.png") no-repeat center;
            {% elif water_level > 5 %}
              background: url("/local/water-level-png/water_level_3_10.png") no-repeat center;
            {% else %}
              background: url("/local/water-level-png/water_level_3_0.png") no-repeat center;
            {% endif %}
            background-size: contain;
            --shape-color: none;
            {% if is_state('binary_sensor.water_level_full', 'on') %}
              --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;;
            {% endif %}
          }
          @keyframes ping {
            0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
            100% { box-shadow: 0 0 5px 15px transparent; }
          }
          @keyframes blink {
            100% {opacity: 0;}
          }
  - type: custom:button-card
    entity: input_boolean.water_pump_auto
    show_name: false
    styles:
      card:
        - width: 100%
    card_mod:
      style: |
        ha-card {
          border: none;
          margin: 0px;
          padding: 0px;
        }
card_mod:
  style: |
    ha-card {
      opacity: 90%;
      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66);
      margin-bottom: 10px;
    }

In one case, the map format is not applied, in the other, the icon is not displayed. How to do it right?

LiQuid_cOOled · March 24, 2024, 2:32am

I didn’t mess with your background image logic but this is a fine approach. I added the blue border so you could verify it is working.

chrome-capture-2024-3-23 (2)

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: 'Воды в баке: {{ states(entity) }}%'
    secondary: 'Температура: {{ states(''sensor.temperature_water'') }}C'
    icon: mdi:mushroom
    icon_color: red
    entity: sensor.water_level
    card_mod: 
     style:
      mushroom-shape-icon$: |
        .shape {
          background-size: contain;
            --shape-color: none;
           {% if is_state('binary_sensor.water_level_full', 'on') %}
              --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;;
          {% endif %}
         }
         @keyframes ping {
            0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
            100% { box-shadow: 0 0 5px 15px transparent; }
          }
          @keyframes blink {
            100% {opacity: 0;}
          }
      .: |
        ha-card {
          border: 4px solid blue;
          margin: 0px;
          padding: 0px;
        }

m.vladislav · March 24, 2024, 8:55am

2024-03-24_11-51-43

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: 'Воды в баке: {{ states(entity) }}%'
    secondary: 'Температура: {{ states(''sensor.temperature_water'') }}C'
    icon: none
    entity: sensor.water_level
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            {% set water_level = states(config.entity) | int %}
            {% if water_level > 95 %}
              background: url("/local/water-level-png/water_level_3_100.png") no-repeat center;
            {% elif water_level > 85 %}
              background: url("/local/water-level-png/water_level_3_90.png") no-repeat center;
            {% elif water_level > 75 %}
              background: url("/local/water-level-png/water_level_3_80.png") no-repeat center;
            {% elif water_level > 65 %}
              background: url("/local/water-level-png/water_level_3_70.png") no-repeat center;
            {% elif water_level > 55 %}
             background: url("/local/water-level-png/water_level_3_60.png") no-repeat center;
            {% elif water_level > 45 %}
              background: url("/local/water-level-png/water_level_3_50.png") no-repeat center;
            {% elif water_level > 35 %}
              background: url("/local/water-level-png/water_level_3_40.png") no-repeat center;
            {% elif water_level > 25 %}
              background: url("/local/water-level-png/water_level_3_30.png") no-repeat center;
            {% elif water_level > 15 %}
              background: url("/local/water-level-png/water_level_3_20.png") no-repeat center;
            {% elif water_level > 5 %}
              background: url("/local/water-level-png/water_level_3_10.png") no-repeat center;
            {% else %}
              background: url("/local/water-level-png/water_level_3_0.png") no-repeat center;
            {% endif %}
            background-size: contain;
            --shape-color: none;
            {% if is_state('binary_sensor.water_level_full', 'on') %}
              --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;;
            {% endif %}
          }
          @keyframes ping {
            0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
            100% { box-shadow: 0 0 5px 15px transparent; }
          }
          @keyframes blink {
            100% {opacity: 0;}
          }
      .: |
        ha-card {
          border: 4px solid blue;
          margin: 0px;
          padding: 0px;
        }
card_mod:
  style: |
    ha-card {
      opacity: 90%;
      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66);
      margin-bottom: 10px;
    }

It’s not like that with me…

LiQuid_cOOled · March 24, 2024, 9:20am

My point was your background If statements are the issue so that is where you need to focus on your formatting. If you remove that code the animation works. When troubleshooting go simple, then get more complex.

You have two If statements under .shape and that is causing your issues.

m.vladislav · March 24, 2024, 9:39am

2024-03-24_12-24-36

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: 'Воды в баке: {{ states(entity) }}%'
    secondary: 'Температура: {{ states(''sensor.temperature_water'') }}C'
    icon: none
    icon_color: red
    entity: sensor.water_level
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            {% set water_level = states(config.entity) | int %}
            {% if water_level > 95 %}
              background: url("/local/water-level-png/water_level_3_100.png") no-repeat center;
            {% elif water_level > 85 %}
              background: url("/local/water-level-png/water_level_3_90.png") no-repeat center;
            {% elif water_level > 75 %}
              background: url("/local/water-level-png/water_level_3_80.png") no-repeat center;
            {% elif water_level > 65 %}
              background: url("/local/water-level-png/water_level_3_70.png") no-repeat center;
            {% elif water_level > 55 %}
             background: url("/local/water-level-png/water_level_3_60.png") no-repeat center;
            {% elif water_level > 45 %}
              background: url("/local/water-level-png/water_level_3_50.png") no-repeat center;
            {% elif water_level > 35 %}
              background: url("/local/water-level-png/water_level_3_40.png") no-repeat center;
            {% elif water_level > 25 %}
              background: url("/local/water-level-png/water_level_3_30.png") no-repeat center;
            {% elif water_level > 15 %}
              background: url("/local/water-level-png/water_level_3_20.png") no-repeat center;
            {% elif water_level > 5 %}
              background: url("/local/water-level-png/water_level_3_10.png") no-repeat center;
            {% else %}
              background: url("/local/water-level-png/water_level_3_0.png") no-repeat center;
            {% endif %}
            background-size: contain;
            --shape-color: none;
            {% if is_state('binary_sensor.water_level_full', 'on') %}
              --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;;
            {% endif %}
          }
          @keyframes ping {
            0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
            100% { box-shadow: 0 0 5px 15px transparent; }
          }
          @keyframes blink {
            100% {opacity: 0;}
          }
        .: |
          ha-card {
            border: none;
            margin: 0px;
            padding: 0px;
          }
  - type: custom:button-card
    entity: input_boolean.water_pump_auto
    show_name: false
    color: |
      [[[
        if (states['input_boolean.water_pump_auto'].state === "on");
          return "green";
        else;
          return "red";
      ]]] 
    styles:
      card:
        - width: 120%
    card_mod:
      style: |
        ha-card {
          border: none;
          margin: 0px;
          padding: 0px;
        }
card_mod:
  style: |
    ha-card {
      opacity: 90%;
      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66);
      margin-bottom: 10px;
    }

I copied and edited your code, and it worked.
{%endif%} seems to be everywhere in place, in which line is the error?
Even in the “button-card” it is not possible to change the color…

LiQuid_cOOled · March 24, 2024, 9:52am

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: 'Воды в баке: {{ states(entity) }}%'
    secondary: 'Температура: {{ states(''sensor.temperature_water'') }}C'
    icon: none
    entity: sensor.water_level
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            {% set power = states('binary_sensor.water_level_full') %}
            {% set water_level = states(config.entity) | int %}
            {% if water_level > 95 and power == 'on' %}
              background: url("/local/water-level-png/water_level_3_100.png") no-repeat center;
              --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;
            {% elif water_level > 85 and power == 'on' %}
              background: url("/local/water-level-png/water_level_3_90.png") no-repeat center;
              --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;
            {% elif water_level > 75 and power == 'on' %}
              background: url("/local/water-level-png/water_level_3_80.png") no-repeat center;
              --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;
            {% elif water_level > 65 and power == 'on' %}
              background: url("/local/water-level-png/water_level_3_70.png") no-repeat center;
              --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;
            {% elif water_level > 55 and power == 'on' %}
              background: url("/local/water-level-png/water_level_3_60.png") no-repeat center;
              --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;
            {% elif water_level > 45 and power == 'on' %}
              background: url("/local/water-level-png/water_level_3_50.png") no-repeat center;
              --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;
            {% elif water_level > 35 and power == 'on' %}
              background: url("/local/water-level-png/water_level_3_40.png") no-repeat center;
              --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;
            {% elif water_level > 25 and power == 'on' %}
              background: url("/local/water-level-png/water_level_3_30.png") no-repeat center;
            --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;
            {% elif water_level > 15 and power == 'on' %}
              background: url("/local/water-level-png/water_level_3_20.png") no-repeat center;
              --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;
            {% elif water_level > 5 and power == 'on' %}
              background: url("/local/water-level-png/water_level_3_10.png") no-repeat center
              --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;
            {% else %}
              background: url("/local/water-level-png/water_level_3_0.png") no-repeat center;
              --shape-color:orange;
            {% endif %}}
             @keyframes ping {
              0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
              100% { box-shadow: 0 0 5px 15px transparent; }
             }
              @keyframes blink {
               100% {opacity: 0;}
              }
        .: |
          ha-card {
           border: 4px solid blue;
           margin: 0px;
           padding: 0px;
           }
card_mod:
  style: |
    ha-card {
      opacity: 90%;
      box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66);
      margin-bottom: 10px;
    }

LiQuid_cOOled · March 24, 2024, 9:57am

Mushroom and Button Cards use different templating. The Button card can change colors based on the state, but requires a different approach.

Two IF statements were under .shape and that’s a conflict.

LiQuid_cOOled · March 24, 2024, 10:05am

The button card portion

- type: custom:button-card
    entity: input_boolean.water_pump_auto
    show_name: false
    styles:
      icon:
       - color: | 
           [[[
           if (states['input_boolean.water_pump_auto'].state === "on")
           return "green"
            else;
           return "red"
            ]]] 
   
      card:
        - width: 120%
    card_mod:
      style: |
        ha-card {
          border: none;
          margin: 0px;
          padding: 0px;
        }

m.vladislav · March 24, 2024, 10:37am

.shape {
  {% if ... %}
    ...
  {% elif ... %}
    ...
  {% else ... %}
    ...
  {% endif %}
  {% if ... %}
    ...
  {% endif %}
}

Is this code causing a conflict?
I found an error in my code - indentation before “.: |” and the subsequent block.