im verry new to HA and HACS, i wonder if its possebole to make some ligth card, but maybe 14 entity
Thanks a lot
It works fine
Try columns: 4
@alexandrechoske by Group section I assume you mean the Light Groups?
I use old-style (not helper-created) groups. This is because of one key factor, I want the state to be âonâ only when âallâ lights are on. Note, I had set these up long ago and used the actual entity names from my Insteon devices, you can also use the friendlier names like light.kitchen_cans. So in a YAML import, I have the following:
#
# LEDs
#
ledlights:
name: LEDs
entities:
- switch.switchlinc_relay_dual_band_1f_a8_e0
- switch.switchlinc_relay_dual_band_1f_a8_f1
- switch.on_off_outlet_58_13_d8_bottom
all: true
#
# Master
#
masterlights:
name: Master
entities:
- light.switchlinc_dimmer_49_af_14
- light.switchlinc_dimmer_2b_e4_c5
all: true
#
# Front
#
frontlights:
name: Frontyard
entities:
- switch.keypadlinc_on_off_1f_13_c1_main
- switch.switchlinc_relay_dual_band_1f_c0_46
- light.in_linelinc_dimmer_4a_ab_70
- switch.on_off_outlet_58_13_d8_bottom
- switch.switchlinc_relay_dual_band_1f_b0_1c
all: true
#
# Kitchen
#
kitchenlights:
name: Kitchen
icon: mdi:pot-steam
entities:
- light.switchlinc_dimmer_1e_3f_70
- light.switchlinc_dimmer_1e_40_f6
- switch.switchlinc_relay_dual_band_1f_a8_e0
all: true
#
# Couch
#
couchlights:
name: Couch
icon: mdi:sofa
entities:
- group.kitchenlights
- light.switchlinc_dimmer_1e_40_66
- light.switchlinc_dimmer_1e_40_d7
all: true
#
# Pergola
#
pergolalights:
name: Pergola
icon: 'mdi:home-variant'
entities:
- switch.switchlinc_relay_dual_band_1f_ae_0d
- switch.switchlinc_relay_dual_band_1f_ad_f7
- switch.switchlinc_relay_dual_band_1f_a8_f1
all: true
#
# Dogs
#
doglights:
name: Dogs
icon: mdi:dog
entities:
- switch.switchlinc_relay_dual_band_1f_ae_0d
- switch.switchlinc_relay_dual_band_1f_ad_f7
- switch.switchlinc_relay_dual_band_1f_a8_f1
- switch.keypadlinc_on_off_1f_15_0a_main
# - light.in_linelinc_dimmer_4a_ad_d3
- light.in_linelinc_dimmer_4a_ab_70
all: true
#
# Dining
#
dininglights:
name: Dining
icon: 'mdi:silverware'
entities:
- light.switchlinc_dimmer_1e_3f_72
- light.switchlinc_dimmer_1e_3e_4a
- light.switchlinc_dimmer_1e_40_26
- light.keypadlinc_dimmer_1c_df_46_main
- light.switchlinc_dimmer_1e_40_88
all: true
#
# Backyard
#
backyardlights:
name: Backyard
icon: 'mdi:tree'
entities:
- group.pergolalights
- switch.keypadlinc_on_off_1f_14_f6_main
- switch.keypadlinc_on_off_1f_15_0a_main
# - light.in_linelinc_dimmer_4a_ad_d3
all: true
#
# Foyer
#
foyerlights:
name: Foyer
icon: mdi:home-lightbulb
entities:
- switch.switchlinc_relay_dual_band_1f_ae_13
- light.switchlinc_dimmer_1e_3e_07
- light.switchlinc_dimmer_1e_3e_f3
- light.switchlinc_dimmer_1e_41_93
- light.switchlinc_dimmer_1e_3e_c0
- light.switchlinc_dimmer_1e_3e_dc
- light.switchlinc_dimmer_1e_3f_e2
all: true
#
# Art
#
artlights:
name: Artwork
icon: phu:double-spot
entities:
- light.switchlinc_dimmer_1e_3f_e2
- light.switchlinc_dimmer_2b_e4_c5
- light.switchlinc_dimmer_1e_3e_07
- light.switchlinc_dimmer_1e_3e_f3
- light.switchlinc_dimmer_1e_3e_c0
- light.switchlinc_dimmer_1e_3e_dc
- light.keypadlinc_dimmer_1c_df_46_main
- light.switchlinc_dimmer_1e_40_d7
all: true
#
# ArriveHome
#
arrivehomelights:
name: Arrival
icon: mdi:car
entities:
- group.foyerlights
- group.frontlights
all: true
#
# Panic
#
paniclights:
name: Panic
icon: mdi:run-fast
entities:
- group.foyerlights
- group.frontlights
- group.backyardlights
- group.kitchenlights
- group.masterlights
all: true
The key here is all: true so that the state is set to âonâ only when all the entities in the group are on. The other key is that old-style groups support groups inside other groups, which if you have super groups (like arrivehomelights) you can add other groups to that group.
Then the card uses custom:stack-in (only because I like the look of no borders). The action is toggle and toggling a group will turn them all on (or off if they are on).
type: custom:stack-in-card
mode: vertical
title: Light Groups
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: group.doglights
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-entity-card
entity: group.couchlights
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-entity-card
entity: group.kitchenlights
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: group.dininglights
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-entity-card
entity: group.backyardlights
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-entity-card
entity: group.pergolalights
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: group.ledlights
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-entity-card
entity: group.masterlights
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-entity-card
entity: group.frontlights
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: group.artlights
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-entity-card
entity: group.foyerlights
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-entity-card
entity: group.arrivehomelights
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: group.paniclights
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
As you can see here, I merely clicked âDogsâ and it toggled the group.doglights to on. This group includes all the parts of group.pergolalights so it is shown as âonâ too.
1 Like
Itâs about âNot being able to see the wood for the treesââŚ
Thx. didnât think logically there for a secondâŚ
1 Like
It seems to be fixed now. Capitalisation and underscore to space conversion in chips is back. No need to use mapper for now.
1 Like
Interesting the all true situation, I didnt know about that, make sense.
This is one thing that bothered me on HA with groups hahaha, when 1 light is on the group say is on 
Thanks for the instructions =)
I am âcopyingâ your lights layout with some adjustments.
Numbers of lights on the right of the room name, and also I am pretending to insert the energy consumption as well.
Something like this? Can be further customized to look more like from the minimalist screenshot, of course. Using vertical-stack-in-card now, but could be stack-in-card as well.
square: false
columns: 2
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:sofa
icon_color: red
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.local_tuya_light_2
icon: mdi:lightbulb
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
alignment: center
card_mod:
style: |
ha-card {
margin: 12px 24px 0px 0px;
--chip-background:
{% if states('light.local_tuya_light_2') == 'on' %}
rgba(var(--mush-rgb-amber), 0.2);
{% else %}
rgba(var(--mush-rgb-disabled), 0.15);
{% endif %}
--chip-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 42px;
--chip-padding: 32px;
}
- type: custom:mushroom-template-card
icon: ''
icon_color: ''
primary: Living room
secondary: 20 °C
layout: horizontal
fill_container: false
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:silverware-fork-knife
icon_color: blue
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.local_tuya_light_3
icon: mdi:lightbulb
icon_color: |-
{% if states(entity) == 'on' %}
amber
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
alignment: center
card_mod:
style: |
ha-card {
margin: 12px 24px 0px 0px;
--chip-background:
{% if states('light.local_tuya_light_3') == 'on' %}
rgba(var(--mush-rgb-amber), 0.2);
{% else %}
rgba(var(--mush-rgb-disabled), 0.15);
{% endif %}
--chip-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 42px;
--chip-padding: 32px;
}
- type: custom:mushroom-template-card
icon: ''
icon_color: ''
primary: Kitchen
secondary: 19 °C
layout: horizontal
fill_container: false
6 Likes
Hi
Atm I have this button
But I want something like this
Atm. my code is like this, but how can I get the full filled box, with the image?
type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: ''
layout: vertical
fill_container: true
multiline_secondary: false
picture: /local/image/radio/p4.png
tap_action:
action: call-service
service: script.start_spotify_playlist1
data: {}
target: {}
entity: script.start_spotify_playlist1
card_mod:
style: |
:host {
{% if state_attr('media_player.bluesound_mini', 'media_title') == 'P4 Midt og vest' %}
{% else %}
filter: grayscale(100%);
{% endif %}
padding: 0px 0px 0px 0px !important;
background-blend-mode: overlay;
--mush-icon-size: 50px;
height: 70px;
width: 70px;
}
Exactly that, thank you! Very similar to the code I had thankfully but looks like youâre using a chips card for the light instead of the light card. Might explain why youâre able to do the styling on it to change the width with styling as Iâve had no luck!
Although even with card-mod installed as I use it elsewhere, for some reason Iâm not getting the styling around the light button like in your example⌠Caches cleaned on both phone and laptop - also tried with rarely used Safari.
What styling doesnât work, the width/padding or background?
Oddly⌠the rgba lines⌠Changing them to something like grey works⌠but doesnât look great.
rgba(var(--mush-rgb-disabled), 0.15);
Edit: Removing mush was the answer!
Change your container card from vertical-stack to stack-in-card, and then give the vertical-stack with the mushroom cards and that apex chart card transparent backgrounds.
I use picture entity to get them to be âfilledâ
type: picture
image: local/radio/p1.jpg
hold_action:
action: none
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: P1
target:
entity_id: input_select.radiokanal
3 Likes
those are simply binary_sensor entities
1 Like
In a Template card is it possible somehow check if any light is ON in a room? Iâd like to make a Template card where the badge icon color changes if any of a light in the room is ON, not a specific light entity.
I use a group of lights, you can use that even in an entity card.
If the group is on, at least one light is on, group off, all the lights are off
I use this solution too, but it is just a workaround. When there is a new entity in any room, I have to add this manually to the group. Even wore that the current Helper solution for groups is partially useless.
So still looking for a solution to be able to check if any of the light entities are on in a room.
you can modify this, where âentityâ is just some random entity in that area
{{ 'amber' if expand(area_entities(area_id(entity))) | selectattr('domain','eq','light') | selectattr('state','eq','on') | list | count > 0 else 'disabled' }}
edit: I went away from this approach since it made my landingpage take 2-3 seconds to load (I had 12 âroomsâ where they all had 4-5 templates going through all entities on that area and displaying various info)
Double-edit: if youâre curious:
type: custom:mushroom-template-card
icon: hue:room-office
entity: sensor.kontoret_multi_temperatur
primary: '{{area_name(entity) | capitalize}}'
secondary: >-
{% set hum = (area_entities(area_id(entity)) | select('is_state_attr',
'device_class', 'humidity') | map('states') | select('is_number') |
map('float') | list or [0]) | average %}
{% set temp = (area_entities(area_id(entity)) | select('is_state_attr',
'device_class', 'temperature') | map('states') | select('is_number') |
map('float') | list or [0]) | average | round(1) %}
{{ [ (temp|int ~ '°C') if temp, (hum | int ~ '%') if hum] | select() | join('
| ') }}
multiline_secondary: true
icon_color: >-
{{ 'amber' if expand(area_entities(area_id(entity))) |
selectattr('domain','eq','light') | selectattr('state','eq','on') | list |
count > 0 else 'disabled' }}
tap_action:
action: navigate
navigation_path: /lovelace-rom/kontoret
hold_action:
action: call-service
service: light.turn_off
data: {}
target:
area_id: kontor
double_tap_action:
action: none
fill_container: true
badge_color: blue
badge_icon: >
{{'mdi:motion-sensor' if 'on' in (area_entities(area_id(entity)) |
select('is_state_attr', 'device_class', 'motion') | map('states') | list) }}
1 Like