Here is the wisdom you seek:
1 Like
I t think it would make more sense to put this on the share your protest forum, this looks like a whole new project. Nice!
I have developed my mushroom dashboard frm my mobile first, then I used layout-card (vertical) so I can move my cards around to fill the space with this:
view_layout:
column: 1
I think it works quite well
Please understand that it is very straining on the eye and difficult to fast read code, if not formatted in a standard way. Please use the Preformatted text-function. In your post, press and hold ctrl and then “E”.
Then just paste your code. Done. Super, thanks!
This is exactly what I was looking for. I’ll give it a shot. Thanks much!
Please share the code.
How to add the power consumption into a light card?
Everything is done via UI, and is quite simple. I divided the dashboard in variuous block
I use the vertical layout, and if needed, the grid layout. For example, the “Luci” block:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Luci
- type: grid
cards:
- type: custom:mushroom-light-card
entity: light.barra_est_knx
name: Barra Est
- type: custom:mushroom-light-card
entity: light.barra_ovest_knx
name: Barra Ovest
- type: custom:mushroom-light-card
entity: light.disbrigo_knx
name: Disbrigo
- type: custom:mushroom-light-card
entity: light.tavolo_knx
icon: ''
name: Tavolo
- type: custom:mushroom-light-card
entity: light.soggiorno_knx
icon: ''
name: Soggiorno
- type: custom:mushroom-light-card
entity: light.divano_knx
name: Divano
icon: ''
- type: custom:mushroom-light-card
entity: light.isola_knx
name: Isola
- type: custom:mushroom-light-card
entity: light.sottopensile_knx
name: Sottopensile
- type: custom:mushroom-light-card
entity: light.ingresso_knx
icon: ''
name: Ingresso
- type: custom:mushroom-light-card
entity: light.corridoio_ingresso_knx
columns: 2
square: false
view_layout:
column: 1
I also use the top left image to go back home
show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: weather.openweathermap
image: local/immaginistanze/soggiorno.jpg
tap_action:
action: navigate
navigation_path: home
hold_action:
action: none
name: Soggiorno
aspect_ratio: '3:1'
view_layout:
column: 1
2 Likes
@KaherdinTristan Did you ever have a chance to figure out how to “link” the color + temperature button to the vertical slider?
-
Has anyone managed to animate the air purifier icon? I’d like to use that instead of the standard fan icon (for air purifiers).
-
Is it possible to add a badge to the icon on the Mushroom Fan card? I tried using some of the card_mod code (
mushroom-badge-icon) in previous posts, but those were all for Template cards, so not sure if the Fan card supports badges at all.
2 Likes
That should be done by fiddling with “track” and “progress”, and knowing how to reference the current entity state and color. I guess this, and I know its the logical thing to do. But help me all hedonistic gods, I have not a clue in the world who designed css and left all the documentation undone.
- type: custom:my-slider-v2
entity: light.bella_ledlight
vertical: true
styles:
card:
- width: 35px
container:
- border-radius: 12px
track:
- background: >
[[[ if (entity.state == "off") return
"rgba(var(--mush-rgb-disabled), 0.2)";
else return "rgba(var(--mush-rgb-amber), 0.2)";
]]]
progress:
- background: >
[[[ if (entity.state == "off") return
"rgb(var(--mush-rgb-disabled))";
else return "rgb(var(--mush-rgb-amber))";
]]]
thumb:
- width: 0px
yes. place two icons on top of each other, rotate one.
i dont know how to do this, but I know the answer is already in this thread.
@rhysb can you please tell me how to add the shadow effect to the climate card ? so that when the A/C is the icon animates like yours but also produces this shadow animation similar to alert animation.
i tried the following code but the shadow animations creates a square instead of circle.
@keyframes cool {
60% { box-shadow: 0 0 0 0 rgba(var(--rgb-cyan), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
haha, I know what you mean. This is where I’m at right now. The right slider only controls brightness level and not color temperature or color control. This is a workaround but simplifying the design I want to get rid of the horizontal line.
Anyone know how to do this magic trick?
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.lr_light_group
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
name: Living Room Lights
collapsible_controls: true
- type: custom:mushroom-entity-card
entity: light.lr_light_group
fill_container: false
tap_action:
action: toggle
icon: ''
primary_info: name
name: Living Room Switches
layout: horizontal
secondary_info: state
- type: custom:my-slider-v2
entity: light.lr_light_group
vertical: true
styles:
card:
- height: 150px
- width: 35px
container:
- border-radius: 12px
track:
- background: >
[[[ if (entity.state == "off") return
"rgba(var(--mush-rgb-disabled), 0.2)";
else return "rgba(var(--mush-rgb-amber), 0.2)";
]]]
progress:
- background: >
[[[ if (entity.state == "off") return
"rgb(var(--mush-rgb-disabled))";
else return "rgb(var(--mush-rgb-amber))";
]]]
thumb:
- width: 0px
card_mod:
style: |
ha-card {
padding: 12px 12px 12px;
}
card_mod:
style: |
ha-card {
height: 140x;
}
3 Likes
Nice! I also got it working by using the layout-card (in vertical) and just a layout break card to create new columns. Works great!
Question, what card did you use for the breaks? e.g. -----Area Lights-----
It is hard to see the rotation, but I have added one for you:
1 Like
I’ve added one for Air Purifier too 
3 Likes
Hm still unable to get either of these 2 to work.