Tehlo
December 13, 2022, 9:26am
4431
Simply copied your code and filled in the right groups
Chip works, but when I press it nothing happens. If all lights are off the chip also properly disappears, so the conditional works fine. Iāve reinstalled browser_mod but no change.
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.alle_lampen
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.group.alle_lampen) | selectattr( 'state', 'eq', 'on') |
list | count }}
entity: group.alle_lampen
icon_color: grey
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lights On
content:
type: custom:auto-entities
filter:
include:
- group: group.alle_lampen
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
- entity_id: group.alle_lampen
state: 'on'
options:
type: custom:mushroom-light-card
layout: horizontal
secondary_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-state-light), 0.1);
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
Is there any mushroom-like solution for an entity slider? I have a VW ID.4 and want to build a car dashboard where I can set temperature and target state of charge.
Entity type is number.xxx_target_climate_temperature
thank you for sharing your code. I use it without color control and tree isnāt green. I share my code. can you help me please?
- type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: group.natale
icon: mdi:pine-tree
use_light_color: true
name: 'Natale'
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
- type: custom:mushroom-template-card
icon: mdi:grain
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {--icon-color: rgb(var(--rgb-red)); }
6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
12.5% { --icon-color: rgb(var(--rgb-orange)); }
18.75% { --icon-color: rgb(var(--rgb-amber)); }
25% { --icon-color: rgb(var(--rgb-yellow)); }
31.25% { --icon-color: rgb(var(--rgb-lime)); }
37.5% { --icon-color: rgb(var(--rgb-light-green)); }
43.75% { --icon-color: rgb(var(--rgb-green)); }
50% { --icon-color: rgb(var(--rgb-teal)); }
56.25% { --icon-color: rgb(var(--rgb-cyan)); }
62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
68.75% { --icon-color: rgb(var(--rgb-blue)); }
75% { --icon-color: rgb(var(--rgb-indigo)); }
81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
87.5% { --icon-color: rgb(var(--rgb-purple)); }
93.75% { --icon-color: rgb(var(--rgb-pink)); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
entity: group.natale
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -198px;
}
card_mod:
style: |
ha-card {
height: 66px;
{% set r = state_attr('group.natale', 'rgb_color')[0] %}
{% set g = state_attr('group.natale', 'rgb_color')[1] %}
{% set b = state_attr('group.natale', 'rgb_color')[2] %}
background-color: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
}
Hello, is it possible to hide cover when player is idle? Thank you so much
Mosher
December 13, 2022, 10:50am
4435
Take a look at my code, I have added one more card with a pine-tree before one with stars.
Graves01
December 13, 2022, 12:35pm
4437
Yes and thank you very much
1 Like
raphael303
December 13, 2022, 2:05pm
4438
Has anybody figured out how to change the border radius of the chips?
SteffenDE
December 13, 2022, 2:23pm
4439
Hi,
if I have a Mushroom Template Card and using two entity_id for update the card if one changed the status, then the tap more-info have no reaktion (because do not know which more-info to open). Is there a solution to define the more-info entity if we have a entity_id list and not a string?
Thanks, Steffen
type: custom:mushroom-chips-card
chips:
- ā¦
card_mod:
style: |
ha-card {
--chip-border-radius: var(--mush-control-border-radius);
}
or
type: custom:mushroom-chips-card
chips:
- ā¦
card_mod:
style: |
ha-card {
--chip-border-radius: 14px;
}
raphael303
December 13, 2022, 4:36pm
4442
Thank you. It doesnāt work here. Also, I use almost 100 chipsā¦ isnāt there a way to change it globally? It must be somewhere in the code for the mushroom chipsā¦ doesnāt it?
raphael303
December 13, 2022, 5:25pm
4443
Ok, I figured it out. It is indeed in the mushroom.js file. However it only works if the theme is mushroom too. If the theme, as in my case, is iOSTheme, the settings for the border-radius in the mushroom.js are ignored.
rhysb
December 13, 2022, 8:26pm
4444
There is already a documented theme variable for this. Just add mush-chip-border-radius to whatever theme you are using.
Like this:
mush-chip-border-radius: 18px
1 Like
rhysb
December 13, 2022, 8:35pm
4445
Check that Browser Mod does not have any issues in the sidebar.
Want to remove the shadows around each icon at the bottom and fix some margin.@rhysb Could you help me out?
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.0x0017880104b753e9_temperature
icon: mdi:home-floor-b
icon_color: blue
name: Basement
tap_action:
action: navigate
navigation_path: basement
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: switch.basement
icon: mdi:ceiling-light
icon_color: |
{% if is_state('switch.basement', 'on') %}
yellow
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
- type: custom:mushroom-template-card
entity: input_select.washer_status
icon: mdi:washing-machine
icon_color: |
{% if is_state('input_select.washer_status', 'On') %}
blue
{% else %}
disabled
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Washer
content:
type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- entity: sensor.washer_runtime
secondary_info: last-updated
show_header_toggle: false
state_color: false
- type: custom:mini-graph-card
entities:
- sensor.washer_power
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if is_state('input_select.washer_status', 'On') }}
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
- type: custom:mushroom-template-card
entity: sensor.dryer_operation_state
icon: mdi:tumble-dryer
icon_color: |
{% if is_state('sensor.dryer_operation_state', 'Run') %}
blue
{% else %}
disabled
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Washer
content:
type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- entity: sensor.dryer_duration
secondary_info: last-updated
show_header_toggle: false
state_color: false
- type: custom:mini-graph-card
entities:
- sensor.dryer_power
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if is_state('sensor.dryer_operation_state', 'Run') }}
transform-origin: 50% 65%;
}
@keyframes shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
@rhysb
.shape {
--shape-color: none;
}
.: |
ha-card {
margin-top: -20px;
margin-bottom: -10px;
box-shadow: none;
background: rgba(0, 0, 0, 0);
}
MRobi
December 14, 2022, 1:49pm
4448
I was just looking at it and thinking the same. Itād be much nicer having no cover at all if not playing than a big static image on the dashboard.
arifroni
December 14, 2022, 4:21pm
4449
is it possible to use restriction-card in chips?
Railnolds
December 14, 2022, 5:58pm
4450
Hi.
if state is off - the icon is green without animation
if state is on - the icon color is red with blinkig animation
if state is unavailable - the color is gray without anivation
1 Like
