Thanks for that. They are nice too.
Hey Rhys, any idea why the header card looks weird on my phone? I’ve enabled kiosk mode at the top of the dashboard, what am I missing? Cheers.
1 Like
Nevermind, had to install browser-mod 
I have scrolled through most of the 6000+ posts and do not see what I am looking for, so maybe someone can point in a direction.
I have 20+ Sonoff S31 Power Monitoring Plugs. Most of them are on appliances, servers and 3d printers.
I am looking for a possible design to provide me wth some basic data.
I do not know what data might be important to see except power usage.
Can some one help.
Thanks
What do you want to achieve is the first question you should answer. And i bet over time things will shift.
Server are running typically 7x24 so for these it is maybe important to know theier power consumption correlated with the load to optimize things.
3D Printers. Here it is maybe a good idea to switch them all of after work to save enrgy. In addition the power consumption could be used to optimize prices. You cloud calculate the power consumption into the price.
And a bunch off appliances. Switch the off if not used.
These are mybe some direction to digg into.
Thank you for the response.
You are exactly correct. I am almost constantly changing things because my needs change.
In regards to my printers, my plug alerts me to when the printer is finished and then shuts down power 30 minutes later. It also will shut down if the cabinet it is in goes over a certain temp (using an esp temp sensor) or turn on an exhaust fan. It also alerts me as well in case of a potential fire.
On the server and appliance side I want to track some basic power consumption to see if I match my power companies summer/winter rate pattern.
I have done some basics in grafana, but would like to see some of the data displayed as a card if at all possible.
Again thank you
So maybe it is a good start to degign a dashboard that shows all relevant information regarding a printer. Icould imagine a simple Card with a status like Working, Working hot, Finised, Shutdown. That for each printer give you a quick overview. With a tap on the print you could show a popup that gives you some more detailed information linke temeprature graph, switch status, estimated time to finish.
i want to use card_mod
card_mod:
style: |
.background {
{% if is_state(config.entity, 'on') %}
background: color-mix(in srgb, var(--tile-color) 10%, var(--card-background-color));
{% endif %}
}
for cards to be filtered
browser_mod:
service: browser_mod.popup
data:
title: light
content:
type: custom:auto-entities
card:
type: entities
show_header_toggle: false
filter:
include:
- options:
type: custom:mushroom-entity-card
{% endif %}
}
domain: light
state: "on"
how can i do it better?
Nice, over 3 weeks i get an automover. thanks for the inspiration
Hi Rhys
I wonder if you can help me? All my icon automations have stopped working: 
Any reason?
For example, this worked fine but suddenly stopped working:
type: custom:mushroom-light-card
entity: light.ds_hall_light
name: DS Hall
icon_color: red
icon: mdi:lightbulb-variant-outline
layout: vertical
primary_info: name
secondary_info: state
icon_type: icon
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
}
How would you apply the washing machine animation to a custom:mushroom-chips-card ? Ive figured out how to do it for all the other awesome animations posted but because the washing machine is a stack in card, it’s tripping me up. Appreciate anyone’s steer
Here is what I’ve got;
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
icon_color: red
- type: template
icon: mdi:eye
icon_color: blue
- type: template
icon: mdi:garage
icon_color: teal
- type: template
icon: mdi:door
icon_color: purple
- type: template
icon: mdi:washing-machine
icon_color: '#6f6f6f'
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
animation: boing 3s ease-in-out infinite;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: translateY(-4px) scale3d(0.75, 1.25, 1); }
10% { transform: scale3d(1.25, 0.75, 1); }
12% { transform: translateY(-2px) scale3d(0.85, 1.15, 1); }
16% { transform: scale3d(1.05, 0.95, 1); }
19% { transform: scale3d(0.95, 1.05, 1); }
25% { transform: scale3d(1, 1, 1); }
}
mushroom-template-chip:nth-child(2)$: |
ha-icon {
animation: wink 4s ease-in-out infinite;
}
@keyframes wink {
0%, 100% { transform: scale(1, 1); }
19% { transform: scale(1.05, 0.6); }
20% { clip-path: polygon(0 100%, 100% 100%, 100% 49%, 86% 51%, 79% 59%, 70% 66%, 57% 71%, 43% 71%, 29% 65%, 21% 57%, 13% 49%, 0 49%); }
25% { transform: scale(1, 1); }
28% { transform: scale(0.95, 1.05); }
30% { clip-path: inset(0 0 0 0); }
}
mushroom-template-chip:nth-child(3)$: |
ha-icon {
animation: door 3s steps(1) infinite alternate;
}
@keyframes door {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 73%, 32% 73%, 31% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 61%, 32% 61%, 31% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 68% 100%, 69% 48%, 32% 48%, 31% 100%, 0 100%); }
}
mushroom-template-chip:nth-child(4)$: |
ha-icon {
animation: open 6s ease-in-out infinite;
transform-origin: 30%;
}
@keyframes open {
0%, 66% { transform: rotateY(0deg); }
33% { transform: rotateY(-120deg); }
}
.shape {
perspective: 45px;
}
mushroom-template-chip:nth-child(5)$: |
ha-icon {
animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
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);
}
@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); }
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: -10px;
)
Hi,
Never mind. Accidently removed Card-Mod from HACS
1 Like
Thank you.
That definetly sounds like a great starting point.
Will see what I can put together.
You could take a look at the Octoprint integration for inspiration. It offers a lot of sensors like the bed temperature or the target temp and so on.
Btw. Octoprint could be something of use for your environment. If you have a few 3D printers, Octoprint is funny to use and offers a real out-of-the-box experience. I like it, but I only have one 3D printer, so can’t really compare. 
1 Like
What cards can help me build something like below with oval shape?
1 Like
This will get you started. It’s @rhysb code I’m sure.
- type: custom:mushroom-template-card
icon: mdi:account-group-outline
icon_color: '{{ ''light-blue'' if is_state(''input_text.mobile_menu'', ''overview'') else ''disabled'' }}'
primary: Overview
layout: vertical
tap_action:
action: call-service
service: input_text.set_value
service_data:
value: overview
entity_id: input_text.mobile_menu
card_mod:
style:
mushroom-state-info:
$: |
.container .primary {
white-space: normal;
}
.: |
mushroom-state-item {
margin-bottom: 0px;
}
ha-card:active {
background: rgba(var(--rgb-disabled), 0.1);
transform: scale(0.975);
transition: 0s;
}
ha-card {
--primary-text-color: #6c6c6c;
/* Set size and spacing of button */
width: 75px;
height: 125px !important;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
/* Styling of button */
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 3) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
}
4 Likes
Perfect thank you!
Thank you @paddy0174 for the info.
I had been running Octoprint on many of my printers.
I then changed to all Bambu printers which do not use Octoprint.
Though they have both an HA node red and HACS integration.
I will have to look into it to see what data I can get.
Thanks for the suggestion
thanks man tis work perfect
2 Likes
Short question. I try to use a conditional chip. As condition i could use an entity and its state, but i like to use an attribute of the entity. how yould this be accieved.
In detail: A climate entity where i like to use the attribute havac_action
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: climate.of_thermostat
state: 'heating'
chip:
type: back