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
ihavn
February 1, 2023, 12:13pm
5334
Hi I’m trying to make something similar.
MRobi
February 1, 2023, 1:54pm
5335
1 Like
