[AJUDA] Arrumando cards personalizados HA

Compartilhar Projetos
#1

Estou criando este topico para divulgar e ajudar com os cartoes customizados.

O primeiro é este de Bateria com icone animado

type: custom:mushroom-template-card
no_card: false
primary: Celular Cesar
secondary: Bateria com  {{states('sensor.paulo_cesar_battery_level')}} %
icon: |
  {% if is_state('sensor.paulo_cesar_battery_state' , 'charging') -%}
    mdi:battery-charging-100
  {% else %}
    {{states.sensor.paulo_cesar_battery_level.attributes.icon}}
  {% endif %}
icon_color: >-
  {% set mysensor = (states('sensor.paulo_cesar_battery_level')) | int  %}
 {% if mysensor < 25 -%}
    red
  {%- elif mysensor < 50 and mysensor >= 25 %}
    yellow
  {%- elif mysensor < 75 and mysensor >= 50 %}
    blue
  {%- else %}
    green
  {%- endif %}
layout: horizontal
multiline_secondary: false
fill_container: false
badge_color: ''
card_mod:
  style: |
    ha-state-icon {
      {% if is_state('sensor.paulo_cesar_battery_state' , 'charging') and states('sensor.paulo_cesar_battery_level')| int < 100 -%}
        animation: charge 3s linear infinite;
      {% endif %}
     }
    @keyframes charge {
      0%, 80% { clip-path: inset(0 0 0 0); }
      10% { clip-path: polygon(0% 0%, 0% 100%, 15% 100%, 15% 24%, 53% 24%, 53% 84%, 15% 84%, 15% 100%, 100% 100%, 100% 0%); }
      20% { clip-path: polygon(0% 0%, 0% 100%, 15% 100%, 15% 24%, 53% 24%, 53% 74%, 15% 74%, 15% 100%, 100% 100%, 100% 0%); }
      30% { clip-path: polygon(0% 0%, 0% 100%, 15% 100%, 15% 24%, 53% 24%, 53% 64%, 15% 64%, 15% 100%, 100% 100%, 100% 0%); }
      40% { clip-path: polygon(0% 0%, 0% 100%, 15% 100%, 15% 24%, 53% 24%, 53% 54%, 15% 54%, 15% 100%, 100% 100%, 100% 0%); }
      50% { clip-path: polygon(0% 0%, 0% 100%, 15% 100%, 15% 24%, 53% 24%, 53% 44%, 15% 44%, 15% 100%, 100% 100%, 100% 0%); }
      60% { clip-path: polygon(0% 0%, 0% 100%, 15% 100%, 15% 24%, 53% 24%, 53% 34%, 15% 34%, 15% 100%, 100% 100%, 100% 0%); }
      70% { clip-path: polygon(0% 0%, 0% 100%, 15% 100%, 15% 24%, 53% 24%, 53% 24%, 15% 24%, 15% 100%, 100% 100%, 100% 0%); }
    }
    .shape {
      {% if (is_state('sensor.paulo_cesar_battery_state' , 'charging') and states('sensor.paulo_cesar_battery_level')| int == 100) or states('sensor.paulo_cesar_battery_level')| int < 30 -%}
      --shape-animation: ping 2s infinite;
      {% endif %}
    }
    @keyframes ping {
    {% if states('sensor.paulo_cesar_battery_level')| int >= 90 -%}
      60% { box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7); }
      {%- else %}
      60% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
      {% endif %}
      100% { box-shadow: 0 0 5px 20px transparent; }
    }

Dai so ajustar de acordo com seu celular !
Depois vou editar e colocar o gif

1 Like