Initial attempt at creating the room card

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 `<ha-icon icon="mdi:exclamation" style="width: 50%; height: 50%; color: var(--primary-background-color);"></ha-icon>`
+        }
+      ]]]
+    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)"

docs/usage/cards/card_room.md

@@ -0,0 +1,108 @@
+---
+title: card_room
+hide:
+  - toc
+---
+<!-- markdownlint-disable MD046 -->
+
+## 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"
+    ```