Room Card
Description¶
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%"