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)';
            }
          ]]]