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
