rhysb
November 20, 2022, 12:03am
4020
Probably something like this:
- show_name: false
show_icon: true
show_state: false
state_color: true
theme: mushroom_room
type: glance
entities:
- entity: light.kitchen
icon: mdi:lightbulb-group
tap_action:
action: toggle
- entity: light.kitchen_table
tap_action:
action: toggle
- entity: input_select.dishwasher_status
icon: mdi:dishwasher
card_mod:
style:
.entity:nth-child(3)$: |
state-badge {
{{ 'animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if is_state('input_select.dishwasher_status', 'On') }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 35% 75%, 35% 60%, 55% 42%, 60% 50%, 60% 70%, 30% 73%, 35% 100%, 100% 100%, 100% 0); }
}
.: |
ha-card {
margin-top: -20px;
margin-bottom: -20px;
box-shadow: none;
background: rgba(0, 0, 0, 0);
}
rhysb
November 20, 2022, 12:26am
4021
You can change the Mushroom Badge Icon Color like this:
type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
badge_icon: mdi:snail
card_mod:
style: |
mushroom-badge-icon {
--icon-color: rgb(var(--rgb-black-color));
--main-color: rgb(var(--rgb-green-color));
}
Or have just the Mushroom Badge Icon without the background:
type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
badge_icon: mdi:snail
card_mod:
style: |
mushroom-badge-icon {
--icon-color: rgb(var(--rgb-green-color));
--main-color: none;
--badge-icon-size: 1em;
}
6 Likes
rhysb
November 20, 2022, 12:43am
4022
You could create a script that selects your source then sets the volume. Then call the script from tap_action.
This is not te complete code of the card right? can we have that? missing the charging icon and distance entity in your above code?
rhysb
November 20, 2022, 8:28am
4024
You probably thought I had forgotten about this but I’ve had it at the back of my mind
This is a progress bar around a Mushroom Icon. Values need to be converted to 100%. My example is for a volume bar, but you could show the progress/value of whatever you wanted. I think it would be ideal for showing a countdown/days till due indicator.
Mushroom Icon Progress Bar:
type: custom:mushroom-template-card
icon: mdi:volume-high
primary: Volume
icon_color: blue
entity: input_number.lounge_pc_volume
secondary: '{{ (states(entity) |float * 100) | round(0) }}%'
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-cyan)) {{ (states(config.entity) | float * 100) | round(0) }}% 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);
}
28 Likes
It certainly would be ideal. Would then need a way to handle a countdown timer which is reset when required.
Which is something I haven’t looked into since I mentioned it some while ago
tbrasser
November 20, 2022, 9:08am
4026
Yes you can! Use a view on panel mode, in there a vertical stack. You can add a header first and a footer last, content goes in the middle in a layout card.
You need to put mod-cards around the header/footer in order to apply “position: sticky; top: 0;” css.
Screenshot of some of my views portrait & landscape, with sticky header & footer:
If there’s interest I’ll publish my config soon. Trying to deduplicate as much yaml as possible, and heavily using lovelace_gen (no button/decluttering/configtemplate cards at all!)
todo (if you know how, please let me know!):
[x] Move to grid layout while keeping masonry like auto placement of cards
[ ] Fix primary in main room cards to fit better.
[ ] Somehow get rid of sticky backgrounds or make main overflow visible (they all have background: none, but sometimes it’s still visible)
5 Likes
SteffenDE
November 20, 2022, 10:58am
4027
Thank you rhysb, is working perfekt and lokks good for me:
@Mobiledude and @Jarne_Roussard here is the code for the card:
type: custom:vertical-stack-in-card
mode: vertical
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-font-size: 0.3em;
--chip-icon-size: 0.6em;
--chip-border-width: 0;
--chip-box-shadow: none;
--chip-background: none;
--chip-border: none;
--chip-spacing: none;
--chip-font-weight: normal;
}
alignment: justify
chips:
- type: template
entity: person.YourName
content: |-
{% if is_state('person.YourName','home') %}
{% set last_changed = states('sensor.tmp_person_time_arrived_home_YourName') | as_datetime %}
{% else %}
{% set last_changed = states('sensor.tmp_person_time_left_home_YourName') | as_datetime %}
{% endif %}
{% if last_changed < today_at() - timedelta(days=1) %}
{{ as_timestamp(last_changed) | timestamp_custom('%d.%m. %H:%M') }}
{% elif last_changed < today_at() %}
{{ as_timestamp(last_changed) | timestamp_custom('Gest. %H:%M') }}
{% else %}
{{ as_timestamp(last_changed) | timestamp_custom('%H:%M')}}
{% endif %}
icon: |-
{% if is_state('person.YourName','home') %}
mdi:airplane-landing
{% else %}
mdi:airplane-takeoff
{% endif %}
icon_color: |-
{% if is_state('person.YourName','home') %}
green
{% else %}
red
{% endif %}
tap_action:
action: none
- type: template
entity: sensor.tmp_person_distance_from_home_YourName
content: >-
{{- states('sensor.tmp_person_distance_from_home_YourName') -}} {{- " "
-}} {{-
state_attr('sensor.tmp_person_distance_from_home_YourName','unit_of_measurement')
-}}
icon: mdi:map-marker-distance
icon_color: >-
{% set km = states('sensor.tmp_person_distance_from_home_YourName') |
int %} {% if km > 100 %} red {% elif km > 50 %} orange {% elif km > 10
%} yellow {% elif km == 0 %} green {% else %} grey {% endif %}
tap_action:
action: more-info
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
--font-size: 0.5em;
--icon-size: 5em;
--badge-icon-size: 1.15em;
--badge-size: 1.15em;
--spacing: none;
--font-weight: normal;
}
mushroom-badge-icon {
--icon-color: rgb(var(--rgb-card-background-color));
}
fill_container: true
entity: person.YourName
layout: vertical
multiline_secondary: true
picture: /local/pictures/EmojiYourName.png
primary: '{{- states(''sensor.tmp_person_zonestatus_YourName'') -}}'
secondary: >-
{{- "LastSeen: " -}} {{- states('sensor.tmp_person_lastseen_YourName') -}}
{{- "\n" -}} {{ states('sensor.tmp_person_lastseenlocation_YourName') -}}
badge_icon: '{{- state_attr(''sensor.tmp_person_zonestatus_YourName'',''icon'') -}}'
badge_color: |-
{% if is_state('sensor.tmp_person_zonestatus_YourName','Home') %}
green
{% elif is_state('sensor.tmp_person_zonestatus_YourName','Unbekannt') %}
red
{% else %}
orange
{% endif %}
tap_action:
action: more-info
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-font-size: 0.25em;
--chip-icon-size: 0.5em;
--chip-border-width: 0;
--chip-box-shadow: none;
--chip-background: none;
--chip-border: none;
--chip-spacing: none;
--chip-font-weight: normal;
}
alignment: center
chips:
- type: template
entity: sensor.iphonebattery_state
content_info: none
icon: |-
{% if is_state('sensor.iphonebattery_state','Charging') %}
mdi:power-plug
{% else %}
mdi:power-plug-off
{% endif %}
icon_color: |-
{% if is_state('sensor.iphonebattery_state','Charging') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: template
entity: sensor.iphonebattery_level
content_info: none
icon: >-
{% set bl = states('sensor.iphonebattery_level') | 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('sensor.iphonebattery_level') | int %}
{% if bl < 10 %} red {% elif bl < 20 %} red {% elif bl < 30 %} orange
{% elif bl < 40 %} orange {% elif bl < 50 %} yellow {% elif bl < 60 %}
yellow {% 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.tmp_person_homewlan_YourName
content_info: none
icon: |-
{% if is_state('sensor.tmp_person_homewlan_YourName','on') %}
mdi:wifi
{% else %}
mdi:wifi-off
{% endif %}
icon_color: |-
{% if is_state('sensor.tmp_person_homewlan_YourName','on') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: more-info
14 Likes
cob94440
November 20, 2022, 2:32pm
4028
SteffenDE:
great can you share your :
{% set last_changed = states('sensor.tmp_person_time_arrived_home_YourName') | as_datetime %}
{% else %}
{% set last_changed = states('sensor.tmp_person_time_left_home_YourName
sensors please
1 Like
slongneck
November 20, 2022, 6:13pm
4029
Can you please share your code for the weather above your “Good Morning, Avi!”?
Thanks!
- type: "custom:mushroom-template-card"
primary: Washing Machine
entity: input_select.dishwasher_status
secondary: |-
{% if states(entity) == 'on' %}
{{ states('sensor.dishwasher_electric_consumption_w') | round(0) }} W
{% else %}
Off
{% endif %}
icon: mdi:dishwasher
icon_color: "{{ 'blue' if is_state(entity, 'On') else 'disabled' }}"
tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
state-badge {
{{ 'animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if is_state('input_select.dishwasher_status', 'On') }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 35% 75%, 35% 60%, 55% 42%, 60% 50%, 60% 70%, 30% 73%, 35% 100%, 100% 100%, 100% 0); }
}
its hard
@rhysb
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if is_state('input_select.dishwasher_status', 'On') }}
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 35% 75%, 35% 60%, 55% 42%, 60% 50%, 60% 70%, 30% 73%, 35% 100%, 100% 100%, 100% 0); }
}
.: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
1 Like
Amazing tip. Added that in above and works like a charm!
Played with the original code to match my current nav. bar that was sitting at the top. Very useful for mobile. Fyi, All that’s needed for the nav bar to be at the bottom aka sticky nav-bar is the last ‘card-mod’ parameter I believe. Finished product and code below in case anyone wants it:
type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
entity: zone.home
icon: mdi:home-account
icon_color: orange
content: Home
tap_action:
action: navigate
navigation_path: home-view
- type: template
content: 'Living Room '
icon: mdi:sofa-outline
icon_color: blue
entity: switch.lr_switch_group
tap_action:
action: navigate
navigation_path: living_room-view
hold_action:
action: toggle
- type: template
entity: switch.kr_switch_group
icon: mdi:table-chair
content: Kitchen
icon_color: green
tap_action:
action: navigate
navigation_path: kitchen-view
hold_action:
action: toggle
- type: template
content: Bedroom
tap_action:
action: navigate
navigation_path: bedroom-view
icon_color: pink
entity: switch.br_switch_group
icon: mdi:bed-queen-outline
hold_action:
action: toggle
- type: template
entity: switch.bar_switch_group
icon: mdi:bathtub-outline
icon_color: yellow
content: 'Bathroom '
tap_action:
action: navigate
navigation_path: bathroom-view
hold_action:
action: toggle
- type: template
entity: light.lar_laundry_room
icon: mdi:washing-machine
icon_color: teal
content: Laundry
tap_action:
action: navigate
navigation_path: laundry-room
- type: template
icon: mdi:weather-sunny
icon_color: purple
tap_action:
action: navigate
navigation_path: porch-view
content: Porch
entity: switch.pr_switch_group
hold_action:
action: toggle
- type: template
icon: mdi:network-pos
icon_color: orange
content: Network
tap_action:
action: navigate
navigation_path: /mushroom-creation/network
entity: sensor.cr_cr_speedtest_download
card_mod:
style: |
:host {
z-index: 999;
position: sticky;
position: -webkit-sticky;
bottom: 0;
}
ha-card {
background: none;
--ha-card-box-shadow: 0px;
padding-bottom: 25px;
}
1 Like
sorry to ask if this is repeated, but wich sensor/integration generate this sensor?
dkmcgowan
November 20, 2022, 11:53pm
4035
These are great, was looking for this, suggestions on where to add them if you don’t want to do them on every single card? I know I could edit the theme but I use the Mushroom theme and so that will get overwritten with each update, and then if I copy it and make my own, I won’t get theme updates like the one recently that fixed the border issue… I also don’t like how adding it to cards breaks the visual editor for changes and looking at settings
1 Like
berkans
November 21, 2022, 9:02am
4036
Hi Andrea. What sensors ? Can you specify.
Can you use this with input_datetime maybe to achieve a resetable countdown to a date?
berkans
November 21, 2022, 12:20pm
4038
Home Assistant custom animated weather page.
animated gifs and icons that is dependable according to the weather conditions.
One page for all your weather needs.
5 day weather forecast
ability to receive data from your own sensors including the pws.
Full dynamic structure.
Everything you need for the installation:
Note: icons and gif’s download details are also added in a zip file where you can download easily.
8 Likes
KoenChiau
November 21, 2022, 2:31pm
4040
Brilliant !
I’ll echo the request of others: any chance of sharing your full config, please ?
2 Likes
rhysb
November 22, 2022, 3:22am
4042
Yes, It just depends how you want to reset the reminder.
Here’s a simple one for 30 days. Hold runs a script to reset to 30 days from now.
Mushroom Reminder:
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);
}
Reset Reminder Script:
alias: Reset Reminder
sequence:
- service: input_datetime.set_datetime
data:
datetime: "{{ now() + timedelta(days=30) }}"
target:
entity_id: input_datetime.reminder_date
mode: single
And for the festive season
Mushroom Christmas Countdown:
type: custom:mushroom-template-card
icon: mdi:pine-tree
primary: Days to Christmas
icon_color: green
secondary: >-
{{ (states('input_datetime.christmas') | as_datetime | as_local - now()).days + 1 }} days
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-red)) {{ ((states('input_datetime.christmas') | as_datetime | as_local - now()).days + 1) / 365 * 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);
}
29 Likes
.
