Animated Buttons and Badges

[Merril-r]

Correct me with if I am wrong. With the release of the animated badges and buttons I can take any of your cards already released and add the badges etc. For example If I want to see watts, amps and voltage on the Server card(card no 34).

[Anashost]

Correct. Not just to my cards, but any cards you have. These badges can be added to almost anything.

They’re highly customizable, so you can display whatever you want using custom templates. The same badge can show information from multiple entities too.

I’ll share some advanced examples this week on the badges and buttons page on GitHub.

[Roura97311]

Hello, I'm asking for your help.

I've tried to integrate a power consumption badge displayed on card 39, but I can't get it to work. It displays the value in watts correctly, but I can't change the text and icon colors to reflect the On/Off state.

[Anashost]

Hey @Roura97311
Can you paste your full card here to take a look.

[Roura97311]

Good evening @Anashost

Here's my modified map, which now works, in case it helps anyone.

type: custom:vertical-stack-in-card
cards:
  - type: tile
    entity: switch.prise_chauffe_eau
    features_position: bottom
    vertical: false
    color: red
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: sensor.prise_chauffe_eau_power
        content: "{{states(entity)|float|round(0)}} Watts"
        icon: |-
          {% if states(entity)|float <= 0 %}
          mdi:power-off
          {% else %}
          mdi:flash
          {% endif %}
        icon_color: |-
          {% if states(entity)|float <= 0 %}
          white
          {% else %}
          red
          {% endif %}
        tap_action:
          action: more-info
    alignment: end
    card_mod:
      style: >
        ha-card {
          /* ================================== */
          /* USER CONFIG HERE                   */
          /* ================================== */

          /* 1. ACTIVE STATE (NUMERIC) */
          {% set threshold_below = false %}
          {% set threshold_above = 20 %}

          /* 2. POSITIONING */
          {% set pos_y = 'top' %}                
          {% set pos_y_val = '10px' %}
          {% set pos_x = 'right' %}              
          {% set pos_x_val = '5px' %}

          /* 3. SIZING */
          {% set icon_size = '18px' %}          
          {% set text_size = '12px' %}          
          {% set badge_height = '5px' %}        
          {% set border_radius = '10px' %}      
          {% set border_thickness = '1px' %}
          
          /* 4. COLORS (HEX, RGB, Color Name) */
          /* --- Active --- */
          {% set active_bg = '#a63a3a' %} 
          {% set active_icon = 'white' %}
          {% set active_text = 'white' %}
          {% set active_border = '#ab1c1c' %}
          {% set active_opacity = 0.3 %}
          
          /* --- Inactive --- */
          {% set inactive_bg = 'grey' %}
          {% set inactive_icon = 'grey' %}
          {% set inactive_text = 'darkgrey' %}
          {% set inactive_border = 'transparent' %}
          {% set inactive_opacity = 0.3 %}

          /* 5. ANIMATIONS */
          /* Options: pulse, shake, wobble   */
          /* flash, heartbeat, swing, vibrate  */
          
          {% set anim_type = 'pulse' %}

          /* true = 24/7, false = only when active */
          {% set always_animate = false %}
          
          {% set anim_intensity_sec = 0.5 %} /* 0.1 to 1  */
          {% set anim_duration_sec = 2 %}
          {% set anim_delay_sec = 5 %}

          /* ================================== */
          /* USER CONFIG END (DONT TOUCH BELOW) */
          /* ================================== */

          {% set current_state = states(config.chips[0].entity) %}
          {% set state_num = current_state | float(-99999) %}
          
          {% set check_below = threshold_below | string | lower != 'false' %}
          {% set check_above = threshold_above | string | lower != 'false' %}
          
          {% set is_active_below = check_below and state_num != -99999 and state_num <= (threshold_below | float(-99999)) %}
          {% set is_active_above = check_above and state_num != -99999 and state_num >= (threshold_above | float(-99999)) %}
          
          {% set is_active = is_active_below or is_active_above %}
          
          {% if is_active %}
            {% set current_bg = active_bg %}
            {% set current_icon = active_icon %}
            {% set current_text = active_text %}
            {% set current_border = active_border %}
            {% set current_op = active_opacity %}
            {% set current_anim = anim_type %}
          {% else %}
            {% set current_bg = inactive_bg %}
            {% set current_icon = inactive_icon %}
            {% set current_text = inactive_text %}
            {% set current_border = inactive_border %}
            {% set current_op = inactive_opacity %}
            {% set current_anim = anim_type if always_animate else 'none' %}
          {% endif %}

          {% set master_cycle = anim_duration_sec + anim_delay_sec %}
          {% set iterations = (anim_duration_sec / anim_intensity_sec) | round(0, 'floor') | int if anim_intensity_sec > 0 else 0 %}
          {% set step_percent = (anim_intensity_sec / master_cycle) * 100 if master_cycle > 0 else 0 %}

          --chip-padding: {{ badge_height }};
          --chip-border-radius: {{ border_radius }};
          
          --chip-border-width: 0px !important;
          --ha-card-border-width: 0px !important;
          
          --chip-box-shadow: 0 0 0 {{ border_thickness }} {{ current_border }} !important;

          --text-color: {{ current_icon }} !important;
          --color: {{ current_icon }} !important; 
          --chip-background: color-mix(in srgb, {{ current_bg }}, transparent {{ (1 - current_op) * 100 }}%) !important;
          --chip-font-size: {{ text_size }} !important;
          --chip-icon-size: {{ icon_size }} !important; 
          --mdc-icon-size: {{ icon_size }} !important;   
          --chip-height: auto !important;
          --primary-text-color: {{ current_text }} !important;
          --secondary-text-color: {{ current_text }} !important;

          position: absolute !important;
          {{ pos_y }}: {{ pos_y_val }};
          {{ pos_x }}: {{ pos_x_val }};
          z-index: 1;
          border: none !important;
          border-radius: {{ border_radius }} !important;
          box-shadow: 0 4px 6px rgba(0,0,0,0.2);
          overflow: visible !important;
          will-change: transform; 
          
          {% if current_anim != 'none' and iterations > 0 and master_cycle > 0 %}
            animation: anim-{{ config.chips[0].entity | replace('.', '-') }}-{{ anim_type }} {{ master_cycle }}s infinite linear;
          {% endif %}
        }


        ha-state-icon, ha-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: {{ icon_size }} !important; 
          height: {{ icon_size }} !important;
        }


        {% if config.chips[0].content is not defined or config.chips[0].content
        | length == 0 %}
           ha-card { padding: 5px !important; border-radius: 50% !important; aspect-ratio: 1/1; justify-content: center; }
           .content { display: none; }
        {% else %}
           ha-card { padding: 0 10px !important; }
           .content { padding-left: 5px; font-weight: bold; }
        {% endif %}


        {% if current_anim != 'none' and iterations > 0 and master_cycle > 0 %}

        @keyframes anim-{{ config.chips[0].entity | replace('.', '-') }}-{{
        anim_type }} {
          {% for i in range(iterations) %}
            {% set t = i * step_percent %} 
            
            {% if anim_type == 'pulse' %}
              {{ t + 0 }}% { transform: scale3d(1, 1, 1); }
              {{ t + (step_percent * 0.5) }}% { transform: scale3d(1.15, 1.15, 1); }
              {{ t + step_percent }}% { transform: scale3d(1, 1, 1); }

            {% elif anim_type == 'shake' %}
              {{ t + 0 }}% { transform: rotateZ(0deg); }
              {{ t + (step_percent * 0.25) }}% { transform: rotateZ(-10deg); }
              {{ t + (step_percent * 0.75) }}% { transform: rotateZ(10deg); }
              {{ t + step_percent }}% { transform: rotateZ(0deg); }

            {% elif anim_type == 'flash' %}
              {{ t + 0 }}% { opacity: 1; }
              {{ t + (step_percent * 0.5) }}% { opacity: 0; }
              {{ t + step_percent }}% { opacity: 1; }

            {% elif anim_type == 'wobble' %}
              {{ t + 0 }}% { transform: translate3d(0%, 0, 0); }
              {{ t + (step_percent * 0.3) }}% { transform: translate3d(-15%, 0, 0) rotateZ(-5deg); }
              {{ t + (step_percent * 0.6) }}% { transform: translate3d(10%, 0, 0) rotateZ(3deg); }
              {{ t + step_percent }}% { transform: translate3d(0%, 0, 0); }

            {% elif anim_type == 'heartbeat' %}
              {{ t + 0 }}% { transform: scale3d(1, 1, 1); }
              {{ t + (step_percent * 0.25) }}% { transform: scale3d(1.15, 1.15, 1); }
              {{ t + (step_percent * 0.5) }}% { transform: scale3d(1, 1, 1); }
              {{ t + (step_percent * 0.75) }}% { transform: scale3d(1.15, 1.15, 1); }
              {{ t + step_percent }}% { transform: scale3d(1, 1, 1); }

            {% elif anim_type == 'swing' %}
              {{ t + 0 }}% { transform: rotateZ(0deg); }
              {{ t + (step_percent * 0.4) }}% { transform: rotateZ(15deg); }
              {{ t + (step_percent * 0.8) }}% { transform: rotateZ(-10deg); }
              {{ t + step_percent }}% { transform: rotateZ(0deg); }

            {% elif anim_type == 'vibrate' %}
              {{ t + 0 }}% { transform: translate3d(0, 0, 0); }
              {{ t + (step_percent * 0.2) }}% { transform: translate3d(-2px, 2px, 0); }
              {{ t + (step_percent * 0.4) }}% { transform: translate3d(-2px, -2px, 0); }
              {{ t + (step_percent * 0.6) }}% { transform: translate3d(2px, 2px, 0); }
              {{ t + (step_percent * 0.8) }}% { transform: translate3d(2px, -2px, 0); }
              {{ t + step_percent }}% { transform: translate3d(0, 0, 0); }

            {% endif %}
          {% endfor %}
        }

        {% endif %}