Are you on a mushroom theme?
I had to manually remove the minimalist themes. Fully removing UI-Minimalist is not clear cut.
Got an EV card with picture of the car and % of the battery.
Under that i got some sensors showing information. I saw someone that had an charging animation and a %bar for the batteryand was wondering for so help setting up that?
tried to modify some template cards but struggling
show_state: true
show_name: false
camera_view: auto
type: picture-entity
entity: sensor.volvo_yv1xzedv5p2003315_battery_charge_level
image: /local/xc40.png
name: 'Batteristatus:'
type: horizontal-stack
cards:
- type: entity
entity: sensor.volvo_yv1xzedv5p2003315_electric_range
name: Gjettometer
- type: entity
entity: sensor.volvo_yv1xzedv5p2003315_estimated_charging_time
name: Ladetid
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: input_boolean.smartlading
icon_height: 50px
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: sensor.volvo_yv1xzedv5p2003315_washer_fluid_warning
state: TOO_LOW
chip:
type: entity
entity: sensor.volvo_yv1xzedv5p2003315_washer_fluid_warning
content_info: name
icon_color: red
name: SpylervĂŠske
- type: conditional
conditions:
- condition: state
entity: sensor.volvo_yv1xzedv5p2003315_service_warning_status
state_not: NO_WARNING
chip:
type: entity
entity: sensor.volvo_yv1xzedv5p2003315_service_warning_status
icon_color: red
name: Service
content_info: name
- type: conditional
conditions:
- condition: state
entity: sensor.volvo_yv1xzedv5p2003315_tyre_front_left
state_not: NO_WARNING
- condition: state
entity: sensor.volvo_yv1xzedv5p2003315_tyre_front_right
state_not: NO_WARNING
- condition: state
entity: sensor.volvo_yv1xzedv5p2003315_tyre_rear_left
state_not: NO_WARNING
- condition: state
entity: sensor.volvo_yv1xzedv5p2003315_tyre_rear_right
state_not: NO_WARNING
chip:
type: entity
entity: sensor.volvo_yv1xzedv5p2003315_tyre_front_left
name: Lufttrykk
content_info: name
icon_color: red
type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: switch.volvo_yv1xzedv5p2003315_climate_status
fill_container: true
layout: vertical
icon_color: red
name: AC
tap_action:
action: toggle
- type: custom:mushroom-lock-card
entity: lock.volvo_yv1xzedv5p2003315_lock_status
name: LĂ„s
layout: vertical
fill_container: true
- type: custom:mushroom-entity-card
entity: button.volvo_yv1xzedv5p2003315_update_data
name: Hent data
fill_container: true
layout: vertical
tap_action:
action: call-service
service: button.press
target:
entity_id: button.volvo_yv1xzedv5p2003315_update_data
1 Like
Umm, I think there is a catch, but how can I fix it?
Remove the card_mod and use this
type: custom:mushroom-template-card
primary: Keuken
secondary: '{{ states(''sensor.temperatuur_ruimte_taster_woonkeuken_0_3'') }} °C'
icon: mdi:knife
entity: light.lampen_woonkeuken_0_3
badge_color: |-
{% if is_state('switch.radiator_slaapkamer_2_4', 'on') %}
red
{% else %}
grey
{% endif %}
icon_color: |-
{% if is_state('light.lampen_woonkeuken_0_3', 'on') %}
orange
{% endif %}
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: /lovelace-keuken/home
layout: vertical
fill_container: true
badge_icon: |-
{% if is_state('switch.radiator_slaapkamer_2_4', 'on') %}
mdi:fire
{% else %}
mdi:fire-off
{% endif %}
The icon for else you can change to a different icon off course.
Not an issue, just checking off thingsâŠwill follow up again tomorrow.
@Faecon
or you could directly call the fan speed service:
tap_action:
action: call-service
service: fan.turn_on
data:
percentage: 50
target:
entity_id: fan.air_purifier_fan
2 Likes
100%, but i wasnât ever sure what services to use with the device. Wasnât sure if it was a fan or a climate device. I use scripts because I can assign automations based on their execution. I do appreciate the input!!.
1 Like
I used the other method, but thanks for bringing another solution !
Hi @crazytok my code below for an almost equal card.
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:home-floor-g
icon_color: |
{% if is_state(entity, 'on') %}
#03A9F4
{% else %}
grey
{% endif %}
primary: Beneden
secondary: '{{ states(''sensor.mean_temp_ground_floor'')|round(2) }}°C'
layout: horizontal
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/ground-floor
double_tap_action:
action: navigate
navigation_path: /lovelace-smartphone/ground-floor
hold_action:
action: toggle
badge_icon: |
{% if is_state('binary_sensor.all_occupancy_ground_floor', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: |
{% if is_state('binary_sensor.all_occupancy_ground_floor', 'on') %}
orange
{% else %}
grey
{% endif %}
fill_container: false
multiline_secondary: false
entity: light.lights_downstairs
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;
}
ha-card {
background: none;
}
style: |
mushroom-badge-icon {
left: 110px;
top: 25px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.lights_downstairs
tap_action:
action: toggle
icon: mdi:lightbulb
hold_action:
action: more-info
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% else %}
grey
{% endif %}
double_tap_action:
action: none
- type: template
entity: switch.all_sockets_ground_floor_inside
tap_action:
action: toggle
icon: mdi:power-socket-fr
hold_action:
action: more-info
icon_color: |-
{% if is_state(entity, 'on') %}
green
{% else %}
grey
{% endif %}
double_tap_action:
action: none
- type: template
entity: media_player.speakers_downstairs
icon: mdi:music
icon_color: |-
{% if not is_state(entity, 'off') %}
#03A9F4
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: template
tap_action:
action: more-info
entity: binary_sensor.all_smoke_detectors_ground_floor
icon: mdi:smoke-detector-variant
hold_action:
action: more-info
icon_color: |-
{% if is_state(entity, 'on') %}
red
{% else %}
grey
{% endif %}
double_tap_action:
action: more-info
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 80%;
top: -170px;
background: none;
--chip-border-width: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.all_window_contact_ground_floor
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: none
icon: |-
{% if is_state(entity, 'on') %}
mdi:window-open
{% else %}
mdi:window-closed
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
red
{% else %}
grey
{% endif %}
card_mod:
style:
.: |
ha-card.type-template {
background: none;
}
- type: template
entity: binary_sensor.all_door_contact_ground_floor
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: none
icon: |-
{% if is_state(entity, 'on') %}
mdi:door-open
{% else %}
mdi:door-closed
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
red
{% else %}
grey
{% endif %}
card_mod:
style:
.: |
ha-card.type-template {
background: none;
}
card_mod:
style:
.: |
ha-card {
width: 66px;
top: -250px;
background: none;
--chip-border-width: 0;
margin-left: 55%;
}
card_mod:
style: |
ha-card {
height: 178px;
margin-left: auto;
margin-right: auto;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.lights_upstairs
icon: mdi:home-floor-1
icon_color: |
{% if is_state(entity, 'on') %}
#03A9F4
{% else %}
grey
{% endif %}
primary: Boven
secondary: '{{ states(''sensor.mean_temp_first_floor'')|round(2) }}°C'
layout: horizontal
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/first-floor
double_tap_action:
action: navigate
navigation_path: /lovelace-smartphone/first-floor
hold_action:
action: toggle
badge_icon: |
{% if is_state('binary_sensor.all_occupancy_first_floor', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: |
{% if is_state('binary_sensor.all_occupancy_first_floor', '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;
}
ha-card {
background: none;
}
style: |
mushroom-badge-icon {
left: 110px;
top: 25px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.lights_upstairs
tap_action:
action: toggle
icon: mdi:lightbulb
hold_action:
action: toggle
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% else %}
grey
{% endif %}
- type: template
entity: media_player.speakers_upstairs
icon: mdi:music
icon_color: |-
{% if not is_state(entity, 'off') %}
#03A9F4
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: template
tap_action:
action: more-info
entity: binary_sensor.all_smoke_detectors_first_floor
icon: mdi:smoke-detector-variant
hold_action:
action: more-info
icon_color: |-
{% if is_state(entity, 'on') %}
red
{% else %}
grey
{% endif %}
double_tap_action:
action: more-info
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 80%;
top: -170px;
background: none;
--chip-border-width: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.all_window_contact_first_floor
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: none
icon: |-
{% if is_state(entity, 'on') %}
mdi:window-open
{% else %}
mdi:window-closed
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
red
{% else %}
grey
{% endif %}
card_mod:
style:
.: |
ha-card.type-template {
background: none;
}
card_mod:
style:
.: |
ha-card {
width: 66px;
top: -205px;
background: none;
--chip-border-width: 0;
margin-left: 55%;
}
card_mod:
style: |
ha-card {
height: 178px;
margin-left: auto;
margin-right: auto;
}
8 Likes
Hi, can you share with me code for washmashine looks nice.
Chris
How would it be possible to have an icon on the right side, where I can show if the smartplug is on or off (colorized)?
This is the config:
type: custom:mushroom-template-card
icon: mdi:washing-machine
entity: switch.wasmachine_smartplug
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Active Power
content:
type: custom:history-explorer-card
header: Wasmachine
defaultTimeRange: 24h
decimation: true
graphs:
- type: line
entities:
- entity: sensor.wasmachine_smartplug_power
color: orange
icon_color: |-
{% if states("sensor.wasmachine_smartplug_power") | float(0) > 5 %}
blue
{% endif %}
primary: Was
secondary: >
{{ states('sensor.energie_vandaag_wasmachine')|float(0) | round(2) }}
kWh
layout: horizontal
card_mod:
style: |
ha-state-icon {
{{'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if states('sensor.wasmachine_smartplug_power') | float > 5 }}
transform-origin: 50% 110%;
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
And I would like to have an icon (mdi:power-plug or whatever) on the right upper side. Green when it is off, red when it is on.
In the end I am using 3 of these in a horizontal stack, so I would like to end up as the following:
Thanks for the help!
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Ventilatorsnelheid
icon: mdi:fan
icon_color: >
{% if states("climate.eetplaats") == 'off' %}
[84, 84, 84]
{% if state_attr("climate.eetplaats",'fan_mode') == '1' %}
[200, 62, 77]
{% elif state_attr("climate.eetplaats",'fan_mode') == '2' %}
[200, 62, 77]
{% elif state_attr("climate.eetplaats",'fan_mode') == '3' %}
[200, 62, 77]
{% elif state_attr("climate.eetplaats",'fan_mode') == '4' %}
[200, 62, 77]
{% elif state_attr("climate.eetplaats",'fan_mode') == '5' %}
[200, 62, 77]
{% elif state_attr("climate.eetplaats",'fan_mode') == 'silence' %}
[102, 102, 255]
{% else %}
[84, 84, 84]
{% endif %}
If the first state is off, i want the icon 84,84,84. If not I want the other state attribute options. How do I do that ?
{% if states("climate.eetplaats") == 'off' %}
[84, 84, 84]
{% else %}
{% if state_attr("climate.eetplaats",'fan_mode') == '1' %}
[200, 62, 77]
{% elif state_attr("climate.eetplaats",'fan_mode') == '2' %}
[200, 62, 77]
{% elif state_attr("climate.eetplaats",'fan_mode') == '3' %}
[200, 62, 77]
{% elif state_attr("climate.eetplaats",'fan_mode') == '4' %}
[200, 62, 77]
{% elif state_attr("climate.eetplaats",'fan_mode') == '5' %}
[200, 62, 77]
{% elif state_attr("climate.eetplaats",'fan_mode') == 'silence' %}
[102, 102, 255]
{% else %}
[84, 84, 84]
{% endif %}
{% endif %}
was the solution
Thanks for that, the ha-card style on custom:mushroom-chips-card worked
I guess I was trying with the wrong margin.
Thanks again.
1 Like
instead of a nested if you could also just do:
icon_color: >
{% if states("climate.eetplaats") == 'off' %}
[84, 84, 84]
{% elif state_attr("climate.eetplaats",'fan_mode') == '1' %}
[200, 62, 77]
{% elif state_attr("climate.eetplaats",'fan_mode') == '2' %}
[200, 62, 77]
{% elif state_attr("climate.eetplaats",'fan_mode') == '3' %}
[200, 62, 77]
{% elif state_attr("climate.eetplaats",'fan_mode') == '4' %}
[200, 62, 77]
{% elif state_attr("climate.eetplaats",'fan_mode') == '5' %}
[200, 62, 77]
{% elif state_attr("climate.eetplaats",'fan_mode') == 'silence' %}
[102, 102, 255]
{% else %}
[84, 84, 84]
{% endif %}
Hi guys,
I see so many amazing things here that I donât know what to do heheh.
I need your help.
-
How can i delete the icon in this chip? Since to remove the % I need to create a new sensor⊠I think
-
I want to show the timer, when itâs enabled on the same column, bellow the humidity but it have so much padding this chip and timer⊠possible? Some advise please?
type: custom:stack-in-card
mode: vertical
keep:
margin: false
card_mod:
style: |
ha-card {
overflow: visible !important;
}
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: thermostat
entity: climate.living_room_ac
features:
- style: icons
hvac_modes:
- cool
- 'off'
- heat
- heat_cool
type: climate-hvac-modes
show_current_as_primary: true
card_mod:
style: |
ha-card {
border: none;
border-right: 1px solid #333;
}
- type: thermostat
features:
- style: icons
hvac_modes:
- cool
- 'off'
- heat
- heat_cool
type: climate-hvac-modes
entity: climate.office_ac
show_current_as_primary: true
card_mod:
style: |
ha-card {
border: none;
}
card_mod:
style: |
ha-card {
border: none;
margin-bottom: none !important
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 20% 30% 20% 30%
margin: 0px 0px 0px 0px
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 100%
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.living_room_ac_relative_humidity_measurement
alignment: center
card_mod:
style: |
ha-card {
--chip-padding: 0 !important;
--chip-border-width: 0 !important;
--chip-height: 44px;
}
- type: custom:timer-bar-card
entity: timer.living_room_ac_timer
layout: full_row
text: null
text_width: 0px
bar_height: 3px
bar_background: '#fff'
bar_foreground: '#ffc107'
bar_radius: 3px
icon: mdi:progress-clock
- type: custom:mushroom-select-card
entity: input_select.living_room_ac_select
icon: mdi:progress-clock
name: Living Room AC Timer
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style: |
ha-card {
border: none;
}
.type-custom-mushroom-select-card {
padding: 0 10px 0 0;
}
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 100%
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.office_ac_relative_humidity_measurement
alignment: center
card_mod:
style: |
ha-card {
--chip-padding: 0 !important;
--chip-border-width: 0 !important;
--chip-height: 44px;
}
- type: custom:timer-bar-card
entity: timer.office_ac_timer
layout: full_row
text: null
text_width: 0px
bar_height: 3px
bar_background: '#fff'
bar_foreground: '#ffc107'
bar_radius: 3px
icon: mdi:progress-clock
- type: custom:mushroom-select-card
entity: input_select.office_ac_select
icon: mdi:progress-clock
name: Office AC Timer
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style: |
ha-card {
border: none;
}
.type-custom-mushroom-select-card {
padding: 0 10px 0 0;
}
This was the solution! Thank you much @SmartNorman. I had modified this from @dimitri.landerloos code mushroom inspired battery card, but was never able to get that part of the code working.
When I add a style using card mod to the chips card it gets automatically erased next time I edit the card, is this a known issue?
This is the code in the raw editor:
- type: custom:mushroom-chips-card
card_mod:
style: |-
ha-card {
margin-top: -20px;
margin-bottom: -10px;
}
chips:
- type: conditional
conditions: []
chip:
type: entity
entity: sensor.iphone_steps
content_info: state
card_mod:
style: |
ha-card {
box-shadow: none !important;
}
If I edit this card in the dashboard, it shows this code:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions: []
chip:
type: entity
entity: sensor.iphone_steps
content_info: state
card_mod:
style: |
ha-card {
box-shadow: none !important;
}
alignment: center
If I save it now, it will wipe the card mod properties. It only seems to happen with chip cards. Is there a way to avoid this?
Yes, appreciate the clarification. I had noticed the duplicate lines and made the needed changes.
I think I have to nest it. Because if the entity is offline, the last active attribute stays active.