You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
9.2 KiB
9.2 KiB
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;
}
```
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 на свое название группы
Климатическая карточка
??? 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; }
}
```
Ссылка на источник