diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_room.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_room.yaml new file mode 100644 index 000000000..bc63458a8 --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_room.yaml @@ -0,0 +1,280 @@ +--- +card_room: + template: + - "ulm_language_variables" + variables: + label_use_temperature: true + label_use_brightness: false + color: "var(--google-grey-500)" + show_icon: true + show_name: true + show_label: true + size: "45%" + aspect_ratio: "1/1" + label: |- + [[[ + if (variables.label_use_temperature) { + return (entity.attributes.current_temperature || entity.attributes.temperature || entity.state || '-') + '°C'; + } else if (variables.label_use_brightness) { + if (entity.state){ + if (entity.state == "off"){ + return variables.ulm_off; + } else if (entity.state == "on"){ + if (entity.attributes.brightness != null){ + var bri = Math.round(entity.attributes.brightness / 2.55); + return (bri ? bri : "0") + "%"; + } else { + return variables.ulm_on + } + } + } else { + return variables.ulm_unavailable; + } + } else if (entity.state == "on") { + return variables.ulm_on + } else if (entity.state == "off") { + return variables.ulm_off + } else { + return entity.state + } + ]]] + state: + - 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)"; + ]]] + value: "unavailable" + styles: + card: + - border-radius: "20px" + - box-shadow: "var(--box-shadow)" + - padding: "5px" + grid: + - grid-template-areas: "'n n n i1' 'l l l i2' 'i i . i3' 'i i . i4'" + - grid-template-columns: "1fr 1fr 1fr 1fr" + - grid-template-rows: "1fr 1fr 1fr 1fr" + - justify-items: "center" + icon: + - color: "rgba(var(--color-theme),0.2)" + 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%" + name: + - justify-self: "start" + - align-self: "end" + - font-weight: "bold" + - font-size: "14px" + - margin-left: "12px" + - margin-bottom: "10%" + label: + - justify-self: "start" + - align-self: "start" + - font-weight: "bold" + - font-size: "12px" + - filter: "opacity(40%)" + - margin-left: "12px" + - margin-top: "-10%" + state: + - justify-self: "start" + - font-weight: "bold" + - font-size: "12px" + - filter: "opacity(40%)" + - margin-left: "6px" + custom_fields: + i1: + - border-radius: "50%" + - width: "80%" + - height: "80%" + - line-height: 0 + - display: "grid" + i2: + - border-radius: "50%" + - width: "80%" + - height: "80%" + - line-height: 0 + - display: "grid" + i3: + - border-radius: "50%" + - width: "80%" + - height: "80%" + - line-height: 0 + - display: "grid" + i4: + - border-radius: "50%" + - width: "80%" + - height: "80%" + - line-height: 0 + - display: "grid" + custom_fields: + notification: > + [[[ + if (entity.state =='unavailable'){ + return `` + } + ]]] + i1: + card: + type: "custom:button-card" + template: > + [[[ + var templates = ['widget_icon_room']; + if (variables?.entity_1?.templates?.length) { + return ['widget_icon_room'].concat(variables.entity_1.templates); + } + return templates; + ]]] + variables: "[[[ return variables.entity_1; ]]]" + entity: > + [[[ + if (variables.entity_1.entity_id) { + return variables.entity_1.entity_id; + } + ]]] + state: + - operator: "template" + value: "[[[ return !variables.entity_1; ]]]" + styles: + card: + - display: "none" + + i2: + card: + type: "custom:button-card" + template: > + [[[ + var templates = ['widget_icon_room']; + if (variables?.entity_2?.templates?.length) { + return ['widget_icon_room'].concat(variables.entity_2.templates); + } + return templates; + ]]] + variables: "[[[ return variables.entity_2; ]]]" + entity: > + [[[ + if (variables?.entity_2?.entity_id) { + return variables.entity_2.entity_id; + } + ]]] + state: + - operator: "template" + value: "[[[ return !variables.entity_2; ]]]" + styles: + card: + - display: "none" + + i3: + card: + type: "custom:button-card" + template: > + [[[ + var templates = ['widget_icon_room']; + if (variables?.entity_3?.templates?.length) { + return ['widget_icon_room'].concat(variables.entity_3.templates); + } + return templates; + ]]] + variables: "[[[ return variables.entity_3; ]]]" + entity: > + [[[ + if (variables?.entity_3?.entity_id) { + return variables.entity_3.entity_id; + } + ]]] + state: + - operator: "template" + value: "[[[ return !variables.entity_3; ]]]" + styles: + card: + - display: "none" + i4: + card: + type: "custom:button-card" + template: > + [[[ + var templates = ['widget_icon_room']; + if (variables?.entity_4?.templates?.length) { + return ['widget_icon_room'].concat(variables.entity_4.templates); + } + return templates; + ]]] + variables: "[[[ return variables.entity_4; ]]]" + entity: > + [[[ + if (variables?.entity_4?.entity_id) { + return variables.entity_4.entity_id; + } + ]]] + state: + - operator: "template" + value: "[[[ return !variables.entity_4; ]]]" + styles: + card: + - display: "none" + +widget_icon_room: + variables: + tap_action: + action: "toggle" + hold_action: + action: "none" + tap_action: + action: > + [[[ if (variables?.tap_action?.action) return variables.tap_action.action; else return '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: > + [[[ if (variables?.hold_action?.action) return variables.hold_action.action; else return '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; ]]]" + show_icon: true + show_name: false + styles: + grid: + - grid-template-areas: "'i'" + card: + - height: "100%" + - box-shadow: "none" + - padding: "0px" + - border-radius: "50%" + 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)" + size: "15px" + color: "var(--google-grey)" diff --git a/docs/assets/img/room-card.png b/docs/assets/img/room-card.png new file mode 100644 index 000000000..39cdcf18f Binary files /dev/null and b/docs/assets/img/room-card.png differ diff --git a/docs/usage/cards/card_room.md b/docs/usage/cards/card_room.md new file mode 100644 index 000000000..272774a5b --- /dev/null +++ b/docs/usage/cards/card_room.md @@ -0,0 +1,108 @@ +--- +title: card_room +hide: + - toc +--- + + +## Description + +![Image title](../../assets/img/ulm_cards/card_room.png){ width="500" } + +This is the `room-card`, used to show the state of single room in a quick glance. +The card has support for 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` | :material-close: +| 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` | :material-close: +| Define whether the label should show the current room brightness of the lights +| requires `label_use_temperature` to be false +| +| entity_1 | | :material-close: | a `room_entity` object (see below) | | +| entity_2 | | :material-close: | a `room_entity` object (see below) | | +| entity_3 | | :material-close: | a `room_entity` object (see below) | | +| entity_4 | | :material-close: | a `room_entity` object (see below) | | + +## Room entity + +| Variable | Default | Required | Notes | Requirement | +|----------------------------------------|-----------------|------------------|----------------|-------------| +| entity_id | | :material-check: | The entity_id of the status icon | | +| templates | | :material-close: | List of the additional button card templates to apply to this icon | | +| tap_action | | :material-close: | tap_action for the icon (see button card documentation for options) | | +| hold_action | | :material-close: | 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](https://github.com/custom-cards/button-card#main-options) + +| Options | Default | Required | Notes | Requirement | +|----------------------------------------|-----------------|------------------|----------------|-------------| +| entity | | :material-close: | The entity_id for the large card | | +| icon | | :material-close: | Icon to display. Defaults to the entity icon | | +| tap_action | | :material-close: +| Define the type of action on click, if undefined, toggle will be used. +| see [Action](https://github.com/custom-cards/button-card#Action) +| +| hold_action | | :material-close: +| Define the type of action on hold, if undefined, nothing happens +| see [Action](https://github.com/custom-cards/button-card#Action) +| +| label | | :material-close: | Change the label text | | +| title | | :material-close: | Change the title text | | + +## Usage + +```yaml + - type: 'custom:button-card' + template: + - card_room + - red + 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 +``` + +??? note "Template Code" + + ```yaml title="card_room.yaml" + --8<-- "custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_room.yaml" + ```