button card home assistant

Button Card 2: Porcentaje y estado

En esta segunda entrega de la button card, vamos a ver dos tarjetas, una de estado y otra de porcentaje. Si no has visto el primer capítulo de de esta serie, es imprescindible que lo veas ya que es dónde explico cómo instalar esta tarjeta. La primera nos mostrará el estado de una batería según el porcentaje de batería que le quede. También es aplicable a cualquier dispositivo que dé como resultado un porcentaje. Por ejemplo, una persiana que nos dé el porcentaje de apertura de esta. Veremos cómo los iconos y colores son totalmente personalizables.

La segunda, nos mostrará gráficamente el estado de un dispositivo, en mi caso de una bombilla y además me mostrará la temperatura de un sensor de temperatura.

en los dos casos, podremos configurar la cuadrícula de la tarjeta. En este caso se hace con el grid-template-areas.

Configuración del porcentaje de batería con button card

type: custom:button-card
entity: sensor.t671h_battery_level
name: Batería del teléfono
show_state: true
styles:
  card:
    - border-radius: 15px
      border: 5px solid rgb(185,185,185)
      background: rgb(33,38,45)
  name:
    - color: rgb(255,255,255)
      font-weight: 900
  state:
    - font-weight: 900
  grid:
    - grid-template-areas: '"n" "i" "s"'
  icon:
    - color: |
        [[[
          if (entity.state < 10) return "rgb(255,0,0)"
          if (entity.state < 15) return "rgb(255,124,0)"
          if (entity.state < 30) return "rgb(255,255,0)"
          if (entity.state < 101) return "rgb(0,255,0)"
          else return "rgb(153,153,153)"
        ]]]
icon: |-
  [[[ if (entity.state == 0) return "mdi:battery-outline";
      if (entity.state < 10) return "mdi:battery-10";
      if (entity.state < 20) return "mdi:battery-20";
      if (entity.state < 30) return "mdi:battery-30";
      if (entity.state < 40) return "mdi:battery-40";
      if (entity.state < 50) return "mdi:battery-50";
      if (entity.state < 60) return "mdi:battery-60";
      if (entity.state < 70) return "mdi:battery-70";
      if (entity.state < 80) return "mdi:battery-80";
      if (entity.state < 90) return "mdi:battery-90";
      if (entity.state < 101) return "mdi:battery";
      else return "mdi:battery-off" ]]]

Estado de un dispositivo con button card

En el segundo caso, vamos a ver una tarjeta vamos a ver gráficamente el estado de una entidad. En mi caso, de una bombilla. El ícono cambiará de color dependiendo del estado y además en una esquina de la tarjeta, se mostrará la temperatura de un sensor de temperatura y humedad.

type: custom:button-card
entity: light.sofa
name: Sofá
icon: >
  [[[ if (entity.state == "off") return "mdi:sofa-outline"; else return
  "mdi:sofa" ]]]
show_state: false
styles:
  card:
    - border-radius: 35px
      border: 2px solid rgb(153, 153, 153)
  grid:
    - grid-template-areas: '"l i i i temp" "l i i i s" "l i i i s" "n n n n n"'
    - grid-template-columns: 1fr 1fr 1fr 1fr 1fr
    - grid-template-rows: 1fr 1fr 1fr 1fr
  custom_fields: null
temp:
  - align-self: start
  - justify-self: end
  - padding-right: 25px
custom_fields:
  temp: |
    [[[
      return `<ha-icon
        icon="mdi:thermometer"
        style="width: 24px; height: 24px; color: white;">
        </ha-icon><span><span style="color: var(--text-color-sensor); font-size: 16px">${Math.round(states['sensor.temperatura_bme280_arnau'].state)} ºC</span></span>`
    ]]]

Sígueme a Youtube

Sígueme en Youtube - Button Card Porcentaje estado
(Visited 461 times, 1 visits today)
EnglishDeutschEspañol