Merge pull request #1197 from albinmedoc/Custom-Chip-Group-Counter

Add custom chip group counter

custom_cards/custom_chip_group_counter/README.md

@@ -0,0 +1,91 @@
+---
+title: Custom Chip Group Counter
+hide:
+    - toc
+---
+
+<!-- markdownlint-disable MD046 -->
+
+# Custom Card "Group Counter"
+
+![example-image-light](../../docs/assets/img/custom_card_group_counter_chip_light.png)
+![example-image-dark](../../docs/assets/img/custom_card_group_counter_chip_dark.png)
+
+## Credits
+
+- Author: Albin Médoc - 2023
+    Version: 1.0.0
+
+## Changelog
+
+<details>
+  <summary>1.0.0</summary>
+  Initial release
+</details>
+
+## 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 <br> Can choose between: `blue`, `red`, `green`, `yellow`, `pink`, `purple` <br> |
+| 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.
+
+```yaml
+- type: 'custom:button-card'
+  template: 'custom_card_group_counter_chip'
+  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.
+
+```yaml
+- type: 'custom:button-card'
+  template: 'custom_card_group_counter_chip'
+  entity: 'light.all'
+  variables:
+      ulm_custom_chip_group_counter_entities_active: 'sensor.lights_on'
+```
+
+### Full config 2
+
+```yaml
+- type: 'custom:button-card'
+  template: 'custom_card_group_counter_chip'
+  entity: 'light.all'
+  variables:
+      ulm_custom_card_group_counter_chip_hide_if_zero: true
+      ulm_custom_card_group_counter_chip_type: speaker
+      ulm_custom_card_group_counter_chip_count_state:
+          - 'playing'
+          - 'buffering'
+      ulm_custom_card_group_counter_chip_color: green
+      ulm_custom_card_group_counter_chip_icon_zero: 'mdi:speaker'
+      ulm_custom_card_group_counter_chip_icon_one: 'mdi:speaker'
+      ulm_custom_card_group_counter_chip_icon_multiple: 'mdi:speaker-multiple'
+```
+
+## Template code
+
+??? note "Template Code"
+
+    ```yaml title="custom_chip_group_counter.yaml"
+    --8<-- "custom_cards/custom_chip_group_counter/custom_chip_group_counter.yaml"
+    ```

custom_cards/custom_chip_group_counter/custom_chip_group_counter.yaml

@@ -0,0 +1,100 @@
+---
+### 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)';
+            }
+          ]]]

custom_cards/custom_chip_group_counter/languages/en.yaml

@@ -0,0 +1,18 @@
+---
+custom_chip_group_counter_language_variables:
+  variables:
+    custom_chip_group_counter_light_zero: "No lights"
+    custom_chip_group_counter_light_one: "One light"
+    custom_chip_group_counter_light_multiple: "{count} lights"
+
+    custom_chip_group_counter_media_player_zero: "No media players"
+    custom_chip_group_counter_media_player_one: "One media player"
+    custom_chip_group_counter_media_player_multiple: "{count} media players"
+
+    custom_chip_group_counter_speaker_zero: "No speakers"
+    custom_chip_group_counter_speaker_one: "One speaker"
+    custom_chip_group_counter_speaker_multiple: "{count} speakers"
+
+    custom_chip_group_counter_television_zero: "No TVs"
+    custom_chip_group_counter_television_one: "One TV"
+    custom_chip_group_counter_television_multiple: "{count} TVs"

custom_cards/custom_chip_group_counter/languages/sv.yaml

@@ -0,0 +1,18 @@
+---
+custom_chip_group_counter_language_variables:
+  variables:
+    custom_chip_group_counter_light_zero: "Inga lampor"
+    custom_chip_group_counter_light_one: "En lampa"
+    custom_chip_group_counter_light_multiple: "{count} lampor"
+
+    custom_chip_group_counter_media_player_zero: "Inga mediaspelare"
+    custom_chip_group_counter_media_player_one: "En mediaspelare"
+    custom_chip_group_counter_media_player_multiple: "{count} mediaspelare"
+
+    custom_chip_group_counter_speaker_zero: "Inga högtalare"
+    custom_chip_group_counter_speaker_one: "En högtalare"
+    custom_chip_group_counter_speaker_multiple: "{count} högtalare"
+
+    custom_chip_group_counter_television_zero: "Inga TV:ar"
+    custom_chip_group_counter_television_one: "En TV"
+    custom_chip_group_counter_television_multiple: "{count} TV:ar"