Open cyrilphoenix71 opened 2 years ago
The room card is a big challenge. Moreover, it's hard to make such a card readable. We have to find a good solution for that, a UX designer help is need. We actually juste use an entity card with template and on tap action navigate to dedicated view/dashboard.
I think it's a good idea !!
Perhaps it is possible to restyle the HA "Area card"?
For the moment i use the picture glance card with some modifications... I think it could be possible to look like that: a photo or a camera, a title and some Chips.
My idea / issue is not for a card like this, but to keep in mushroom style with simple design card
Perhaps it is possible to restyle the HA "Area card"?
I tried to do so, but definitely it's not good:
For the moment i use the picture glance card with some modifications... I think it could be possible to look like that: a photo or a camera, a title and some Chips.
A the glance card will be done later, but that's not the best answer to this card I think.
My idea / issue is not for a card like this, but to keep in mushroom style with simple design card
That's the idea, we will ask to a UX designer we know, see if he has some idea for this card. I think using room/camera image will be configuration options. But once again, we have to find a way to display it in a beautiful and usable way.
What about Room card similar to the one thats currently in dev Minimalist UI ? https://github.com/UI-Lovelace-Minimalist/UI/pull/125
I'd love to help out on this project some time being a UX/UI designer and front-end dev.
I'm still getting up to speed with HA though using it for only about a week or so and have immediately magnetized to the UI Minimalist look and Mushrooms plugin given the nicely thought-out design elements. I've got my first mobile version of the home dashboard almost done with the expectation I'm going to extend it to a wall tablet:
Thanks for releasing this!
But back to this room card problem
I think it might be helpful to have some designed assets stashed in a Figma file we can collaborate on more easily to toss ideas around for stuff like this faster that mimic Yuhang's original work so we aren't getting away from the original design language set forth but in the mean time I could likely get into code and prototype after I learn the ins and outs of HA templating and components a bit more first.
I think the UI Minimalist concept you share @klawecki is on the right path and they are matching it more closely to Yuhang's original work with devices as shown:
Alternatively, If only 3 or 4 action/entities are added you could have it align like you had in your original screenshot. The issue with that screenshot though is the smaller icons above are a bit crowded and not likely going to work.
What about something like this?
Not mine, the Picture is from this community post https://community.home-assistant.io/t/lovelace-ui-minimalist/322687/1621?u=j.loewen
UI Minimalist
I've been playing with Minimalist UI to try some cards such as the Room ones:
I love how it uses the space and wraps the room in one, but it has some cons:
What about something like this?
I think those have even more potential (more space for additional info, can be made more compact on both directions, but I have been completely unable to make them show up. Relevant posts from the author 1627, 1523 & 1565. I'll keep trying - I loved them when I saw them.
This, of course, doesn't add anything to Mushroom. Just sharing my experience and opinions on the designs by testing some existing ones. I'd love some Mushroom version of these.
@antonio1475 Yeah I feel going with the background image approach with the black overlay is more flexible and isn't too big of a deviation from HA's defaults or what the standard is for home automation software at representing a room. I find the other style in UI Minimalist too busy with icons and more limiting.
I'm also against YAML only template themes as well and think that greatly limits the adoption of UI Minimalist. I get their reasoning for making templates easier to manage, but it's a pain to have to open up a code editor any time you want to make a small change to your dashboard. I use UI minimalist but only so the styles get applied to match across dashboards.
First attempt at a working Mushroom Room Card, for my need (so very minimal). Using card-mod!
Limitations:
Video:
Left is Minimalist, for reference. Although the other design we discussed just above was actually more of inspiration.
square: false
columns: 2
type: grid
cards:
- type: custom:mod-card
card:
type: grid
cards:
- type: conditional
conditions:
- entity: light.despacho
state: 'off'
card:
type: custom:mushroom-light-card
entity: light.despacho
icon: mdi:chair-rolling
hold_action:
action: call-service
service: automation.trigger
service_data: {}
target:
entity_id: automation.despacho_encender
hide_state: true
card_mod:
style: >
ha-card.type-custom-mushroom-light-card {box-shadow:
none;padding-bottom:0;}
- type: conditional
conditions:
- entity: light.despacho
state: 'on'
card:
type: custom:mushroom-light-card
entity: light.despacho
icon: mdi:chair-rolling
tap_action:
action: toggle
hold_action:
action: call-service
service: automation.trigger
service_data: {}
target:
entity_id: automation.despacho_encender
hide_state: true
show_brightness_control: true
layout: horizontal
name: ''
card_mod:
style: >
.container.horizontal > ::slotted(:not(:last-child))
{margin-right: -40%!important;}
ha-card.type-custom-mushroom-light-card {box-shadow:
none;padding-bottom:0;}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: switch.altavoz
content_info: none
icon_color: teal
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: more-info
- type: entity
entity: switch.monitores
content_info: none
icon_color: teal
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: more-info
- type: entity
entity: switch.portatil
content_info: none
icon_color: teal
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: more-info
- type: entity
entity: switch.usb_despacho
content_info: none
icon_color: teal
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: more-info
alignment: end
columns: 1
square: false
card_mod:
style: |
ha-card {
background-color: rgb(250, 250, 250);
border-radius: 20px;
padding: 0 8px 8px 0;
box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) );
}
I am coming here from #304
I really wish that I could do some basic features on the main "button". Having a bedroom "button" that navigates to the bedroom has a bed icon. that does not contextually let me know functionality if I also want to turn that navigable button into an entity controller. Does this button even do anything? what does it control? i have to remember what each button to different rooms control with no contextual clues as to what that is. sure, i could put icons that match functionality, but that is mostly light bulbs, but at least 3 of area "buttons" do other things. I really think this could go a long way. I could almost control my whole house from one screen because I have only one floor. I would never need room-based pages if I could do this. while maybe harder to implement, if done, it would truly be "minimalist" lol.
https://github.com/junalmeida/homeassistant-minimalistic-area-card
This guy has an interesting implementation where you specify entities in a list. if they are sensors they go into the top row. if they are switches, they go into the second row. no config, just get what it is and that's it.
The only thing I would say is custom icon color (and maybe custom icon) for any specified entity. it sucks when everything is the same color.
And i like the one referenced in Antonio's post where icons are on a bottom row to keep the card horizontally slim.
More inspiration for a Room card by benm7: https://community.home-assistant.io/t/lovelace-ui-minimalist/322687/2105 https://community.home-assistant.io/t/lovelace-ui-minimalist/322687/2178
Out of curiosity, would you mind saying what kind of things you would put in a room/area card? Personally I would want controllable lights, temperature/humidity, templatable text, and custom entities.
Is there any work going on on this?
First attempt at a working Mushroom Room Card, for my need (so very minimal). Using card-mod!
Second attempt / different approach just to test (left). Minimalist UI on the right, as it's what I'm currently using, although I miss some Mushroom options (eg. templating each entity).
Using vertical-stack-in-card and card-mod. And it has limitations / issues depending on the number of icons and screen size... Just sharing.
type: custom:vertical-stack-in-card
cards:
- square: false
columns: 2
type: grid
cards:
- type: conditional
conditions:
- entity: light.mesita
state: 'off'
card:
type: custom:mushroom-light-card
entity: light.mesita
show_brightness_control: true
collapsible_controls: true
name: Despacho
fill_container: false
icon: mdi:chair-rolling
layout: default
double_tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {box-shadow: none;}
- type: conditional
conditions:
- entity: light.mesita
state: 'on'
card:
type: custom:mushroom-light-card
entity: light.mesita
show_brightness_control: true
collapsible_controls: true
name: Despacho
fill_container: false
icon: mdi:chair-rolling
double_tap_action:
action: more-info
hold_action:
action: more-info
primary_info: none
secondary_info: none
layout: horizontal
card_mod:
style: |
ha-card {box-shadow: none;}
- type: grid
columns: 4
square: false
cards:
- type: custom:mushroom-entity-card
entity: switch.altavoz
primary_info: none
secondary_info: none
layout: horizontal
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: more-info
icon_color: teal
card_mod:
style: |
ha-card {box-shadow: none;}
- type: custom:mushroom-entity-card
entity: switch.monitores
primary_info: none
secondary_info: none
layout: horizontal
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: more-info
icon_color: teal
card_mod:
style: |
ha-card {box-shadow: none;}
- type: custom:mushroom-entity-card
entity: switch.portatil
primary_info: none
secondary_info: none
layout: horizontal
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: more-info
icon_color: teal
card_mod:
style: |
ha-card {box-shadow: none;}
- type: custom:mushroom-entity-card
entity: switch.usb_despacho
primary_info: none
secondary_info: none
layout: horizontal
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: more-info
icon_color: teal
card_mod:
style: |
ha-card {box-shadow: none;}
type: custom:vertical-stack-in-card
cards:
- square: false
columns: 2
type: grid
cards:
- type: conditional
conditions:
- entity: light.comedor
state: 'off'
card:
type: custom:mushroom-light-card
entity: light.comedor
show_brightness_control: true
collapsible_controls: true
name: Comedor
fill_container: false
icon: mdi:sofa-outline
layout: default
double_tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {box-shadow: none;}
- type: conditional
conditions:
- entity: light.comedor
state: 'on'
card:
type: custom:mushroom-light-card
entity: light.comedor
show_brightness_control: true
collapsible_controls: true
fill_container: false
icon: mdi:sofa-outline
double_tap_action:
action: more-info
hold_action:
action: more-info
primary_info: none
secondary_info: none
layout: horizontal
card_mod:
style: |
ha-card {box-shadow: none;}
- type: grid
columns: 5
square: false
cards:
- type: custom:mushroom-entity-card
entity: switch.altavoz
icon: mdi:air-conditioner
primary_info: none
secondary_info: none
layout: horizontal
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: more-info
icon_color: indigo
card_mod:
style: |
ha-card {box-shadow: none;}
- type: custom:mushroom-entity-card
entity: fan.ventilador_comedor
primary_info: none
secondary_info: none
layout: horizontal
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: more-info
icon_color: indigo
card_mod:
style: |
ha-card {box-shadow: none;}
- type: custom:mushroom-entity-card
entity: media_player.samsungtv_smart
primary_info: none
secondary_info: none
layout: horizontal
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: more-info
icon_color: red
card_mod:
style: |
ha-card {box-shadow: none;}
- type: custom:mushroom-entity-card
entity: switch.usb_comedor
primary_info: none
secondary_info: none
layout: horizontal
fill_container: true
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
icon_color: teal
card_mod:
style: |
ha-card {box-shadow: none;}
- type: custom:mushroom-entity-card
entity: switch.purificador_comedor_socket
primary_info: none
secondary_info: none
layout: horizontal
fill_container: true
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
icon_color: teal
card_mod:
style: |
ha-card {box-shadow: none;}
type: custom:vertical-stack-in-card
cards:
- square: false
columns: 1
type: grid
cards:
- type: conditional
conditions:
- entity: light.habitacion
state: 'off'
card:
type: custom:mushroom-light-card
entity: light.habitacion
show_brightness_control: true
collapsible_controls: true
name: Habitación
fill_container: false
icon: mdi:bed-king-outline
layout: default
double_tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card {box-shadow: none;}
- type: conditional
conditions:
- entity: light.habitacion
state: 'on'
card:
type: custom:mushroom-light-card
entity: light.habitacion
show_brightness_control: true
collapsible_controls: true
name: Habitación
fill_container: false
icon: mdi:bed-king-outline
double_tap_action:
action: more-info
hold_action:
action: more-info
primary_info: none
secondary_info: none
layout: horizontal
card_mod:
style: |
ha-card {box-shadow: none;}
- type: grid
columns: 7
square: false
cards:
- type: custom:button-card
color_type: blank-card
- type: custom:mushroom-entity-card
entity: media_player.lg_tv
primary_info: none
secondary_info: none
layout: horizontal
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: more-info
icon_color: red
card_mod:
style: |
ha-card {box-shadow: none;}
- type: custom:mushroom-entity-card
entity: light.mesita
primary_info: none
secondary_info: none
layout: horizontal
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: more-info
icon_color: teal
card_mod:
style: |
ha-card {box-shadow: none;}
- type: custom:mushroom-entity-card
entity: switch.ares
primary_info: none
secondary_info: none
layout: horizontal
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: more-info
icon_color: teal
card_mod:
style: |
ha-card {box-shadow: none;}
- type: custom:mushroom-entity-card
entity: switch.despertador
primary_info: none
secondary_info: none
layout: horizontal
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: more-info
icon_color: teal
card_mod:
style: |
ha-card {box-shadow: none;}
- type: custom:mushroom-entity-card
entity: switch.almohadilla
primary_info: none
secondary_info: none
layout: horizontal
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: more-info
icon_color: teal
card_mod:
style: |
ha-card {box-shadow: none;}
- type: custom:mushroom-entity-card
entity: switch.usb_habitacion
primary_info: none
secondary_info: none
layout: horizontal
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: more-info
icon_color: teal
card_mod:
style: |
ha-card {box-shadow: none;}
I would love to have a room card in mushroom.
As for the design/layout of the card, I really like the custom custom_card_esh_room
from the Minimalist UI. https://github.com/UI-Lovelace-Minimalist/UI/tree/main/custom_cards/custom_card_esh_room
Would this be possible? I started playing around a bit, but I didn't get anything to work yet. (I just started looking into developing for HA).
If I could get some help, I could try to implement a card like this.
I tried to build a card with the help of stack-in-card and mushroom cards and here is my result:
It looks very similar to the HA-Area card, but it is customizable.
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.office_motion_sensor
state: 'on'
chip:
type: entity
entity: binary_sensor.basement_hallway_motion_sensor
icon_color: blue
icon: mdi:run
content_info: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
margin-top: 8px;
margin-left: 10px;
--chip-background: rgb(var(--rgb-blue));
--chip-box-shadow: none;
color: rgb(var(--rgb-white));
}
card_mod:
style: |
ha-card {
height: 48px;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Office
card_mod:
style:
mushroom-title-card:
$: |
h1 {
--primary-text-color: rgb(var(--rgb-white));
--title-font-size: 18px;
--title-font-weight: lighter;
}
.header {
--title-padding: 120px 12px 0px 12px ;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.living_room_thermostat_temperature
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
alignment: start
card_mod:
style: |
ha-card {
margin-top: 6px;
margin-bottom: -6px;
margin-left: 0px;
height: 50px;
--chip-background: transparent;
--chip-box-shadow: none;
--color: rgb(var(--rgb-white));
color: rgb(var(--rgb-white));
}
:host {
--icon-color: transparent;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.office_ceiling
content_info: none
use_light_color: true
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
margin-top: 6px;
margin-bottom: -6px;
margin-right: 6px;
height: 48px;
--chip-background: rgba(var(--rgb-grey), 0.9);
--chip-box-shadow: none;
}
:host {
--icon-color: rgb(var(--rgb-white));
}
card_mod:
style: |
ha-card {
background-image: url("/api/image/serve/d66480268b9c0f34de2cc22a77e30dbc/512x512");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color), 0.5);
position: relative;
}
@antonio1475 can you share please how you managed to add a second column in ui minimalist (like the one in Comedor & Habitacion card), this is something i tried for a while and never managed to do it
ps: a bit off topic here, i know, sry.
@antonio1475 can you share please how you managed to add a second column in ui minimalist (like the one in Comedor & Habitacion card), this is something i tried for a while and never managed to do it
ps: a bit off topic here, i know, sry.
@thiagobucca edited to replace custom card template to the latest version (with my mods). I identified and solved my errors.
@antonio1475 your 6 button mini card is exactly what I was looking for - amazing work! Is there any documentation available to understand how to use it? If not, could you please paste the code for your Despacho, Habitacion, Comedor or Entrada cards as examples? Thanks!
I tried to build a card with the help of stack-in-card and mushroom cards and here is my result:
It looks very similar to the HA-Area card, but it is customizable.
type: custom:stack-in-card cards: - type: custom:mushroom-chips-card chips: - type: conditional conditions: - entity: binary_sensor.office_motion_sensor state: 'on' chip: type: entity entity: binary_sensor.basement_hallway_motion_sensor icon_color: blue icon: mdi:run content_info: none tap_action: action: none hold_action: action: none double_tap_action: action: none card_mod: style: | ha-card { margin-top: 8px; margin-left: 10px; --chip-background: rgb(var(--rgb-blue)); --chip-box-shadow: none; color: rgb(var(--rgb-white)); } card_mod: style: | ha-card { height: 48px; } - type: custom:mod-card card: type: custom:mushroom-title-card title: Office card_mod: style: mushroom-title-card: $: | h1 { --primary-text-color: rgb(var(--rgb-white)); --title-font-size: 18px; --title-font-weight: lighter; } .header { --title-padding: 120px 12px 0px 12px ; } - type: horizontal-stack cards: - type: custom:mushroom-chips-card chips: - type: entity entity: sensor.living_room_thermostat_temperature tap_action: action: none hold_action: action: none double_tap_action: action: none alignment: start card_mod: style: | ha-card { margin-top: 6px; margin-bottom: -6px; margin-left: 0px; height: 50px; --chip-background: transparent; --chip-box-shadow: none; --color: rgb(var(--rgb-white)); color: rgb(var(--rgb-white)); } :host { --icon-color: transparent; } - type: custom:mushroom-chips-card chips: - type: light entity: light.office_ceiling content_info: none use_light_color: true tap_action: action: toggle hold_action: action: more-info double_tap_action: action: none alignment: end card_mod: style: | ha-card { margin-top: 6px; margin-bottom: -6px; margin-right: 6px; height: 48px; --chip-background: rgba(var(--rgb-grey), 0.9); --chip-box-shadow: none; } :host { --icon-color: rgb(var(--rgb-white)); } card_mod: style: | ha-card { background-image: url("/api/image/serve/d66480268b9c0f34de2cc22a77e30dbc/512x512"); background-position: center; background-repeat: no-repeat; background-size: cover; background-color: rgba(var(--rgb-card-background-color), 0.5); position: relative; }
Great work with this, I have copy your code and adjust a bit and here is my result.
Apologies if this isn't relevant, but I wanted to drop some possible inspiration in here for 'workarounds'/alternative solution in the meantime.
I've actually gone with an entirely Mushroom solution, using Lovelace Mushroom chip card's to represent each of my room's presence/motion and light status at a glance. While perhaps too minimal for some, I do get:
subview
dashboards)I'm using templates on the motion and lights (grouped lights) to switch the icons, and colours. For example:
type: template
icon: |-
{% if is_state('binary_sensor.alan_office_motion', 'on') %}
mdi:motion-sensor
{% else %}
mdi:chair-rolling
{% endif %}
content: Alan's Office
tap_action:
action: navigate
navigation_path: /lovelace/alans-office
hold_action:
action: toggle
icon_color: |-
{% if is_state('light.alan_office_lights', 'on') %}
orange
{% else %}
black
{% endif %}
entity: light.alan_office_lights
I did try setting up Lovelace Minimalist room cards, but gave up once I discovered there's no UI editing available. I've just got too much going on to be able to maintain that in yaml. However, I reckon for my use cases mostly on my mobile, this all fits better and is more readable/usable at a glance.
Main dashboard on the left, and the living room subview card on right (I have click to navigate):
Should be really great to have a 'room-card' available in mushroom. I really like the look of the UI Minimalist, but unfortunately it's only without the UI.
Just chiming in that this is also my top feature request from the Mushroom suite of UX modifications :)
I managed to keep UI active for 90% of the card playing with some inspiration found here: https://community.home-assistant.io/t/mushroom-inspiration/484525/48
I built this one:
Basicaly based on one mushroom template card and one chips card adjusted with card mod.
following code:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: group.lumieres_salon
icon: mdi:sofa
icon_color: |
{% if is_state(entity, 'on') %}
#03A9F4
{% else %}
grey
{% endif %}
primary: Salon
secondary: '{{ states(''sensor.echo_jeanne_temperature'') }}°C'
layout: horizontal
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
double_tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
hold_action:
action: toggle
badge_icon: |
{% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: |
{% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
orange
{% else %}
grey
{% endif %}
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -52px;
left: -155px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
}
style: |
mushroom-badge-icon {
left: 60px;
top: 25px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.0x84ba20fffe4b2581
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lumières salon
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.0x84ba20fffe4b2581
name: Petite Lampe
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: false
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.lampadaire
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.elephants
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.cerisier
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
icon: mdi:lightbulb
hold_action:
action: toggle
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
- type: entity
entity: cover.salon
hold_action:
action: toggle
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Volets du salon
content:
type: vertical-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.volet_du_salon_apero
name: Volet Apero
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.volet_du_salon_tv
name: Volet TV
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
content_info: none
- type: template
entity: media_player.echo_jeanne
icon: mdi:play-pause
icon_color: |-
{% if is_state(entity, 'playing') %}
#03A9F4
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Echo salon
content:
type: custom:stack-in-card
cards:
- type: custom:mini-media-player
entity: media_player.echo_jeanne
source: full
volume_stateless: false
group: true
artwork: full-cover
tts:
platform: alexa
entity_id: media_player.echo_jeanne
type: announce
shortcuts:
hide_when_off: true
columns: 3
buttons:
- name: Playlist Jeanne
type: AMAZON_MUSIC
id: Playlist Jeanne
- name: RTL2
type: custom
id: joue la station RTL deux
- name: Pop- Rock
type: custom
id: joue du pop rock
- name: Rock
type: custom
id: joue du rock
- name: Musique douce
type: custom
id: joue de la musique douce
- name: Piano
type: custom
id: joue de la musique au piano
- name: Queen
type: custom
id: joue du Queen
- name: Vianney
type: custom
id: joue du Vianney
- name: Louane
type: custom
id: joue du Louane
- name: Playlist Jeanne
type: AMAZON_MUSIC
id: Playlist Jeanne sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: RTL2
type: custom
id: >-
joue la station RTL deux sur le groupe
rez_de_chaussee
icon: mdi:multicast
- name: Pop- Rock
type: custom
id: joue du pop rock sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Rock
type: custom
id: joue du rock sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Musique douce
type: custom
id: >-
joue de la musique douce sur le groupe
rez_de_chaussee
icon: mdi:multicast
- name: Piano
type: custom
id: >-
joue de la musique au piano sur le groupe
rez_de_chaussee
icon: mdi:multicast
- name: Queen
type: custom
id: joue du Queen sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Vianney
type: custom
id: joue du Vianney sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Louane
type: custom
id: joue du Louane sur le groupe rez_de_chaussee
icon: mdi:multicast
- type: template
entity: plant.alocatia
icon: mdi:flower
icon_color: |-
{% if is_state(entity, 'problem') %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Plante Marsupilami
content:
type: custom:mod-card
card:
type: custom:flower-card
entity: plant.alocatia
show_bars:
- moisture
- temperature
- illuminance
- conductivity
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 80%;
top: -170px;
background: none;
--chip-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 178px ;
margin-left: auto;
margin-right: auto;
}
For whatever reason, still many yaml involved (especially for the pop up part) but the basic card are UI compatible.
I like this approach for a future room card. It takes existing mushroom cards and combine them in one. Template + Chips are a good match to make a good looking room card.
https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/2931
He used climate + chips here.
The card is still compact and seems to be a good dashboard choice for smartphone, imo.
This one looks good too.
https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/2878
I did something similar, but tried to use as little vertical space as possible.
I personally love this template + chip approach! The idea of @mirkolenz above is very lean also ! Both ways are very coherent with other mushroom card depending the display mode (default/horizontal/vertical) you use !
I personaly come to a solution very close to yours: compared to my post above, I simplified it to a version without cardmod:
It is more coherent with the other mushroom cards I use, and easier to maintain. I use it in two columns for smartphone and four columns for tablets.
I shared the code on the french Forum there: https://forum.hacf.fr/t/mise-en-forme-de-cartes/20429/9 It is basicaly stack in of a template and some chips. (+ numerous pop-ups on the chips)
I would love to see something like this integrated in mushroom, with a built in positionning of the chip row (linked with the default/horizontal/vertical display mode)...
I recently came across https://github.com/jcwillox/lovelace-paper-buttons-row
which has a mushroom style preset and some examples like:
which could help in making a Mushroom styled card (eg the additional buttons below/within a Mushroom light/entity card)
I think the Minimalist one is very good; and the original proposal at the very top of this topic (that looks very mushroom card) becomes toocluttered. The main advantage with the minimalist room card IMHO is that it clearly visualizes what room type it is with the very large icon in a reasonably clean area around it giving peace and clarity to the eye in otherwise usually cluttered dashboards:
.
I don't so much like the idea of a photo of the room as a background image, as some rooms do not look "clean and nice enough". One thing for a hotel, but not a home with sometimes cluttered furniture etc.
I think the Minimalist one is very good
Definitely. I haven't been able to switch to anything else since I tried it.
I've also gone beyond the standard and customized it to support up to 8 entities, as well as having both the room light status and the room temperature.
More info here
Note that the card and all the buttons have tap, double tap and hold actions, so you can go from very basic to many things. I would love for this card to be in Mushroom and get rid of Minimalist and yaml-only dashboard...
@antonio1475 this is fantastic, and exactly what I need - 8 entities instead of just 4. I vote for this becoming standard in Mushroom cards!!!
You can already "mushroomize" it with stack in and card mod like I described above and here :
https://forum.hacf.fr/t/mise-en-forme-de-cartes/20429/8 (in french, but the code is universal).
If you need 8 buttons, you just add another chip card in the stack in...
UI is available (when using custom:vertical-stack-in-card) in this case if this was the need, but still cardmod is needed to mimic the minimalist card layout with big icon and column on the right.
If card mod is an issue (it was for me, not predictible enough when switching from phone to tablet...) just remove all cardmod stuff and you are back to small icons for room but same behaviour and still UI working:
+1 for Room card, would be great.
For those interrested in such a room card:
I have presented my own version of a mushroom room card on the french Forum here: https://forum.hacf.fr/t/carte-mise-en-forme-de-ma-mushroom-room-card-et-tuto/20429
do not hesitate to use the code...
And a french tuto step by step to install a simplified version here: https://forum.hacf.fr/t/carte-mise-en-forme-de-ma-mushroom-room-card-et-tuto/20429/12
Those version are 100% mushroom compatible, they even preserve the configuration through Graphical User Interface...
For those interrested in such a room card:
I have presented my own version of a mushroom room card on the french Forum here: https://forum.hacf.fr/t/carte-mise-en-forme-de-ma-mushroom-room-card-et-tuto/20429
![]()
do not hesitate to use the code...
And a french tuto step by step to install a simplified version here: https://forum.hacf.fr/t/carte-mise-en-forme-de-ma-mushroom-room-card-et-tuto/20429/12
Those version are 100% mushroom compatible, they even preserve the configuration through Graphical User Interface...
Thanks for sharing. Would you be able to make it so the horizontal
layout works with grid card? Currently, when using your card with Grid card the text is truncated and unreadable when having 2/3 columns
Edit:
Thanks
@ncodee I played with grid and horizontal stack, the issue is not the grid itself, it is the number of column that you display. The way I use it (on mobile) is eiter the horizontal (in 1 column) or the verticaly stacked (in 2 column).
I also played with sections and it is working well with sections this way:
In the basic simplified design, the layout is shared 50%/50% between the template card and the chips, whatever the number of chips or the siez of the text like in the illustration below (border artificially kept for illustration):
Thus only half the room card is available for text and if the columns are too small, text can be truncated like in your example, or chips can be displayed in two lines. I cannot do better than that with such a simple structure, but you can try two things:
Hereafter is an example where you could try to play with card_mod for both cards, the example below allow some overlaps between both cards:
This gives a little more freedom, but be careful, with 4 chips and long text you may have chips above text:
The modified code with card_mod in both embedded card (refer to comments in the code for where to modify):
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: light.votre_lumière
icon: mdi:sofa
icon_color: |
{% if is_state(entity, 'on') %}
yelow
{% else %}
grey
{% endif %}
primary: Salon Simplicfié
secondary: '{{ states(''sensor.votre_capteur_temperature'') }}°C'
layout: horizontal
tap_action:
action: navigate
navigation_path: /votre_url_salon
double_tap_action:
action: navigate
navigation_path: /votre_url_salon
hold_action:
action: toggle
badge_icon: |
{% if is_state('binary_sensor.votre_capteur_mouvement', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: |
{% if is_state('binary_sensor.votre_capteur__mouvement', 'on') %}
orange
{% else %}
grey
{% endif %}
# modify margin-right to allow the text to go further on the right (here -50px, but feel free to adjust)
# -12px is no overlap any value 'below' like -100px will allow the text to overlap the second half of the card
card_mod:
style:
style: |
ha-card {
margin-right: -50px;
padding-right: 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: media_player.votre_media_player
icon: mdi:play-pause
icon_color: |-
{% if is_state(entity, 'playing') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: template
entity: cover.votre_volet_salon
hold_action:
action: toggle
tap_action:
action: more-info
icon: |-
{% if is_state(entity, 'open') %}
mdi:window-shutter-open
{% elif is_state(entity, 'closed') %}
mdi:window-shutter
{% else %}
mdi:window-shutter-alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'open') %}
grey
{% elif is_state(entity, 'closed') %}
grey
{% else %}
orange
{% endif %}
- type: template
entity: light.votre_lumiere
icon: mdi:lightbulb
hold_action:
action: toggle
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
alignment: end
# modify margin-left to allow the chips to go further on the left (here -50px but feel free to adjust)
# -12px is no overlap any value 'below' like -100px will allow the chips to overlap the first half of the card
card_mod:
style:
style: |
ha-card {
padding-top: 12px;
margin-top: 0px;
padding-bottom: 12px;
margin-left: -50px
padding-left: 0px;
padding-right: 8px;
}
There's a high demand for a Room card, please consider adding @piitaya.
Thanks
@ncodee I updated the post above with some proposed modification that might be useful for your issue.
Initial link in French has been updated as well to document your issue.
I came across 2 room card that are very Mushroom-y:
Source: comment in thread Mobile Dashboard Design ... Let's have a peak!
Waiting to receive the code and play with it...
I've also been playing with something very similar to 1, with custom:vertical-stack-in-card and card-mod (inspired from here)
.
I don't love it compared to my Minimalist setup... It only looks decent with the Mushroom Square theme. The normal rounded makes everything too big.
I'm also going to explore https://github.com/Nerwyn/service-call-tile-feature and its ability to add buttons to a Tile card, which seems to be the future.
@piitaya I've also seen the discussion in https://github.com/piitaya/lovelace-mushroom/pull/1422#issuecomment-2213430443 and you comment regarding templating and custom buttons. That might "solve" the room card. Please take a look at the screenshots here - I think that the first one could be a very nice Mushroom Room Card (although I like option 2 more, but it's less mushroomy than 1).
Thanks
I came across 2 room card that are very Mushroom-y:
@piitaya I've also seen the discussion in #1422 (comment) and you comment regarding templating and custom buttons. That might "solve" the room card. Please take a look at the screenshots here - I think that the first one could be a very nice Mushroom Room Card (although I like option 2 more, but it's less mushroomy than 1).
Thanks
I agree no 2 looks more nice and mushroom-y. Although the link to the page does not share the exact code unfortunately.
I agree no 2 looks more nice and mushroom-y. Although the link to the page does not share the exact code unfortunately.
Unfortunately, that is only a design (not a reality nor code) made that the user made. The end result they were able to achieve looks far from that
I've been playing with u/maomana's code from here and to me this is what the Mushroom Room Card should be. There are 4 styles in the screenshot (square, rounded, rounded header or bottom-squared):
What I also love about this design is that you can put as many buttons and rows as you want, and it works both full-width as in a grid 👌
PS: Using Rounded theme as also suggested by u/maomana, although Mushrooom themes look quite nice & similar.
All (or most) credits go to u/maomana (linked above)! Simple, yet amazing, work. Sharing this thread with them.
Looking forward to feedback, and I'll share my final code when done.
What do you think about a card like this one
![unknown-4](https://user-images.githubusercontent.com/18350629/152788679-a80c6477-79eb-42ac-8996-617876d1ff1d.png)
The bottom button turn on / off all light of room, same for plug and cover The icon are hide if no windows open, door open, water sensor off....