Hi! Here is my yaml:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
primary: Thermostat
secondary: |
Currently: {{ state_attr('climate.3family_room', 'hvac_action') }}
icon: |-
{% set mode = states('climate.3family_room') %}
{% if mode == 'cool' %}
mdi:snowflake
{% else %}
mdi:fire
{% endif %}
icon_color: |-
{% set status = state_attr('climate.3family_room','hvac_action') %}
{% if status == 'cooling' %}
blue
{% elif status == 'heating' %}
orange
{% else %}
grey
{% endif %}
tap_action: none
style: |
ha-card {
padding-bottom: 1px !important;
}
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-xl: 28px;
--st-font-size-m: 20px;
--st-font-size-title: 20px;
--st-font-size-sensors: 14px;
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1px;
}
entity: climate.3family_room
header: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
decimals: '0'
step_size: '1'
control: true
- type: custom:mushroom-chips-card
alignment: justify
chips:
- type: entity
entity: sensor.3family_room_humidity
icon: mdi:water-percent
icon_color: cyan
- type: entity
entity: sensor.3family_room_temperature
icon: mdi:home-thermometer
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
- type: custom:mushroom-chips-card
alignment: justify
chips:
2 Likes
I think this is to do with the way the simple-thermostat card displays buttons for controlling the thermostat (and depends on what controls are supported by the thermostat). So the solution should lie with adjusting that ‘control’ setting. Have a look at this section of the card’s config options. By playing around with the options you should be able to make the empty ‘buttons’ go away (I think…).
1 Like
berkans
June 2, 2022, 10:40pm
1026
Hi Piitaya.
I have a future request.
I have automations which are connected to the booleans.
I tried to add pictures but unfotunately when displaying the entities with pictures it is not possible to see their state. Within mushroom entity card the only way to do that is to display state as a secondary info like that :
ı would love to see their state like maybe in black and white when they are off. Currently to colorise states of specific entities, the only thing I can do is to use mdi icons.
I can do that with using picture entites but it then doesn’t suit my minimal setup.
Hope this will be available in the near future.
piitaya
June 3, 2022, 7:17am
1028
Hi
You definitely have to add configurtion details to the swiper card. In an unconfigured way you’ll get like nothing than a centered card.
As I only dived into this swipe-card topic to steal ideas -
type: custom:swipe-card
card_width: 155px
start_card: 2
parameters:
effect: cover slide
grabCursor: true
centeredSlides: true
slidesPerView: auto
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Home
secondary: ''
icon: mdi:home
icon_color: blue
tap_action: null
action: navigate
navigation_path: '1'
layout: vertical
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Licht
secondary: ''
icon: mdi:lightbulb
icon_color: yellow
layout: vertical
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Jalousie
secondary: ''
icon: mdi:window-shutter
icon_color: green
layout: vertical
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Sonos
secondary: ''
icon: mdi:cast-variant
icon_color: red
layout: vertical
The accompanying thread for the swiper-card should give you more ideas.
I created a card with swiper , that lets you flick through multiple cards.
You can use (almost?) all options of swiper, these can be found here .
More info can be found in the repo: https://github.com/bramkragten/custom-ui/tree/master/swipe-card
A few config examples:
[image]
Full width cards with scrollbar:
- type: custom:swipe-card
parameters:
spaceBetween: 8
scrollbar:
hide: false
draggable: true
snapOnRelease: true
…
Aunt Edith says:
mhoogenbosch
June 3, 2022, 6:17pm
1030
Could you share your code for this, looks really nice!
1 Like
Sure thing!
type: horizontal-stack
cards:
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
primary: Thermostat
secondary: |
Currently: {{ state_attr('climate.3family_room', 'hvac_action') }}
icon: |-
{% set mode = states('climate.3family_room') %}
{% if mode == 'cool' %}
mdi:snowflake
{% else %}
mdi:fire
{% endif %}
icon_color: |-
{% set status = state_attr('climate.3family_room','hvac_action') %}
{% if status == 'cooling' %}
blue
{% elif status == 'heating' %}
orange
{% else %}
grey
{% endif %}
tap_action: none
style: |
ha-card {
padding-bottom: 1px !important;
}
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-xl: 28px;
--st-font-size-m: 20px;
--st-font-size-title: 20px;
--st-font-size-sensors: 14px;
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1px;
}
entity: climate.3family_room
header: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
decimals: '0'
step_size: '1'
control:
- hvac
- type: custom:mushroom-chips-card
alignment: justify
chips:
- type: entity
entity: sensor.3family_room_humidity
icon: mdi:water-percent
icon_color: cyan
- type: entity
entity: sensor.3family_room_temperature
icon: mdi:home-thermometer
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
- type: custom:mushroom-chips-card
alignment: justify
chips:
- type: template
entity: climate.3family_room
content: |
{{ state_attr(entity, 'fan_mode') }}
icon: mdi:fan
icon_color: cyan
- type: entity
entity: weather.home
icon: mdi:cloud
icon_color: cyan
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
3 Likes
Flo.C
June 3, 2022, 10:54pm
1032
Thank you. But I tried different configurations. The cards stayed always the same size. No matter if I used “px” or “%”. Also removing horizontal-Stack before each card didn’t changed anything.
weapons
June 3, 2022, 11:16pm
1033
Hi everyone.
in real-time without having to edit the zones in the config yaml file.
1 Like
rhysb
June 4, 2022, 3:28am
1034
I thought I would give back and share my Mushroom graph card. It uses stack-in-card to combine mushroom-entity-card with mini-graph-card. This is the dual version, but it is easy to modify for a single graph.
type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.family_room_sensor_temperature
primary_info: state
secondary_info: name
name: Temperature
icon_color: green
- type: custom:mushroom-entity-card
entity: sensor.family_room_sensor_humidity
primary_info: state
secondary_info: name
name: Humidity
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.family_room_sensor_temperature
name: Temperature
color: var(--green-color)
- entity: sensor.family_room_sensor_humidity
name: Humidity
color: var(--blue-color)
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
Edit 13-1-23: Change to vertical-stack-in-card to remove border lines.
77 Likes
mhoogenbosch
June 4, 2022, 7:05am
1035
I got it almost working, except for the “Currently”.
secondary: |
Currently: {{ state_attr('climate.kantoor', 'hvac_action') }}
I don’t exactly know what it does, but my cliemate unit doens’t have ‘hvac_action’ as an attribtue:
So I think i have to do something with ‘state’, could you help me out?
As you can see in your attributes your state is ‘hvac_modes’ and not like davidnestico ‘hvac_action’. Change that in your template to that.
1 Like
mhoogenbosch
June 4, 2022, 7:24am
1037
Yes tried that but it then lists the value of that. So I get an enumeration of the array.
I’m not sure if you do what I said or if I get what you say.
{{ state_attr('climate.kantoor', 'hvac_modes') }}
Should get you whatver state attribute you hvac has right now.
If you’re fine with the state for itself you could just use:
{{ states('climate.kantoor') }}
Check these outcomes in Developer Tools and maybe have another look to understand what what means.
mhoogenbosch
June 4, 2022, 9:07am
1039
just the state is perfect for me. Thanks. and I will fiddle with the templating a bit just de educate myself a bit, thanks!
What I mean by the first part is the following, if I do:
{{ state_attr('climate.kantoor', 'hvac_modes') }}
This shows:
Never the less; it is solved. tnx
Do you have a nest thermostat? That’s what I have so it displays that.
Have you tried the code a posted?
Here are two screeshots with just the code from above an changed px.
300px:
150px:
The person card is not templatable but you can pretend to do it.
I’ve built this card combination the other day that should fit your needs:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.YOU #<-- your person entity here
use_entity_picture: true
layout: vertical
hold_action:
action: none
hide_name: true
hide_state: true
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: template
content: >-
{{ state_attr('sensor.hd1913_geocoded_location', 'locality') }} #<--your geocode entity
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
The green icon is still depending on the home/away status for your person entity. And of course you could mix up the template to show special state for ‘home’.
6 Likes
weapons
June 4, 2022, 7:33pm
1044
You are awesome man. It worked like a charm. Thank you very much for your help.
- maybe this code will get you a base to tinker around:
