Volver a todas las entradas
🚀 Dale un Nivel Pro a tu Dashboard: Guía Completa de Room Cards para Home Assistant
Si usas Home Assistant, sabrás que tener un panel (dashboard) organizado es la diferencia entre una casa inteligente "funcional" y una "espectacular". Las Room Cards (Tarjetas de Habitación) son, sin duda, una de las mejores formas de condensar toda la información de un cuarto en una sola tarjeta elegante y minimalista. En este artículo, te enseño cómo instalarlas, configurarlas y convertirlas en el centro de control definitivo para tus tablets de pared.
En YouTube comparto más tutoriales, pruebas y domótica real. Suscribirme
Vídeo relacionado en YouTube
Video¿Qué son las Room Cards?
A diferencia de las tarjetas estándar de Home Assistant que suelen ocupar mucho espacio, las Room Cards te permiten agrupar en una sola vista:
- Estado de luces y control rápido.
- Temperatura y humedad.
- Estado de persianas.
- Sensores de movimiento o presencia.
- Información de clima o multimedia.
Todo esto con un diseño limpio que se adapta perfectamente tanto a móviles como a paneles de pared (Wall Panels).
🛠️ Paso 1: Instalación de Room Cards
Las Room Cards no vienen por defecto en Home Assistant; forman parte de la comunidad a través de HACS (Home Assistant Community Store).
- Ve a HACS > Frontend.
- Haz clic en "Explorar y descargar repositorios".
- Busca
room-card. - Instala y reinicia (o refresca) tu interfaz de usuario.
🔗 Repositorio oficial: GitHub - Room Cards
🔧 Paso 2: Configuración y Personalización
La potencia de estas tarjetas reside en su código YAML. Puedes definir iconos que cambien de color según el estado o que ejecuten acciones al tocarlos.
Estructura básica
Una Room Card se divide principalmente en:
- Entity: La entidad principal (por ejemplo, el sensor de temperatura de la habitación).
- Entities: Una lista de sub-entidades (luces, persianas, sensores) que aparecerán como iconos pequeños en la tarjeta.
Código de ejemplo (Gist)
Para facilitarte la vida, he preparado una plantilla de código que puedes copiar y adaptar a tus propios sensores y luces:
Cocina
type: custom:room-card
entity: light.luz_cocina
title: Cocina
tap_action:
action: toggle
double_tap_action:
action: more-info
icon: phu:kitchen-alt
show_icon: true
templates:
- name: persiana
template:
show_icon: true
icon:
conditions:
- icon: phu:ikea-blind-closed
condition: equals
value: closed
styles:
color: gray
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 0
styles:
color: blue
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 9
styles:
color: royalblue
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 19
styles:
color: dodgerblue
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 29
styles:
color: deepskyblue
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 39
styles:
color: skyblue
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 49
styles:
color: lightgreen
- icon: phu:ikea-blind-open
attribute: current_position
condition: above
value: 59
styles:
color: mediumspringgreen
- icon: phu:ikea-blind-open
attribute: current_position
condition: above
value: 69
styles:
color: limegreen
- icon: phu:ikea-blind-open
attribute: current_position
condition: above
value: 79
styles:
color: yellowgreen
- icon: phu:ikea-blind-open
attribute: current_position
condition: above
value: 89
styles:
color: yellow
- icon: phu:ikea-blind-open
attribute: current_position
condition: above
value: 99
styles:
color: gold
rows:
- entities:
- entity: sensor.consumo_tele_cocina
name: TV
icon:
conditions:
- icon: mdi:television
condition: above
value: 24.999
styles:
color: orange
- icon: mdi:television
condition: below
value: 25
styles:
color: gray
- condition: equals
entity: switch.tele_cocina
value: "off"
icon: mdi:television-off
styles:
color: black
show_icon: true
- entity: climate.termostato_cocina
show_icon: true
name: Radiador
icon:
conditions:
- icon: mdi:radiator
condition: equals
attribute: hvac_action
value: heating
styles:
color: orange
- icon: mdi:radiator-off
condition: not_equals
attribute: hvac_action
value: heating
tap_action:
action: more-info
double_tap_action:
action: more-info
- entity: media_player.plex_plex_for_android_tv_mbox
name: Plex
double_tap_action:
action: more-info
hide_if:
conditions:
- condition: equals
value: unavailable
- entity: switch.lavavajillas_power
show_icon: true
name: Lavavajillas
tap_action:
entity: sensor.lavavajillas_program_progress
action: more-info
double_tap_action:
action: navigate
navigation_path: /config/devices/device/641bcf7abe34e3288d407755541959e4
icon:
conditions:
- icon: mdi:dishwasher-off
condition: equals
value: "off"
styles:
color: gray
- icon: mdi:dishwasher
condition: equals
value: "on"
styles:
color: gray
- icon: mdi:dishwasher
entity: sensor.lavavajillas_program_progress
condition: above
value: 0
styles:
color: blue
- icon: mdi:dishwasher
entity: sensor.lavavajillas_program_progress
condition: above
value: 9
styles:
color: royalblue
- icon: mdi:dishwasher
entity: sensor.lavavajillas_program_progress
condition: above
value: 19
styles:
color: dodgerblue
- icon: mdi:dishwasher
entity: sensor.lavavajillas_program_progress
condition: above
value: 29
styles:
color: deepskyblue
- icon: mdi:dishwasher
entity: sensor.lavavajillas_program_progress
condition: above
value: 39
styles:
color: skyblue
- icon: mdi:dishwasher
entity: sensor.lavavajillas_program_progress
condition: above
value: 49
styles:
color: lightgreen
- icon: mdi:dishwasher
entity: sensor.lavavajillas_program_progress
condition: above
value: 59
styles:
color: mediumspringgreen
- icon: mdi:dishwasher
entity: sensor.lavavajillas_program_progress
condition: above
value: 69
styles:
color: limegreen
- icon: mdi:dishwasher
entity: sensor.lavavajillas_program_progress
condition: above
value: 79
styles:
color: yellowgreen
- icon: mdi:dishwasher
entity: sensor.lavavajillas_program_progress
condition: above
value: 89
styles:
color: yellow
- icon: mdi:dishwasher
entity: sensor.lavavajillas_program_progress
condition: above
value: 99
styles:
color: gold
- entity: cover.persiana_cocina
name: Persiana
template: persiana
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.persiana_cocina
double_tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.persiana_cocina
- entity: media_player.marco_de_fotos
show_icon: true
name: fotos
icon: mdi:google-home
hide_if:
conditions:
- condition: equals
value: unavailable
- condition: equals
value: "off"
- entities:
- entity: sensor.consumo_induccion
show_icon: true
double_tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.induccion_interruptor
icon:
conditions:
- condition: equals
entity: switch.induccion_interruptor
value: "off"
styles:
color: black
- condition: above
value: 1
styles:
color: orange
- condition: above
value: 200
styles:
color: red
- entity: sensor.consumo_freidora
show_icon: true
double_tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.freidora_de_aire
icon:
conditions:
- condition: equals
entity: switch.freidora_de_aire
value: "off"
styles:
color: black
- condition: above
value: 4
styles:
color: orange
- condition: above
value: 200
styles:
color: red
- entity: sensor.consumo_horno
show_icon: true
double_tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.horno
icon:
conditions:
- condition: equals
entity: switch.horno
value: "off"
styles:
color: black
- condition: above
value: 1
styles:
color: orange
- condition: above
value: 200
styles:
color: red
- entity: fan.campana_extractora
name: Extractor
state_color: true
tap_action:
action: toggle
info_entities:
- entity: binary_sensor.htw5620cnmp_puerta_abierta_frigorifico
show_icon: true
hide_if:
conditions:
- condition: equals
value: "off"
icon:
template:
styles: |
return 'color: red'
- entity: binary_sensor.presencia_cocina_presence
show_icon: true
icon: mdi:motion-sensor
state_color: true
hide_if:
conditions:
- condition: equals
value: "off"
- entity: sensor.temperatura_cocina
format: precision1
- sensor.presencia_cocina_illuminance
cards:
- type: custom:mini-media-player
entity: media_player.plex_plex_for_android_tv_mbox
show_states:
- playing
- paused
- type: conditional
conditions:
- entity: binary_sensor.calefaccion_cocina_encendida
state: "on"
card:
type: custom:simple-thermostat
header: false
entity: climate.termostato_cocina
layout:
step: row
show_states:
- heat
name: Calefacción
title: Cocina
control:
_headings: true
_icons: true
_names: true
hvac:
_name: " "
heat:
icon: mdi:fire
name: "On"
"off":
icon: mdi:power
name: "Off"
column_span: 1Garaje
type: custom:room-card
title: Garaje
entity: light.luz_lavadora
icon: phu:garage-alt-open
show_icon: true
tap_action:
action: toggle
double_tap_action:
action: more-info
entities:
- entity: light.luz_lavadora
show_icon: true
name: null
tap_action:
action: toggle
double_tap_action:
action: more-info
- entity: sensor.hw100gbd14979uib_tiempo_restante
show_icon: true
name: Lavadora
tap_action:
action: more-info
double_tap_action:
action: navigate
navigation_path: /config/devices/device/c15e63e272e65483e1c1ef35c3307f66
icon:
conditions:
- icon: mdi:washing-machine-off
entity: switch.hw100gbd14979uib_lavadora
condition: equals
value: "off"
styles:
color: gray
- icon: mdi:washing-machine-off
entity: switch.hw100gbd14979uib_lavadora
condition: equals
value: unavailable
styles:
color: gray
- icon: mdi:washing-machine
condition: equals
value: "on"
styles:
color: gray
- icon: mdi:washing-machine
entity: sensor.hw100gbd14979uib_tiempo_restante
condition: below
value: 120
styles:
color: blue
- icon: mdi:washing-machine
entity: sensor.hw100gbd14979uib_tiempo_restante
condition: below
value: 108
styles:
color: royalblue
- icon: mdi:washing-machine
entity: sensor.hw100gbd14979uib_tiempo_restante
condition: below
value: 96
styles:
color: dodgerblue
- icon: mdi:washing-machine
entity: sensor.hw100gbd14979uib_tiempo_restante
condition: below
value: 84
styles:
color: deepskyblue
- icon: mdi:washing-machine
entity: sensor.hw100gbd14979uib_tiempo_restante
condition: below
value: 72
styles:
color: skyblue
- icon: mdi:washing-machine
entity: sensor.hw100gbd14979uib_tiempo_restante
condition: below
value: 60
styles:
color: lightgreen
- icon: mdi:washing-machine
entity: sensor.hw100gbd14979uib_tiempo_restante
condition: below
value: 48
styles:
color: mediumspringgreen
- icon: mdi:washing-machine
entity: sensor.hw100gbd14979uib_tiempo_restante
condition: below
value: 36
styles:
color: limegreen
- icon: mdi:washing-machine
entity: sensor.hw100gbd14979uib_tiempo_restante
condition: below
value: 24
styles:
color: yellowgreen
- icon: mdi:washing-machine
entity: sensor.hw100gbd14979uib_tiempo_restante
condition: below
value: 12
styles:
color: yellow
- icon: mdi:washing-machine
entity: sensor.hw100gbd14979uib_tiempo_restante
condition: below
value: 1
styles:
color: gold
- entity: sensor.consumo_secadora
show_icon: true
double_tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.secadora
icon:
conditions:
- condition: equals
entity: switch.secadora
value: "off"
styles:
color: black
- condition: above
value: 1
styles:
color: cyan
- condition: above
value: 200
styles:
color: blue
- entity: climate.termostato_entrada
show_icon: true
name: Radiador
icon:
conditions:
- icon: mdi:radiator
condition: equals
attribute: hvac_action
value: heating
styles:
color: orange
- icon: mdi:radiator-off
condition: not_equals
attribute: hvac_action
value: heating
tap_action:
action: more-info
double_tap_action:
action: more-infoDormitorio
type: custom:room-card
title: Marina
entity: light.luces_marina
tap_action:
action: toggle
double_tap_action:
action: more-info
icon: mdi:bed
show_icon: true
templates:
- name: persiana
template:
show_icon: true
icon:
conditions:
- icon: phu:ikea-blind-closed
condition: equals
value: closed
styles:
color: gray
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 0
styles:
color: blue
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 9
styles:
color: royalblue
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 19
styles:
color: dodgerblue
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 29
styles:
color: deepskyblue
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 39
styles:
color: skyblue
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 49
styles:
color: lightgreen
- icon: phu:ikea-blind-open
attribute: current_position
condition: above
value: 59
styles:
color: mediumspringgreen
- icon: phu:ikea-blind-open
attribute: current_position
condition: above
value: 69
styles:
color: limegreen
- icon: phu:ikea-blind-open
attribute: current_position
condition: above
value: 79
styles:
color: yellowgreen
- icon: phu:ikea-blind-open
attribute: current_position
condition: above
value: 89
styles:
color: yellow
- icon: phu:ikea-blind-open
attribute: current_position
condition: above
value: 99
styles:
color: gold
entities:
- entity: light.luz_virtual_marina
show_icon: true
name: Techo
icon: mdi:ceiling-fan-light
tap_action:
action: toggle
double_tap_action:
action: more-info
- entity: light.tira_de_leds_marina
name: LEDs
icon: phu:light-strip
show_icon: true
state_color: true
tap_action:
action: toggle
double_tap_action:
action: more-info
- entity: climate.termostato_marina
show_icon: true
name: Radiador
icon:
conditions:
- icon: mdi:radiator
condition: equals
attribute: hvac_action
value: heating
styles:
color: orange
- icon: mdi:radiator-off
condition: not_equals
attribute: hvac_action
value: heating
tap_action:
action: more-info
double_tap_action:
action: more-info
- entity: fan.ventilador_virtual_marina
name: Ventilador
state_color: true
tap_action:
action: toggle
double_tap_action:
action: more-info
- entity: cover.persiana_marina
name: Persiana
template: persiana
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.persiana_marina
double_tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.persiana_marina
- entity: media_player.media_player.plex_marina867_plex_web_microsoft_edge_windows
name: Plex
double_tap_action:
action: more-info
hide_if:
conditions:
- condition: equals
entity: >-
media_player.media_player.plex_marina867_plex_web_microsoft_edge_windows
value: unavailable
info_entities:
- entity: binary_sensor.movimiento_marina
show_icon: true
icon: mdi:motion-sensor
state_color: true
hide_if:
conditions:
- condition: equals
value: "off"
- entity: binary_sensor.apertura_ventana_marina_contact
show_icon: true
icon: mdi:window-open-variant
state_color: true
hide_if:
conditions:
- condition: equals
value: "off"
- entity: sensor.temperatura_marina
format: precision1
cards:
- type: custom:mini-media-player
entity: media_player.plex_marina867_plex_web_microsoft_edge_windows
show_states:
- playing
- paused
- type: conditional
conditions:
- entity: binary_sensor.calefaccion_marina
state: "on"
card:
type: custom:simple-thermostat
header: false
entity: climate.termostato_marina
layout:
step: row
show_states:
- heat
name: Calefacción
title: Salón
control:
_headings: true
_icons: true
_names: true
hvac:
_name: " "
heat:
icon: mdi:fire
name: "On"
"off":
icon: mdi:power
name: "Off"Salón
type: custom:room-card
title: Salón
entity: light.luces_salon
tap_action:
action: toggle
icon: mdi:sofa
show_icon: true
templates:
- name: persiana
template:
show_icon: true
icon:
conditions:
- icon: phu:ikea-blind-closed
condition: equals
value: closed
styles:
color: gray
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 0
styles:
color: blue
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 9
styles:
color: royalblue
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 19
styles:
color: dodgerblue
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 29
styles:
color: deepskyblue
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 39
styles:
color: skyblue
- icon: phu:ikea-blind-closed
attribute: current_position
condition: above
value: 49
styles:
color: lightgreen
- icon: phu:ikea-blind-open
attribute: current_position
condition: above
value: 59
styles:
color: mediumspringgreen
- icon: phu:ikea-blind-open
attribute: current_position
condition: above
value: 69
styles:
color: limegreen
- icon: phu:ikea-blind-open
attribute: current_position
condition: above
value: 79
styles:
color: yellowgreen
- icon: phu:ikea-blind-open
attribute: current_position
condition: above
value: 89
styles:
color: yellow
- icon: phu:ikea-blind-open
attribute: current_position
condition: above
value: 99
styles:
color: gold
rows:
- entities:
- entity: light.luz_sofa
show_icon: true
name: Sofá
icon: mdi:sofa-outline
tap_action:
action: toggle
double_tap_action:
action: more-info
- entity: light.luz_mesa
name: Mesa
icon: mdi:table-chair
show_icon: true
tap_action:
action: toggle
double_tap_action:
action: more-info
- entity: light.luz_tele
name: TV
icon:
conditions:
- icon: mdi:television-guide
condition: equals
value: "on"
styles:
color: blue
- icon: mdi:television-guide
condition: equals
entity: switch.tv_salon
value: "on"
styles:
color: gray
- icon: mdi:television
condition: equals
entity: switch.tv_salon
value: "off"
styles:
color: gray
show_icon: true
tap_action:
action: toggle
double_tap_action:
action: more-info
- entity: climate.termostato_general
show_icon: true
name: Radiador
icon:
conditions:
- icon: mdi:radiator
condition: equals
attribute: hvac_action
value: heating
styles:
color: orange
- icon: mdi:radiator-off
condition: not_equals
attribute: hvac_action
value: heating
tap_action:
action: more-info
double_tap_action:
action: more-info
- entity: climate.ac_salon
show_icon: true
name: AC
tap_action:
action: toggle
double_tap_action:
action: more-info
icon:
template:
styles: >
if (entity.state == "cool") return 'color: blue'; if
(entity.state == "heat") return 'color: orange'; if
(entity.state == "heat_cool") return 'color: green'; if
(entity.state == "fan_only") return 'color: cyan'; if
(entity.state == "dry") return 'color: yellow'; else return
'color: gray';
- entities:
- entity: cover.persiana_jardin
name: Jardín
show_icon: true
template: persiana
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.persiana_jardin
double_tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.persiana_jardin
- entity: cover.persiana_terraza
name: Terraza
template: persiana
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.persiana_terraza
double_tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.persiana_terraza
- entity: cover.persiana_chill_out
name: Chill Out
template: persiana
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.persiana_chill_out
double_tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.persiana_chill_out
- entity: binary_sensor.presencia_salon_presence
show_icon: true
name: Alguien
icon: mdi:motion-sensor
state_color: true
hide_if:
conditions:
- condition: equals
value: "off"
- entities:
- entity: vacuum.robot_aspirador
name: Robot
state_color: true
tap_action:
action: toggle
double_tap_action:
action: more-info
- entity: media_player.plex_plex_for_samsung_tv_2017
name: Plex
double_tap_action:
action: more-info
hide_if:
conditions:
- condition: equals
entity: media_player.plex_plex_for_samsung_tv_2017
value: unavailable
- entity: media_player.marco_de_fotos_gigante
name: Fotos
double_tap_action:
action: more-info
hide_if:
conditions:
- condition: equals
value: unavailable
- condition: equals
value: "off"
info_entities:
- entity: group.apertura_puertas_salon
name: Puertas
show_icon: true
icon: mdi:door-open
state_color: true
hide_if:
conditions:
- condition: equals
value: "off"
- entity: sensor.ws2900_v2_02_03_indoor_temperature
format: precision1
- sensor.ws2900_v2_02_03_indoor_humidity
- sensor.presencia_salon_illuminance
cards:
- type: conditional
conditions:
- entity: vacuum.robot_aspirador
state:
- cleaning
- paused
- returning
card:
show_state: true
show_name: false
camera_view: auto
type: picture-entity
entity: camera.xiaomi_cloud_map_extractor
name: Mapa
camera_image: camera.xiaomi_cloud_map_extractor
show_states:
- cleaning
- returning
- paused
- type: custom:mini-media-player
entity: media_player.marco_de_fotos_gigante
show_states:
- playing
- paused
- type: custom:mini-media-player
entity: media_player.plex_plex_for_samsung_tv_2017
show_states:
- playing
- paused
- type: conditional
conditions:
- entity: binary_sensor.calefaccion_encendida
state: "on"
card:
type: custom:simple-thermostat
header: false
entity: climate.termostato_general
layout:
step: row
show_states:
- heat
name: Calefacción
title: Salón
control:
_headings: true
_icons: true
_names: true
hvac:
_name: " "
heat:
icon: mdi:fire
name: "On"
"off":
icon: mdi:power
name: "Off"
- type: custom:simple-thermostat
header: true
entity: climate.ac_salon
show_states:
- "on"
- heat
- cool
- dry
- heat_cool
- fan_only
sensors:
- entity: sensor.ws2900_v2_02_03_indoor_humidity
name: Humedad
- entity: sensor.consumo_aire_acondicionado_salon
name: consumo
layout:
step: row
name: Aire acondicionado
title: Salón
control:
hvac:
_name: Modo
heat:
name: Calor
cool:
name: Frío
heat_cool:
name: Auto
dry:
name: Humedad
fan_only:
name: Ventilador
column_span: 1📱 Uso en un Wall Panel (Tablet de pared)
Uno de los usos más potentes de las Room Cards es crear un panel central para toda la casa. Al usar estas tarjetas, puedes tener en una pantalla de 10 pulgadas el control absoluto de 6 u 8 habitaciones sin necesidad de hacer scroll.
Consejo PRO: Combina las Room Cards con el modo "Kiosk Mode" de Home Assistant para ocultar las barras laterales y superiores, dejando una interfaz limpia y profesional.
Recursos Útiles para tu Domótica
- Tutorial en Vídeo: Si prefieres ver cómo arrastro y configuro cada elemento, aquí tienes el paso a paso: Ver Vídeo Room Cards.
¿Qué te han parecido estas tarjetas? Si tienes problemas con el código YAML o quieres compartir tus diseños, ¡te leo en los comentarios!
Suscríbete a mi canal para no perderte ningún truco sobre paneles y diseño en Home Assistant.
