Skip to content

Custom Card "Group Counter"

example-image-light example-image-dark

Credits

  • Author: Albin M├ędoc - 2023 Version: 1.0.0

Changelog

1.0.0 Initial release

Description

This cards show a chip with custom text representing how many entities in a group have a specific state. Pressing on the chip will toggle the entity group, eg turn on/off all lights.

Variables

Variable Default Required Notes
entity Yes Hide chip if no entities are active.
ulm_custom_chip_group_counter_hide_if_zero false No Hide chip if no entities are active.
ulm_custom_chip_group_counter_type light No Specify the type of entities, used for translation
ulm_custom_chip_group_counter_count_state on No States that should be counted
ulm_custom_chip_group_counter_color yellow Yes Color of the icon
Can choose between: blue, red, green, yellow, pink, purple
ulm_custom_chip_group_counter_icon_zero mdi:lightbulb-outline No Icon when no entity's state is satisfied
ulm_custom_chip_group_counter_icon_one mdi:lightbulb-on-outline No Icon when one entity's state is satisfied
ulm_custom_chip_group_counter_icon_multiple mdi:lightbulb-on-outline No Icon when multiple entities state is satisfied

Usage

Minimal config 1

The entities active within the group will only go one level down. If you have a group with a group the subgroup will only be treated as a single entity.

- type: 'custom:button-card'
  template: 'custom_chip_group_counter'
  entity: 'lights.living_room'

Minimal config 2

This configuration can be used if you have a sensor that should represent the state. This can be good if you have groups within groups and the calculation is happening outside this card. The entity must still be set and should represent all the entities that should be toggled on press.

- type: 'custom:button-card'
  template: 'custom_chip_group_counter'
  entity: 'light.all'
  variables:
      ulm_custom_chip_group_counter_entities_active: 'sensor.lights_on'

Full config 2

- type: 'custom:button-card'
  template: 'custom_chip_group_counter'
  entity: 'light.all'
  variables:
      ulm_custom_chip_group_counter_hide_if_zero: true
      ulm_custom_chip_group_counter_type: speaker
      ulm_custom_chip_group_counter_count_state:
          - 'playing'
          - 'buffering'
      ulm_custom_chip_group_counter_color: green
      ulm_custom_chip_group_counter_icon_zero: 'mdi:speaker'
      ulm_custom_chip_group_counter_icon_one: 'mdi:speaker'
      ulm_custom_chip_group_counter_icon_multiple: 'mdi:speaker-multiple'

Template code

Template Code
custom_chip_group_counter.yaml
---
### Custom Chip Group Counter ###
custom_chip_group_counter:
  template:
    - "chips"
    - "custom_chip_group_counter_language_variables"
  variables:
    ulm_custom_chip_group_counter_icon_zero: "mdi:lightbulb-outline"
    ulm_custom_chip_group_counter_icon_one: "mdi:lightbulb-on-outline"
    ulm_custom_chip_group_counter_icon_multiple: "mdi:lightbulb-on-outline"
    ulm_custom_chip_group_counter_color: "yellow"
    ulm_custom_chip_group_counter_count_state: "on"
    ulm_custom_chip_group_counter_type: "light"
    ulm_custom_chip_group_counter_hide_if_zero: false
  tap_action:
    action: "toggle"
  triggers_update: "all"
  show_icon: true
  icon: |
    [[[
      let entities_active = 0;
      if(variables.ulm_custom_chip_group_counter_entities_active) {
        entities_active = states[variables.ulm_custom_chip_group_counter_entities_active].state;
      } else {
        entities_active = states[
          entity.entity_id
        ].attributes.entity_id.filter((child_entity_id) => {
          return variables.ulm_custom_chip_group_counter_count_state.includes(states[child_entity_id]?.state);
        }).length;
      }

      if (entities_active == 0) {
        return variables.ulm_custom_chip_group_counter_icon_zero;
      } else if (entities_active == 1) {
        return variables.ulm_custom_chip_group_counter_icon_one;
      } else {
        return variables.ulm_custom_chip_group_counter_icon_multiple;
      }
    ]]]
  label: |
    [[[
      let entities_active = 0;
      if(variables.ulm_custom_chip_group_counter_entities_active) {
        entities_active = states[variables.ulm_custom_chip_group_counter_entities_active].state;
      } else {
        entities_active = states[
          entity.entity_id
        ].attributes.entity_id.filter((child_entity_id) => {
          return variables.ulm_custom_chip_group_counter_count_state.includes(states[child_entity_id]?.state);
        }).length;
      }

      const type = variables.ulm_custom_chip_group_counter_type;
      const plural_typ = entities_active == 0 ? "zero" : entities_active == 1 ? "one" : "multiple";
      const translation_path = `custom_chip_group_counter_${type}_${plural_typ}`
      return variables[translation_path].replace('{count}', entities_active);
    ]]]
  styles:
    card:
      - display: |
          [[[
            let entities_active = 0;
            if(variables.ulm_custom_chip_group_counter_entities_active) {
              entities_active = states[variables.ulm_custom_chip_group_counter_entities_active].state;
            } else {
              entities_active = states[
                entity.entity_id
              ].attributes.entity_id.filter((child_entity_id) => {
                return variables.ulm_custom_chip_group_counter_count_state.includes(states[child_entity_id]?.state);
              }).length;
            }

            if(variables.ulm_custom_chip_group_counter_hide_if_zero && entities_active == 0){
              return "none";
            }
            return "block";
          ]]]
    grid:
      - grid-template-areas: "'i l'"
    icon:
      - color: |
          [[[
            let entities_active = 0;
            if(variables.ulm_custom_chip_group_counter_entities_active) {
              entities_active = states[variables.ulm_custom_chip_group_counter_entities_active].state;
            } else {
              entities_active = states[
                entity.entity_id
              ].attributes.entity_id.filter((child_entity_id) => {
                return variables.ulm_custom_chip_group_counter_count_state.includes(states[child_entity_id]?.state);
              }).length;
            }

            if (entities_active == 0) {
              return 'rgba(var(--color-theme),0.2)';
            }
            else {
              return 'rgba(var(--color-' + variables.ulm_custom_chip_group_counter_color + '),1)';
            }
          ]]]