tpbillund
January 31, 2023, 5:55pm
5314
Hi @Richi
As a newbie, iām happy that I can help
I iām only using radio channels, that give me a āmedia_titleā, if the channel is not giving me that info, I donāt use it. (I donāt know, if I can hardcode that info, inside my script for a a radio-channel, so I can use the channels, that donāt give me that info)
But that will give me the gray icons, it not active and the normal image, if active - like this.
Script
alias: start_radio_2
sequence:
- service: media_player.play_media
target:
entity_id: media_player.bluesound_mini
data:
media_content_id: https://webradio.classicfm.dk/classichorsens.aac
media_content_type: audio/mpeg
metadata:
title: Classic FM - Passion for musik
media_class: music
children_media_class: null
mode: single
GUI Card (will make an Warning about the CSS - But itās working also on my Alexa Echo Show 10)
type: picture
image: /local/image/radio/classicfm.jpg
tap_action:
action: call-service
service: script.start_radio_2
data: {}
target: {}
hold_action:
action: none
style: |
:host {
padding: 0px 0px 0px 0px !important;
height: 70px;
width: 70px;
}
img {
{% if state_attr('media_player.bluesound_mini', 'media_title') == 'Classic FM' %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
FULL CODE
views:
- theme: Backend-selected
title: Home
path: '1'
badges: []
cards:
- square: false
columns: 1
type: grid
cards:
- type: alarm-panel
states:
- arm_home
- arm_away
entity: alarm_control_panel.herning_alarm
- type: vertical-stack
cards:
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.forecast_hjem
theme: Mushroom Square Shadow
- theme: Backend-selected
title: Musik
path: '2'
badges: []
cards:
- square: false
columns: 1
type: grid
cards:
- type: custom:mini-media-player
entity: media_player.bluesound_mini
artwork: full-cover
source: full
sound_mode: full
info: scroll
background: /local/image/radio/radio.jpg
group: false
volume_stateless: false
toggle_power: true
- type: custom:text-divider-row
text: Spotify Musik
- type: custom:mushroom-template-card
primary: Dansk
secondary: ''
icon: ''
fill_container: false
multiline_secondary: false
tap_action:
action: call-service
service: spotcast.start
data:
spotify_device_id: xxxxxxxxxxxxxxxxxxxxxxxxxxx
uri: spotify:playlist:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
random_song: true
shuffle: true
target: {}
- type: custom:text-divider-row
text: Radio
- square: true
columns: 6
type: grid
cards:
- type: picture
image: /local/image/radio/p4.png
tap_action:
action: call-service
service: script.start_tunein_radio_1
data: {}
target: {}
hold_action:
action: none
style: |
:host {
padding: 0px 0px 0px 0px !important;
height: 70px;
width: 70px;
}
img {
{% if state_attr('media_player.bluesound_mini', 'media_title') == 'P4 Midt og vest' %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: picture
image: /local/image/radio/ANR.jpg
tap_action:
action: call-service
service: script.start_tunein_radio_2
data: {}
target: {}
hold_action:
action: none
style: |
:host {
padding: 0px 0px 0px 0px !important;
height: 70px;
width: 70px;
}
img {
{% if state_attr('media_player.bluesound_mini', 'media_title') == 'ANR' %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: picture
image: /local/image/radio/skala.jpg
tap_action:
action: call-service
service: script.start_radio_1
data: {}
target: {}
hold_action:
action: none
style: |
:host {
padding: 0px 0px 0px 0px !important;
height: 70px;
width: 70px;
}
img {
{% if state_attr('media_player.bluesound_mini', 'media_title') == 'skala.fm' %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: picture
image: /local/image/radio/silkeborg.jpg
tap_action:
action: call-service
service: script.start_tunein_radio_3
data: {}
target: {}
hold_action:
action: none
style: |
:host {
padding: 0px 0px 0px 0px !important;
height: 70px;
width: 70px;
}
img {
{% if state_attr('media_player.bluesound_mini', 'media_title') == 'Radio Silkeborg' %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: picture
image: /local/image/radio/classicfm.jpg
tap_action:
action: call-service
service: script.start_radio_2
data: {}
target: {}
hold_action:
action: none
style: |
:host {
padding: 0px 0px 0px 0px !important;
height: 70px;
width: 70px;
}
img {
{% if state_attr('media_player.bluesound_mini', 'media_title') == 'Classic FM' %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
- type: picture
image: /local/image/radio/radioglobus.jpg
tap_action:
action: call-service
service: script.start_radio_3
data: {}
target: {}
hold_action:
action: none
style: |
:host {
padding: 0px 0px 0px 0px !important;
height: 70px;
width: 70px;
}
img {
{% if state_attr('media_player.bluesound_mini', 'media_title') == 'Radio Globus' %}
{% else %}
filter: grayscale(100%);
{% endif %}
}
3 Likes
weppa
January 31, 2023, 8:49pm
5315
Sure, which section are you particularly interested in?
rhysb
January 31, 2023, 9:25pm
5316
This may work better for you and @Tyfoon . It also avoids the stack-in-card.
type: entities
entities:
- type: custom:fold-entity-row
head:
type: custom:mushroom-entity-card
entity: sensor.passadeira_power
name: Passadeira
primary_info: name
secondary_info: state
layout: horizontal
icon: mdi:dumbbell
icon_color: light-green
multiline_secondary: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--ha-card-box-shadow: 0;
background: none;
}
padding: 0
entities:
- type: custom:mini-graph-card
entities:
- entity: sensor.passadeira_power
line_color: deep-orange
hours_to_show: 24
points_per_hour: 4
line_width: 1
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: true
fill: fade
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
--ha-card-box-shadow: 0;
background: none;
}
card_mod:
style:
fold-entity-row$: |
ha-icon {
background: none !important;
margin-right: 24px !important;
--toggle-icon-width: 21px !important;
color: rgb(var(--rgb-disabled-color));
}
.: |
.card-content {
padding: 0;
}
rhysb
January 31, 2023, 9:28pm
5317
Mushroom variables are different for each card type. Which ones are you interested in?
sheddc75
January 31, 2023, 9:30pm
5318
Great work, iād like to see the code also. Thanks.
rhysb
January 31, 2023, 10:15pm
5319
Here is an example of a fold-entity-row with auto-entities for Mushroom.
Mushroom Fold Entity Row with Auto Entities:
type: entities
entities:
- type: custom:fold-entity-row
head:
type: custom:mushroom-entity-card
entity: group.lounge_amps
name: Lounge Amps
icon: mdi:audio-video
icon_color: light-blue
tap_action:
action: toggle
padding: 0
entities:
- type: custom:auto-entities
filter:
include:
- group: group.lounge_amps
options:
type: custom:mushroom-entity-card
icon_color: light-blue
tap_action:
action: toggle
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
:host {
--masonry-view-card-margin: -12px 8px 0px 8px;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
}
card_mod:
style:
fold-entity-row$: |
ha-icon {
background: none !important;
margin-right: 24px !important;
--toggle-icon-width: 21px !important;
color: rgb(var(--rgb-disabled-color));
}
.: |
.card-content {
padding: 0;
}
6 Likes
Is it possible to change the color of the secondary text in a template card?
A quick search in the topic leads to Mushroom Cards - Build a beautiful dashboard easily š (Part 1) - #2085 by rhysb
Actually someone did: GitHub - Dodoooh/awesome-mushroom-cards: a collection of awesome mushroom user cards for the lovelace-mushroom . Though itās hard to keep up with all the things shared in here. Thereās also another topic focused on sharing just images with code: Mushroom Inspiration! .
Would be nice to see indeed. In general any post with whole lovelace views/layouts are always nice for inspiration. Iām wanting to share my setup soon but it always remains a WIPā¦ Maybe a seperate topic for that as well?
Iām experiencing this too. CPU usage and RPi temp start rising when viewing lovelace. Iāve already started thinking about replacing some template cards back to simple entity cards. @piitaya can you confirm this is caused by the template cards?
2 Likes
rhysb
February 1, 2023, 12:07am
5322
You can use the Chrome Task Manager (shift + esc) to try and see what is going on. Add GPU mem, JavaScript Mem & Idle Wake Ups to the monitored columns. You could try creating a new, clean dashboard and add a single card type with the same entity. Do this for each card type to see if there are any differences. You could then try adding a bunch of the same card type and see what that does.
A quick test that I did showed a huge jump in CPU & mem usage when editing cards.
Hello masters of mushroom dashboards. I am using a presence solution with nodered that provides more granularity of a persons status. Doing so requires the use of a sensor template. My goal is to replicate the cool little icons displayed above the entity image in the mushroom_persons card in the mushroom_entity card. Any way to make image1 below look like image2?
You should be able to use something similar to:
badge_icon: >-
{% if state_attr('device_tracker.person', 'place') == "Home" %} mdi:home {% else %} mdi:home-off {% endif %}
I figured it outā¦in case anyone is interested:
- type: custom:mushroom-template-card
entity: sensor.your-sensor
picture: '{{state_attr(entity,''entity_picture'')}}'
primary: '{{state_attr(entity,''friendly_name'')}}'
secondary: '{{states(entity)}}'
badge_icon: >-
{% if states(entity)=="Home" %} mdi:home {% elif states(entity)=="Arrived"
%} mdi:home {% elif states(entity)=="Just Leave" %} mdi:home-off {% elif
states(entity)=="Away" %} mdi:home-off {% endif %}
badge_color: >-
{% if states(entity)=="Home" %} green {% elif states(entity)=="Arrived" %}
yellow {% elif states(entity)=="Just Leave" %} orange {% elif
states(entity)=="Away" %} red {% endif %}
layout: vertical
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
fill_container: true
icon: ''
2 Likes
Did you ever come up with a solution to this idea?
poudenes
February 1, 2023, 8:05am
5327
Thanks.
Maybe a idea to put all of them on Github sub section: Themes variables.
Im looking for those 2 for now:
mushroom-entity-card
Thanks you!
Thanks for your feedback. And you only get the high CPU when viewing the HA dashboard, not if you close down the app/browser ?
rhysb:
You can use the Chrome Task Manager (shift + esc) to try and see what is going on. Add GPU mem, JavaScript Mem & Idle Wake Ups to the monitored columns. You could try creating a new, clean dashboard and add a single card type with the same entity. Do this for each card type to see if there are any differences. You could then try adding a bunch of the same card type and see what that does.
A quick test that I did showed a huge jump in CPU & mem usage when editing cards.
I had a steady CPU when viewing my dashboard and then duplicated a grid with three Muishroom template cards and my pretty powerful NUC running HA went from 4% to 24% CPU (goes down when closing the app/browser).
My Core I7 laptop that I used to edit the dashboard started blowing the fans at full speed as soon as I duplicated the Mushroom cards. Here is the Chrome Task Manager:
Not sure what I can read from this other than that my laptop is working hard just to display my dashboard, high CPU and fans on full speed.
Deleting the added Mushroom tempalte cards solved the high CPU. The tempalte cards are nothing special and since I just duplicated existing ones there is nothing wrong in my code, jsut feels like Iām reaching a threshold of number of Mushroom tempalte cards that creates this.
This is really unfortunate sice the combination of Home Assistant and Muishroom (template) cards are amazing.
Edit 1:
Edit 2:@piitaya if there is anything I can try to give you more information about this.
jar87
February 1, 2023, 9:07am
5329
Hello.
I`m having question about mushroom-cover-card. Is there any change to put custom colours for icons? Or add styles into it?
spo0n125
February 1, 2023, 10:44am
5330
Hi all
I have a problem with my mushrrom cards, the card itself cutās the text instead of increase the size as you can see in the image :
the code is this :
square: false
columns: 1
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Deco Living Room
picture: /local/wifi.png
layout: vertical
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
picture: /local/ip.png
icon_color: yellow
content: '{{state_attr('''', ''ip'') }}'
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
- type: template
picture: /local/internet.png
icon_color: blue
content: >-
{{state_attr('device_tracker.living_room_deco',
'internet_online')}}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
- type: template
picture: /local/connected.png
icon_color: blue
content: >-
{{ device_entities('966a1db5ec1a0fbd78bd3eec7f1cb447') |
map('state_attr', 'friendly_name') | list}}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
alignment: center
card_mod:
style: |
ha-card {
position: center;
margin: 0px 0px 0px 0px;
left: 0px;
top: calc(25% - px);
}
.chip-container {
flex-flow: column !important;
}
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Deco Office
picture: /local/wifi.png
layout: vertical
icon_color: yellow
tap_action:
action: navigate
navigation_path: /lovelace/quarto
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
picture: /local/ip.png
icon_color: yellow
content: '{{state_attr('''', ''ip'') }}'
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
- type: template
picture: /local/internet.png
icon_color: blue
content: '{{state_attr(''device_tracker.office_deco'', ''internet_online'') }}'
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
- type: template
picture: /local/connected.png
icon_color: blue
content: '{{ device_entities(''89e54cf6074785d49b935749cdb3c8b5'') |
map(''state_attr'', ''friendly_name'')
| list }}'
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-width: 0;
}
alignment: center
card_mod:
style: |
ha-card {
position: center;
margin: 0px 0px 0px 0px;
left: 0px;
top: calc(25% - px);
}
.chip-container {
flex-flow: column !important;
}
}
What im missing or doing wrong?
Thanks all
piitaya
February 1, 2023, 11:12am
5331
Template card use Jinja2 template which are rendered server side. Thatās why you can use the same template syntax with your automations, template sensors, markdown card and mushroom template cards.
If you use a many templates and ,have a lot of entities this can significantly increase your cpu.
1 Like
piitaya
February 1, 2023, 11:18am
5332
Can you share the template that you use in your card? There may have some optimization to do.
It is a bit random and not specific to these cards, but here is an exmaple that causes high CPU:
square: true
columns: 3
type: grid
cards:
- type: custom:mushroom-template-card
primary: Idag
secondary: >-
{{
(states('sensor.elforbrukning_totalt_dag')|float-states('sensor.elforbrukning_laddning_dag')|float)|round(0)
}} kWh / {{ states('sensor.elkostnad_huset_dag')|round(0) }} kr
icon: mdi:calendar-outline
icon_color: blue
layout: vertical
entity: sensor.elkostnad_huset_dag
tap_action:
action: more-info
- type: custom:mushroom-template-card
entity: sensor.elkostnad_huset_manad
primary: MĆ„nad
secondary: >-
{{
(states('sensor.elforbrukning_totalt_manad')|float-states('sensor.elforbrukning_laddning_manad')|float)|round(0)
}} kWh / {{ states('sensor.elkostnad_huset_manad')|round(0) }} kr
icon: mdi:calendar-month-outline
icon_color: blue
layout: vertical
tap_action:
action: more-info
style: |
ha-card {
margin: 0px -5px 0px -5px;
}
- type: custom:mushroom-template-card
primary: Faktura {{ (now().timestamp() | timestamp_custom('%B'))[:3]|lower }}
secondary: >-
{{ states('sensor.elkostnad_huset_manad')|round(0) +
states('sensor.elkostnad_laddning_manad')|round(0) }} + 707 kr
icon: mdi:cash-multiple
icon_color: blue
layout: vertical
