Visitas: 39
A continuación voy a compartiros con vosotros Button Card instalación y ejemplos en el que he realizado el análisis de esta fantástica extensión que podemos adquirir desde HACS.
Es verdaderamente sorprendente el potencial que tiene esta integración para dotar a nuestros Home Assistant de nuevas funcionalidad, sobre todo estética, aunque también funcionalidades muy, muy interesantes para la personalización de nuestras pantallas.
En primer lugar, si vas por aquí ya has leído que necesitas instalar HACS, Pues aquí tienes el enlace a la publicación en la que te enseñó cómo hacerlo. Y en el momento en el que lo hayas hecho, puedes continuar con el vídeo que tienes aquí debajo.
Como os he indicado repetidas veces en el vídeo, es necesario que accedáis a la documentación de El autor y podáis profundizar mucho más en todas las posibilidades que os ofrece esta extensión. Aquí os dejo el enlace para que accedáis a la documentación y podáis aprender muchísimo
https://github.com/custom-cards/button-card
Como os dije en el vídeo, aquí os iba a dejar el código fuente del botón.
Cualquier duda que podáis tener podéis dejarla en los comentarios
type: custom:button-card
entity: sensor.lavadora_energy_power
icon: mdi:washing-machine
aspect_ratio: 1/1
name: Lavadora
tap_action:
action: navigate
navigation_path: /lovelace-movil/lavadora/
styles:
card:
- border-radius: 10%
- padding: 10%
- color: ivory
- font-size: 13px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i KWH" "n n" "hoy hoy" "func func" "aviso aviso"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 10pt
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state < 60) return 'lime';
if (entity.state >= 60 && entity.state < 80) return 'orange';
else return 'red';
]]]
- width: 90%
- margin-top: 0%
custom_fields:
KWH:
- font-size: 10pt
- align-self: start
- justify-self: end
hoy:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.lavadora_energy_today"].state > 80) return
"red"; ]]]
func:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': '[[[ if (states["sensor.lavadora_inicio"].state > 80) return "red"; ]]]'
aviso:
- align-self: middle
- justify-self: start
- '--text-color-sensor': >-
[[[ if (states["sensor.lavadora_energy_power"].state > 80) return
"red"; ]]]
custom_fields:
KWH: |
[[[
return `
${entity.state}KWh`
]]]
hoy: |
[[[
return `
HOY : ${states['sensor.lavadora_energy_today'].state}Kwh`
]]]
func: |
[[[
return `
funcionando: ${states['sensor.lavadora_inicio'].state}`
]]]
aviso: |
[[[
return `
Avisador: ${states['input_boolean.avisar_fin_lavadora'].state}`
]]]
Sin otro interés, espero que se haya parecido súper interesante esta publicación y os espero en más vídeos y artículos de vuestro interés.
