It is possible, but you will need to make a template weather provider from all of your different sensor data.
Then just use this weather entity in the card after it has been created.
1 Like
Thanks for your answer, i did find that i can put emojis but i didnt like it. Is there any way to put mdi icons?
Not that i am aware no.
Can you give me the code to your card that has the icons how you like it? I can then try and see if i can combine it with the graph 
Sure here it is.
type: custom:button-card
entity: sensor.aqara_humi_outdoor_1
show_icon: false
name: Υπνοδωμάτιο Θερμοκρασία
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: '-3%'
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff33ff;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.aqara_humi_outdoor_1'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.aqara_humi_outdoor_2'].state}%</span>`
]]]
graph:
card:
type: custom:mini-graph-card
entities:
- entity: sensor.aqara_humi_outdoor_1
name: Temperature
color: '#ff33ff'
- entity: sensor.aqara_humi_outdoor_2
name: Humidity
color: '#3399ff'
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
card_mod:
style: |
ha-card {
background: none;
border-style: none;
margin-top: -20px;
}
Does this work for your purposes?
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.office_temperature_humidity_humidity
show_icon: false
name: Δωματιο
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 65%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: '-3%'
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff33ff;">
</ha-icon><span style="font-size:120%; font-weight: 300;">
${states['sensor.office_temperature_humidity_temperature'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:120%; font-weight: 300; text-align: center;">
${states['sensor.office_temperature_humidity_humidity'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.office_temperature_humidity_temperature
name: Temperature
color: '#ff33ff'
- entity: sensor.office_temperature_humidity_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
Hey Dimitri,
I have tried to replicate your card but I cannot get it to blend the way it does in yours.
Could you please point me where is the mistake?
Kind regrads
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Bathroom
secondary: >-
🌡️ {{ states('sensor.bathroom_temp_temperature') | round
(0)}}°C | 💦 {{
states('sensor.bathroom_temp_humidity') | round (0)}}%
picture: /local/icons/custom_icons/bathroom.png
entity: light.bathroom
badge_icon: >-
{% if is_state('binary_sensor.bathroom_motion_occupancy', 'on') %}
mdi:motion-sensor
{% elif is_state ('binary_sensor.bathroom_motion_occupancy',
'off') %}
{% endif %}
badge_color: >-
{% if is_state('binary_sensor.bathroom_motion_occupancy', 'on') %}
red
{% elif is_state ('binary_sensor.bathroom_motion_occupancy',
'off') %}
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/bathroom
hold_action:
action: fire-dom-event
haptic: light
browser_mod:
service: browser_mod.more_info
data:
entity: light.bathroom
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
ha-card {
z-index: 1;
--card-primary-font-size: 30px;
--card-primary-font-weight: normal;
--card-secondary-font-size: 12px;
--card-secondary-font-weight: bold;
--icon-symbol-size: 0.7em;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.bathroom_temp_temperature
name: Temperature
color: '#ff33ff'
- entity: sensor.bathroom_temp_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 1
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
labels: false
labels_secondary: false
points: false
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
card_mod:
style: |
ha-card {
height: 80 px;
{% if states('light.bathroom') == 'on' %}
box-shadow: 0px 0px 5px 5px rgb( 255 215 102 / 0.5) !important;
{% endif %}
}
view_layout:
grid-area: bathroom
Works for me. Do you have card-mod installed?
Is it maybe that you have it in another grid or something?
I have tried without Grid and its stays same.
Yes, I have card-mod installed.
Cannot figure out what causing it not to work
The previous card looks nicer, but I will compromise with this one. Thank you very much for your time.
What theme do you have installed?
It looks like Firefox issue. On iPhone it looks same as yours.
It is possible the icons to be centerded with the values? I want to move them a lil bit up
Easiest way was to adjust the text sizes actually.
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: sensor.office_temperature_humidity_humidity
show_icon: false
name: Δωματιο
styles:
card:
- border-style: none
- box-shadow: 0px 0px 10px -9px black
custom_fields:
temp:
- filter: opacity(100%)
- justify-self: start
- margin-left: 10px
- margin-top: 20px
- padding-bottom: 10%
- font-size: 95%
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: '-3%'
icon:
- width: 25px
- color: auto
name:
- font-size: 87%
- font-weight: var(--mcg-title-font-weight, 500)
- justify-self: start
- margin-top: 6px
- margin-left: 12px
- opacity: 0.65
grid:
- grid-template-areas: '"n n" "temp temp" "graph graph"'
- grid-template-columns: 1fr min-content
- grid-template-rows: 1fr min-content min-content min-content
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width:18px; height: 18px; color:#ff33ff;">
</ha-icon><span style="font-size:80%;">
${states['sensor.office_temperature_humidity_temperature'].state}°C </span>
<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: #3399ff;">
</ha-icon><span style="font-size:80%; text-align: center;">
${states['sensor.office_temperature_humidity_humidity'].state}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.office_temperature_humidity_temperature
name: Temperature
color: '#ff33ff'
- entity: sensor.office_temperature_humidity_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
6 Likes
Worked! thanks.
Thank its work now but the new yaml its totally different from the old version,
Yes? In order to fix things we have to change things? Not sure what you are getting at?
1 Like
Hi Galaxy,
can you please post your final implementation. I am trying to do something very similar, but I still can see a line before the chips:
You can just do it through the entity itself in the entities settings.
But if you have to get a specific amount without changing the settings you can use this:
{{ '{0:.2f}'.format( (states('sensor.bedroom_temperature_humidity_temperature')|float))}}°C
Ill leave it to you on how to add that to the button card.