|
|
# Mushroom Cards
|
|
|
|
|
|
## Выпадающий список к карточке
|
|
|
|
|
|
Объединение нескольких карточек, для управления подсветкой ТВ и медиаплеером
|
|
|
|
|
|
|
|
|
|
|
|
??? tip "Пример"
|
|
|
|
|
|
```yaml
|
|
|
type: custom:stack-in-card
|
|
|
cards:
|
|
|
- type: custom:layout-card
|
|
|
layout_type: custom:grid-layout
|
|
|
layout:
|
|
|
grid-template-columns: auto 20px
|
|
|
margin: '-4px -4px -8px -4px'
|
|
|
cards:
|
|
|
- type: custom:mushroom-media-player-card
|
|
|
entity: media_player.shield_universal
|
|
|
name: Shield TV
|
|
|
icon: mdi:play
|
|
|
use_media_info: true
|
|
|
use_media_artwork: false
|
|
|
show_volume_level: true
|
|
|
media_controls:
|
|
|
- on_off
|
|
|
- play_pause_stop
|
|
|
- previous
|
|
|
- next
|
|
|
volume_controls:
|
|
|
- volume_set
|
|
|
- volume_mute
|
|
|
fill_container: true
|
|
|
card_mod:
|
|
|
style: |
|
|
|
mushroom-shape-icon {
|
|
|
{% set media_type = state_attr(config.entity, 'media_content_type') %}
|
|
|
--card-mod-icon:
|
|
|
{% if media_type == 'tvshow' %}
|
|
|
mdi:television-classic
|
|
|
{% elif media_type == 'movie' %}
|
|
|
mdi:movie-open
|
|
|
{% elif media_type == 'music' %}
|
|
|
mdi:music
|
|
|
{% elif media_type == 'playlist' %}
|
|
|
mdi:music
|
|
|
{% else %}
|
|
|
mdi:play
|
|
|
{% endif %};
|
|
|
}
|
|
|
:host {
|
|
|
{% if not is_state(config.entity, 'off') %}
|
|
|
background: url( '{{ state_attr(config.entity, "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
|
|
|
{% endif %}
|
|
|
background-size: 50%, 100%;
|
|
|
background-position: right;
|
|
|
background-repeat: no-repeat;
|
|
|
background-blend-mode: lighten;
|
|
|
}
|
|
|
:host([dark-mode]) {
|
|
|
background-blend-mode: darken;
|
|
|
}
|
|
|
|
|
|
ha-card {
|
|
|
background: none;
|
|
|
--ha-card-box-shadow: 0px;
|
|
|
}
|
|
|
- type: custom:mushroom-template-card
|
|
|
entity: input_boolean.ambilight_dropdown
|
|
|
primary: ''
|
|
|
secondary: ''
|
|
|
icon: >-
|
|
|
{{ 'mdi:chevron-down' if is_state(entity, 'off') else 'mdi:chevron-up'
|
|
|
}}
|
|
|
icon_color: disabled
|
|
|
hold_action:
|
|
|
action: none
|
|
|
card_mod:
|
|
|
style: |
|
|
|
ha-card {
|
|
|
align-items: flex-end;
|
|
|
background: none;
|
|
|
--ha-card-box-shadow: 0px;
|
|
|
}
|
|
|
mushroom-shape-icon {
|
|
|
--shape-color: none !important;
|
|
|
}
|
|
|
- type: conditional
|
|
|
conditions:
|
|
|
- entity: input_boolean.ambilight_dropdown
|
|
|
state: 'on'
|
|
|
card:
|
|
|
type: custom:stack-in-card
|
|
|
cards:
|
|
|
- type: custom:mushroom-light-card
|
|
|
entity: light.ambilight_wled
|
|
|
icon: mdi:television-ambient-light
|
|
|
name: Ambilight
|
|
|
layout: horizontal
|
|
|
show_brightness_control: true
|
|
|
show_color_temp_control: true
|
|
|
show_color_control: true
|
|
|
use_light_color: true
|
|
|
card_mod:
|
|
|
style: |
|
|
|
ha-card {
|
|
|
background: none;
|
|
|
--ha-card-box-shadow: 0px;
|
|
|
}
|
|
|
```
|
|
|
[Ссылка на источник](https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily-part-1/388590/2691)
|
|
|
## Pop-Up включенный свет
|
|
|
|
|
|
|
|
|
|
|
|
Общий код с карточкой и поп-апом:
|
|
|
|
|
|
??? tip
|
|
|
|
|
|
```yaml
|
|
|
type: grid
|
|
|
cards:
|
|
|
- type: heading
|
|
|
heading: Новый раздел
|
|
|
- type: vertical-stack
|
|
|
cards:
|
|
|
- type: custom:bubble-card
|
|
|
card_type: pop-up
|
|
|
hash: "#test"
|
|
|
- type: custom:mushroom-title-card
|
|
|
title: "Включенный свет:"
|
|
|
- type: entity-filter
|
|
|
entities:
|
|
|
- light.light_1
|
|
|
- light.rozetka_11
|
|
|
- light.light_dim_21
|
|
|
state_filter:
|
|
|
- "on"
|
|
|
- type: custom:mushroom-template-card
|
|
|
primary: ""
|
|
|
secondary: >-
|
|
|
|
|
|
{{expand(state_attr('light.1_light_all', 'entity_id')) |
|
|
|
selectattr('state','eq','on') | list | count }}
|
|
|
icon: mdi:town-hall
|
|
|
tap_action:
|
|
|
action: navigate
|
|
|
navigation_path: "#test"
|
|
|
icon_color: |-
|
|
|
{% if is_state('light.1_light_all', 'on') %}
|
|
|
orange
|
|
|
{% endif %}
|
|
|
grid_options:
|
|
|
columns: 3
|
|
|
rows: 1
|
|
|
```
|
|
|
|
|
|
Требуется создать группу на свет и после заменить `1_light_all` на свое название группы
|
|
|
|
|
|
[Ссылка на источник](https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily-part-1/388590/1990)
|
|
|
|
|
|
## Климатическая карточка
|
|
|
|
|
|
|
|
|
|
|
|
??? tip
|
|
|
|
|
|
```yaml
|
|
|
type: custom:stack-in-card
|
|
|
cards:
|
|
|
- type: custom:mushroom-climate-card
|
|
|
entity: climate.thermostat_sejour
|
|
|
hvac_modes:
|
|
|
- heat
|
|
|
- auto
|
|
|
- fan_only
|
|
|
show_temperature_control: true
|
|
|
layout: horizontal
|
|
|
name: Climat
|
|
|
icon: mdi:thermometer-auto
|
|
|
double_tap_action:
|
|
|
action: more-info
|
|
|
- type: custom:stack-in-card
|
|
|
cards:
|
|
|
- type: grid
|
|
|
square: false
|
|
|
columns: 2
|
|
|
cards:
|
|
|
- type: custom:mushroom-entity-card
|
|
|
entity: sensor.sonde_salon_temp
|
|
|
primary_info: state
|
|
|
secondary_info: name
|
|
|
name: Temperature
|
|
|
icon_color: green
|
|
|
- type: custom:mushroom-entity-card
|
|
|
entity: sensor.sonde_salon_hum
|
|
|
primary_info: state
|
|
|
secondary_info: name
|
|
|
name: Humidity
|
|
|
icon: mdi:water-percent
|
|
|
icon_color: blue
|
|
|
- type: custom:mini-graph-card
|
|
|
entities:
|
|
|
- entity: sensor.sonde_salon_temp
|
|
|
name: Temperature
|
|
|
color: green
|
|
|
- entity: sensor.sonde_salon_hum
|
|
|
name: Humidity
|
|
|
color: '#2196f3'
|
|
|
y_axis: secondary
|
|
|
hours_to_show: 24
|
|
|
points_per_hour: 2
|
|
|
line_width: 3
|
|
|
font_size: 50
|
|
|
animate: true
|
|
|
show:
|
|
|
name: false
|
|
|
icon: false
|
|
|
labels: true
|
|
|
state: false
|
|
|
legend: false
|
|
|
fill: fade
|
|
|
card_mod:
|
|
|
style: |
|
|
|
mushroom-shape-icon {
|
|
|
{% if is_state(config.entity, 'heat_cool') %}
|
|
|
--card-mod-icon: mdi:autorenew;
|
|
|
animation: spin 3s ease-in-out infinite alternate;
|
|
|
{% elif is_state(config.entity, 'heat') %}
|
|
|
--card-mod-icon: mdi:fire;
|
|
|
animation: heat 2s infinite;
|
|
|
{% elif is_state(config.entity, 'cool') %}
|
|
|
--card-mod-icon: mdi:snowflake;
|
|
|
animation: cool 6s ease-in-out infinite;
|
|
|
{% elif is_state(config.entity, 'dry') %}
|
|
|
--card-mod-icon: mdi:water-percent;
|
|
|
animation: dry 1.5s linear infinite;
|
|
|
{% elif is_state(config.entity, 'fan_only') %}
|
|
|
--card-mod-icon: mdi:fan;
|
|
|
animation: spin 1s linear infinite;
|
|
|
{% else %}
|
|
|
--card-mod-icon: mdi:air-conditioner;
|
|
|
{% endif %}
|
|
|
display: flex;
|
|
|
}
|
|
|
@keyframes cool {
|
|
|
0%, 100% { transform: rotate(25deg); }
|
|
|
25% { transform: rotate(-25deg); }
|
|
|
50% { transform: rotate(50deg); }
|
|
|
75% { transform: rotate(-50deg); }
|
|
|
}
|
|
|
@keyframes heat {
|
|
|
0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
|
|
|
10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
|
|
|
20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
|
|
|
30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
|
|
|
40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
|
|
|
50% { --icon-color: rgba(var(--rgb-red), 0); }
|
|
|
}
|
|
|
@keyframes dry {
|
|
|
0%, 100% { --icon-symbol-size: 21px; }
|
|
|
10%, 90% { --icon-symbol-size: 22px; }
|
|
|
20%, 80% { --icon-symbol-size: 23px; }
|
|
|
30%, 70% { --icon-symbol-size: 24px; }
|
|
|
40%, 60% { --icon-symbol-size: 25px; }
|
|
|
50% { --icon-symbol-size: 26px; }
|
|
|
}
|
|
|
```
|
|
|
[Ссылка на источник]()
|
|
|
|