Skip to content

Room Card

Description

Image title

This is the room-card, used to show the state of single room in a quick glance. The card has support for up to 4 subicons at the right side of the card. These can be configured using custom colors and tap actions.

Variables

Variable Default Required Notes Requirement
label_use_temperature true Define whether the label should show the current room temperature
The temperature should be provide by either a temperature or current_temperature attribute or by the entity state
label_use_brightness false Define whether the label should show the current room brightness of the lights
Requires label_use_temperature to be false
entity_1 a room_entity object (see below)
entity_2 a room_entity object (see below)
entity_3 a room_entity object (see below)
entity_4 a room_entity object (see below)

Room entity

Variable Default Required Notes Requirement
entity_id The entity_id of the status icon
templates List of the additional button card templates to apply to this icon
tap_action tap_action for the icon (see button card documentation for options)
hold_action tap_action for the icon (see button card documentation for options)

Default card options

All the options from the button card are still available for the large room card. If you want to tweak this card a little bit more, below are some examples. The full list can be found here: link

Options Default Required Notes Requirement
entity The entity_id for the large card
icon Icon to display. Defaults to the entity icon
tap_action Define the type of action on click, if undefined, toggle will be used.
See Action
hold_action Define the type of action on hold, if undefined, nothing happens
See Action
label Change the label text
title Change the title text

Usage

  - type: 'custom:button-card'
    template:
      - card_room
      - red_no_state
    name: Bathroom
    entity: light.bathroom
    icon: mdi:shower-head
    tap_action:
      action: navigate
      navigation_path: '/ui-lovelace-minimalist/bathroom'
    variables:
      label_use_temperature: false
      label_use_brightness: true
      entity_1:
        entity_id: light.bathroom
        templates:
          - yellow_on
        tap_action:
          action: toggle
      entity_2:
        entity_id: binary_sensor.badkamer_motion_sensor
        templates:
          - blue_on
        tap_action:
          action: none
      entity_3:
        entity_id: input_boolean.badkamer_motionsensor_enabled
        templates:
          - green_on
          - red_off
        tap_action:
          action: toggle
      entity_4:
        entity_id: input_boolean.bath_mode
        templates:
          - pink_on
        tap_action:
          action: toggle
Template Code
card_room.yaml
---
card_room:
  template:
    - "ulm_translation_engine"
  variables:
    label_use_temperature: true
    label_use_brightness: false
  double_tap_action:
    action: "call-service"
    service: "input_select.select_option"
    service_data:
      option: "[[[ return variables.ulm_input_select_option ]]]"
      entity_id: "[[[ return variables.ulm_input_select ]]]"
  color: "var(--google-grey-500)"
  size: "45%"
  aspect_ratio: "1/1"
  show_icon: true
  show_label: true
  show_name: true
  icon: "mdi:sofa-single"
  label: |-
    [[[
      if (variables.label_use_temperature) {
        return (entity?.attributes?.current_temperature || entity?.attributes?.temperature || entity?.attributes?.device_temperature || entity?.state || '-') + (entity?.attributes?.unit_of_measurement || '°C');
      } else if (variables.label_use_brightness && entity?.state == "on" && entity?.attributes?.brightness != null) {
        let bri = Math.round(entity?.attributes?.brightness / 2.55);
        return (bri ? bri : "0") + "%";
      }
      return variables.ulm_translation_state;
    ]]]
  state:
    - value: "unavailable"
      styles:
        custom_fields:
          notification:
            - border-radius: "50%"
            - border: "2px solid var(--card-background-color)"
            - width: "24.5px"
            - height: "24.5px"
            - position: "absolute"
            - left: "50%"
            - top: "50%"
            - transform: "translate(-50%,-50%)"
            - margin-top: "35%"
            - margin-left: "-35%"
            - line-height: 0
            - display: "grid"
            - background-color: "[[[ return 'rgba(var(--color-red),1)'; ]]]"
  styles:
    icon:
      - color: "rgba(var(--color-theme),0.2)"
    label:
      - justify-self: "start"
      - align-self: "start"
      - font-weight: "bold"
      - font-size: "14px"
      - filter: "opacity(40%)"
      - margin-left: "12px"
      - max-width: "[[[ return `calc(100% - (12px + ${!variables?.entity_1 && !variables?.entity_2 ? 5 : 0}px))`; ]]]"
      - text-overflow: "ellipsis"
      - overflow: "hidden"
      - margin-top: "[[[ return !variables?.entity_1 ? '-24%' : '-10%'; ]]]"
    name:
      - justify-self: "start"
      - align-self: "end"
      - font-weight: "bold"
      - font-size: "18px"
      - margin-left: "12px"
      - margin-bottom: "[[[ return !variables?.entity_1 ? (!variables?.entity_2 ? '15.8%' : '24%') : '10%'; ]]]"
      - max-width: "[[[ return `calc(100% - (12px + ${!variables?.entity_2 ? 5 : 0}px))`; ]]]"
      - text-overflow: "ellipsis"
      - overflow: "hidden"
    state:
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "12px"
      - filter: "opacity(40%)"
      - margin-left: "6px"
    img_cell:
      - background-color: "rgba(var(--color-theme),0.05)"
      - border-radius: "50%"
      - width: "75%"
      - height: "75%"
      - max-width: "none"
      - max-height: "none"
      - position: "absolute"
      - left: "50%"
      - top: "50%"
      - transform: "translate(-50%,-50%)"
      - margin-top: "25%"
      - margin-left: "-25%"
    grid:
      - grid-template-areas: "[[[ return !variables?.entity_1 ? (!variables?.entity_2 ? `'n n n' 'l l i3' 'i i i4'` : `'n n i2' 'l l i3' 'i i i4'`) : `'n n n i1' 'l l l i2' 'i i . i3' 'i i . i4'`; ]]]"
      - grid-template-columns: "[[[ return !variables?.entity_1 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr'; ]]]"
      - grid-template-rows: "[[[ return !variables?.entity_1 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr'; ]]]"
      - justify-items: "center"
    card:
      - border-radius: "20px"
      - box-shadow: "var(--box-shadow)"
      - padding: "5px"
    custom_fields:
      i1: &widget_icon_room_styling
        - border-radius: "50%"
        - width: "80%"
        - height: "80%"
        - line-height: 0
        - display: "grid"
      i2: *widget_icon_room_styling
      i3: *widget_icon_room_styling
      i4: *widget_icon_room_styling
  custom_fields:
    notification: >
      [[[
        if (entity?.state == 'unavailable'){
          return '<ha-icon icon="mdi:exclamation" style="width: 50%; height: 50%; color: var(--primary-background-color);"></ha-icon>';
        }
      ]]]

    i1:
      card:
        type: "custom:button-card"
        template: >
          [[[
            let templates = [ 'widget_icon_room' ];
            if (variables?.entity_1?.templates?.length) {
              templates.push(...variables.entity_1.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables?.entity_1; ]]]"
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_1; ]]]"
            styles:
              card:
                - display: "none"
        entity: "[[[ return variables?.entity_1?.entity_id; ]]]"

    i2:
      card:
        type: "custom:button-card"
        template: >
          [[[
            let templates = [ 'widget_icon_room' ];
            if (variables?.entity_2?.templates?.length) {
              templates.push(...variables.entity_2.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables?.entity_2; ]]]"
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_2; ]]]"
            styles:
              card:
                - display: "none"
        entity: "[[[ return variables?.entity_2?.entity_id; ]]]"

    i3:
      card:
        type: "custom:button-card"
        template: >
          [[[
            let templates = [ 'widget_icon_room' ];
            if (variables?.entity_3?.templates?.length) {
              templates.push(...variables.entity_3.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables?.entity_3; ]]]"
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_3; ]]]"
            styles:
              card:
                - display: "none"
        entity: "[[[ return variables?.entity_3?.entity_id; ]]]"

    i4:
      card:
        type: "custom:button-card"
        template: >
          [[[
            let templates = [ 'widget_icon_room' ];
            if (variables?.entity_4?.templates?.length) {
              templates.push(...variables.entity_4.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables?.entity_4; ]]]"
        state:
          - operator: "template"
            value: "[[[ return !variables.entity_4; ]]]"
            styles:
              card:
                - display: "none"
        entity: "[[[ return variables?.entity_4?.entity_id; ]]]"

widget_icon_room:
  variables:
    tap_action:
      action: "toggle"
    hold_action:
      action: "more-info"
  tap_action:
    action: "[[[ return variables?.tap_action?.action ? variables.tap_action.action : 'none'; ]]]"
    entity: "[[[ return variables.tap_action.entity; ]]]"
    navigation_path: "[[[ return variables.tap_action.navigation_path; ]]]"
    url_path: "[[[ return variables.tap_action.url_path; ]]]"
    service: "[[[ return variables.tap_action.service; ]]]"
    service_data: "[[[ return variables.tap_action.service_data; ]]]"
  hold_action:
    action: "[[[ return variables?.hold_action?.action ? variables.hold_action.action : 'none'; ]]]"
    entity: "[[[ return variables.hold_action.entity; ]]]"
    navigation_path: "[[[ return variables.hold_action.navigation_path; ]]]"
    url_path: "[[[ return variables.hold_action.url_path; ]]]"
    service: "[[[ return variables.hold_action.service; ]]]"
    service_data: "[[[ return variables.hold_action.service_data; ]]]"
  size: "15px"
  color: "var(--google-grey)"
  show_icon: true
  show_name: false
  styles:
    icon:
      - width: "50%"
      - height: "50%"
      - line-height: "0"
      - color: "rgba(var(--color-theme),0.2)"
    img_cell:
      - border-radius: "50%"
      - background-color: "rgba(var(--color-theme),0.05)"
    grid:
      - grid-template-areas: "'i'"
    card:
      - height: "100%"
      - box-shadow: "none"
      - padding: "0px"
      - border-radius: "50%"