rhysb
(Rhys)
October 18, 2022, 7:30pm
3549
Yes, you can add most of the animations to Chips like this:
type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.irrigation_pump_garden
icon: mdi:sprinkler
icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
{{ 'animation: sprinkle 2s linear infinite;' if is_state('switch.irrigation_pump_garden', 'on') }}
transform-origin: 29% 88%;
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
What are you wanting further info on?
Sorry didn’t see your reply. I’ll try and building something out of this. I already tried for a custom media card player with volume buttons, but I couldn’t get the ‘template card’ buttons, with just their icons, to look like real mushoom/minimalist buttons due to their difference in corner roundness.
I got close though with chips as buttons, thanks to a post by our great contributor @rhysb :
I don’t use these myself, but you could do a Mushroom Input Select card something like this:
Compact:
[Input Select Compact]
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''friendly_name'') }}'
secondary: '{{ states(entity) }}'
icon: mdi:audio-input-rca
entity: input_select.amp_source
icon_color: red
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_select.…
1 Like
kippesik
(Kippesik)
October 18, 2022, 7:53pm
3551
Thanks for all examples shared here, I was able to build a lot of cards myself.
I documented a couple of cards here, maybe this also makes it easier for others:
11 Likes
Thekholm
(Thekholm)
October 18, 2022, 8:13pm
3552
Is Chip Icon the same as Badge Icon?
/Thekholm
rhysb
(Rhys)
October 18, 2022, 8:51pm
3553
No, but you can have multiple Chips while you can have only one badge. You can change the size of a chip to match the badge sizing.
Thekholm
(Thekholm)
October 18, 2022, 9:24pm
3554
Thanks for the help to get this card ready! This is good enough!
On to the next one
Best regards
Thekholm
3 Likes
I think I did a pretty good job at recreating the ‘input time’ card.
The code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Alarm
secondary: |-
{% if is_state('automation.plug_2_uit', 'on') %}
Actief • {{(state_attr('input_datetime.plug_2_s_avonds_uit','timestamp')) | timestamp_custom('%H:%M', false) }}
{% else %}
Inactief
{% endif %}
icon: mdi:alarm
entity: input_datetime.plug_2_s_avonds_uit
icon_color: |-
{% if is_state('automation.plug_2_uit', 'on') %}
deep-orange
{% else %}
disabled
{% endif %}
tap_action:
action: call-service
service: automation.toggle
data: {}
target:
entity_id: automation.plug_2_uit
hold_action:
action: more-info
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:minus
tap_action:
action: call-service
service: script.decrement_plug_2_time
- type: template
entity: input_datetime.plug_2_s_avonds_uit
content: >-
{{(state_attr('input_datetime.plug_2_s_avonds_uit','timestamp')) |
timestamp_custom('%H:%M', false) }}
- type: template
icon: mdi:plus
tap_action:
action: call-service
service: script.increment_plug_2_time
alignment: center
card_mod:
style: |
ha-card {
margin: 0px 12px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 42px;
--chip-padding: 24px;
}
Currently, clicking the icon/title will turn toggle a script that I use for disabling a switch at a certain time, but feel free to change that.
It took me much longer than expected to make the minus and plus buttons actually work. Apparently you cannot set the value of the input_datetime to its current value + something, so I had to build a script for that. Below script is for the minus button with a 15 minute timedelta. Just remove the minus sign in the code for the plus button.
alias: Decrement Plug 2 time
sequence:
- service: input_datetime.set_datetime
data:
time: >-
{{as_timestamp(as_datetime(state_attr('input_datetime.plug_2_s_avonds_uit','timestamp'))
+ timedelta(minutes=-15))| timestamp_custom('%H:%M', false) }}
target:
entity_id: input_datetime.plug_2_s_avonds_uit
mode: single
icon: mdi:clock-minus
My only problem is that I cannot get the buttons to be automatically padded/aligned with the card border. I used --chip-padding: 24px;
now but there should be another way to make it really look like the minimalist card.
5 Likes
RASBR
(Rami)
October 18, 2022, 11:32pm
3556
@rhysb I really appreciate and value your help. I would love to find out more on how to do stuff like the animation on my own.
Your example works just fine on a normal chips card, but I intend to have it on a conditional chip card where all my tries to amend the code failed.
Below my card’s code (without the animation), where should the animation be located?
type: custom:mushroom-chips-card
chips:
- type: action
icon_color: blue
tap_action:
action: navigate
navigation_path: home
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:home
- type: back
- type: menu
- type: action
tap_action:
action: navigate
navigation_path: home
icon: mdi:dots-vertical
icon_color: blue
- type: conditional
conditions:
- entity: switch.irrigation_pump_garden
state: 'on'
entity: switch.irrigation_pump_garden
icon: mdi:sprinkler
icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
- type: conditional
conditions:
- entity: switch.pool_tank_valve
state: 'on'
chip:
type: template
entity: /local/my-icons/smart-water-tap-color.png
icon: ''
icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
content_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
picture: /local/my-icons/smart-water-tap-color.png
- type: conditional
conditions:
- entity: switch.pool_filter_pump
state: 'on'
chip:
type: template
entity: switch.pool_filter_pump
icon: ''
icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
content_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
picture: /local/my-icons/pool filter-96.png
What I am trying to achieve is something like my post Lovelace: custom sidebar card - #558 by RASBR where the chips show for important systems when their state is ‘on’
and the big question is how do you determine the line: ‘mushroom-template-chip:nth-child(1)$: | ha-icon’?
Also any idea how to remove the shadow?
I tried this.
type: horizontal-stack
cards:
- type: custom:auto-entities
card:
type: entities
filter:
include:
- area: Temperature Sensors
entity_id: /[te]mperature/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: null
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: null
tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
exclude: []
- type: custom:auto-entities
card:
type: entities
filter:
include:
- area: Temperature Sensors
entity_id: /[hu]midity/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: null
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: null
tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 3px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
exclude: []
card_mod:
style: |
ha-card {
background: transparent;
box-shadow: 0px 0px;
ha-card-background: transparent;
}
rhysb
(Rhys)
October 19, 2022, 1:32am
3558
Is this what you want?:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:auto-entities
card:
type: entities
filter:
include:
- area: Temperature Sensors
entity_id: /[te]mperature/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: null
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: null
tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
exclude: []
- type: custom:auto-entities
card:
type: entities
filter:
include:
- area: Temperature Sensors
entity_id: /[hu]midity/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: null
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: null
tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 3px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
exclude: []
card_mod:
style: |
ha-card {
background: transparent;
--ha-card-box-shadow: none;
}
rhysb
(Rhys)
October 19, 2022, 3:50am
3559
You can add it to your Chips like this:
type: custom:mushroom-chips-card
chips:
- type: action
icon_color: blue
tap_action:
action: navigate
navigation_path: home
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:home
- type: back
- type: menu
- type: action
tap_action:
action: navigate
navigation_path: home
icon: mdi:dots-vertical
icon_color: blue
- type: conditional
conditions:
- entity: switch.irrigation_pump_garden
state: 'on'
chip:
type: template
entity: switch.irrigation_pump_garden
icon: mdi:sprinkler
icon_color: light-blue
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
- type: conditional
conditions:
- entity: switch.pool_tank_valve
state: 'on'
chip:
type: template
entity: switch.pool_tank_valve
content_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
picture: /local/my-icons/smart-water-tap-color.png
- type: conditional
conditions:
- entity: switch.pool_filter_pump
state: 'on'
chip:
type: template
entity: switch.pool_filter_pump
content_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
picture: /local/my-icons/pool filter-96.png
card_mod:
style:
mushroom-conditional-chip:nth-child(5):
mushroom-template-chip$: |
ha-icon {
animation: sprinkle 2s linear infinite;
transform-origin: 29% 88%;
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
Or to the Chip like this:
type: custom:mushroom-chips-card
chips:
- type: action
icon_color: blue
tap_action:
action: navigate
navigation_path: home
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:home
- type: back
- type: menu
- type: action
tap_action:
action: navigate
navigation_path: home
icon: mdi:dots-vertical
icon_color: blue
- type: conditional
conditions:
- entity: switch.irrigation_pump_garden
state: 'on'
chip:
type: template
entity: switch.irrigation_pump_garden
icon: mdi:sprinkler
icon_color: light-blue
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
.content {
animation: sprinkle 2s linear infinite;
transform-origin: 29% 88%;
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
- type: conditional
conditions:
- entity: switch.pool_tank_valve
state: 'on'
chip:
type: template
entity: switch.pool_tank_valve
content_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
picture: /local/my-icons/smart-water-tap-color.png
- type: conditional
conditions:
- entity: switch.pool_filter_pump
state: 'on'
chip:
type: template
entity: switch.pool_filter_pump
content_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
picture: /local/my-icons/pool filter-96.png
It is :nth-child(5)
because it is the 5th Chip (child) of the Mushroom Chips (parent).
I guess it depends on how you learn, but a good resource is W3 Schools.
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
1 Like
rhysb
(Rhys)
October 19, 2022, 4:18am
3560
You can align the Mushroom Card text like this:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Mushroom
secondary: Primary Right
icon: mdi:mushroom
icon_color: red
card_mod:
style:
mushroom-state-info$: |
.primary {
text-align: right;
}
- type: custom:mushroom-template-card
primary: Mushroom
secondary: Secondary Right
icon: mdi:mushroom
icon_color: red
card_mod:
style:
mushroom-state-info$: |
.secondary {
text-align: right;
}
- type: custom:mushroom-template-card
primary: Mushroom
secondary: Both Center
icon: mdi:mushroom
icon_color: red
card_mod:
style:
mushroom-state-info$: |
* {
text-align: center;
}
8 Likes
dundiffrunt
(Dundiffrunt)
October 19, 2022, 6:38am
3561
Would you mind sharing the code for this card?
sensei73
(Sensei73)
October 19, 2022, 6:43am
3562
Thanks for sharing! I love your design!! to @rhysb Do you think it is possible to animate the opening of the conditional cards to make it less brutal? Thanks in advance!
Thekholm
(Thekholm)
October 19, 2022, 7:50am
3564
Wow, you did a great job Thanks alot!
This is how I did it for my self.
The Code for Nest Cam Card.
You need - Stack in Card (Hacs)
You need - Layout Card (Hacs)
If you need to change the size of the images or border size, just change the bold text
type: custom:layout-card
layout_type: masonry
layout:
width: 106
max_cols: 1
height: auto
padding: 0px
card_margin: var(–masonry-view-card-margin, 0px 8px 14px )
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Nest Cam
secondary: Driveway
icon: mdi:camera
icon_color: blue
- type: custom:layout-card
layout_type: masonry
layout:
width: 106
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, 0px 8px 14px)
cards:
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: camera.uppfart
camera_image: camera.uppfart
theme: Mushroom
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
Best regards
Thekholm
19 Likes
RASBR
(Rami)
October 19, 2022, 8:06am
3565
Thank you very much. You’ve been a great help… both examples are informative and should be helpful down the road.
Rami
1 Like
That removed both borders, the mushroom cards and horizontal stack card column borders.
I would prefer just the mushroom horizontal column card borders be removed. The way the mushroom card borders were before was fine. Essentially removing the border of the stack-in-card only.
Hm for some reason I am unable to get that to work. I tried doing it at the mushroom card level and at the stack in card level.
I tried this piece
card_mod:
style:
mushroom-state-info$: |
* {
text-align: center;
}
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:auto-entities
card:
type: entities
filter:
include:
- area: Temperature Sensors
entity_id: /[te]mperature/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: null
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: null
tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
mushroom-state-info$: |
.primary {
text-align: center;
}
exclude: []
- type: custom:auto-entities
card:
type: entities
filter:
include:
- area: Temperature Sensors
entity_id: /[hu]midity/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: null
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: null
tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
exclude: []
card_mod:
style: |
ha-card {
background: transparent;
--ha-card-box-shadow: none;
}
Bpasop
(Bpasop)
October 19, 2022, 12:57pm
3568
I want to recreate what you are doing. Can you show us also the code of you’re automation.plug_2_uit . I don’t how I could do this.