rhysb
December 12, 2022, 3:31am
4415
Do you mean like this?
type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.office_air_conditioner
icon: mdi:thermometer
icon_color: red
content: |-
Climate
{{ state_attr(entity, 'temperature') | round(1) }} °C
card_mod:
style: |
ha-card {
padding: 5px;
}
.content {
white-space: pre-wrap;
}
- type: template
icon: mdi:lightbulb
content: |-
Lights
{{ expand(states.group.all_lights) | selectattr( 'state', 'eq', 'on') |
list | count }} On
entity: group.all_lights
icon_color: yellow
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px;
{{ '--chip-background: rgba(var(--rgb-yellow), 0.2);' if is_state(config.entity, 'on') }}
}
.content {
white-space: pre-wrap;
}
- type: template
icon: '{{ ''mdi:lock'' if is_state(entity, ''locked'') else ''mdi:lock-open'' }}'
content: |-
Security
{{ expand(states.group.all_locks) | selectattr( 'state', 'eq', 'unlocked') | list | count }} Unlocked
entity: group.all_locks
icon_color: '{{ ''green'' if is_state(entity, ''locked'') else ''red'' }}'
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 5px;
}
.content {
white-space: pre-wrap;
}
13 Likes
burg93
December 12, 2022, 1:33pm
4418
@rhysb I don’t suppose you have your dashboard or any of your designs/cards here on Github? Big fan of the layouts and designs you post but it’s simply too much of a pain to keep searching through the questions on here to find any recent updates that I might want to pinch haha. Great work though!
1 Like
Abeksis
December 12, 2022, 2:38pm
4419
Would appreciate help
I try to combine daily consumption and monthly consumption but in terms of display it doesn’t look good (especially at the top), can anyone help the code?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.switcher_boiler_cost_curr_month
primary: חודש נוכחי
secondary: |
{{ states('sensor.switcher_boiler_cost_curr_month') }} ₪
icon: mdi:water-boiler
icon_color: green
tap_action:
action: more-info
card_mod:
style:
.: |
ha-card {
top: 5px;
left: 0px;
direction: rtl
}
- type: custom:mushroom-template-card
entity: sensor.switcher_boiler_cost_prev_month
primary: חודש לפני
secondary: |
{{ states('sensor.switcher_boiler_cost_prev_month') }} ₪
icon: mdi:water-boiler
icon_color: green
tap_action:
action: more-info
card_mod:
style:
.: |
ha-card {
top: -60px;
left: 15px;
}
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 10px
card_margin: var(--masonry-view-card-margin, -10px 0px 15px)
cards:
- type: custom:mini-graph-card
group: true
entities:
- entity: sensor.switcher_boiler_daily_energy
name: Daily Energy (kWh)
show_state: false
color: orange
- entity: sensor.switcher_boiler_cost_today
name: Day Cost (₪)
show_state: true
color: green
show:
name: false
icon: false
legend: true
labels: false
graph: bar
fill: true
extrema: false
average: false
hours_to_show: 168
group_by: date
aggregate_func: max
tap_action:
action: more-info
card_mod: null
3 Likes
Tyfoon
December 12, 2022, 2:54pm
4420
@Abeksis not 100% sure what you are looking for but I have posted something like that here .
Abeksis
December 12, 2022, 3:01pm
4421
Thanks but that’s not exactly what I need.
rak
December 12, 2022, 4:03pm
4422
Awesome. Would you mind sharing the code for the weather and Energy portion for your dashboard?
Graves01
December 12, 2022, 8:14pm
4423
Needing help. What I’m trying to do is when state is off it would look like a normal card like the bottom 4 cards. But when state is on the background changes to the candle.gif.
Here is the code.
type: custom:mushroom-template-card
primary: Candles
entity: input_boolean.candles_helper
icon: null
icon_color: grey
layout: vertical
picture: null
fill_container: false
multiline_secondary: false
card_mod:
style:
.: |
mushroom-shape-icon {
display: ;
margin-left: auto;
width: 86px;
}
mushroom-state-info {
text-align:;
}
ha-card {
{% if is_state('input_boolean.candles_helper', 'on') %}
background: center / cover no-repeat
url("/local/images/Candle.gif");
{%- else -%}
{% endif %}
width: 100px;
height: 100px;
margin: auto;
}
mushroom-state-item {
height: 96px;
}
mushroom-state-info$: |
.primary {
white-space: normal !important;
overflow: hidden;
}
Graves01
December 12, 2022, 8:15pm
4424
Here is the gif working when state is on
Tehlo
December 12, 2022, 8:35pm
4425
Question, I’ve got some issues with the pop lights on card. I’ve copied the code, filled in my own all light groups and the chip works, is populated and shows the # of lights I have on. However, when I press the chip, nothing happens.
I’m pretty sure I have all the extras like browser mod, auto entities and layout card etc. Could you help me out?
cloudbr34k
December 12, 2022, 11:58pm
4426
@rhysb hey mate
i tried to use the same code to change the card height, but not working nor do i understand when to use certain css elements. Any help is always appreciated
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.dining_room_pendant_light_switch
icon_color: |-
{% set state=states('light.dining_room_pendant_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
double_tap_action:
action: none
icon: mdi:chandelier
tap_action:
action: more-info
hold_action:
action: none
- type: template
entity: light.dining_room_light_switch
icon_color: |-
{% set state=states('light.dining_room_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
double_tap_action:
action: none
icon: hue:bulb-group-recessed-ceiling
tap_action:
action: more-info
hold_action:
action: none
- type: template
entity: cover.dining_room_sliding_door_curtain
icon_color: |-
{% set state=states('cover.dining_room_sliding_door_curtain') %}
{% if state=='open' %}
orange
{% elif state=='closed' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:curtains
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: binary_sensor.dining_room_ceiling_motion_sensor
icon_color: >-
{% set state=states('binary_sensor.dining_room_ceiling_motion_sensor')
%}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:motion-sensor
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: binary_sensor.dining_room_sliding_door_sensor_contact
icon_color: >-
{% set
state=states('binary_sensor.dining_room_sliding_door_sensor_contact')
%}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:door-sliding
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: template
entity: cover.ducted_ac_kitchen_zone
icon_color: |-
{% set state=states('cover.ducted_ac_kitchen_zone') %}
{% if state=='open' %}
blue
{% elif state=='closed' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
icon: mdi:air-conditioner
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
alignment: center
card_mod:
style:
ha-card {
height: 120px !important;
}
Mosher
December 13, 2022, 7:36am
4427
Hi,
IOS APP
EDIT:
When I resize browser window on Desktop bottom card also moves
Here is my card-yaml. I have tried to trim card height.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Washer
secondary: '{{ states(''input_select.washing_machine_state_machine'') }}'
entity: input_select.washing_machine_state_machine
icon_color: |-
{% if is_state('input_boolean.washing_machine_job_cycle', 'on') %}
#F49D1E
{% elif is_state('input_boolean.washing_machine_job_cycle', 'off') %}
#27A28A
{% endif %}
icon: |-
{% if is_state('input_boolean.washing_machine_job_cycle', 'on') %}
mdi:washing-machine
{% elif is_state('input_boolean.washing_machine_job_cycle', 'off') %}
mdi:washing-machine-off
{% endif %}
fill_container: false
- type: custom:mini-graph-card
entities:
- sensor.plug_washingmachine_power
points_per_hour: 4
show:
labels: false
name: false
graph: bar
icon: false
hour24: true
align_state: right
font_size: 80
height: 100
hours_to_show: 6
color_thresholds:
- value: 1
color: '#27A28A'
- value: 2
color: '#F49D1E'
card_mod:
style: |
ha-card {
top: -70px;
}
card_mod:
style: |
ha-card {
height: 158px !important;
}
2 Likes
rhysb
December 13, 2022, 8:33am
4428
Share your code and we can try and help.
rhysb
December 13, 2022, 8:54am
4429
I presume you are trying to add some space below the Chips? The correct way to do that would be like this:
alignment: center
card_mod:
style: |
ha-card {
margin-bottom: 100px;
}
1 Like
rhysb
December 13, 2022, 9:05am
4430
Is this what you are trying to do?
type: custom:mushroom-template-card
primary: Candles
entity: input_boolean.candles_helper
icon: '{{ ''mdi:candle'' if not is_state(entity, ''on'') }}'
icon_color: grey
layout: vertical
picture: null
fill_container: false
multiline_secondary: false
card_mod:
style:
.: |
mushroom-shape-icon {
display: ;
margin-left: auto;
width: 86px;
}
mushroom-state-info {
text-align:;
}
ha-card {
{{ 'background: center / cover no-repeat url("/local/images/Candle.gif");' if is_state(config.entity, 'on') }}
width: 100px;
height: 100px;
margin: auto;
}
mushroom-state-item {
height: 96px;
}
mushroom-state-info$: |
.primary {
white-space: normal !important;
overflow: hidden;
}
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
