Skip to content

Custom-card "Drealine RoomView"

Drealine RoomView 1

Credits

  • Author: Drealine - 2022
  • Version: 1.0.0

Changelog

1.0.0 Initial release

Usage

- type: "custom:button-card"
  template: "custom_card_drealine_roomview"
  variables:
    icon: "mdi:home-variant-outline"
    name: "Entrée"
    group_lights:
    group_motions:
    group_doors:
    group_windows:
    group_outlets:
    group_tv:
    group_water:
    group_windows_shutters:
    temperature:
    humidity:

Requirements

No requirements at the moment.

Variables

Variable Example Required Explanation
Icon mdi:bedroom no Icon of the card
Name Text no Title for the card (it's not showing, just for more readable)
group_lights group.lights no Any groups that contain lights
group_motions group.motions no Any groups that contain motions sensors
group_doors group.doors no Any groups that contain doors sensors
group_windows group.windows no Any groups that contain windows sensors
group_outlets group.outlets no Any groups that contain outlets
group_tv group.tv no Any groups that contain TV's
group_water group.water no Any groups that contain water sensors
group_windows_shutters group.windows_shutters no Any groups that contain windows shutters
temperature entity.temperature_saloon no Temperature sensor or the room
humidity entity.humidity_saloon no Humidity sensor or the room
Template Code
custom_card_drealine_roomview.yaml
---
custom_card_drealine_roomview:
  template:
    - "custom_card_drealine_roomview_style_root"
  variables:
    group_lights:
    group_motions:
    group_doors:
    group_windows:
    group_outlets:
    group_tv:
    group_water:
    group_windows_shutters:
    temperature:
    humidity:
  triggers_update: "all"
  group_expand: true
  custom_fields:
    header:
      card:
        template:
          - "custom_card_drealine_roomview_conf_header_root"
        type: "custom:button-card"
        custom_fields:
          header_card:
            card:
              variables:
                ulm_card_tap_action: "[[[ return variables.ulm_card_tap_action; ]]]"
                ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
                ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
                ulm_card_tap_navigate_path: "[[[ return variables.ulm_card_tap_navigate_path; ]]]"
              styles:
                custom_fields:
                  warning:
                    - display: |
                        [[[
                          var groups = [variables.group_lights, variables.group_motions,variables.group_doors,
                          variables.group_windows, variables.group_outlets, variables.group_water];
                          var arrayLength = groups.length;
                          var count_unavailable = 0;
                          for (var i = 0; i < arrayLength; i++){
                            if(states[groups[i]]){
                              if (states[groups[i]].attributes['entity_id']){
                                states[groups[i]].attributes['entity_id'].forEach(function(entity){
                                  if(states[entity] && states[entity].state == 'unavailable'){
                                    count_unavailable += 1;
                                  }
                                });
                              }
                              else
                              {
                                if (states[groups[i]].state == 'unavailable'){
                                  count_unavailable += 1;
                                }
                              }
                            }
                          }
                          if (count_unavailable >= 1){
                            return "auto";
                          }
                          else{
                            return "none";
                          }
                        ]]]
              icon: "[[[ return variables.icon ]]]"
              name: |
                [[[
                  var temperature = '';
                  temperature += '<ha-icon icon="mdi:thermometer" style="width: 17px; height: 17px; color: grey,1);"></ha-icon>';
                  if (states[variables.temperature]){
                    temperature += states[variables.temperature].state + states[variables.temperature].attributes.unit_of_measurement
                  }
                  else{
                    temperature = "N/A"
                  }
                  return temperature;
                ]]]
              label: |
                [[[
                  var humidity = '';
                  humidity += '<ha-icon icon="mdi:water-percent" style="width: 17px; height: 17px; color: grey,1);"></ha-icon>';
                  if (states[variables.humidity]){
                    humidity += states[variables.humidity].state + states[variables.humidity].attributes.unit_of_measurement
                  }
                  else{
                    humidity = "N/A"
                  }
                  return humidity;
                ]]]
              template:
                - "custom_card_drealine_roomview_conf_header"
                - "ulm_actions_card"
              type: "custom:button-card"
    sensors:
      card:
        template:
          - "custom_card_drealine_roomview_conf_sensors"
        styles:
          card:
            - display: |
                [[[
                  var groups = [variables.group_lights, variables.group_motions,variables.group_doors,
                  variables.group_windows, variables.group_outlets, variables.group_water];
                  var arrayLength = groups.length;
                  var count_if_show_box_sensors = 0;
                  for (var i = 0; i < arrayLength; i++) {
                    if(states[groups[i]]){
                      if (states[groups[i]].attributes['entity_id']){
                        states[groups[i]].attributes['entity_id'].forEach(function(entity){
                          if(states[entity] && states[entity].attributes.battery <= 20){
                            count_if_show_box_sensors += 1;
                          }
                        });
                      }
                    }
                  }
                  for (var i = 0; i < arrayLength; i++) {
                    if(states[groups[i]]){
                      if(states[groups[i]].state == "on"){
                        count_if_show_box_sensors += 1;
                      }
                    }

                  }
                  if (count_if_show_box_sensors >= 1){
                    return "auto";
                  }
                  else
                  {
                    return "none";
                  }
                ]]]
          custom_fields:
            battery:
              - display: |
                  [[[
                    var groups = [variables.group_lights, variables.group_motions,variables.group_doors,
                    variables.group_windows, variables.group_outlets, variables.group_water];
                    var arrayLength = groups.length;
                    var count_if_show_box_sensors = 0;
                    for (var i = 0; i < arrayLength; i++) {
                      if(states[groups[i]]){
                        if (states[groups[i]].attributes['entity_id']){
                          states[groups[i]].attributes['entity_id'].forEach(function(entity){
                            if(states[entity] && states[entity].attributes.battery <= 20){
                              count_if_show_box_sensors += 1;
                            }
                          });
                        }
                      }
                    }
                    if (count_if_show_box_sensors >= 1){
                      return "auto";
                    }
                    else
                    {
                      return "none";
                    }
                  ]]]
            doors:
              - display: |
                  [[[
                    if (variables.group_doors){
                      return "auto";
                    }
                    else
                    {
                      return "none";
                    }
                  ]]]
            windows:
              - display: |
                  [[[
                    if (variables.group_windows){
                      return "auto";
                    }
                    else
                    {
                      return "none";
                    }
                  ]]]
            motions:
              - display: |
                  [[[
                    if (variables.group_motions){
                      return "auto";
                    }
                    else
                    {
                      return "none";
                    }
                  ]]]
            water:
              - display: |
                  [[[
                    if (variables.group_water){
                      return "auto";
                    }
                    else
                    {
                      return "none";
                    }
                  ]]]
        type: "custom:button-card"
        custom_fields:
          doors:
            card:
              template:
                - "custom_card_drealine_roomview_conf_icons_sensors"
                - "custom_card_drealine_roomview_count_sensors"
              icon: "mdi:door-open"
              entity: "[[[ return variables.group_doors ]]]"
              styles:
                card:
                  - display: >-
                      [[[
                        if (variables.group_doors && states[variables.group_doors].state == 'on'){
                          return "auto";
                        }
                        else{
                          return "none";
                        }
                      ]]]
              type: "custom:button-card"
          battery:
            card:
              template:
                - "custom_card_drealine_roomview_conf_icons_sensors"
                - "custom_card_drealine_roomview_style_count_batteries"
              icon: "mdi:battery-20"
              styles:
                card:
                  - display: >-
                      [[[
                        var count_alert = 0;
                        var groups = [variables.group_lights, variables.group_motions,variables.group_doors,
                        variables.group_windows, variables.group_outlets, variables.group_water];
                        var arrayLength = groups.length;
                        for (var i = 0; i < arrayLength; i++) {
                          if(states[groups[i]]){
                            if (states[groups[i]].attributes['entity_id']){
                              states[groups[i]].attributes['entity_id'].forEach(function(entity){
                                if(states[entity] && states[entity].attributes.battery <= 20){
                                  count_alert += 1;
                                }
                              });
                            }
                          }
                        }
                        if (count_alert >= 1){
                          return "auto";
                        }
                        else{
                          return "none";
                        }
                      ]]]
                custom_fields:
                  count_batteries:
                    - display: |
                        [[[
                          var count_alert = 0;
                          var groups = [variables.group_lights, variables.group_motions,variables.group_doors,
                          variables.group_windows, variables.group_outlets, variables.group_water];
                          var arrayLength = groups.length;
                          for (var i = 0; i < arrayLength; i++) {
                            if(states[groups[i]]){
                              if (states[groups[i]].attributes['entity_id']){
                                states[groups[i]].attributes['entity_id'].forEach(function(entity){
                                  if(states[entity] && states[entity].attributes.battery <= 20){
                                    count_alert += 1;
                                  }
                                });
                              }
                            }
                          }
                          if (count_alert >= 1){
                            return "auto";
                          }
                          else{
                            return "none";
                          }
                        ]]]
              custom_fields:
                count_batteries: |
                    [[[
                      var battery = 0;
                      var groups = [variables.group_lights, variables.group_motions,variables.group_doors,
                      variables.group_windows, variables.group_outlets, variables.group_water];
                      var arrayLength = groups.length;
                      for (var i = 0; i < arrayLength; i++) {
                        if(states[groups[i]]){
                          if (states[groups[i]].attributes['entity_id']){
                            states[groups[i]].attributes['entity_id'].forEach(function(entity){
                              if(states[entity] && states[entity].attributes.battery <= 20){
                                battery += 1;
                              }
                            });
                          }
                        }
                      }
                      return battery;
                    ]]]
              type: "custom:button-card"
          windows:
            card:
              template:
                - "custom_card_drealine_roomview_conf_icons_sensors"
                - "custom_card_drealine_roomview_count_sensors"
              icon: "mdi:window-closed-variant"
              entity: "[[[ return variables.group_windows ]]]"
              styles:
                card:
                  - display: >-
                      [[[
                        if (variables.group_windows && states[variables.group_windows].state == 'on'){
                          return "auto";
                        }
                        else{
                          return "none";
                        }
                      ]]]
              type: "custom:button-card"
          motions:
            card:
              template:
                - "custom_card_drealine_roomview_conf_icons_sensors"
              icon: "mdi:motion-sensor"
              entity: "[[[ return variables.group_motions ]]]"
              styles:
                card:
                  - display: >-
                      [[[
                        if (variables.group_motions && states[variables.group_motions].state == 'on'){
                          return "auto";
                        }
                        else{
                          return "none";
                        }
                      ]]]
              type: "custom:button-card"
          water:
            card:
              template:
                - "custom_card_drealine_roomview_conf_icons_sensors"
              icon: "mdi:water"
              entity: "[[[ return variables.group_water ]]]"
              styles:
                card:
                  - display: >-
                      [[[
                        if (variables.group_water && states[variables.group_water].state == 'on'){
                          return "auto";
                        }
                        else{
                          return "none";
                        }
                      ]]]
              type: "custom:button-card"
    devices:
      card:
        template: "custom_card_drealine_roomview_conf_devices_root"
        type: "custom:button-card"
        custom_fields:
          lights:
            card:
              template:
                - "custom_card_drealine_roomview_conf_devices"
              icon: |
                [[[
                var count_unavailable = 0;
                var count_entity = 0;
                if (states[variables.group_lights]){
                  if (states[variables.group_lights].attributes['entity_id']){
                    states[variables.group_lights].attributes['entity_id'].forEach(function(entity){
                      count_entity += 1;
                      if(states[entity] && states[entity].state == 'unavailable'){
                        count_unavailable += 1;
                      }
                    });
                    if (count_entity == count_unavailable){
                      return "mdi:lightbulb-alert";
                    }
                  }
                  else return "mdi:exclamation"
                  var state_lights = states[variables.group_lights].state;
                  if (state_lights == 'on') return "mdi:lightbulb-group";
                  else if (state_lights == 'off') return "mdi:lightbulb-group-off";
                }
                else{
                  return "mdi:lightbulb-group-off"
                }
                ]]]
              entity: "[[[ return variables.group_lights ]]]"
              type: "custom:button-card"
          windows_shutters:
            card:
              template:
                - "custom_card_drealine_roomview_conf_devices"
              icon: >
                [[[
                var count_unavailable = 0;
                var count_entity = 0;
                if (states[variables.group_windows_shutters]){
                  if (states[variables.group_windows_shutters].attributes['entity_id']){
                    states[variables.group_windows_shutters].attributes['entity_id'].forEach(function(entity){
                      count_entity += 1;
                      if(states[entity] && states[entity].state == 'unavailable'){
                        count_unavailable += 1;
                      }
                    });
                    if (count_entity == count_unavailable){
                      return "mdi:window-shutter-alert";
                    }
                  }
                  else return "mdi:exclamation"
                  var state_windows = states[variables.group_windows_shutters].state;
                  if (state_windows == 'on') return "mdi:window-shutter-open";
                  else if (state_windows == 'off') return "mdi:window-shutter";
                  else return "mdi:exclamation"
                }
                else{
                  return "mdi:window-shutter"
                }
                ]]]
              entity: "[[[ return variables.group_windows_shutters ]]]"
              type: "custom:button-card"
          outlets:
            card:
              template:
                - "custom_card_drealine_roomview_conf_devices"
              icon: >
                [[[
                var count_unavailable = 0;
                var count_entity = 0;
                if (states[variables.group_outlets]){
                  if (states[variables.group_outlets].attributes['entity_id']){
                    states[variables.group_outlets].attributes['entity_id'].forEach(function(entity){
                      count_entity += 1;
                      if(states[entity] && states[entity].state == 'unavailable'){
                        count_unavailable += 1;
                      }
                    });
                    if (count_entity == count_unavailable){
                      return "mdi:exclamation-thick";
                    }
                  }
                  var group_outlets = states[variables.group_outlets].state;
                  if (group_outlets == 'on') return "mdi:power-plug";
                  else if (group_outlets == 'off') return "mdi:power-plug-off";
                  else return "mdi:exclamation"
                }
                else{
                  return "mdi:power-plug-off"
                }
                ]]]
              entity: "[[[ return variables.group_outlets ]]]"
              type: "custom:button-card"
          tv:
            card:
              template:
                - "custom_card_drealine_roomview_conf_devices"
              icon: >
                [[[
                  var count_unavailable = 0;
                  var count_entity = 0;

                  if (states[variables.group_tv]){
                    if (states[variables.group_tv].attributes['entity_id']){
                      states[variables.group_tv].attributes['entity_id'].forEach(function(entity){
                        count_entity += 1;
                        if(states[entity] && states[entity].state == 'unavailable'){
                          count_unavailable += 1;
                        }
                      });
                      if (count_entity == count_unavailable){
                        return "mdi:exclamation-thick";
                      }
                    }
                    var group_tv = states[variables.group_tv].state;
                    if (group_tv == 'on') return "mdi:television";
                    else if (group_tv == 'off') return "mdi:television-off";
                    else return "mdi:exclamation"
                  }
                  else{
                    return "mdi:television-off"
                  }
                ]]]
              entity: "[[[ return variables.group_tv ]]]"
              type: "custom:button-card"
        styles:
          custom_fields:
            lights:
              - flex: "auto"
              - display: "auto"
            windows_shutters:
              - flex: "auto"
              - display: |
                  [[[
                    if (variables.group_windows_shutters){
                      return "auto";
                    }
                    else
                    {
                      return "none";
                    }
                  ]]]
            outlets:
              - flex: "auto"
              - display: |
                  [[[
                    if (variables.group_outlets){
                      return "auto";
                    }
                    else
                    {
                      return "none";
                    }
                  ]]]
            tv:
              - flex: "auto"
              - display: |
                  [[[
                    if (variables.group_tv){
                      return "auto";
                    }
                    else
                    {
                      return "none";
                    }
                  ]]]
custom_card_drealine_roomview_conf_devices_root:
  styles:
    grid:
      - display: "flex"
      - gap: "2%"
      - flex-wrap: "wrap"
    card:
      - box-shadow: "none"
      - padding: "0px"
      - border-radius: "0%"
custom_card_drealine_roomview_style_count_batteries:
  styles:
    custom_fields:
      count_batteries:
        - border-radius: "50%"
        - position: "absolute"
        - left: "58%"
        - top: "5%"
        - height: "13px"
        - width: "13px"
        - font-weight: "900"
        - font-size: "10px"
        - line-height: "13px"
        - color: "white"
        - background-color: "rgba(var(--color-blue),0.75)"
custom_card_drealine_roomview_count_sensors:
  group_expand: true
  show_name: false
  styles:
    custom_fields:
      number_of_sensors:
        - border-radius: "50%"
        - position: "absolute"
        - left: "58%"
        - top: "5%"
        - height: "13px"
        - width: "13px"
        - font-weight: "900"
        - font-size: "10px"
        - line-height: "13px"
        - color: "white"
        - background-color: "rgba(var(--color-blue),0.75)"
        - display: |
            [[[
              if ((entity !== undefined && states[entity.entity_id].state == 'on')){
                return "auto";
              }
              else
              {
                return "none";
              }
            ]]]
  custom_fields:
    number_of_sensors: |
        [[[
          var count = 0;
          if(entity !== undefined){
            if (states[entity.entity_id].attributes['entity_id']){
              states[entity.entity_id].attributes['entity_id'].forEach(function(entity){
                if(states[entity] && states[entity].state == 'on'){
                  count++;
                }
              });
            }
          }
          return count;
        ]]]
custom_card_drealine_roomview_style_root:
  styles:
    grid:
      - grid-template-areas: "'header' 'sensors' 'devices'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content  min-content"
      - row-gap: "6px"
    card:
      - border-radius: "20px"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
custom_card_drealine_roomview_conf_header_root:
  styles:
    grid:
      - grid-template-areas: "'header_card'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content"
      - column-gap: "7px"
    card:
      - box-shadow: "none"
      - padding: "0px"
custom_card_drealine_roomview_conf_sensors:
  styles:
    grid:
      - display: "flex"
      - justify-content: "center"
      - flex-wrap: "wrap"
      - align-content: "center"
    card:
      - box-shadow: "none"
      - padding: "0px"
      - margin: "0px"
      - height: "auto"
      - align-items: "center"
      - border-radius: "0%"
custom_card_drealine_roomview_conf_devices:
  group_expand: true
  color: "var(--google-grey)"
  tap_action:
    action: "none"
  double_tap_action:
    action: "toggle"
  size: "20px"
  show_icon: true
  show_name: false
  state:
    - styles:
        icon:
          - color: "rgba(var(--color-yellow),1)"
        label:
          - color: "rgba(var(--color-yellow-text),1)"
        name:
          - color: "rgba(var(--color-yellow-text),1)"
        img_cell:
          - background-color: "rgba(var(--color-yellow), 0.2)"
        card:
          - background-color: "rgba(var(--color-background-yellow),var(--opacity-bg))"
      value: "on"
  styles:
    icon:
      - color: "rgba(var(--color-theme),0.9)"
      - height: "40px"
    grid:
      - grid-template-areas: "'i'"
    card:
      - box-shadow: "none"
      - padding: "0px"
      - background-color: "rgba(var(--color-theme),0.05)"
      - border-radius: "14px"
      - min-width: "40px"
    custom_fields:
      number_of_devices:
        - border-radius: "50%"
        - position: "absolute"
        - left: "50.5%"
        - top: "24%"
        - height: "13px"
        - width: "13px"
        - font-size: "10px"
        - font-weight: "900"
        - line-height: "13px"
        - background-color: "rgba(var(--color-blue),0.75)"
        - color: "white"
        - display: |
            [[[
              if ((entity !== undefined && states[entity.entity_id].state == 'on')){
                return "auto";
              }
              else
              {
                return "none";
              }
            ]]]
  custom_fields:
    number_of_devices: |
        [[[
          var count = 0;
          if(entity !== undefined){
            if (states[entity.entity_id].attributes['entity_id']){
              states[entity.entity_id].attributes['entity_id'].forEach(function(entity){
                if(states[entity] && states[entity].state == 'on'){
                  count++;
                }
              });
            }
          }
          return count;
        ]]]
custom_card_drealine_roomview_conf_header:
  color: "var(--google-grey)"
  show_icon: true
  show_name: true
  show_label: true
  size: "20px"
  custom_fields:
    warning: |
      [[[
        return `<ha-icon icon="mdi:exclamation-thick" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
      ]]]
  styles:
    icon:
      - color: "rgba(var(--color-theme),0.2)"
      - transform: "scale(1.2)"
    label:
      - justify-self: "start"
      - align-self: "start"
      - font-weight: "bold"
      - font-size: "12px"
      - filter: "opacity(50%)"
      - margin-left: "10px"
    name:
      - align-self: "start"
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "12px"
      - margin-top: "2px"
      - margin-left: "10px"
      - filter: "opacity(50%)"
    img_cell:
      - background-color: "rgba(var(--color-theme),0.05)"
      - border-radius: "50%"
      - place-self: "center"
      - width: "42px"
      - height: "42px"
    grid:
      - grid-template-areas: "'i n' 'i l'"
      - grid-template-columns: "min-content auto"
      - grid-template-rows: "min-content"
      - position: "relative"
    card:
      - border-radius: "21px 8px 8px 21px"
      - box-shadow: "none"
      - padding: "0px"
    custom_fields:
      warning:
        - border-radius: "50%"
        - position: "absolute"
        - left: "28px"
        - top: "0px"
        - height: "16px"
        - width: "16px"
        - border: "2px solid var(--card-background-color)"
        - font-size: "12px"
        - line-height: "14px"
        - background-color: "rgba(var(--color-red),1)"
custom_card_drealine_roomview_conf_icons_sensors:
  show_name: false
  styles:
    icon:
      - color: "rgba(var(--color-theme),0.9)"
      - transform: "scale(1)"
      - width: "20px"
    img_cell:
      - height: "auto"
      - width: "35px"
    grid:
      - grid-template-areas: "'i'"
      - grid-template-columns: "1fr"
    card:
      - background: "transparent"
      - box-shadow: "none"