[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

2 curtidas
#3

Segue mais um card de amostragem de bateria responsivo

type: custom:mushroom-template-card
primary: Cesar {{ states(entity) }}%
secondary: >
  {{ 'charging' if is_state('binary_sensor.paulo_cesar_is_charging', 'on' )
  else 'discharging' }}
icon: |-
  {% set battery_level = states(entity) | int %}
  {% if is_state('sensor.paulo_cesar_battery_state' , 'charging') -%}
    mdi:battery-charging-100
  {% else %}
    {% if battery_level  >= 25 %}
      {{states.sensor.paulo_cesar_battery_level.attributes.icon}}
    {% else %}
      mdi:battery-alert-variant-outline
    {% endif %}
  {% endif %}
icon_color: |-
  {% set battery_level = states(entity) | int %}
  {% if battery_level > 90 %} 
    green
  {% elif battery_level > 80 %}
    light-green
  {% elif battery_level > 70 %}
    cyan  
  {% elif battery_level > 60 %}
    blue
  {% elif battery_level > 50 %}
    lime
  {% elif battery_level > 40 %}
    yellow
  {% elif battery_level > 30 %}
    amber
  {% elif battery_level > 20 %}
    orange
  {% elif battery_level > 10 %}
    deep-orange
  {% else %}
    red
  {% endif %} 
entity: sensor.paulo_cesar_battery_level
layout: vertical
badge_icon: |-
  {% if is_state('binary_sensor.paulo_cesar_is_charging', 'on') %}
    mdi:lightning-bolt
  {% elif states(entity) | int < 10 %} 
    mdi:exclamation-thick
  {% endif %}
badge_color: '{{ ''red'' if states(entity) | int < 10 else ''light-blue'' }}'
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        /* Icon charging animation */
        {{ '--shape-animation: charge 3s linear infinite;' if is_state('binary_sensor.paulo_cesar_is_charging', 'on') }}
        /* Radial progress bar */
        background: radial-gradient(var(--card-background-color) 60%, 
                                    transparent calc(58% + 2px)), 
                    conic-gradient(var(--icon-color) {{ states(config.entity) }}% 0%, 
                                    var(--card-background-color) 0% 100%);
      }
      .shape:after {
       /* pulsa se estiver abaixo do nivel ou proximo de 100% */

        /* Add back icon shape */
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        border-radius: var(--icon-border-radius);
        background: var(--shape-color);
      }
      ha-icon {

      }
      @keyframes charge {
        0%, 80% { clip-path: inset(0 0 0 0); }
        10% { clip-path: polygon(0% 0%, 0% 100%, 32% 100%, 32% 36%, 51% 36%, 51% 70%, 28% 70%, 28% 100%, 100% 100%, 100% 0%); }
        20% { clip-path: polygon(0% 0%, 0% 100%, 32% 100%, 32% 36%, 51% 36%, 51% 62%, 28% 62%, 28% 100%, 100% 100%, 100% 0%); }
        30% { clip-path: polygon(0% 0%, 0% 100%, 32% 100%, 32% 36%, 51% 36%, 51% 54%, 28% 54%, 28% 100%, 100% 100%, 100% 0%); }
        40% { clip-path: polygon(0% 0%, 0% 100%, 32% 100%, 32% 36%, 51% 36%, 51% 46%, 28% 46%, 28% 100%, 100% 100%, 100% 0%); }
        50% { clip-path: polygon(0% 0%, 0% 100%, 32% 100%, 32% 36%, 51% 36%, 51% 38%, 28% 38%, 28% 100%, 100% 100%, 100% 0%); }
        60% { clip-path: polygon(0% 0%, 0% 100%, 32% 100%, 32% 36%, 51% 36%, 51% 30%, 28% 30%, 28% 100%, 100% 100%, 100% 0%); }
        70% { clip-path: polygon(0% 0%, 0% 100%, 32% 100%, 32% 36%, 51% 36%, 51% 22%, 28% 22%, 28% 100%, 100% 100%, 100% 0%); }
        80% { clip-path: polygon(0% 0%, 0% 100%, 32% 100%, 32% 36%, 51% 36%, 51% 14%, 28% 14%, 28% 100%, 100% 100%, 100% 0%); }
      }
      @keyframes ping {
        60% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 10); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      } 
    .: |
      ha-card {

        /* Remove default card styling */
        --ha-card-background: none;
        --ha-card-box-shadow: none;
        --ha-card-border-width: 0;

        /* Center card on row */
        width: fit-content;
        margin: auto;

        /* Make card non-responsive to select and pointer */
        user-select: none;
        pointer-events: none;
      }
      @keyframes ping {
        60% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 10); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }

o Resultado apos voce alterar os sensores de acordo com seu telemovel será esse

video-gif-battery-ezgif.com-video-to-gif-converter

#4

esse segundo código é um complemento do primeiro? ou um upgrade? ou são coisas diferentes?

1 curtida
#5

É um upgrade, mais em teoria são dois cards diferentes
Esse ao tocar não mostras as informações do sensor, está desabilitado no css

#6

entendi…

me diz uma coisa , teria como colocar esse car seu pra ficar igual aos meus ?

minha dashboard é toda nesse formato (foto)

dai esse card parece que fica flutuando perdido no meio dos outros

Imagem do WhatsApp de 2024-01-22 à(s) 21.52.44_efb57fef
Imagem do WhatsApp de 2024-01-22 à(s) 21.52.44_efb57fef1599×899 116 KB

1 curtida
#7

da sim
no arquivo
la no final basta remover esse trecho

esta dendro do ha-card la no final.

        --ha-card-background: none;
        --ha-card-box-shadow: none;
        --ha-card-border-width: 0;

ao remover ele fica como sua dash normal.

1 curtida