Custom-card "Minimal Door Lock"

This is a custom-card that shows the currenct state of your Lock and allows you to open and close it showing the state with a Minimal Design.

Credits

Author: Nik - 2022 Version: 2.0.0

Changelog

1.0.0

Initial release

2.0.0

Added Battery Level for monitoring Added double_tap unlock to prevent accidental opening

Requirements

To have the Minimalist cards and custom cards installed

Usage

- type: "custom:button-card"
  template: "custom_card_nik_door"
  entity: "sensor.nuki_blindato_door_security_state"
  variables:
    ulm_custom_card_entity_1_name: "Blindato"
    ulm_custom_card_entity_1_lock: "lock.nuki_blindato_lock"
    ulm_custom_card_entity_1_lock_battery: "sensor.blindato_battery"

Variables

Variable	Example	Required	Explanation
ulm_custom_card_entity_1_name	sensor.nuki_blindato_door_security_state	Yes	Your Door Name
ulm_custom_card_entity_1_lock	lock.nuki_blindato_lock	Yes	Your Door Lock entity
ulm_custom_card_entity_1_lock_battery	sensor.blindato_battery	Yes	Your Door Lock battery sensor
entity	sensor.nuki_blindato_door_security_state	Yes	Your door sensor to track "Open" and "Close" state.

Template code

Template Code

custom_card_nik_door.yaml

---
custom_card_nik_door:
  template:
    - "ulm_language_variables"
  variables:
    ulm_custom_card_entity_1_name: "[[[ return variables.ulm_custom_card_entity_1_name ]]]"
    ulm_custom_card_entity_1_lock: "[[[ return variables.ulm_custom_card_entity_1_lock ]]]"
    ulm_custom_card_entity_1_lock_battery: "[[[ return variables.ulm_custom_card_entity_1_lock_battery ]]]"
  show_icon: false
  show_name: false
  show_label: false
  lock:
    enabled: true
    unlock: "double_tap"
  styles:
    grid:
      - grid-template-areas: >
          [[[
            var areas = [];
            areas.push("item1 item1");
            areas.push("item2 item2");
            return "\"" + areas.join("\" \"") + "\"";
          ]]]
      - grid-template-columns: "1fr 1fr"
      - grid-template-rows: "min-content min-content"
      - row-gap: "12px"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"

  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "icon_more_info"
        styles:
          icon:
            - color: "rgba(var(--color-theme),0.9)"
            - width: "20px"
            - place-self: "center"
          custom_fields:
            lock:
              - z-index: 2
              - border-radius: "50%"
              - position: "absolute"
              - left: "30px"
              - top: "24px"
              - height: "18px"
              - width: "18px"
              - border: "2px solid var(--card-background-color)"
              - font-size: "12px"
              - line-height: "14px"
              - background-color: >
                  [[[
                    if (states[variables.ulm_custom_card_entity_1_lock_battery].state <= 40){
                      return "rgba(var(--color-red),1)";
                    } else {
                      return "rgba(var(--color-green),1)";
                    }
                  ]]]
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              icon: "mdi:door"
              styles:
                icon:
                  - color: "rgba(var(--color-blue),1)"
                img_cell:
                  - background-color: "rgba(var(--color-blue),0.2)"
              tap_action:
                action: "none"
          item2:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              name: "[[[ return variables.ulm_custom_card_entity_1_name ]]]"
              label: >
                [[[
                  return entity.state
                ]]]
          lock: >
            [[[
              if (states[variables.ulm_custom_card_entity_1_lock_battery].state == 100){
                return '<ha-icon icon="mdi:battery" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';

              } if (states[variables.ulm_custom_card_entity_1_lock_battery].state >= 80){
                return '<ha-icon icon="mdi:battery-70" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';

              } if (states[variables.ulm_custom_card_entity_1_lock_battery].state >= 60){
                return '<ha-icon icon="mdi:battery-60" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';

              } if (states[variables.ulm_custom_card_entity_1_lock_battery].state >= 50){
                return '<ha-icon icon="mdi:battery-50" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
              }
                if (states[variables.ulm_custom_card_entity_1_lock_battery].state <= 40){
                return '<ha-icon icon="mdi:battery-20" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
              }
            ]]]
    item2:
      card:
        type: "custom:button-card"
        template: "list_2_items"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              icon: "mdi:lock-open-variant"
              entity: "[[[ return entity.entity_id ]]]"
              tap_action:
                action: "call-service"
                service: "lock.open"
                service_data:
                  entity_id: "[[[ return variables.ulm_custom_card_entity_1_lock ]]]"
              state:
                - value: "Open"
                  styles:
                    icon:
                      - color: "rgba(var(--color-red),1)"
                    img_cell:
                      - background-color: "rgba(var(--color-red),0.2)"
                - value: "Closed & Unlocked"
                  styles:
                    icon:
                      - color: "rgba(var(--color-yellow),1)"
                    img_cell:
                      - background-color: "rgba(var(--color-yellow),0.2)"
          item2:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              icon: "mdi:lock"
              entity: "[[[ return entity.entity_id ]]]"
              tap_action:
                action: "call-service"
                service: "lock.lock"
                service_data:
                  entity_id: "[[[ return variables.ulm_custom_card_entity_1_lock ]]]"
              state:
                - value: "Closed & Locked"
                  styles:
                    icon:
                      - color: "rgba(var(--color-green),1)"
                    img_cell:
                      - background-color: "rgba(var(--color-green),0.2)"