Thank yo very much! This works well with the climate cards.
With the template cards i have problems to get a colored icon shape.
1 Like
Hi,
With an external url for the entity_picture, I have the function working like this:
msg.payload = msg.data.new_state.attributes.entity_picture
return msg;
Is it possible to use a mushroom-template-card and add light controls (color etc.)?
I donāt get it man I copied your code but my nav bar doesnāt overlay on top like yours, it just sticks to the top of the page when I scroll
EDIT: It works in Lovelace, I donāt get why its not working in my dashboard, using HKI5 rn.
Can anyone with HKI5 test this and see if it works for them?
Thatās looks very similar to my old problem.
Š”heck that you changed Entity to your player in Currently Playing Changed node, url in Format Album Art URL (should look like āhttp://1.1.1.1:8123ā for local address), add your player entity in Entity config > Device > Name: media_player.example for all Color node (Muted, Vibrant etc)
If I copy this code how do I get the card side-by-side?
Put it in a Grid with two columns.
I figured it out.
1 Like
Made a semi-transparent blurry version of Mushroom Mini Media Player & Pop Up 
UPD: solved issues with controls and backdrop layer (flickering on contrast text), added */Blur comments to my code blocks
Code
type: custom:mushroom-media-player-card
entity: media_player.desktoppc
icon: mdi:play
use_media_info: true
icon_type: entity-picture
show_volume_level: false
media_controls:
- play_pause_stop
- next
volume_controls:
- volume_set
fill_container: false
layout: horizontal
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: []
content:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.desktoppc
icon_type: none
layout: vertical
media_controls:
- previous
- play_pause_stop
- next
volume_controls:
- volume_set
- volume_buttons
show_volume_level: false
use_media_info: true
collapsible_controls: false
card_mod:
style:
mushroom-state-info$: |
/* CSS for Mushroom Popup Media Player */
.secondary:before {
/* Add album name between song title and artist name */
{% if state_attr(config.entity, 'media_album_name') != none %}
content: "{{ state_attr(config.entity, 'media_album_name')}}\A";
{% endif %}
/* Format title to fit on seperate line */
white-space: pre;
text-overflow: ellipsis;
}
.: |
ha-card {
/* Remove border from media player */
--ha-card-border-width: 0;
/* Apply album art color to media player icon & volume bar */
--rgb-state-media-player: var(--album-art-color);
/* Disable transitions */
transition: all 0s;
}
.actions {
/* Apply album art color to media player controls */
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
/* Move volume button to seperate row */
display: block !important;
}
ha-card:before {
content: "";
/* Show album art above media player when active and default image when idle */
{% if is_state(config.entity, ['playing', 'paused']) %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% else %}
background: url('/local/idle_art.png') center no-repeat;
{% endif %}
/* Add padding around album art */
margin: 0px 4px 16px;
/* Add drop shadow to album art */
filter: drop-shadow(4px 4px 6px rgba(var(--album-art-color), 0.3));
/* Round borders of album art */
border-radius: var(--control-border-radius);
/* Adjust the album art aspect ratio based on media type */
{% 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 %}
/* Stretch album art to fit box. Fix for if album art is not sized correctly */
background-size: 100% 100%;
}
mushroom-button {
/* Size volume button to match other controls and center */
display: flex;
width: calc((100% / 3) - (var(--spacing) / 3) * 2);
margin: auto;
}
mushroom-media-player-media-control,
mushroom-media-player-volume-control {
/* Correct margins for volume button on second row */
display: flex;
margin-right: 0px !important;
/* Check if PLAY|STOP are supported and adjust margin accordingly */
{% if state_attr(config.entity, 'supported_features') | int | bitwise_and(20480) > 0 %}
margin-bottom: var(--spacing) !important;
{% endif %}
}
- entity: media_player.desktoppc
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 {
/* Apply album art color to progress bar when paused */
--paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
/* Apply album art color to progress bar when playing */
--paper-progress-active-color: rgb(var(--album-art-color)) !important;
}
.: |
ha-card {
/* Move progress bar up into gap. Check if PLAY|STOP are supported */
--base-offset: calc(4 * var(--mush-spacing, 12px)
+ 1.33 * var(--mush-spacing, 12px)
+ var(--mush-card-primary-line-height, 1.5) * var(--mush-card-primary-font-size, 14px)
+ var(--mush-card-secondary-line-height, 1.5) * var(--mush-card-secondary-font-size, 12px)
+ var(--mush-control-height, 42px));
/* Check if Play (16385) or Stop (4096) are supported and add control button height if they are */
{% if state_attr(config.entity, 'supported_features') | int | bitwise_and(20480) > 0 %}
--control-offset: calc(var(--mush-spacing, 12px) + var(--mush-control-height, 42px));
{% else %}
--control-offset: 0px;
{% endif %}
/* Check if album name is present and add to height if it is */
{% set album_name = state_attr(config.entity, 'media_album_name') %}
{% if album_name == None or album_name == "" %}
--album-offset: 0px;
{% else %}
--album-offset: calc(var(--mush-card-secondary-line-height, 1.5) * var(--mush-card-secondary-font-size, 12px));
{% endif %}
bottom: calc(var(--base-offset) + var(--control-offset) + var(--album-offset));
/* Correct margins for progress bar */
margin: 0px 28px -12px;
/* Set height of card to match pregress bar height */
height: var(--mmp-progress-height);
/* Remove border outline */
--ha-card-border-width: 0;
/* Round corners of progress bar */
--mmp-border-radius: var(--control-border-radius, 12px) !important;
/* Set height of progress bar */
--mmp-progress-height: 12px !important;
/* Remove transitions to prevent progress bar floating in */
transition: all 0s;
}
card_mod:
style: |
:host {
/* Assign album art color to variable used in popup */
--album-art-color:
{% if is_state('media_player.desktoppc', ['playing', 'paused']) %}
{{ states('sensor.muted_color') }}
{% else %}
141, 117, 238
{% endif %};
/* Remove background because it is applied to popup */
--ha-card-background: none;
}
card_mod:
style:
ha-dialog$: |
.mdc-dialog__surface {
/* Apply gradient background to popup using album art colors. Set to default colors when idle */
{% if is_state('media_player.desktoppc', ['playing', 'paused']) %}
background: linear-gradient(305deg, transparent 50%, rgba({{ states('sensor.dark_vibrant_color') }}, 0.4)),
linear-gradient(55deg, transparent 50%, rgba({{ states('sensor.vibrant_color') }}, 0.2)),
linear-gradient(180deg, transparent 40%, rgba({{ states('sensor.dark_muted_color') }}, 0.3));
{% else %}
background: linear-gradient(0deg, transparent 40%, rgba(192, 127, 190, 0.3)),
linear-gradient(240deg, transparent 40%, rgba(143, 119, 237, 0.3)),
linear-gradient(120deg, transparent 40%, rgba(122, 181, 239, 0.3));
{% endif %}
}
/* Blur and bottom position */
div {
backdrop-filter: blur(50px) !important;
-webkit-backdrop-filter: blur(50px)!important;
}
div.mdc-dialog div.mdc-dialog__container {
align-items: end;
bottom: -62px;
}
ha-header-bar$: |
.mdc-top-app-bar {
/* Remove header background so that popup background is visible */
--mdc-theme-primary: none;
/* Reduced the gap between header and album art */
margin-bottom: -16px;
}
.: |
:host {
/* Set width of popup */
--popup-min-width: 450px;
}
card_mod:
style: |
/* CSS for Mushroom Mini Media Player */
ha-card {
/* Blur for mini player */
backdrop-filter: blur(50px) saturate(70%) contrast(100%) brightness(50%) !important;
/* Apply album art color to volume bar */
--rgb-state-media-player: var(--album-art-color);
/* Apply gradient background to sticky media player using album art colors */
{% if is_state('media_player.desktoppc', ['playing', 'paused']) %}
--ha-card-background: linear-gradient(135deg, rgba({{ states('sensor.dark_vibrant_color') }}, 0.3),
rgba({{ states('sensor.dark_muted_color') }}, 0.3));
{% endif %}
}
.actions {
/* Apply album art color to sticky media player controls */
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
/* Allow the album info to display more text */
max-width: fit-content;
min-width: calc(2 * var(--mush-spacing, 12px) + 3 * var(--mush-control-height, 42px));
}
mushroom-media-player-volume-control {
/* Fix the width of the volume bar */
width: 200px;
}
:host {
/* Assign album art color to variable used in sticky media player */
{% if is_state('media_player.desktoppc', ['playing', 'paused']) %}
--album-art-color: {{ states('sensor.muted_color') }};
{% else %}
/* Hide the sticky media player when it is idle */
display: none !important;
{% endif %}
/* Make the media player sticky at the bottom of the page */
position: sticky;
z-index: 999;
bottom: 62px;
padding: -50px;
}
8 Likes
hi! itās possible for a button looks like mushroom template??. (left one is a chip)
thanks!
Hi i have two questions about the Mushroom Chips.
-
When I use the template chip the decimal separator is a dot and with the entity chip it is a comma. How can I fix it in the template chip to a comma?
-
Is it possible to show the more info dialog of an other entity by the hold action?
I want so see the more info dialog of the left entity by the tap action and the more info dialog of the right entity by the hold action.
Thanks for your help!
Live TV with remote controller for Home Assistant
Page Properties:
- LiveTV. See what is on your AndroidTV screen. (Streaming services like Netflix donāt allow to passthrough images due to copyrights)
- Works with any Android TV and Fire TV.
- Customizable buttons. Use your own created scripts with the remote controller.
- Fully control your AndroidTV from your remote.
- Send text to Android TV.
- Launch apps or movies from outside your home.
- You can even assign buttons for other devices to your remote. For example you can turn your air conditioner on and off from the remote through using scripts.
- Posters with a click to start the show or movie.
Everything you need and a very detailed manual is on my Github page.
Every single detail are given and explained in brief to help you install the page. Total installation only takes 15 minutes. The media files are also included in a zip file.
Screenshots:
My other pages:
8 Likes
I am rewriting my smartphone homepage to get some bigger buttons to navigate to the desired area.
So i take a standard Mushroom Template Card an changes the font size and the icon size linke that.
card_mod:
style: |
ha-card {
--card-primary-font-size: 24px;
--icon-size: 48px;
}
My next idea is to make the card background a little bit transparent so that i could see the view background.
Unfortunately i did not find a way how to do it.
Could someone help?
Iāve been looking to improve media control in HA for a while now and this looks awesome, basically need your own post only thread of examples! I donāt use NodeRED so Iāve had to remove all the colour references, they look really nice but not enough to maintain another tool personally. Looks like itās broke some of the pause/next buttons for me though so Iāll need to keep prodding it.
Thereās probably an example in this massive thread but has anyone got this working but with a solid sticky bar right across the bottom of the screen? I quite like the rounded one but if thereās anything behind it on my dashboard like titles then it looks like thereās a bit much going on.
Hi HO Community,
sorry for my question iām a beginnerā¦
Iām looking for a way to change the icon of my mushroom template card.
When the Shelly plug is āonā i like to have a changed icon color.
I tried with this:
type: custom:mushroom-template-card
primary: Coffee
icon_color: >
{% set state = states('switch.shellyplugs_coffee_switch_0') | int %}
{% if state = 'on' %}
amber
{% elif state = 'off' %}
grey
{% endif %}
entity: switch.shellyplugs_coffee_switch_0
multiline_secondary: true
With this i can power it on and off but the icon color didnāt change,
I hope someone can help a beginner :-).
Wish you a nice day.
{{ 'amber' if is_state(entity,'on') else 'grey' }}
very nice work & would this also work for the nvidia shield this would be very nice?
Thank you very much. The developer of the Firemote application stated that Nvidia support will also be added. However, even now, you can easily use your device with adb commands. Read my manual. I have written down all the necessary steps.
2 Likes
Hi @rhysb ā¦ Iām having a strange issue that started after I swapped the base add-on of one of my integrations (Eufy Security). I got the addon configured, started it up, reloaded the Eufy integration, and was able to use my Keyless Entry through the Mushroom Lock card. But the colors arenāt matching up with the image/state:
So it says itās unlocked, the lock is unlockedā¦but itās red. Conversely, if I click to lock it, it goes green, which was the opposite of the behavior that it had been since I started using this card with that lock.
Iāve tried clearing my cache, refreshing my HA window, restarting HA a handful of times and even rebooting HA. The issue persists. Any ideas?
It would be handy to be able to set the secondary information of an entity card to a custom template
Yes, this would be really great! Can anyone give some guidance as to what is required to make this change in the Mushroom Cards source code?