I think that is not supported in the mushroom chip cards. But you’re right, with a regular custom mushroom card that works. My problem however is, how do i get that very same animation in a mushroom chip card.
edit: second that, chips can have animations, just not sure whether this is possible to activate on x-state.
this works fine for me with the Chips card - below is my code to show if our front door is closed
type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.eg_windfang_be_haustuer_zu_aus_auf_ein
icon: |-
{% set state = states(entity) %}
{% if state == 'off' %}
mdi:door-closed-lock
{% else %}
mdi:door-open
{% endif %}
icon_color: white
card_mod:
style:
mushroom-template-chip:nth-child(1)$:
mushroom-chip$: |
ha-card {
--chip-background: rgba(var(--rgb-white), 0.2);
--chip-icon-size: 20px;
animation:
{% if is_state('binary_sensor.eg_windfang_be_haustuer_zu_aus_auf_ein', 'on') %}
ping 2s ease-out infinite;
{% endif %}
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 1px rgba(var(--rgb-red), 1);
}
100% {
box-shadow: 0 0 5px 10px rgba(var(--rgb-red), 0);
}
}
Very nice. Can you share the code?
I see from this thread that there are several early examples where Conditional functionality exists, however there’s no documentation about their use on the Mushroom Cards github (none that I can find anyway). Does Mushroom Cards support conditionals? And if so, what are the correct use cases?
Hey Alle D.,
could you pls provide me with code to indicate the number of lights on of the first row in the screenshot: is it a chip-card? Just found the template-card, which can hold a badge-icon… but never saw this for the chip… Anyhow: I have already a sensor counting the number of lights on, but didn’t get the way how to display it nicely other than as “content”… wich looks quite ugly…:
Any help would be great!
Cheers, Hauke
May I ask how you created these seperators (e.g. — Presets —) with those lines left and right of the text?
Certainly! It’s a custom “card” called Text Divider Row. The card is installed via HACS. From there, all you need to do is add two lines of YAML to whichever card you would like.
- type: custom:text-divider-row
text: <Insert your text here>
In case anyone else is interested, I’ve shared the full card with YAML in the Mushroom Inspiration Thread.
Hero! Thank you so much.
Edit: Are you using version 1.4.0? 1.4.1 seems to ignore card_mod to remove background. Any ideas?
- type: conditional
conditions:
- entity: sensor.lights_on
state_not: '0'
chip:
type: template
icon: |-
{% if (states.sensor.lights_on.state | int == 1) %}
mdi:lightbulb
{% elif (states.sensor.lights_on.state | int == 0) %}
mdi:lightbulb-off-outline
{% elif (states.sensor.lights_on.state | int > 1) %}
mdi:lightbulb-group
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace-details/lichter
icon_color: yellow
card_mod:
style: |
ha-card:after {
content: "{{ (states.sensor.lights_on.state | int) }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(105,105,105);
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
if you dont like the number shown in the upper circle … use primary field and remove the card_mod part…
That computer card on the right looks great, can you share please?
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() }}
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:
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:
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:
[{"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.
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 %}
}
Hi,
Of course 
Details :
I use IOTLink on the computer for MQTT information feedback to Home Assistant
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 
Have a look at Universal Media Player, does exactly what you want.