Binary Sensor Alert Card

Description

The binary-sensor-card is to show the state (on/off, open/close, etc.) of a binary sensor, eg. your garage door or a window contact sensor. This card shows an alert if the state is on/open or unavailable.

Variables

Variable	Default	Required	Notes
entity
ulm_show_last_changed			true or false
ulm_card_binary_sensor_alert_name			Set custom Name
ulm_card_binary_sensor_alert_icon			Set custom Icon
ulm_icon_alert_invert_state	false		Invert the alert state logic so an alert is shown when the sensor is "off"
ulm_card_binary_sensor_alert_color	blue		Set Custom Color
ulm_card_binary_sensor_alert_force_background_color	false		Set ulm_card_binary_sensor_alert_color as background color in active state `

⚠️ Breaking Change v1.0.1

show_last_changed is changed to be used as variable:

variables:
  ulm_show_last_changed: true

Usage

- type: 'custom:button-card'
  template: card_binary_sensor_alert
  variables:
    ulm_card_binary_sensor_alert: true
    ulm_show_last_changed: true
  entity: binary_sensor.garage_door

Template Code

card_binary_sensor_alert.yaml

---
### Card Binary Sensor Alert ###
card_binary_sensor_alert:
  template:
    - "icon_more_info_alert"
    - "ulm_translation_engine"
  show_last_changed: false
  variables:
    ulm_show_last_changed: false
    ulm_card_binary_sensor_alert_icon: "[[[ return entity.attributes.icon ]]]"
    ulm_card_binary_sensor_alert_name: "[[[ return entity.attributes.friendly_name ]]]"
    ulm_outlet_power_enable_popup: false
    ulm_card_binary_sensor_alert_color: "blue"
    ulm_card_binary_sensor_alert_force_background_color: false
  state:
    - operator: "template"
      value: "[[[ return variables.ulm_active_state ]]]"
      styles:
        card:
          - background-color: >
              [[[
                if (variables.ulm_card_binary_sensor_alert_force_background_color) {
                  var color = variables.ulm_card_binary_sensor_alert_color;
                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';
                }
              ]]]
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              icon: "[[[ return variables.ulm_card_binary_sensor_alert_icon; ]]]"
              variables: >
                [[[
                  let vars = variables;

                  if(variables.ulm_outlet_power_enable_popup) {
                    vars.ulm_custom_popup = {
                      'template': 'popup_power_outlet_stats',
                      'popup_variables': {
                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
                      }
                    };
                  }
                  return vars;
                ]]]
              styles:
                icon:
                  - color: >
                      [[[
                        var color = variables.ulm_card_binary_sensor_alert_color;
                        if (variables.ulm_active_state){
                          return 'rgba(var(--color-' + color + '),1)';
                        }
                        return 'rgba(var(--color-theme),0.2)';
                      ]]]
                img_cell:
                  - background-color: >
                      [[[
                        var color = variables.ulm_card_binary_sensor_alert_color;
                        if (variables.ulm_active_state){
                          return 'rgba(var(--color-' + color + '),0.2)';
                        }
                        return 'rgba(var(--color-theme),0.05)';
                      ]]]
          item2:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              name: "[[[ return variables.ulm_card_binary_sensor_alert_name; ]]]"
              label: "[[[ return variables.ulm_translation_state;]]]"
              show_last_changed: "[[[ return variables.ulm_show_last_changed; ]]]"
              variables: >
                [[[
                  let vars = variables;

                  if(variables.ulm_outlet_power_enable_popup) {
                    vars.ulm_custom_popup = {
                      'template': 'popup_power_outlet_stats',
                      'popup_variables': {
                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
                      }
                    };
                  }
                  return vars;
                ]]]
              state:
                - operator: "template"
                  value: "[[[ return variables.ulm_active_state ]]]"
                  styles:
                    name:
                      - color: >
                          [[[
                              if (variables.ulm_card_binary_sensor_alert_force_background_color) {
                                  return 'rgb(250,250,250)';
                              }
                          ]]]
                    label:
                      - color: >
                          [[[
                              if (variables.ulm_card_binary_sensor_alert_force_background_color) {
                                  return 'rgb(250,250,250)';
                              }
                          ]]]