Trilis29
October 19, 2023, 9:15am
8452
@rhysb Hi, I am trying your animation examples and something is not working right, for example Pouring animation is not working. Seems like ha-icon variable does not respond at all.
type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: red
primary: Radiator
secondary: It's HOT!
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: clip 1s linear infinite;
}
@keyframes clip {
0% {
clip-path: inset(50% 0 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);
}
70% {
box-shadow: 0 0 0 10px transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
Only .shape PING animation is working and ha-icon is not working, any ideas?
Check the updated animations here:
Hi @rhysb ,
i have made a general mushroom - card-mod styling guide that i have posted here . i have linked to your resource on animations from it because it is great. however since it was made a few things have changed with the way that animations are applied and we get a bunch of questions regarding it right now because people want to use your animations. so i hope you dont mind that i have gone through and updated each of your animations below and will be posting them as a reply here.
i will ā¦
Try the updated animations:
Hi @rhysb ,
i have made a general mushroom - card-mod styling guide that i have posted here . i have linked to your resource on animations from it because it is great. however since it was made a few things have changed with the way that animations are applied and we get a bunch of questions regarding it right now because people want to use your animations. so i hope you dont mind that i have gone through and updated each of your animations below and will be posting them as a reply here.
i will ā¦
BMWAddict
October 19, 2023, 9:24am
8456
Thanks Dimitri - see my code above, where would I insert this? I donāt have the mushroom-shape-icon line on either pages?
By using the following code I can get the temp:{{ state_attr(āclimate.keukenā, ācurrent_temperatureā) }}Ā°C
Where would I need to integrate that in your code?
Sorry. Thought you would already have some card mod in there didnt really check.
- type: custom:mushroom-climate-card
entity: climate.keuken
show_temperature_control: true
layout: horizontal
hvac_modes: []
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
{% if state_attr(config.entity, 'temperature') <= 15 %}
--card-mod-icon: mdi:leaf;
--card-mod-icon-color: rgba(var(--rgb-green), 1);
--shape-color: rgba(var(--rgb-green), 0.2) !important;
{% else %}
--card-mod-icon: mdi:fire;
--card-mod-icon-color: rgba(var(--rgb-deep-orange), 1);
--shape-color: rgba(var(--rgb-deep-orange), 0.2) !important;
{% endif %}
}
Keep in mind there is a big difference between the current_temperature and temperature attributes. The current temp is unsurprisingly the temp it currently is in the room, not what it is set to (what you asked for in your first post is when set to 15). Temperature attribute is the temp target you have set.
You will need to post something you have tried and isnt working. Unlikely that someone will do the work for you
But a good starting point would be a mushroom template card and a template chip inside of a stack in card together.
BMWAddict
October 19, 2023, 9:42am
8459
hi @dimitri.landerloos thanks for your help.
Since the temp link on the main dashboard has no function I changed it to:
- type: custom:mushroom-template-card
primary: Temp
secondary: ''
icon: mdi:home
entity: climate.home
layout: vertical
fill_container: true
But when changing it to:
- type: custom:mushroom-template-card
primary: Temp
secondary: ''
icon: mdi:home
entity: climate.home
layout: vertical
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
{% if state_attr(climate.keuken, 'current_temperature') <= 15 %}
--card-mod-icon: mdi:leaf;
--card-mod-icon-color: rgba(var(--rgb-green), 1);
--shape-color: rgba(var(--rgb-green), 0.2) !important;
{% else %}
--card-mod-icon: mdi:fire;
--card-mod-icon-color: rgba(var(--rgb-deep-orange), 1);
--shape-color: rgba(var(--rgb-deep-orange), 0.2) !important;
{% endif %}
}
It fails to work. The code starting at mushroom-shape-icon is also shown in blue and the rest in orange. What am I doing wrong?
If you are going to use an entity id in this section instead of config.entity you need to wrap it in quotes:
{% if state_attr('climate.keuken', 'current_temperature') <= 15 %}
BMWAddict
October 19, 2023, 9:51am
8461
Awesome that was it - thank you @dimitri.landerloos ! Now the only issue with this is, I can only define ONE climate attr and I want the main dashboard to look at all climate attributes and then define if they are above or below 15.
A whole bunch of or would do it:
{% if state_attr('climate.keuken', 'current_temperature') <= 15 or state_attr('climate.bijkeuken', 'current_temperature') <= 15 or state_attr('climate.hofdslaapk', 'current_temperature') <= 15 %}
etcā¦
BMWAddict
October 19, 2023, 9:55am
8463
Can you copy and paste part of the code in here so Iām doing it right?
- type: custom:mushroom-template-card
primary: Temp
secondary: ''
icon: mdi:home
entity: climate.home
layout: vertical
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
{% if state_attr('climate.woonkamer', 'current_temperature') <= 15 %}
--card-mod-icon: mdi:leaf;
--card-mod-icon-color: rgba(var(--rgb-green), 1);
--shape-color: rgba(var(--rgb-green), 0.2) !important;
{% else %}
--card-mod-icon: mdi:fire;
--card-mod-icon-color: rgba(var(--rgb-deep-orange), 1);
--shape-color: rgba(var(--rgb-deep-orange), 0.2) !important;
{% endif %}
}
- type: custom:mushroom-template-card
primary: Temp
secondary: ''
icon: mdi:home
entity: climate.home
layout: vertical
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
{% if state_attr('climate.keuken', 'current_temperature') <= 15 or state_attr('climate.bijkeuken', 'current_temperature') <= 15 or state_attr('climate.hofdslaapk', 'current_temperature') <= 15 %}
--card-mod-icon: mdi:leaf;
--card-mod-icon-color: rgba(var(--rgb-green), 1);
--shape-color: rgba(var(--rgb-green), 0.2) !important;
{% else %}
--card-mod-icon: mdi:fire;
--card-mod-icon-color: rgba(var(--rgb-deep-orange), 1);
--shape-color: rgba(var(--rgb-deep-orange), 0.2) !important;
{% endif %}
}
Keep in mind i didnt put in all of the or statements, just a few to illustrate.
BMWAddict
October 19, 2023, 10:25am
8465
Perfect - thank you @dimitri.landerloos
Iāve tested it and it works great. Iāve also changed current temp to set temperature as this is better. The room obviously reaches a certain temp and it stays above 15c, even if the heater is off. So it should show green.
Now one more request - sorry to keep you busy with this. Do you think we can add a nice button to the room cards (see screenshot below). That:
Toggles set hvac mode to 20C or 15c ?
Color of icon is based on 15c or 20c toggle (we could use the previous code above?)
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Woonkamer
secondary: '{{ state_attr(''climate.woonkamer'', ''current_temperature'') }}Ā°C'
icon: mdi:sofa-outline
entity: light.woonkamerlampen
badge_color: ''
icon_color: |-
{% if is_state('light.woonkamerlampen', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/woonkamer
- type: custom:mushroom-template-card
primary: Speelkamer
secondary: '{{ state_attr(''climate.speelkamer'', ''current_temperature'') }}'
icon: mdi:teddy-bear
entity: light.speelkamerlampen
badge_color: ''
icon_color: |-
{% if is_state('light.speelkamerlampen', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/speelkamer
This is the developer tools output of the climate_woonkamer entity. Looks like we need to alter target_heat_temperature to 20 and setpoint mode to : TemporaryOverride (iāve modified the temp via home assistant hvac control and these two items changed)
Epic! This worked - thanks so much!
1 Like
FedeL16
October 19, 2023, 11:08am
8467
Hello,
Iām trying to build this transparent menu on my phone dashboard
Have you ideas about the code yaml?
4 Likes
Have the tap action that i have added to the chip call a script that does what you want it to do.script.yourscriptid to your script.
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Woonkamer
secondary: '{{ state_attr(''climate.woonkamer'', ''current_temperature'') }}Ā°C'
icon: mdi:sofa-outline
entity: light.woonkamerlampen
badge_color: ''
icon_color: |-
{% if is_state('light.woonkamerlampen', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/woonkamer
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:thermostat
icon_color: deep-orange
tap_action:
action: call-service
service: script.yourscriptid
data: {}
target: {}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-deep-orange), 0.2) !important;
}
alignment: end
card_mod:
style: |
ha-card {
position: absolute;
bottom: 0px;
right: 5px;
}
- type: custom:mushroom-template-card
primary: Speelkamer
secondary: '{{ state_attr(''climate.speelkamer'', ''current_temperature'') }}'
icon: mdi:teddy-bear
entity: light.speelkamerlampen
badge_color: ''
icon_color: |-
{% if is_state('light.speelkamerlampen', 'on') %}
orange
{% endif %}
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/speelkamer
you can also still format the chip in the colors that you want etc.
Fugazzy
October 19, 2023, 12:13pm
8469
That is a really nice solution. Could you explain how to do that and paste perhaps the code? Thank you!
I created the rest-sensor but it does not give me the list of rooms?
kbrown01
October 19, 2023, 5:10pm
8470
Here is the automation that turns off all the input booleans that are on when the vacuum changes state to āreturningā:
alias: Reset Vacuum Rooms
description: ""
trigger:
- platform: state
entity_id:
- vacuum.roborock_s7
to: returning
condition: []
action:
- service: input_boolean.turn_off
data: {}
target:
entity_id: >
{% set vacrooms = namespace(boolid=[]) %} {% for rooms in
state_attr('sensor.roborock_rooms','rooms') -%}
{% if is_state(rooms.boolean,'on') %}
{% set room = rooms.boolean %}
{% set vacrooms.boolid = vacrooms.boolid + [room] %}
{% endif %}
{%- endfor %} {{ vacrooms.boolid }}
mode: single
I am adding some mushroom animations today and will post the full code to the page in a bit
3 Likes
kbrown01
October 19, 2023, 9:08pm
8471
Well you created the REST sensor, did you also create the corresponding JSON file that the REST sensor loads? I should note that is becoming off topic for this thread, you should just PM me and I can help you there.
