buche11
May 26, 2023, 9:13am
6946
Hi Danwooler, thnak you but this do not change anything:
type: custom:mushroom-template-card
entity: lock.nuki_hwr_lock
layout: vertical
icon: mdi:lock
icon_color: black
tap_action:
action: call-service
service: lock.lock
service_data: {}
target:
entity_id: lock.nuki_hwr_lock
fill_container: false
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
transform: scale(1.5,1);
}
ha-card {
# margin-top: -12px;
--icon-border-radius: 12px;
#--icon-size: 50px;
#margin-top: -12px;
#margin-left: -52px;
}
Any other idea?
Thank you
@rhysb Could you assis me here, animation not working, been tryign for a while
- type: vertical-stack
view_layout:
grid-area: chips
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.dryer_operation_state
state: "Run"
chip:
type: template
icon: mdi:washing-machine
icon_color: |
{% if is_state('sensor.dryer_operation_state', 'Run') %}
blue
{% else %}
disabled
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Dryer
content:
type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- entity: sensor.dryer_runtime
secondary_info: last-updated
show_header_toggle: false
state_color: false
- type: custom:mini-graph-card
entities:
- sensor.dryer_power
card_mod:
style: |
.content {
shake 400ms ease-in-out infinite, drum 1s infinite;
}
@keyframes shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
@rhysb missed the actual animation part in content haha
but i guess i need to edit something more since its a bit messed up.
danwooller
May 26, 2023, 2:33pm
6949
Yeah, youāre curly bracket closing .shape isnāt indented properly.
danwooller
May 26, 2023, 2:39pm
6950
Some animations donāt show on chips due to the size.
I think @rhysb is taking a break, not seem him here helping everyone for a few days
Vandana
May 27, 2023, 6:25am
6951
@rhysb plz guide how can I use mushroom chips to show two values eg ātemperatureā and āprocessor useā one after other after a gap of few seconds.
I.e. it should display ātemperature valueā for few seconds and then āprocessor usedā for few seconds.
Kindly guide
rhysb
May 27, 2023, 10:11am
6952
Sorry, been busy with work. Will try to get back into it
3 Likes
rhysb
May 27, 2023, 10:35am
6953
Try like this:
type: vertical-stack
view_layout:
grid-area: chips
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.dryer_operation_state
state: Run
chip:
type: template
icon: mdi:washing-machine
icon_color: |
{% if is_state('sensor.dryer_operation_state', 'Run') %}
blue
{% else %}
disabled
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Dryer
content:
type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- entity: sensor.dryer_runtime
secondary_info: last-updated
show_header_toggle: false
state_color: false
- type: custom:mini-graph-card
entities:
- sensor.dryer_power
card_mod:
style: |
.content {
animation: shake 400ms ease-in-out infinite, drum 1s infinite;
}
@keyframes shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 58% 47%, 62% 54%, 60% 61%, 54% 66%, 47% 65%, 42% 58%, 58% 47%, 100% 0); }
}
1 Like
Faecon
May 27, 2023, 10:44am
6954
Do you have some code for a sticky card ?
I want two buttons in a horizontal stack centered en 5px from the bottom, on every screen . Same place.
I have something with position: sticky and bottom:x px but indont get it workingā¦
rhysb
May 27, 2023, 11:12am
6955
You can sticky on the bottom like this:
type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:chevron-left
icon_color: blue
layout: vertical
card_mod:
style: |
ha-card {
width: fit-content;
padding: 0px !important;
margin-left: auto;
transition: all 0s;
}
- type: custom:mushroom-template-card
icon: mdi:chevron-right
icon_color: blue
layout: vertical
card_mod:
style: |
ha-card {
width: fit-content;
padding: 0px !important;
margin-right: auto;
transition: all 0s;
}
card_mod:
style: |
:host {
position: sticky;
bottom: 5px;
}
ha-card {
margin: 0px 0px -12px 0px;
background: none;
--ha-card-border-width: 0px;
--ha-card-box-shadow: none;
}
1 Like
Vandana
May 27, 2023, 11:26am
6956
@rhysb can you plz help regarding thisā¦
[Screenshot_20230527_103508_Home Assistant]
@rhysb plz guide how can I use mushroom chips to show two values eg ātemperatureā and āprocessor useā one after other after a gap of few seconds.
I.e. it should display ātemperature valueā for few seconds and then āprocessor usedā for few seconds.
Kindly guide
danwooller
May 27, 2023, 1:25pm
6957
I should think so, this place has been a shambles
1 Like
Faecon
May 27, 2023, 3:47pm
6958
Thanks. And how do I get them centered ?
hey guys
Iām creating a card that I can reuse without having to change many things, I just need to be able to get the entityās default icon, does anyone know if thereās a way? Iāve tried '{{ states[config.entity].icon }}' , '{{ states[icon.entity]}}' among other ways but it didnāt work
1 Like
aoliveir
May 27, 2023, 8:38pm
6960
This should workicon: '{{ state_attr(config.entity,''icon'') }}'
1 Like
rhysb
May 27, 2023, 10:35pm
6962
They should already be centered. Are they not for you?
Faecon
May 28, 2023, 6:10am
6963
its about the 4 icons at the bottom. It looks like nothing is happing, so I think i did something wrong
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: chip_navigate
variables:
ulm_chip_navigate_path: verbruikgisteren
ulm_chip_navigate_icon: mdi:flash
ulm_chip_navigate_icon_color : rgb(30,227,137)
card_mod:
style: |
ha-card {
width: fit-content;
padding: 0px !important;
margin-left: auto;
transition: all 0s;
}
- type: 'custom:button-card'
template: chip_navigate
variables:
ulm_chip_navigate_path: status
ulm_chip_navigate_icon: mdi:battery-70
ulm_chip_navigate_icon_color : rgb(212,128,61)
card_mod:
style: |
ha-card {
width: fit-content;
padding: 0px !important;
margin-left: auto;
transition: all 0s;
}
- type: 'custom:button-card'
template: chip_navigate
variables:
ulm_chip_navigate_path: recycle
ulm_chip_navigate_icon: mdi:recycle
ulm_chip_navigate_icon_color : rgb(69,124,97)
card_mod:
style: |
ha-card {
width: fit-content;
padding: 0px !important;
margin-left: auto;
transition: all 0s;
}
- type: 'custom:button-card'
template: chip_navigate
variables:
ulm_chip_navigate_path: updates
ulm_chip_navigate_icon: mdi:update
ulm_chip_navigate_icon_color : purple
card_mod:
style: |
ha-card {
width: fit-content;
padding: 0px !important;
margin-left: auto;
transition: all 0s;
}
card_mod:
style: |
:host {
position: sticky;
bottom: 5px;
}
ha-card {
margin: 0px 0px -12px 0px;
background: none;
--ha-card-border-width: 0px;
--ha-card-box-shadow: none;
}
Zarkstar
May 28, 2023, 3:34pm
6964
Iām also interested in knowing if we could use a slider instead of the + and - buttons for thermostats. It makes changing temperatures really inconvenientā¦ any way to achieve this?
1 Like
Foltifeki
May 28, 2023, 3:35pm
6965
I would like to ask for a little help, too many decimal places are displayed for the temperature value
chips:
- type: template
entity: sensor.bedroom_thermal_comfort_humidex_perception
content: >-
{{ states('sensor.bedroom_thermal_comfort_humidex') }} Ā°C {{
states('sensor.bedroom_thermal_comfort_humidex_perception') }}
