Is it possible to utilize the user variable in an action? This doesnât work.
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Launch Navigation
secondary: ''
icon: mdi:target
layout: horizontal
icon_color: red
tap_action:
action: call-service
service: script.launch_google_maps
data:
person: test
users_phone: '{{ user }}'
card_mod:
style: |
ha-card {
width: 155px;
margin-left: auto;
margin-right: auto;
background: rgba(var(--rgb-red), 0.1);
margin-bottom: 12px !important;
}
When I use the media player card, it only displays the song name. How can I show the artist? Iâm using Squeezebox.
type: custom:mushroom-media-player-card
entity: media_player.lms
use_media_info: true
This is the result:
1 Like
juhuu
December 25, 2022, 10:55pm
4575
Hello, is it possible to change the distance to the edge of a âcustom:mushroom-template-cardâ? I tried it via âpaddingâ but it doesnât work with card mod or styles either. Maybe it just doesnât work with this card?
ej52
December 26, 2022, 8:26am
4576
Thanks, the steps, and resting heart rate are coming from the Garmin connect integration.
Here is the personâs card code.
type: custom:stack-in-card
mode: horizontal
card_mod:
style:
.: |
ha-card {
box-shadow: none;
background: transparent;
margin-bottom: 30px
}
hui-horizontal-stack-card$: |
#root {
justify-content: center;
}
cards:
- type: custom:stack-in-card
keep:
box_shadow: false
outer_padding: true
card_mod:
style: |
ha-card {
box-shadow: none;
background: transparent;
position: relative;
overflow: visible !important;
padding-right: 10px;
}
ha-card:after {
content: '';
position: absolute;
right: -8px;
top: 25%;
width: 1px;
height: 45%;
background: var(--divider-color);
}
:host {
flex-grow: 0 !important;
min-width: fit-content !important;
}
cards:
- type: custom:mushroom-person-card
entity: person.person1
icon_type: entity-picture
fill_container: false
secondary_info: ''
primary_info: ''
layout: vertical
card_mod:
style:
.: |
:host {
--mush-icon-size: 60px;
--mush-badge-size: 20px;
}
ha-card {
padding-bottom: 0 !important;
}
- type: custom:mushroom-chips-card
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-spacing: 0px;
--chip-background: transparent;
--chip-padding: 0 3px;
}
chips:
- type: template
entity: sensor.pixel_3_xl_battery_level
content: '{{ states(entity) }} %'
icon: >-
{% set bl = states(entity) | int %} {% if bl < 10 %}
mdi:battery-outline {% elif bl < 20 %} mdi:battery-10 {% elif bl <
30 %} mdi:battery-20 {% elif bl < 40 %} mdi:battery-30 {% elif bl
< 50 %} mdi:battery-40 {% elif bl < 60 %} mdi:battery-50 {% elif
bl < 70 %} mdi:battery-60 {% elif bl < 80 %} mdi:battery-70 {%
elif bl < 90 %} mdi:battery-80 {% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery {% else %} mdi:battery-unknown {%
endif %}
icon_color: >-
{% set bl = states(entity) | int %} {% if bl < 10 %} red {% elif
bl < 20 %} red {% elif bl < 30 %} orange {% elif bl < 40 %} orange
{% elif bl < 50 %} amber {% elif bl < 60 %} amber {% elif bl < 70
%} green {% elif bl < 80 %} green {% elif bl < 90 %} green {% elif
bl < 100 %} green {% elif bl == 100 %} green {% else %} grey {%
endif %}
tap_action:
action: more-info
- type: template
entity: sensor.total_steps
content: '{{ states(entity) }}'
icon: mdi:walk
icon_color: blue
tap_action:
action: more-info
- type: template
entity: sensor.resting_heart_rate
content: '{{ states(entity) }}'
icon: mdi:heart-pulse
icon_color: red
tap_action:
action: more-info
- type: custom:stack-in-card
keep:
box_shadow: false
outer_padding: true
card_mod:
style: |
ha-card {
box-shadow: none;
background: transparent;
padding-left: 10px;
}
:host {
flex-grow: 0 !important;
min-width: fit-content !important;
}
cards:
- type: custom:mushroom-person-card
entity: person.person2
icon_type: entity-picture
fill_container: false
secondary_info: ''
primary_info: ''
layout: vertical
card_mod:
style: |
:host {
--mush-icon-size: 60px;
--mush-badge-size: 20px;
}
ha-card {
padding-bottom: 0 !important;
}
- type: custom:mushroom-chips-card
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-spacing: 0px;
--chip-background: transparent;
--chip-padding: 0 3px;
}
chips:
- type: template
entity: sensor.pixel_6_battery_level
content: '{{ states(entity) }} %'
icon: >-
{% set bl = states(entity) | int %} {% if bl < 10 %}
mdi:battery-outline {% elif bl < 20 %} mdi:battery-10 {% elif bl <
30 %} mdi:battery-20 {% elif bl < 40 %} mdi:battery-30 {% elif bl
< 50 %} mdi:battery-40 {% elif bl < 60 %} mdi:battery-50 {% elif
bl < 70 %} mdi:battery-60 {% elif bl < 80 %} mdi:battery-70 {%
elif bl < 90 %} mdi:battery-80 {% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery {% else %} mdi:battery-unknown {%
endif %}
icon_color: >-
{% set bl = states(entity) | int %} {% if bl < 10 %} red {% elif
bl < 20 %} red {% elif bl < 30 %} orange {% elif bl < 40 %} orange
{% elif bl < 50 %} amber {% elif bl < 60 %} amber {% elif bl < 70
%} green {% elif bl < 80 %} green {% elif bl < 90 %} green {% elif
bl < 100 %} green {% elif bl == 100 %} green {% else %} grey {%
endif %}
tap_action:
action: more-info
- type: template
entity: sensor.total_steps_2
content: '{{ states(entity) }}'
icon: mdi:walk
icon_color: blue
tap_action:
action: more-info
- type: template
entity: sensor.resting_heart_rate_2
content: '{{ states(entity) }}'
icon: mdi:heart-pulse
icon_color: red
tap_action:
action: more-info
1 Like
anthonws
December 26, 2022, 12:16pm
4577
Could anyone provide me pointers on how to adjust the card size, so that the CCTV ones, for example, become smaller, and the alarm one can occupy more space?
p.s. The CCTV images are not in the screenshot
cards:
- cards:
- type: custom:mushroom-entity-card
name: Garage
icon: mdi:garage
entity: script.open_garage_door
fill_container: true
layout: vertical
hold_action:
action: none
double_tap_action:
action: none
secondary_info: none
tap_action:
action: call-service
service: script.open_garage_door
data: {}
target: {}
- type: custom:mushroom-lock-card
entity: lock.nuki_galaxy_lock
secondary_info: state
fill_container: true
layout: vertical
primary_info: name
hold_action:
action: none
double_tap_action:
action: none
name: 'Home '
- type: custom:mushroom-lock-card
entity: lock.nuki_alpha_centaurious_lock
fill_container: true
layout: vertical
name: Building
type: horizontal-stack
- cards:
- type: custom:mushroom-light-card
entity: switch.storage_camera
name: Storage
layout: vertical
use_light_color: false
fill_container: true
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:cctv
- type: custom:mushroom-light-card
entity: switch.hall_camera
name: Hall
layout: vertical
use_light_color: false
fill_container: true
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:cctv
- type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.mqtt_alarm
states:
- armed_away
- armed_night
name: Alarm
fill_container: true
type: horizontal-stack
- cards:
- type: custom:frigate-card
cameras:
- camera_entity: camera.hall
live_provider: ha
type: horizontal-stack
- cards:
- type: picture-entity
show_state: false
show_name: false
camera_view: auto
entity: camera.doorbell
name: Doorbell
- type: custom:frigate-card
cameras:
- camera_entity: camera.storage
live_provider: ha
type: horizontal-stack
type: vertical-stack
could you please share the code from your âbadâ card ?
ffm777
December 26, 2022, 6:39pm
4579
Are you able to display the memojis without the surrounding circle or does it just look like it because of the your black background?
rak
December 26, 2022, 8:46pm
4580
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.bad
primary: Bad
tap_action:
action: toggle
icon_color: |-
{% if states.light.bad.state == 'on' %}
orange
{% else %}
grey
{% endif %}
multiline_secondary: true
secondary: >-
{{ '%0.1f°C' | format(state_attr('climate.temperatur_bad',
'current_temperature')) }} ({{ '%0.0f%%' |
format(states.sensor.heizen_bad.state | int ) }})
{{
state_attr('climate.temperatur_bad', 'preset_mode')
| replace('away', 'Reduziert')
| replace('eco', 'Frostschutz')
| replace('sleep', 'Schlafen')
| replace('comfort', 'Komfort') }} - {{ '%0.0f°C' |
format(state_attr('climate.temperatur_bad', 'temperature')) }}
icon: mdi:shower-head
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
.: |
mushroom-shape-icon {
position: absolute;
--icon-size: 80px;
top: -60px;
left: -30px;
}
mushroom-state-item {
text-align: right;
transform: translateX(0%);
}
- type: custom:mushroom-chips-card
alignment: justify
chips:
- type: light
entity: light.bad_spiegel
content_info: none
- type: entity
entity: sensor.window_bad
content_info: none
- type: action
icon: mdi:dots-horizontal
tap_action:
action: navigate
navigation_path: /lovelace-details/bad
1 Like
Vandana
December 27, 2022, 4:27am
4581
rhysb:
type: custom:mushroom-template-card
icon: mdi:timer
primary: Days to Reminder
icon_color: grey
secondary: >-
{{ (states(entity) | as_datetime | as_local - now()).days + 1 }}
days
hold_action:
action: call-service
service: script.reset_reminder
data: {}
target: {}
entity: input_datetime.reminder_date
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-blue)) {{ ((states(config.entity) | as_datetime | as_local - now()).days + 1) / 30 * 100 }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
Can we do the same with mushroom chip cards ? If yes kindly guide.
e.g. a ring outside this wifi icon!
ej52
December 27, 2022, 7:22am
4582
There is no surrounding circle on my entity pictures, to use transparent PNG you will need to upload the memoji to the www directory and set the entity_picture in YAML.
homeassistant:
customize:
person.person1:
entity_picture: "/local/person1.png"
person.person2:
entity_picture: "/local/person2.png"
1 Like
Hello all,
first of all I would like to thank everyone who is involved in this great project, no matter if developer or here in the forum - it is unbelievable what is possible. Thank you!
Iâm trying to make a nice card which shows the status of my electric car. A few details do not fit yet.
I still see a border at the chips cards ? What am I missing ?
I would like the icon from the template card to pulse âgreenâ when the car is charging.@rhysb => âMushroom Chip Ping animationâ.
Ah, you can do that like this.
Mushroom Chip Ping animation:
[Mushroom Chip Ping]
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
icon_color: red
card_mod:
style:
mushroom-template-chip:nth-child(1)$:
mushroom-chip$: |
ha-card {
animation: ping 2s ease-out infinite ;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-red), 1);
}
100% {
box-shadâŚ
Is this possible, I have failed with my attempts so far ?
And one last question: can I move the text from the template card by percentage ?
thx!
Code
square: true
columns: 2
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.evcc_lp1_connected
multiline_secondary: true
primary: |
{{ states('sensor.evcc_lp1_vehicle_title') }}
secondary: |-
{% set connected = states(entity) %}
{% set charging = states('sensor.evcc_lp1_charging') %}
{% if connected == 'true' and charging == 'true' %} wird geladen ...
{% elif connected == 'true' and charging == 'false' %} verbunden
{% else %} nicht verbunden
{% endif %}
icon: mdi:car
icon_color: |-
{% set connected = states(entity) %}
{% if connected == 'true' %} green
{% else %} grey
{% endif %}
badge_icon: |-
{% set charging = states('sensor.evcc_lp1_charging') %}
{% if charging == 'true' %} mdi:flash
{% endif %}
badge_color: green
fill_container: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.16) !important;
}
ha-card {
animation:
{% if is_state('sensor.evcc_lp1_charging', 'true') %}
ping 2s ease-out infinite;
{% endif %}
}
@keyframes ping {
0% {
box-shadow: 0 0 50px 1px rgba(var(--rgb-red), 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(var(--rgb-red), 0);
}
}
.: |
mushroom-shape-icon {
position: absolute;
--icon-size: 80px;
top: -50px;
left: -25px;
}
mushroom-state-item {
text-align: center;
transform: translateX(0%);
}
- type: custom:mushroom-chips-card
alignment: justify
chips:
- type: template
content: |-
{{ states('sensor.evcc_lp1_vehicle_soc') }}% |
{{ states('sensor.evcc_lp1_target_soc') }}%
icon: mdi:battery-charging
icon_color: green
double_tap_action:
action: more-info
tap_action:
action: more-info
hold_action:
action: more-info
- type: template
content: >-
{{ states('sensor.evcc_lp1_mode') }}
{% set phases = states('sensor.evcc_lp1_phases_active') | int %}
{% if phases== 1 %} | L1
{% else %} | L1,L2,L3
{% endif %}
- type: action
icon: mdi:dots-horizontal
tap_action:
action: navigate
navigation_path: /49686a9f_evcc/dashboard
does anyone have an idea how i can make this (AC options)?
ffm777
December 27, 2022, 10:13am
4585
Thanks a lot! That did the trick! However, I have one question left. How can I reduce the space between the memoji and the personâs name? Currently, it looks like this which is too much spacing for my liking.
martinst
December 27, 2022, 11:10am
4586
Does anybody know what the best way is to do the next thing:
Show the open/close image for the door
Name of the door
State of the door (in text)
At the right bottom the last changed date (in a good format)
With the mushroom entity card almost everything is automatically be done:
- type: custom:mushroom-entity-card
entity: binary_sensor.voordeur
but this is missing the last changed date/time. So I thought you need the template card:
type: custom:mushroom-template-card
primary: Voordeur
secondary: |
{% if states('binary_sensor.voordeur') == 'on' %}
Open ({{ states.binary_sensor.voordeur.last_changed }} )
{% else %}
Dicht ({{ states.binary_sensor.voordeur.last_changed }} )
{% endif %}
icon: |
{% if states('binary_sensor.voordeur') == 'on' %}
mdi:door-open
{% else %}
mdi:door-closed
{% endif %}
icon_color: |
{% if states('binary_sensor.voordeur') == 'on' %}
blue
{% else %} {% endif %}
entity: binary_sensor.voordeur
But how can I place this last_changed date/time to the bottom right?
ej52
December 27, 2022, 11:54am
4587
You can adjust the spacing between picture and the primary/secondary info as follows with card_mod
:host {
--mush-spacing: 2px;
}
1 Like
Iâm already a step further, but doesnât look optimal yet. tips anyone?
arifroni
December 27, 2022, 12:17pm
4589
where is the code for this ?
I checked the doc and couldnât find any.
tbrasser
December 27, 2022, 12:40pm
4590
Use the visual editor in a spare dashboard and copy from there
arifroni
December 27, 2022, 12:50pm
4591
thanks. I mixed up big time between minimalist-ui and mushroom
