lovelace-mushroom
lovelace-mushroom copied to clipboard
piitaya
Room summary card
What do you think about a card like this one
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....
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.
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:
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:
- Unable to have the slider in the front. Need to go more-info or implement the popup light card (still an extra tap).
- Limit of 4 entities inside (plus the room/light one).
- One card is huge. Two (in horizontal stack) are great. Three... The overall card is perfect but the round buttons are tiny. Not usable in mobile.
- [Minimalist, not design] As eveything in Minimal yaml-only, pretty exhausting.
- [Minimalist, not design] I haven't been able to put a template in the secondary line, but I think it's just a matter of time.
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!
- Using one column out of two, so it's not using full-width.
- Room light. Name when off, slider when on.
- 4 entities (limit for 2 columns on iphone. More fit in desktop, and more if using 1 column / full-width).
Limitations:
- due to using css to remove background & padding of the light card, it "jumps" after the first load & toggle.
- While I think I could easily add a background image, I'd like to make the chips background color when on too, but I don't know how yet.
- Since the background color is hard-coded in styles, it doesn't switch to dark mode 🥲
Video:
https://user-images.githubusercontent.com/63130724/156876031-7cb4a832-2271-4820-b55f-686b8172ad23.mp4
Left is Minimalist, for reference. Although the other design we discussed just above was actually more of inspiration.
Current code. Click to expand
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.
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.
Card 1: 4 icons. Click to expand
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;}
Card 2: 5 icons. Click to expand
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;}
Card 3: 6 icons aligned to right (grid:7) and double row. Click to expand
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.
Response (off-topic). Click to expand
I use a custom card based on the card_room template to:✅ add 2 more entities ✅ make room name smaller so that it fits in less space ✅ add haptics ✅ add ability to handle custom icons defined in the dashboard yaml
If you don't know, read on how to use custom_cards here
My template. Notice i5 & i6, haptics, etc. Click to expand
---
custom_card_room_6:
template:
- "ulm_translation_engine"
variables:
label_use_temperature: true
label_use_brightness: false
color: "var(--google-grey-500)"
size: "45%"
aspect_ratio: "1/1"
show_icon: true
show_label: true
show_name: true
icon: "mdi:sofa-single"
label: |-
[[[
if (variables.label_use_temperature) {
return (entity?.attributes?.current_temperature || entity?.attributes?.temperature || entity?.state || '-') + (entity?.attributes?.unit_of_measurement || '°C');
} else if (variables.label_use_brightness && entity?.state == "on" && entity?.attributes?.brightness != null) {
let bri = Math.round(entity?.attributes?.brightness / 2.55);
return (bri ? bri : "0") + "%";
}
return variables.ulm_translation_state;
]]]
state:
- value: "unavailable"
styles:
custom_fields:
notification:
- border-radius: "50%"
- border: "2px solid var(--card-background-color)"
- width: "24.5px"
- height: "24.5px"
- position: "absolute"
- left: "50%"
- top: "50%"
- transform: "translate(-50%,-50%)"
- margin-top: "35%"
- margin-left: "-35%"
- line-height: 0
- display: "grid"
- background-color: "[[[ return 'rgba(var(--color-red),1)'; ]]]"
styles:
icon:
- color: "rgba(var(--color-theme),0.2)"
label:
- justify-self: "start"
- align-self: "start"
- font-weight: "bold"
- font-size: "0.75em"
- filter: "opacity(40%)"
- margin-left: "12px"
- max-width: "[[[ return `calc(100% - (12px + ${!variables?.entity_1 && !variables?.entity_2 ? 5 : 0}px))`; ]]]"
- text-overflow: "ellipsis"
- overflow: "hidden"
- margin-top: "[[[ return !variables?.entity_1 ? '-24%' : '-10%'; ]]]"
name:
- justify-self: "start"
- align-self: "end"
- font-weight: "bold"
- font-size: "0.85em"
- margin-left: "12px"
- margin-bottom: "[[[ return !variables?.entity_1 ? (!variables?.entity_2 ? '15.8%' : '24%') : '10%'; ]]]"
- max-width: "[[[ return `calc(100% - (12px + ${!variables?.entity_2 ? 5 : 0}px))`; ]]]"
- text-overflow: "ellipsis"
- overflow: "hidden"
state:
- justify-self: "start"
- font-weight: "bold"
- font-size: "0.75em"
- filter: "opacity(40%)"
- margin-left: "6px"
img_cell:
- background-color: "rgba(var(--color-theme),0.05)"
- border-radius: "50%"
- width: "75%"
- height: "75%"
- max-width: "none"
- max-height: "none"
- position: "absolute"
- left: "50%"
- top: "50%"
- transform: "translate(-50%,-50%)"
- margin-top: "25%"
- margin-left: "-25%"
grid:
- grid-template-areas: "[[[ return !variables?.entity_1 ? (!variables?.entity_2 ? `'n n n' 'l l i3' 'i i i4'` : `'n n i2' 'l l i3' 'i i i4'`) : `'n n i5 i1' 'l l i6 i2' 'i i . i3' 'i i . i4'`; ]]]"
- grid-template-columns: "[[[ return !variables?.entity_1 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr'; ]]]"
- grid-template-rows: "[[[ return !variables?.entity_1 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr'; ]]]"
- justify-items: "center"
card:
- border-radius: "20px"
- box-shadow: "var(--box-shadow)"
- padding: "5px"
custom_fields:
i1: &widget_icon_room_6_styling
- border-radius: "50%"
- width: "80%"
- height: "80%"
- line-height: 0
- display: "grid"
i2: *widget_icon_room_6_styling
i3: *widget_icon_room_6_styling
i4: *widget_icon_room_6_styling
i5: *widget_icon_room_6_styling
i6: *widget_icon_room_6_styling
custom_fields:
notification: >
[[[
if (entity?.state == 'unavailable'){
return '<ha-icon icon="mdi:exclamation" style="width: 50%; height: 50%; color: var(--primary-background-color);"></ha-icon>';
}
]]]
i1:
card:
type: "custom:button-card"
template: >
[[[
let templates = [ 'widget_icon_room_6' ];
if (variables?.entity_1?.templates?.length) {
templates.push(...variables.entity_1.templates);
}
return templates;
]]]
variables: "[[[ return variables?.entity_1; ]]]"
state:
- operator: "template"
value: "[[[ return !variables.entity_1; ]]]"
styles:
card:
- display: "none"
entity: "[[[ return variables?.entity_1?.entity_id; ]]]"
icon: "[[[ return variables?.entity_1?.icon; ]]]"
i2:
card:
type: "custom:button-card"
template: >
[[[
let templates = [ 'widget_icon_room_6' ];
if (variables?.entity_2?.templates?.length) {
templates.push(...variables.entity_2.templates);
}
return templates;
]]]
variables: "[[[ return variables?.entity_2; ]]]"
state:
- operator: "template"
value: "[[[ return !variables.entity_2; ]]]"
styles:
card:
- display: "none"
entity: "[[[ return variables?.entity_2?.entity_id; ]]]"
icon: "[[[ return variables?.entity_2?.icon; ]]]"
i3:
card:
type: "custom:button-card"
template: >
[[[
let templates = [ 'widget_icon_room_6' ];
if (variables?.entity_3?.templates?.length) {
templates.push(...variables.entity_3.templates);
}
return templates;
]]]
variables: "[[[ return variables?.entity_3; ]]]"
state:
- operator: "template"
value: "[[[ return !variables.entity_3; ]]]"
styles:
card:
- display: "none"
entity: "[[[ return variables?.entity_3?.entity_id; ]]]"
icon: "[[[ return variables?.entity_3?.icon; ]]]"
i4:
card:
type: "custom:button-card"
template: >
[[[
let templates = [ 'widget_icon_room_6' ];
if (variables?.entity_4?.templates?.length) {
templates.push(...variables.entity_4.templates);
}
return templates;
]]]
variables: "[[[ return variables?.entity_4; ]]]"
state:
- operator: "template"
value: "[[[ return !variables.entity_4; ]]]"
styles:
card:
- display: "none"
entity: "[[[ return variables?.entity_4?.entity_id; ]]]"
icon: "[[[ return variables?.entity_4?.icon; ]]]"
i5:
card:
type: "custom:button-card"
template: >
[[[
let templates = [ 'widget_icon_room_6' ];
if (variables?.entity_5?.templates?.length) {
templates.push(...variables.entity_5.templates);
}
return templates;
]]]
variables: "[[[ return variables?.entity_5; ]]]"
state:
- operator: "template"
value: "[[[ return !variables.entity_5; ]]]"
styles:
card:
- display: "none"
entity: "[[[ return variables?.entity_5?.entity_id; ]]]"
icon: "[[[ return variables?.entity_5?.icon; ]]]"
i6:
card:
type: "custom:button-card"
template: >
[[[
let templates = [ 'widget_icon_room_6' ];
if (variables?.entity_6?.templates?.length) {
templates.push(...variables.entity_6.templates);
}
return templates;
]]]
variables: "[[[ return variables?.entity_6; ]]]"
state:
- operator: "template"
value: "[[[ return !variables.entity_6; ]]]"
styles:
card:
- display: "none"
entity: "[[[ return variables?.entity_6?.entity_id; ]]]"
icon: "[[[ return variables?.entity_6?.icon; ]]]"
widget_icon_room_6:
variables:
tap_action:
action: "toggle"
double_tap_action:
action: "more-info"
hold_action:
action: "none"
tap_action:
haptic: "medium"
action: "[[[ return variables?.tap_action?.action ? variables.tap_action.action : 'none'; ]]]"
entity: "[[[ return variables.tap_action.entity; ]]]"
navigation_path: "[[[ return variables.tap_action.navigation_path; ]]]"
url_path: "[[[ return variables.tap_action.url_path; ]]]"
service: "[[[ return variables.tap_action.service; ]]]"
service_data: "[[[ return variables.tap_action.service_data; ]]]"
double_tap_action:
haptic: "heavy"
action: "[[[ return variables?.double_tap_action?.action ? variables.double_tap_action.action : 'none'; ]]]"
entity: "[[[ return variables.double_tap_action.entity; ]]]"
navigation_path: "[[[ return variables.double_tap_action.navigation_path; ]]]"
url_path: "[[[ return variables.double_tap_action.url_path; ]]]"
service: "[[[ return variables.double_tap_action.service; ]]]"
service_data: "[[[ return variables.double_tap_action.service_data; ]]]"
hold_action:
haptic: "success"
action: "[[[ return variables?.hold_action?.action ? variables.hold_action.action : 'none'; ]]]"
entity: "[[[ return variables.hold_action.entity; ]]]"
navigation_path: "[[[ return variables.hold_action.navigation_path; ]]]"
url_path: "[[[ return variables.hold_action.url_path; ]]]"
service: "[[[ return variables.hold_action.service; ]]]"
service_data: "[[[ return variables.hold_action.service_data; ]]]"
size: "15px"
color: "var(--google-grey)"
show_icon: true
show_name: false
styles:
icon:
- width: "50%"
- height: "50%"
- line-height: "0"
- color: "rgba(var(--color-theme),0.2)"
img_cell:
- border-radius: "50%"
- background-color: "rgba(var(--color-theme),0.05)"
grid:
- grid-template-areas: "'i'"
card:
- height: "100%"
- box-shadow: "none"
- padding: "0px"
- border-radius: "50%"
I also made a "mini" version with 6 entities too, so that more rooms fit into the screen. ⚠️ This one is still based on the previous card_room template (it was re-factored a couple of months ago and I haven't added haptics & icons to this one yet, as I'm not using it currently. Ask for it if you need it and I'll do it.)
My template. Click to expand
---
custom_card_room_mini:
template:
- "ulm_language_variables"
variables:
label_use_temperature: true
label_use_brightness: false
color: "var(--google-grey-500)"
show_icon: true
show_name: true
show_label: true
size: "45%"
aspect_ratio: "1.3/1"
label: |-
[[[
if (variables.label_use_temperature) {
return (entity.attributes.current_temperature || entity.attributes.temperature || entity.state || '-') + (entity.attributes.unit_of_measurement || '°C');
} else if (variables.label_use_brightness) {
if (entity.state){
if (entity.state == "off"){
return variables.ulm_off;
} else if (entity.state == "on"){
if (entity.attributes.brightness != null){
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : "0") + "%";
} else {
return variables.ulm_on
}
}
} else {
return variables.ulm_unavailable;
}
} else if (entity.state == "on") {
return variables.ulm_on
} else if (entity.state == "off") {
return variables.ulm_off
} else {
return entity.state
}
]]]
state:
- styles:
custom_fields:
notification:
- border-radius: "50%"
- border: "2px solid var(--card-background-color)"
- width: "24.5px"
- height: "24.5px"
- position: "absolute"
- left: "50%"
- top: "50%"
- transform: "translate(-50%,-50%)"
- margin-top: "35%"
- margin-left: "-35%"
- line-height: 0
- display: "grid"
- background-color: >
[[[
return "rgba(var(--color-red),1)";
]]]
value: "unavailable"
styles:
card:
- border-radius: "20px"
- box-shadow: "var(--box-shadow)"
- padding: "5px"
grid:
- grid-template-areas: "'n n i4 i1' 'l l i5 i2' 'i i i6 i3'"
- grid-template-columns: "1fr 1fr 1fr 1fr"
- grid-template-rows: "1fr 1fr 1fr"
- justify-items: "center"
icon:
- color: "rgba(var(--color-theme),0.2)"
img_cell:
- background-color: "rgba(var(--color-theme),0.05)"
- border-radius: "50%"
- width: "50%"
- height: "66%"
- max-width: "none"
- max-height: "none"
- position: "absolute"
- left: "42%"
- top: "45%"
- transform: "translate(-50%,-50%)"
- margin-top: "25%"
- margin-left: "-25%"
name:
- justify-self: "start"
- align-self: "end"
- font-weight: "bold"
- font-size: "14px"
- margin-left: "10px"
- margin-bottom: "20%"
label:
- justify-self: "start"
- align-self: "start"
- font-weight: "bold"
- font-size: "12px"
- filter: "opacity(40%)"
- margin-left: "10px"
- margin-top: "-20%"
state:
- justify-self: "start"
- font-weight: "bold"
- font-size: "12px"
- filter: "opacity(40%)"
- margin-left: "6px"
custom_fields:
i1:
- border-radius: "50%"
- width: "80%"
- height: "80%"
- line-height: 0
- display: "grid"
i2:
- border-radius: "50%"
- width: "80%"
- height: "80%"
- line-height: 0
- display: "grid"
i3:
- border-radius: "50%"
- width: "80%"
- height: "80%"
- line-height: 0
- display: "grid"
i4:
- border-radius: "50%"
- width: "80%"
- height: "80%"
- line-height: 0
- display: "grid"
i5:
- border-radius: "50%"
- width: "80%"
- height: "80%"
- line-height: 0
- display: "grid"
i6:
- border-radius: "50%"
- width: "80%"
- height: "80%"
- line-height: 0
- display: "grid"
custom_fields:
notification: >
[[[
if (entity.state =='unavailable'){
return `<ha-icon icon="mdi:exclamation" style="width: 50%; height: 50%; color: var(--primary-background-color);"></ha-icon>`
}
]]]
i1:
card:
type: "custom:button-card"
icon: >
[[[
if (variables?.entity_1?.icon) {
return variables.entity_1.icon;
}
]]]
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_1?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_1.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_1; ]]]"
entity: >
[[[
if (variables.entity_1.entity_id) {
return variables.entity_1.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_1; ]]]"
styles:
card:
- display: "none"
i2:
card:
type: "custom:button-card"
icon: >
[[[
if (variables?.entity_2?.icon) {
return variables.entity_2.icon;
}
]]]
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_2?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_2.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_2; ]]]"
entity: >
[[[
if (variables?.entity_2?.entity_id) {
return variables.entity_2.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_2; ]]]"
styles:
card:
- display: "none"
i3:
card:
type: "custom:button-card"
icon: >
[[[
if (variables?.entity_3?.icon) {
return variables.entity_3.icon;
}
]]]
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_3?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_3.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_3; ]]]"
entity: >
[[[
if (variables?.entity_3?.entity_id) {
return variables.entity_3.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_3; ]]]"
styles:
card:
- display: "none"
i4:
card:
type: "custom:button-card"
icon: >
[[[
if (variables?.entity_4?.icon) {
return variables.entity_4.icon;
}
]]]
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_4?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_4.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_4; ]]]"
entity: >
[[[
if (variables?.entity_4?.entity_id) {
return variables.entity_4.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_4; ]]]"
styles:
card:
- display: "none"
i5:
card:
type: "custom:button-card"
icon: >
[[[
if (variables?.entity_5?.icon) {
return variables.entity_5.icon;
}
]]]
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_5?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_5.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_5; ]]]"
entity: >
[[[
if (variables?.entity_5?.entity_id) {
return variables.entity_5.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_5; ]]]"
styles:
card:
- display: "none"
i6:
card:
type: "custom:button-card"
icon: >
[[[
if (variables?.entity_6?.icon) {
return variables.entity_6.icon;
}
]]]
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_6?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_6.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_6; ]]]"
entity: >
[[[
if (variables?.entity_6?.entity_id) {
return variables.entity_6.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_6; ]]]"
styles:
card:
- display: "none"
widget_icon_room:
variables:
tap_action:
action: "toggle"
hold_action:
action: "none"
double_tap_action:
action: "more-info"
tap_action:
haptic: "medium"
action: >
[[[ if (variables?.tap_action?.action) return variables.tap_action.action; else return 'none'; ]]]
entity: "[[[ return variables.tap_action.entity; ]]]"
navigation_path: "[[[ return variables.tap_action.navigation_path; ]]]"
url_path: "[[[ return variables.tap_action.url_path; ]]]"
service: "[[[ return variables.tap_action.service; ]]]"
service_data: "[[[ return variables.tap_action.service_data; ]]]"
hold_action:
haptic: "success"
action: >
[[[ if (variables?.hold_action?.action) return variables.hold_action.action; else return 'none'; ]]]
entity: "[[[ return variables.hold_action.entity; ]]]"
navigation_path: "[[[ return variables.hold_action.navigation_path; ]]]"
url_path: "[[[ return variables.hold_action.url_path; ]]]"
service: "[[[ return variables.hold_action.service; ]]]"
service_data: "[[[ return variables.hold_action.service_data; ]]]"
double_tap_action:
haptic: "heavy"
action: >
[[[ if (variables?.double_tap_action?.action) return variables.double_tap_action.action; else return 'none'; ]]]
entity: "[[[ return variables.double_tap_action.entity; ]]]"
navigation_path: "[[[ return variables.double_tap_action.navigation_path; ]]]"
url_path: "[[[ return variables.double_tap_action.url_path; ]]]"
service: "[[[ return variables.double_tap_action.service; ]]]"
service_data: "[[[ return variables.double_tap_action.service_data; ]]]"
show_icon: true
show_name: false
styles:
grid:
- grid-template-areas: "'i'"
card:
- height: "100%"
- box-shadow: "none"
- padding: "0px"
- border-radius: "50%"
icon:
- width: "50%"
- height: "50%"
- line-height: "0"
- color: "rgba(var(--color-theme),0.2)"
img_cell:
- border-radius: "50%"
- background-color: "rgba(var(--color-theme),0.05)"
size: "15px"
color: "var(--google-grey)"
@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:
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:
- Status of motion in the room (The icon changes to motion if currently active, otherwise it's back to the room's icon)
- Whether lights are on/off
-
Tap to navigate to the room's dashboard (each room has more granular controls of each light/device, and are
subviewdashboards) - Long press to toggle lights
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)...