diff --git a/custom_cards/custom_chip_group_counter/README.md b/custom_cards/custom_chip_group_counter/README.md new file mode 100644 index 000000000..2c2ffe379 --- /dev/null +++ b/custom_cards/custom_chip_group_counter/README.md @@ -0,0 +1,91 @@ +--- +title: Custom Chip Group Counter +hide: + - toc +--- + + + +# 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 + +
+ 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. + +```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" + ``` diff --git a/custom_cards/custom_chip_group_counter/custom_chip_group_counter.yaml b/custom_cards/custom_chip_group_counter/custom_chip_group_counter.yaml new file mode 100644 index 000000000..d616ed40c --- /dev/null +++ b/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)'; + } + ]]] diff --git a/custom_cards/custom_chip_group_counter/languages/en.yaml b/custom_cards/custom_chip_group_counter/languages/en.yaml new file mode 100644 index 000000000..14d638faf --- /dev/null +++ b/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" diff --git a/custom_cards/custom_chip_group_counter/languages/sv.yaml b/custom_cards/custom_chip_group_counter/languages/sv.yaml new file mode 100644 index 000000000..3ada20aba --- /dev/null +++ b/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" diff --git a/docs/assets/img/custom_card_group_counter_chip_dark.png b/docs/assets/img/custom_card_group_counter_chip_dark.png new file mode 100644 index 000000000..e652c0561 Binary files /dev/null and b/docs/assets/img/custom_card_group_counter_chip_dark.png differ diff --git a/docs/assets/img/custom_card_group_counter_chip_light.png b/docs/assets/img/custom_card_group_counter_chip_light.png new file mode 100644 index 000000000..f894602b5 Binary files /dev/null and b/docs/assets/img/custom_card_group_counter_chip_light.png differ