Donât hesitate to report the issue on GitHub so I can take a look 
1 Like
Hello guys,
I have a problem with Mushroom Template card and Browser_Mod. In this case, I think the problem is with mushroom template card.
I have a popup that shows the mushroom template card with power consumption, it shows and render well but his value doesnât update, it just happens when is openend in a popup of browser_mod.
If I open another kind of card of HA it updates well without a problem but with mushroom template card it just show a static value.
service: browser_mod.popup
data:
dismissable: true
autoclose: false
size: wide
timeout: 10000
content:
type: custom:mushroom-template-card
primary: >
{{ states('sensor.esp32_terraza_power') | round(0) }} W
icon_color: blue
icon: mdi:information-variant
entity: sensor.esp32_terraza_power
fill_container: false
multiline_secondary: true
tap_action:
action: more-info
badge_icon: ""
badge_color: ""
layout: vertical
secondary: ""
card_mod:
style: |
ha-card {
--card-primary-font-size: 120px;
--card-secondary-font-size: 50px;
opacity: 0.8;
box-shadow: 2px 2px 10px grey;
text-color: red;
}
:host {
--mush-icon-size: 150px;
}
Hi,
iâve just finished my first mushroom card but iâve noticed that some icons are missing.
Whatâs wrong?
Thanks in advance for any help.
Regards,
Alessandro
If you donât show code we cant help
Youâre right 
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 10% 80%
grid-template-rows: auto
cards: null
- type: custom:layout-card
layout_type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.speedtest_ping
icon: phu:nas
icon_color: null
content: Raspberry PI4
- type: template
entity: sensor.speedtest_ping
icon: null
icon_color: deep-orange
content: ''
alignment: left
- square: false
columns: 3
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.processor_use_percent
color: green
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.processor_use_percent
primary_info: state
secondary_info: name
name: CPU
icon_color: green
icon: phu:intel-cpu
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.memory_use_percent
color: rgb(33, 150, 243)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.memory_use_percent
primary_info: state
secondary_info: name
name: Memory
icon_color: blue
icon: phu:ram-memory
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.cpu_temperatura
color: red
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.cpu_temperatura
primary_info: state
secondary_info: name
name: CPU
icon_color: red
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.disk_use_percent
color: rgb(255, 233, 0)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.disk_use_percent
primary_info: state
secondary_info: name
name: Storage
icon_color: yellow
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.swap_use_percent
color: rgb(255, 233, 0)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 140
- type: custom:mushroom-entity-card
entity: sensor.swap_use_percent
primary_info: state
secondary_info: name
name: SSD Cache
icon_color: yellow
icon: phu:seagate-ssd
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -57px;
width: auto;
margin-left: auto;
margin-right: auto;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
}
I donât know what phu is, but you could for example try icon: mdi:memory and see if that works ? If it does it has to do with phu, then you have search how to implement the icons
Hey, am I able to round the temperature in the weather chip and or use the weather icon in a template? I can get a rounded temperature using the template chip but no state icon and I donât like seeing 21.3°C it looks odd. Thanks!
In my install I tend to add named directories for my own custom components under the â.homeassistant/wwwâ directory. So under that folder I have many for my personal JSON files and other things that are my own customizations.
Like that directory is like this:
So it would be physically in
.homeassistant/www/Roborock/roborock.json
Which means you can access with:
http://192.168.1.245:8123/local/Roborock/roborock.json
Which then the sensor to read the JSON is:
##
## Roborock Rooms
##
- platform: rest
name: roborock_rooms
resource: http://192.168.1.245:8123/local/Roborock/roborock.json
value_template: "{{ now() }}"
json_attributes:
- rooms
phu: is used for the custom brand icons integration.
@alessandro.bardi make sure this integration is installed through HACS and hopefully it should work!
Great. thanks for the explanation.
Also, where do you add the âplatform: restâ data?
I try to add this in the main configuration yaml but it says I have an error.
I no longer have color when viewing cards from my desktop. Mobile devices and tablets are fine. I used to be able to just refresh the page and the colors returned. Tried different browsers and clearing cache. Any idea why this is happening?
Anyone has made an entity only visible when a certain boolean is turned on?
For example i want to show a specific camera on the homepage when a boolean is on.
But not sure on how to get to this, if someone can push me in the correct direction that would be great.
How about this?
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.your-camera-boolean #If this entity is on
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: # text here
icon: mdi:home-alert
icon_color: yellow
double_tap_action:
action: none
entity: camera.your-camera #This entity will show
tap_action:
action: toggle
hold_action:
action: none
alignment: center
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
animation: eureka 2.8s infinite;
}
@keyframes eureka {
0%, 45%, 55%, 100% { transform: translateY(0) scale(1); clip-path: polygon(20% 100%, 21% 38%, 36% 22%, 62% 21%, 79% 37%, 80% 100%, 53% 100%, 55% 67%, 62% 62%, 66% 55%, 67% 46%, 62% 38%, 55% 34%, 47% 34%, 39% 37%, 34% 44%, 33% 53%, 36% 60%, 41% 64%, 45% 66%, 45% 76%, 56% 76%, 54% 100%); }
10%, 40% { transform: translateY(-5px) scale(1.12); clip-path: inset(0 0 0 0); }
50% { transform: translateY(-2px) }
}
card_mod:
style: |
ha-card {
background: blue;
width: px;
border-radius: 0px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0px;
}
1 Like
I use fragmented YAML files with includes.
a) If you want it to be inside the configuration.yaml, then:
sensor:
- platform: rest
name: roborock_rooms
resource: http://192.168.1.245:8123/local/Roborock/roborock.json
value_template: "{{ now() }}"
json_attributes:
- rooms
- points
b) If you create a file like âsensor.yamlâ as I do, then you would put what I posted previously above exactly as posted. You do not need to put âsensor:â in the included file as the include itself begins with "sensor: so everything in that file is in âsensor:â. Then in configuration.yaml you use:
sensor: !include sensor.yaml
You tried to do (a) and forgot âsensor:â.
I prefer (b) because I have many, many YAMLs and it makes it much easier to find/edit. In my configuration.yaml l have this:
zone: !include zones.yaml
group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
rest_command: !include rest_command.yaml
shell_command: !include shell_commands.yaml
sensor: !include sensor.yaml
binary_sensor: !include binary_sensor.yaml
template: !include template.yaml
light: !include light.yaml
input_boolean: !include input_boolean.yaml
input_number: !include input_number.yaml
input_select: !include input_select.yaml
media_player: !include media_player.yaml
timer: !include timers.yaml
camera: !include cameras.yaml
scrape: !include scrape.yaml
2 Likes
Good evening group I hope to receive a little help, can you tell me how can I enlarge the icon? Thank you
type: custom:mushroom-template-card
primary: Telecamere
entity: group.all_telecamere
badge_icon: none
badge_color: transparent
icon: |-
{% if is_state(entity, 'off') %}
mdi:lightbulb-group-off-outline
{% else %}
mdi:lightbulb-group
{% endif %}
icon_color: |-
{% if is_state(entity, 'off') %}
green
{% else %}
red
{% endif %}
secondary: |-
{% if is_state(entity, 'off') %}
Spente
{% else %}
Accese
{% endif %}
hold_action:
action: toggle
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Telecamere Accese
content:
type: custom:auto-entities
card:
type: entities
filter:
include:
- group: group.all_telecamere
options:
type: custom:mushroom-light-card
show_brightness_control: true
use_light_color: true
show_color_control: true
show_color_temp_control: true
tap_action:
action: toggle
picture: |-
{% if is_state(entity, 'off') %}
/local/doom_off.png
{% else %}
/local/doom1-on.gif
{% endif %}
fill_container: true
layout: vertical
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(states.group.all_telecamere) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-white));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 30%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.9em;
}
ha-card {
{% if is_state(config.entity, 'on') %}
animation: borderPulse 2s ease-out infinite;
{% endif %}
}
ha-icon.mushroom-shape-icon {
{% if is_state(config.entity, 'on') %}
--icon-animation: open 3s ease-in-out infinite;
transform-origin: 30%;
animation: open 3s ease-in-out infinite;
{% endif %}
}
@keyframes borderPulse {
50% {
box-shadow: 0 0 10px lightblue;
}
}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
Youâre right, I forgot to put it in the sensor yaml.
But somehow itâs still not working.
What am I doing wrong?
JSON file:
{
"rooms": [
{
"name": "kitchen",
"boolean": "input_boolean.vacuum_clean_kitchen",
"id": "23"
},
{
"name": "corridor",
"boolean": "input_boolean.vacuum_clean_corridor",
"id": "16"
},
{
"name": "master_bedroom",
"boolean": "input_boolean.vacuum_clean_master_bedroom",
"id": "21"
},
{
"name": "second_bathroom",
"boolean": "input_boolean.vacuum_clean_second_bathroom",
"id": "22"
},
{
"name": "master bathroom",
"boolean": "input_boolean.vacuum_clean_master_bathroom",
"id": "18"
},
{
"name": "office",
"boolean": "input_boolean.vacuum_clean_office",
"id": "20"
},
{
"name": "kids_bedroom",
"boolean": "input_boolean.vacuum_clean_kids_bedroom",
"id": "17"
},
{
"name": "living_room",
"boolean": "input_boolean.vacuum_clean_living_room",
"id": "26"
}
]
}
Sensor yaml:
name: roborock_rooms
resource: http://192.165.1.200:8123/local/vacuum_clean_room.json
value_template: "{{ now() }}"
json_attributes:
- rooms
- points
If you hit that with a web browser, do you get the JSON file back?
Sometimes REST sensors especially need a full restart of Home Assistant.
DId you just do a reload of the REST sensor or did you restart Home Assistant?
Found my error, I forgot somehow the Roborock folder:
/local/Roborock/vacuum_clean_room.json
Now itâs work.
Thanks!
1 Like
Need help / suggestions. I want to show many room temperatures like this but ony problem is I cant click chip to get history data. Main reason for showing entities like this is to save space
Hello
how can I solve it so that there is a line around the graph like in the plain mushroom theme?
Now I switched to the mushroom shadow because there were extra lines in some places
for example, a frame would be good instead of a shadow