unfortunately no 
Trying to set a icon colour based on state that returns 0.1 etcâŚ
feeling a bit stuck
icon_color: |
{% if ('sensor.runeborg_indoor_netatmo_rain_rain') > 0 %}
blue
{% else %}
yellow
{% endif %}
Can you share the sensor definition of the âarrivalâ sensor whosn in upper left? I use last changed from person entity. However. after restart it shows âlast restartâ. If you have a better solution ⌠happy to learn. I can imagine an input_time which gets updated once person entity changed. That would survive a reboot. But âlots of codeâ just for this little feature.
I would like to show the number of the shoping cart items on a chip but it seems that I fail setting the state correctly:
- type: conditional
conditions:
- entity: sensor.shopping_list
state: |
{% if states('sensor.shopping_list') > '0' %} 'on' {% endif %}
chip:
type: template
icon: mdi:cart
content: |
{{ states('sensor.shopping_list') }}
tap_action:
action: navigate
navigation_path: /dashboard-mobile/cart
entity: sensor.shopping_list
icon_color: brown
double_tap_action:
action: none
hold_action:
action: none
Could someone please give me a hint?
Hi,
arrival is very simpel template sensor, so it survive a reboot:
- trigger:
- platform: state
entity_id:
- person.yourname
to: 'home'
sensor:
- unique_id: tmp_person_time_arrived_home_yourname
name: tmp_person_time_arrived_home_yourname
icon: mdi:home-clock
state: >-
{% set last_changed = states.person.yourname.last_changed | as_local %}
{{ as_timestamp(last_changed) | as_datetime() }}
1 Like
A New Year and a new update to my Mushroom Media Player. This one uses Node-Red to extract the album art colors and apply them to the Media Player controls. I was already using this for some WLEDS behind my TV, so it was easy to adapt it for this.
Mushroom Media Player - Compact:
Mushroom Media Player - Compact YAML
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--album-art-color), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--album-art-color), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
--rgb-state-media-player: var(--album-art-color);
}
.actions {
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
entity: media_player.currently_playing
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{% if is_state(config.entity, 'playing') %}
--paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
{% endif %}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--album-art-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card::before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
filter: blur(150px) saturate(400%);
background-size: 100% 100%;
{% endif %}
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
--ha-card-border-width: 0;
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
background: url( '{{ state_attr("media_player.currently_playing", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
{% if state_attr('media_player.currently_playing', 'media_content_type') == 'tvshow' %}
background-size: auto 100%, cover;
{% else %}
background-size: 50% auto, cover;
{% endif %}
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% endif %}
}
:host {
--album-art-color:
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
{{ states('sensor.muted_color') }}
{% else %}
var(--rgb-indigo-color)
{% endif %};
}
Mushroom Media Player - Full:
Mushroom Media Player - Full YAML
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--album-art-color), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--album-art-color), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
--rgb-state-media-player: var(--album-art-color);
}
.actions {
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'idle') and not is_state(config.entity, 'off') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
entity: media_player.currently_playing
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{% if is_state(config.entity, 'playing') %}
--paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
{% endif %}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--album-art-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
:host {
--album-art-color:
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
{{ states('sensor.muted_color') }}
{% else %}
var(--rgb-indigo-color)
{% endif %};
}
Node-Red Album Art Color Flow:
Node-Red Album Art Color Flow
[{"id":"eacdc375eb4de995","type":"server-state-changed","z":"f05a616e.f2aef","name":"Currently Playing Changed","server":"84a6d09c.5336e","version":4,"exposeToHomeAssistant":false,"haConfig":[{"property":"name","value":""},{"property":"icon","value":""}],"entityidfilter":"media_player.currently_playing","entityidfiltertype":"exact","outputinitially":true,"state_type":"str","haltifstate":"playing","halt_if_type":"re","halt_if_compare":"is","outputs":2,"output_only_on_state_change":false,"for":"0","forType":"num","forUnits":"minutes","ignorePrevStateNull":false,"ignorePrevStateUnknown":false,"ignorePrevStateUnavailable":false,"ignoreCurrentStateUnknown":true,"ignoreCurrentStateUnavailable":true,"outputProperties":[{"property":"payload","propertyType":"msg","value":"","valueType":"entityState"},{"property":"data","propertyType":"msg","value":"","valueType":"eventData"},{"property":"topic","propertyType":"msg","value":"","valueType":"triggerId"}],"x":210,"y":3670,"wires":[["bd9143fe7b314177"],[]]},{"id":"bd9143fe7b314177","type":"function","z":"f05a616e.f2aef","name":"Format Album Art URL","func":"msg.payload = 'https://**homeassistant.url**:8123' + msg.data.new_state.attributes.entity_picture\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":530,"y":3670,"wires":[["c309c0f5a752ecdd"]]},{"id":"c309c0f5a752ecdd","type":"vibrant","z":"f05a616e.f2aef","name":"Extract Album Art Color","x":840,"y":3670,"wires":[["7882f420860746b9"]]},{"id":"7882f420860746b9","type":"function","z":"f05a616e.f2aef","name":"Colors","func":"var msg1 = { payload: msg.payload.Vibrant.rgb[0] + ',' + msg.payload.Vibrant.rgb[1] + ',' + msg.payload.Vibrant.rgb[2] };\nvar msg2 = { payload: msg.payload.DarkVibrant.rgb[0] + ',' + msg.payload.DarkVibrant.rgb[1] + ',' + msg.payload.DarkVibrant.rgb[2] };\nvar msg3 = { payload: msg.payload.LightVibrant.rgb[0] + ',' + msg.payload.LightVibrant.rgb[1] + ',' + msg.payload.LightVibrant.rgb[2] };\nvar msg4 = { payload: msg.payload.Muted.rgb[0] + ',' + msg.payload.Muted.rgb[1] + ',' + msg.payload.Muted.rgb[2] };\nvar msg5 = { payload: msg.payload.DarkMuted.rgb[0] + ',' + msg.payload.DarkMuted.rgb[1] + ',' + msg.payload.DarkMuted.rgb[2] };\nvar msg6 = { payload: msg.payload.LightMuted.rgb[0] + ',' + msg.payload.LightMuted.rgb[1] + ',' + msg.payload.LightMuted.rgb[2] };\n\nreturn [msg1, msg2, msg3, msg4, msg5, msg6];","outputs":6,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1090,"y":3670,"wires":[["cf6ff890cadf96ef"],["63e066959f858c54"],["6efb0dc3953b3240"],["5806b87267d02bc3"],["77b1979bc5ad11f3"],["e5b91489990a01ea"]]},{"id":"cf6ff890cadf96ef","type":"ha-sensor","z":"f05a616e.f2aef","name":"Vibrant Color","entityConfig":"dfb12e11b7a6e846","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1460,"y":3540,"wires":[[]]},{"id":"63e066959f858c54","type":"ha-sensor","z":"f05a616e.f2aef","name":"Dark Vibrant Color","entityConfig":"3e58f341fe905599","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1480,"y":3590,"wires":[[]]},{"id":"6efb0dc3953b3240","type":"ha-sensor","z":"f05a616e.f2aef","name":"Light Vibrant Color","entityConfig":"70d8791a24738ee6","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1480,"y":3640,"wires":[[]]},{"id":"5806b87267d02bc3","type":"ha-sensor","z":"f05a616e.f2aef","name":"Muted Color","entityConfig":"be0a1e0059e1713e","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1460,"y":3690,"wires":[[]]},{"id":"77b1979bc5ad11f3","type":"ha-sensor","z":"f05a616e.f2aef","name":"Dark Muted Color","entityConfig":"90991e9dde96cec6","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1480,"y":3740,"wires":[[]]},{"id":"e5b91489990a01ea","type":"ha-sensor","z":"f05a616e.f2aef","name":"Light Muted Color","entityConfig":"13f67da67efbf0ae","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1480,"y":3790,"wires":[[]]},{"id":"84a6d09c.5336e","type":"server","name":"Home Assistant","version":5,"addon":true,"rejectUnauthorizedCerts":true,"ha_boolean":"y|yes|true|on|home|open","connectionDelay":true,"cacheJson":true,"heartbeat":false,"heartbeatInterval":"30","areaSelector":"friendlyName","deviceSelector":"friendlyName","entitySelector":"friendlyName","statusSeparator":"at: ","statusYear":"hidden","statusMonth":"short","statusDay":"numeric","statusHourCycle":"h23","statusTimeFormat":"h:m","enableGlobalContextStore":true},{"id":"dfb12e11b7a6e846","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Vibrant Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Vibrant Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false},{"id":"3e58f341fe905599","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Dark Vibrant Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Dark Vibrant Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false},{"id":"70d8791a24738ee6","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Light Vibrant Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Light Vibrant Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false},{"id":"be0a1e0059e1713e","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Muted Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Muted Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false},{"id":"90991e9dde96cec6","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Dark Muted Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Dark Muted Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false},{"id":"13f67da67efbf0ae","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Light Muted Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Light Muted Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false}]
You will need to replace **homeassistant.url** with the URL for your Home Assistant instance.
In addition to Node-Red the Vibrant Node is Required:
There are six colors to choose from; vibrant, dark vibrant, light vibrant, muted, dark muted & light muted. Iâve used muted as it seems to work best in both light and dark themes. Pick whatever works best for you.
26 Likes
For those that would rather have the Media Player shrink down when not playing anything you can change the code like this:
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
{% if not is_state(config.entity, 'idle') and not is_state(config.entity, 'off') %}
content: "";
{% endif %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
5 Likes
Hi,
Of course 
Details :
- The card shows the âonâ button when the computer is off
- When the computer is on, the âsleepâ and âshut downâ buttons are displayed. As well as computer image
- A click on the card displays a larger preview (with animation on the icon) or an image if the computer is off
(card background color matches image)
- When off
I use IOTLink on the computer for MQTT information feedback to Home Assistant
Code
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Dell
secondary: OptiPlex
icon: |-
{% if is_state('binary_sensor.ping_dalg_pc', 'off') %}
mdi:remote-desktop
{% else %}
disable
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.ping_dalg_pc', 'off') %}
red
{% else %}
transparent
{% endif %}
layout: vertical
entity: camera.dalg_pc_screen_0
tap_action:
action: fire-dom-event
haptic: heavy
browser_mod:
service: browser_mod.popup
data:
style: |-
--popup-border-radius: 15px;
--popup-border-color: transparent;
--popup-padding-x: 5px;
size: normal
content:
type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: camera.dalg_pc_screen_0
name: Dell OptiPlex
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
--card-mod-icon: mdi:remote-desktop;
animation: beat 1.3s ease-out infinite both;
{{ 'animation: none;' if not is_state(config.entity, 'idle') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/mushroom/dell.png') center no-repeat;
{% if not is_state(config.entity, 'unavailable') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% if is_state(config.entity, 'idle') %}
aspect-ratio: 16 / 9;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/mushroom/dell.png') center no-repeat;
{% if not is_state('camera.dalg_pc_screen_0', 'unavailable') %}
background: url( '{{ state_attr('camera.dalg_pc_screen_0', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
card_mod:
style: |
:host {
--mush-icon-size: 65px;
}
ha-card {
{% if not is_state(config.entity, 'unavailable') %}
background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color)0.5);
background-blend-mode: overlay;
--primary-text-color: transparent;
--secondary-text-color: transparent;
{% endif %}
--rgb-state-media-player: var(--rgb-teal);
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.ping_dalg_pc
state: 'off'
chip:
type: template
entity: script.my_computer_wake
icon: mdi:power
icon_color: green
content: 'On'
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-border-width: 0;
- type: conditional
conditions:
- entity: binary_sensor.ping_dalg_pc
state: 'on'
chip:
type: template
entity: script.my_computer_restart
icon: mdi:restart
icon_color: orange
content: ''
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-border-width: 0;
- type: conditional
conditions:
- entity: binary_sensor.ping_dalg_pc
state: 'on'
chip:
type: template
entity: script.my_computer_shutdown
icon: mdi:power
icon_color: red
content: ''
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-border-width: 0;
alignment: center
card_mod:
style:
style: |
ha-card {
margin: 10px 0px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 40px;
{% if is_state('binary_sensor.ping_dalg_pc', 'on') %}
--chip-padding: 25px;
--chip-spacing: 15px;
{% else %}
--chip-padding: 25px;
--chip-spacing: 0px;
{% endif %}
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Dell
secondary: Precision
icon: |-
{% if is_state('binary_sensor.ping_dalg_dell', 'off') %}
mdi:remote-desktop
{% else %}
disable
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.ping_dalg_dell', 'off') %}
red
{% else %}
transparent
{% endif %}
layout: vertical
entity: camera.dalg_dell_screen_0
tap_action:
action: fire-dom-event
haptic: heavy
browser_mod:
service: browser_mod.popup
data:
style: |-
--popup-border-radius: 15px;
--popup-border-color: transparent;
--popup-padding-x: 5px;
size: normal
content:
type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: camera.dalg_dell_screen_0
name: Dell Precision
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
--card-mod-icon: mdi:desktop-classic;
animation: beat 1.3s ease-out infinite both;
{{ 'animation: none;' if not is_state(config.entity, 'idle') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/mushroom/dell.png') center no-repeat;
{% if not is_state(config.entity, 'unavailable') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% if is_state(config.entity, 'idle') %}
aspect-ratio: 16 / 9;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/mushroom/dell.png') center no-repeat;
{% if not is_state('camera.dalg_dell_screen_0', 'unavailable') %}
background: url( '{{ state_attr('camera.dalg_dell_screen_0', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
card_mod:
style: |
:host {
--mush-icon-size: 65px;
}
ha-card {
{% if not is_state(config.entity, 'unavailable') %}
background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color)0.5);
background-blend-mode: overlay;
--primary-text-color: transparent;
--secondary-text-color: transparent;
{% endif %}
--rgb-state-media-player: var(--rgb-teal);
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.ping_dalg_dell
state: 'off'
chip:
type: template
entity: script.my_computer_wake2
icon: mdi:power
icon_color: green
content: 'On'
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-border-width: 0;
- type: conditional
conditions:
- entity: binary_sensor.ping_dalg_dell
state: 'on'
chip:
type: template
entity: script.my_computer_3_reboot
icon: mdi:restart
icon_color: orange
content: ''
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-border-width: 0;
- type: conditional
conditions:
- entity: binary_sensor.ping_dalg_dell
state: 'on'
chip:
type: template
entity: script.my_computer_3_shutdown
icon: mdi:power
icon_color: red
content: ''
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-border-width: 0;
alignment: center
card_mod:
style:
style: |
ha-card {
margin: 10px 0px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 40px;
{% if is_state('binary_sensor.ping_dalg_dell', 'on') %}
--chip-padding: 25px;
--chip-spacing: 15px;
{% else %}
--chip-padding: 25px;
--chip-spacing: 0px;
{% endif %}
}
PS: sorry for my english 
10 Likes
Have a look at Universal Media Player, does exactly what you want.
I would love if we could start sharing âpopupâ-like cards, heres mine:
Do anyone know if it is possible to show both âBrightnessâ and âColor tempâ at the same time?
Current config (ps. its a declutering-template card):
lyskort:
card:
type: tile
name: '[[navn]]'
entity: '[[entitet]]'
show_entity_picture: true
features:
- type: light-brightness
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: '[[navn]]'
content:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-light-card
entity: '[[entitet]]'
layout: vertical
use_light_color: true
show_brightness_control: true
show_color_control: false
show_color_temp_control: true
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'on') %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
{% if r == null %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
{%- endif %}
{%- endif %}
}
- shorten_cards: false
consolidate_entities: true
child_card: true
hide_header: true
header: ''
color_wheel: true
persist_features: true
brightness: false
color_temp: false
white_value: false
color_picker: true
smooth_color_wheel: true
speed: false
intensity: false
force_features: false
show_slider_percent: false
full_width_sliders: true
brightness_icon: weather-sunny
white_icon: file-word-box
temperature_icon: thermometer
speed_icon: speedometer
intensity_icon: transit-connection-horizontal
type: custom:light-entity-card
entity: '[[entitet]]'
effects_list: false
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'on') %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
{% if r == null %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
{%- endif %}
{%- endif %}
}
Only popup-card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.utebod_ledstrip
layout: vertical
use_light_color: true
show_brightness_control: true
show_color_control: false
show_color_temp_control: true
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'on') %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
{% if r == null %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
{%- endif %}
{%- endif %}
}
- shorten_cards: false
consolidate_entities: true
child_card: true
hide_header: true
header: ''
color_wheel: true
persist_features: true
brightness: false
color_temp: false
white_value: false
color_picker: true
smooth_color_wheel: true
speed: false
intensity: false
force_features: false
show_slider_percent: false
full_width_sliders: true
brightness_icon: weather-sunny
white_icon: file-word-box
temperature_icon: thermometer
speed_icon: speedometer
intensity_icon: transit-connection-horizontal
type: custom:light-entity-card
entity: light.utebod_ledstrip
effects_list: false
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'on') %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
{% if r == null %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
{%- endif %}
{%- endif %}
}
Edit: Trying to make a UI Minimalist-like popup⌠but dont wanna use that âthemeâ since its not easy to do changes on-the-fly and it locks you down with its templates-in-templateâ nesting
Guess i can have a âonly show color tempâ mushroom-light card inside there
9 Likes
Wow this is fantastic, i was using IOTLink for my HTPC and was turning on my other computers with WOL. Yours is just next level, thanks for sharing.
1 Like
Hello together,
i am experimenting with the following example
What i want to achieve is the following
That means, the âdetail mushroomsâ should be moved a little bit in
The Coding i use, i found in this Thread - perhaps anybody can give me a hint
One important note i think is, i want to replace the âDetail-Mushroomsâ with Mushroom-Light-Card, to control my lights.
The Coding for this screen looks like
type: custom:stack-in-card
cards:
- type: picture-entity
image: >-
https://img.freepik.com/free-photo/modern-stylish-scandinavian-kitchen-interior-with-kitchen-accessories-bright-white-kitchen-with-household-items_169016-4791.jpg?w=1800&t=st=1665996359~exp=1665996959~hmac=cc45d77acabe81fa736605220e5492e14c627ee692fbf5b26416a2316d753cb1
entity: light.buero
show_state: false
show_name: false
camera_view: auto
aspect_ratio: '3'
tap_action:
action: toggle
theme: Mushroom
- type: custom:gap-card
height: 2
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
primary: Mushroom
secondary: Name
icon: mdi:mushroom
entity: light.buero
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''red'' }}'
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.mushroom_matrum_card
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
}}
icon_color: black
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.mushroom_matrum_card
state: 'on'
card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.buero
secondary_info: none
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
- type: custom:mushroom-template-card
primary: Mushroom
secondary: Name
icon: mdi:mushroom
icon_color: orange
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
font-size: 14px !important;
font-weight: bold !important;
color: var(--primary-text-color) !important;
}
.: |
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px;
}
- type: custom:mushroom-template-card
primary: Mushroom
secondary: Name
icon: mdi:mushroom
icon_color: orange
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
font-size: 14px !important;
font-weight: bold !important;
color: var(--primary-text-color) !important;
}
card_mod:
style: |
ha-card {
box-shadow: none;
}
@rhysb
I hope you have an Idea, how i can achieve this
Thx in advance
love it. I was not aware that you can have dedicated triggers for sensors.
However I dont get it to work. And I dont find examples for the triggers in the documentation. I oinly see examples with templates.
Can you please tell me how this should be put into configuration.yaml?
I think I have it:
template:
- trigger:
- platform: state
entity_id:
- person.ralf_kluber
to: "home"
sensor:
- unique_id: arrived_ralf
name: arrived_ralf
icon: mdi:home-clock
state: >-
{% set last_changed = states.person.ralf.last_changed | as_local %}
{{ as_timestamp(last_changed) | as_datetime() }}
Yes, there are two types of templates (old and new one). The new one is a template integration with trigger and many more âŚ
Look here: https://www.home-assistant.io/integrations/template/
1 Like
{% if states('sensor.runeborg_indoor_netatmo_rain_rain')|float(0) > 0 %}
1 Like
Hi,
i´m a bit confused maybe you can help me.
I want to change the icon and the icon color based on the state for the entity card but this is not working only for the template card.
type: custom:mushroom-entity-card
entity: tv
icon: |-
{% if is_state(entity, 'on') %}
mdi:television
{% elif is_state(entity, 'off') %}
mdi:television-off
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
green
{% elif is_state(entity, 'off') %}
red
{% endif %}
tap_action:
action: toggle
If i use this:
type: custom:mushroom-entity-card
entity: switch.fernseher
icon: |-
{% if is_state(entity, 'on') %}
mdi:television
{% elif is_state('switch.fernseher', 'off') %}
mdi:television-off
{% endif %}
icon_color: |-
{% if is_state('switch.fernseher', 'on') %}
green
{% elif is_state(entity, 'off') %}
red
{% endif %}
tap_action:
action: toggle
It´s still empty
try :
type: custom:mushroom-template-card
entity: switch.fernseher
icon: |-
{% if is_state('switch.fernseher', 'on') %}
mdi:television
{% else %}
mdi:television-off
{% endif %}
icon_color: |-
{% if is_state('switch.fernseher', 'on') %}
green
{% else %}
red
{% endif %}
tap_action:
action: toggle