1umnyy
July 29, 2023, 10:52pm
7505
Please tell me how to make an inscription and an arrow in the center?
type: custom:stack-in-card
cards:
- square: false
columns: 5
type: grid
cards:
- type: custom:mushroom-template-card
primary: ''
alignment: center
secondary: ''
icon: mdi:home
icon_color: blue
tap_action:
action: navigate
navigation_path: /lovelace
layout: vertical
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-top: -2px;
width: auto;
margin-left: -3px;
margin-right: auto;
}
- type: custom:mushroom-entity-card
entity: sensor.processor_use
primary_info: state
secondary_info: name
name: CPU
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-top: px;
margin-left: -15px;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.memory_use_percent
primary_info: state
secondary_info: name
name: Memory
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
margin-top: px;
width: auto;
margin-left: -25px;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.cpu_temperature
primary_info: state
secondary_info: name
name: CPU
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
margin-top: px;
margin-left: -35px;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.disk_use_percent_config
primary_info: state
secondary_info: name
name: Storage
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
margin-top: px;
margin-left: -35px;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:fold-entity-row
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-right: 60px;
margin: 10px;
}
head:
type: custom:mushroom-template-card
label: padding
secondary: Подробнее
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-left: 130px;
}
multiline_secondary: true
entities:
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-left: -25px;
}
cards:
- type: custom:mushroom-template-card
entity: sensor.memory_use_percent
primary: >-
Использование ОЗУ: {{ states('sensor.memory_use_percent') |
round(0) }}%
secondary: ''
icon: mdi:memory
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
color_thresholds:
- value: 90
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
entities:
- entity: sensor.memory_use_percent
name: Temperature
hours_to_show: 3
points_per_hour: 16
line_width: 3
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-left: -25px;
}
cards:
- type: custom:mushroom-template-card
entity: sensor.processor_use
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
primary: >-
Использование процессора: {{ states('sensor.processor_use') |
round(0) }}%
icon: mdi:cpu-64-bit
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.processor_use
hours_to_show: 3
points_per_hour: 16
line_width: 3
color_thresholds:
- value: 90
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-left: -25px;
}
cards:
- type: custom:mushroom-template-card
entity: sensor.cpu_temperature
primary: >-
Температура процессора: {{ states('sensor.cpu_temperature') |
round(0) }} °C
icon: mdi:cpu-64-bit
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.cpu_temperature
name: temperature
hours_to_show: 3
points_per_hour: 16
line_width: 3
lower_bound: 20
upper_bound: 80
color_thresholds:
- value: 80
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
VCTGomes
July 30, 2023, 2:11am
7506
Hey guys, how could I put this chip from sensor CPU on right corner in the center? And how to remove this edges?
FireDragon
July 30, 2023, 5:23am
7508
You can refer to the following code:
type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
style: |
ha-card {
border: none;
}
entity: sensor.xiaomi_gateway_illuminance
fill_container: false
primary_info: state
secondary_info: last-changed
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: none;
--chip-height: 43px;
margin-top: 12px;
}
chips:
- type: entity
style: |
ha-card {
border: none;
}
icon_color: green
entity: sensor.xiaomi_gateway_illuminance
alignment: center
1 Like
jetolu
July 30, 2023, 7:18am
7509
Here are parts of my sensor.yaml file, which counts lights on in defined light groups:
- platform: template
sensors:
living_count:
friendly_name: "Lampor på i vardagsrum"
unit_of_measurement: "på"
value_template: "{{expand(state_attr('light.vardagsrum', 'entity_id'))| selectattr('state','eq','on')|map(attribute='entity_id')|list|count}}"
kitchen_count:
friendly_name: "Lampor på i kök"
unit_of_measurement: "på"
value_template: "{{expand(state_attr('light.kok', 'entity_id'))| selectattr('state','eq','on')|map(attribute='entity_id')|list|count}}"
1 Like
Luu
July 30, 2023, 7:24am
7510
Hey! Can someone help me to combine those codes if possible, want to have animation on icon light and blinking badge when motion detected.
style:
mushroom-shape-icon$: |
{% if is_state(config.entity, 'on') %}
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
60% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.3); }
100% { box-shadow: 0 0 5px 10px transparent; }
}
{% endif %}
style: |
{% if is_state('binary_sensor.poarta_motion_occupancy', 'on') %}
mushroom-badge-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
{% endif %}
TiToTB
July 30, 2023, 8:13am
7511
GM,
How can i set primary text color, within mushroom template card?
I saw it somewhere in this post for a second but i lost it, and i have been scrolling up and down for more than an hour…
Thanks in advanced!
poudenes
July 30, 2023, 8:19am
7512
Here a ver short post:
Why is this Mushroom integration not a CORE part of HA already?
You see in all updates parts similar integrated.
TiToTB
July 30, 2023, 9:15am
7514
Thanks but I want to change text color, no icon color
I think the author is gradually rewriting it to be in HA. With better functionality.
My guess right now is that Mushrooms had become a nice ground play to test out things, and then take the best part of it and slowly integrating it into HA Core.
2 Likes
--primary-text-color: #1f1f1f !important;
1 Like
Replace your if statements with your own
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, 'home') %}
--shape-animation: ping 2s infinite;
{% endif %}
}
@keyframes ping {
60% {box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.3);}
100% {box-shadow: 0 0 5px 10px transparent;}
}
.: |
mushroom-badge-icon {
{% if is_state(config.entity, 'home') %}
animation: blink 1s linear infinite;
{% endif %}
}
@keyframes blink {
50% {opacity: 0;}
}
1 Like
I made the mushroom-template-card below with the following entities
binary_sensor.cupra_born_trunk_open_status
binary_sensor.cupra_born_trunk_lock_status
I’m just not quite sure if I’ve put in a little too much or too little or there’s an easier way.
Could someone please check if I’m on the right track and point out any errors or improvements please.
- square: false
type: grid
cards:
- type: custom:mushroom-template-card
primary: Achterklep
entity: binary_sensor.cupra_born_trunk_lock_status
secondary: |-
{% set lock_state=states(entity) %}
{% set door_state=states("binary_sensor.cupra_born_trunk_open_status") %}
{% if door_state=='on' and lock_state=='on'%}
Open, Ontgrendeld
{% elif door_state=='off' and lock_state=='off' %}
Dicht, Vergrendeld
{% elif door_state=='off' and lock_state=='on' %}
Dicht, Ontgrendeld
{% endif %}
icon: |-
{% set lock_state=states(entity) %}
{% set door_state=states("binary_sensor.cupra_born_trunk_open_status") %}
{% if door_state=='on'%}
mdi:car-windshield
{% elif door_state=='off'%}
mdi:car-windshield-outline
{% endif %}
icon_color: |-
{% set lock_state=states(entity) %}
{% set door_state=states("binary_sensor.cupra_born_trunk_open_status") %}
{% if door_state=='on'%}
orange
{% elif door_state=='off'%}
green
{% endif %}
badge_icon: |-
{% set lock_state=states(entity) %}
{% set door_state=states("binary_sensor.cupra_born_trunk_open_status")
%}
{% if door_state=='on' and lock_state=='on'%}
mdi:lock-open-variant
{% elif door_state=='off' and lock_state=='off' %}
mdi:lock
{% elif door_state=='off' and lock_state=='on' %}
mdi:lock-open-variant
{% endif %}
badge_color: |-
{% set lock_state=states(entity) %}
{% set door_state=states("binary_sensor.cupra_born_trunk_open_status")
%}
{% if door_state=='on' and lock_state=='on'%}
orange
{% elif door_state=='off' and lock_state=='off' %}
green
{% elif door_state=='off' and lock_state=='on' %}
green
{% endif %}
tap_action:
action: more-info
Would this work for you?
since i dont have all of your entities it doesnt look nice but i think it will work
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 10% 10% 10% 10%
grid-template-rows: auto
cards: null
- square: false
columns: 6
type: grid
cards:
- type: custom:mushroom-template-card
primary: ''
alignment: center
secondary: ''
icon: mdi:home
icon_color: blue
tap_action:
action: navigate
navigation_path: /lovelace
layout: vertical
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-top: -3px;
width: auto;
margin-left: px;
margin-right: auto;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.processor_use
primary_info: state
secondary_info: name
name: CPU
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-top: px;
width: auto;
margin-left: -25px;
margin-right: auto;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
browser_id: THIS
large: false
size: normal
content:
type: custom:stack-in-card
title: null
mode: vertical
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.memory_use_percent
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
ha-dialog {
--dialog-surface-position: static;
--dialog-content-position: static;
--dialog-surface-margin-top: 40px;
--mdc-dialog-min-width: 97vw;
--mdc-dialog-max-width: 97vw;
--ha-dialog-border-radius: var(--popup-border-radius, 28px);
}
:host([wide]) .content {
width: 100vw;
}
primary: >-
Использование ОЗУ: {{
states('sensor.memory_use_percent') | round(0) }}%
secondary: ''
icon: mdi:memory
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
color_thresholds:
- value: 90
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
entities:
- entity: sensor.memory_use_percent
name: Temperature
hours_to_show: 3
points_per_hour: 16
line_width: 3
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
- type: custom:mushroom-template-card
entity: sensor.processor_use
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
primary: >-
Использование процессора: {{
states('sensor.processor_use') | round(0) }}%
icon: mdi:cpu-64-bit
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.processor_use
hours_to_show: 3
points_per_hour: 16
line_width: 3
color_thresholds:
- value: 90
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.cpu_temperature
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
primary: >-
Температура процессора: {{
states('sensor.cpu_temperature') | round(0) }} °C
icon: mdi:cpu-64-bit
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.cpu_temperature
name: temperature
hours_to_show: 3
points_per_hour: 16
line_width: 3
lower_bound: 20
upper_bound: 80
color_thresholds:
- value: 80
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
- type: custom:mushroom-entity-card
entity: sensor.memory_use_percent
primary_info: state
secondary_info: name
name: Memory
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
margin-top: px;
width: auto;
margin-left: -25px;
margin-right: auto;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.cpu_temperature
primary_info: state
secondary_info: name
name: CPU
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
margin-top: px;
width: auto;
margin-left: -25px;
margin-right: auto;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.disk_use_percent_config
primary_info: state
secondary_info: name
name: Storage
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
margin-top: px;
width: auto;
margin-left: -25px;
margin-right: auto;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-template-card
primary: ''
alignment: center
secondary: ''
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
icon_color: green
tap_action:
action: toggle
layout: vertical
entity: input_boolean.thermostat_dropdown
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-top: -3px;
width: auto;
margin-left: px;
margin-right: auto;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: conditional
conditions:
- entity: input_boolean.thermostat_dropdown
state: 'on'
card:
type: custom:stack-in-card
title: null
mode: vertical
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.memory_use_percent
primary: >-
Использование ОЗУ: {{ states('sensor.memory_use_percent') |
round(0) }}%
secondary: ''
icon: mdi:memory
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
color_thresholds:
- value: 90
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
entities:
- entity: sensor.memory_use_percent
name: Temperature
hours_to_show: 3
points_per_hour: 16
line_width: 3
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.processor_use
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
primary: >-
Использование процессора: {{ states('sensor.processor_use')
| round(0) }}%
icon: mdi:cpu-64-bit
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.processor_use
hours_to_show: 3
points_per_hour: 16
line_width: 3
color_thresholds:
- value: 90
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.cpu_temperature
primary: >-
Температура процессора: {{ states('sensor.cpu_temperature')
| round(0) }} °C
icon: mdi:cpu-64-bit
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.cpu_temperature
name: temperature
hours_to_show: 3
points_per_hour: 16
line_width: 3
lower_bound: 20
upper_bound: 80
color_thresholds:
- value: 80
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
You will need to create an input_boolean helper and then use that in the template card as the entity + use it in the conditional card as well.
2 Likes
This is not the right place to ask this question. this page is related to Mushroom cards only.
post a general question in the forum but make sure to post things like sensors that you have and their output states.
You have done exactly what i would do. which is set a state and then query that rather than query the state of the entity every time.
i wouldnt do anything differently
1 Like
1umnyy
July 30, 2023, 12:32pm
7524
!
There are problems with indentation on the phone
post your yaml. but you can probably just increase the width of the card on the left with the below:
card_mod:
style: |
ha-card {
width: 200px;
}
you might need to put !important after the width. but i dont think so
1 Like
