Hallo zusammen,
habe ein Dashboard mit Grid gebastelt. Die einzelnen Karten sind auch an der richtigen Stelle vom Grid, aber die Karten passen sich der Gridfläche nicht an.
Kann mir einer sagen, was zu tun ist?
wallpanel:
enabled: false
hide_toolbar: true
hide_sidebar: true
fullscreen: true
idle_time: 0
views:
- theme: kibibit-dark-cards
title: Home
path: Flur-Home
type: custom:grid-layout
layout:
width: 100vw
height: 100vh
grid-template-columns: repeat(6, minmax(60px, 1fr))
grid-template-rows: repeat(6, 1fr)
gap: 4px
grid-template-areas: |
"Ventilator Ventilator Ventilator Rolladen Licht_Flur Licht_Flur"
"Ventilator Ventilator Ventilator Rolladen Licht_Flur Licht_Flur"
"Ventilator Ventilator Ventilator Rolladen Thermostat Thermostat"
"Licht_Buro Licht_Buro Licht_Buro Licht_Buro Thermostat Thermostat"
"Licht_Buro Licht_Buro Licht_Buro Licht_Buro Thermostat Thermostat"
"Licht_Buro Licht_Buro Licht_Buro Licht_Buro Thermostat Thermostat"
card_mod:
style: |
#view {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
ha-card {
height: 100%;
width: 100%;
box-sizing: border-box;
}
.grid-layout {
width: 100%;
height: 100%;
transform-origin: top left;
transform: scale(var(--wallpanel-scale, 1));
}
cards:
- type: custom:better-thermostat-ui-card
entity: climate.wozi_bt
disable_summer: true
view_layout:
grid-area: Thermostat
- type: custom:button-card
entity: switch.flur_licht_switch_0
view_layout:
grid-area: Licht_Flur
- type: custom:blind-card
entities:
- entity: cover.left_living_blind
name: Left blind
buttons_position: left
blind_color: '#FFD580'
view_layout:
grid-area: Rolladen
- type: custom:custom-features-card
features:
- type: custom:service-call
entries:
- type: toggle
tap_action:
action: perform-action
confirmation: false
target:
entity_id:
- light.chandelier
perform_action: light.turn_{{ 'on' if checked else 'off' }}
data: |
{% if checked %}
kelvin: 2000
{% endif %}
icon: ''
label: >-
{{ value if checked else states(config.entity) }}{{ unit if
checked else "" }}
value_attribute: brightness
unit_of_measurement: '%'
autofill_entity_id: true
entity_id: light.deckenventilator_lampe_rgb
styles: |-
:host {
flex-basis: 400%;
}
haptics: false
unchecked_icon: mdi:ceiling-light
checked_icon: mdi:ceiling-light-outline
allow_list: true
check_numeric: true
- type: custom:service-call
entries:
- type: slider
unit_of_measurement: '%'
value_attribute: brightness
icon: mdi:brightness-4
tap_action:
action: call-service
service: light.turn_on
data:
brightness_pct: '{{ value }}'
target:
entity_id: light.chandelier
entity_id: light.deckenventilator_lampe_rgb
styles: |
:host {
flex-basis: 200%;
}
range:
- 0
- 100
step: 1
thumb: default
value_from_hass_delay: 1
- type: slider
thumb: line
value_attribute: color_temp
tap_action:
action: call-service
service: light.turn_on
target:
entity_id: light.chandelier
data:
color_temp: '{{ value }}'
confirmation: true
unit_of_measurement: ' Mireds'
icon: mdi:thermometer
range:
- '{{ state_attr("light.chandelier", "min_mireds") }}'
- '{{ state_attr("light.chandelier", "max_mireds") }}'
step: 1
entity_id: light.deckenventilator_lampe_rgb
styles: |-
:host {
--label-color: var(--disabled-color);
--background: linear-gradient(-90deg, rgb(255, 167, 87), rgb(255, 255, 251));
--background-opacity: 1;
}
- type: custom:service-call
entries:
- type: slider
thumb: line
range:
- 0
- 360
step: 0.1
value_attribute: Hs color[0]
icon: ''
tap_action:
action: perform-action
target:
entity_id: light.sunroom_ceiling
data:
hs_color:
- '{{ value }}'
- 100
perform_action: light.turn_on
entity_id: light.deckenventilator_lampe_rgb
styles: |-
:host {
flex-basis: 200%;
--background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 66%, #f0f 83%, #f00 100%);
--background-opacity: 1;
}
.tooltip {
background: hsl({{ value }}, 100%, 50%);
}
- type: custom:service-call
entries:
- type: selector
entity_id: light.deckenventilator_lampe_rgb
value_attribute: rgb_color
options:
- tap_action:
action: call-service
service: light.turn_on
data:
color_temp: 500
target:
entity_id: light.chandelier
option: 255,255,255
label: Weiß
icon: mdi:lightbulb
entity_id: light.deckenventilator_lampe_rgb
type: button
value_attribute: state
styles: |-
:host {
flex-basis: 200%;
--label-color: white;
--color: white;
{% if (state_attr(config.entity, "rgb_color") or []).join(',') == '255,137,14' %}
--label-filter: invert(1);
--icon-filter: invert(1);
{% endif %}
}
- tap_action:
action: call-service
service: light.turn_on
data:
color_name: red
target:
entity_id: light.chandelier
confirmation: true
option: 255,0,0
label: Rot
icon: mdi:lightbulb
entity_id: light.deckenventilator_lampe_rgb
type: button
value_attribute: state
styles: |
:host {
--label-color: red;
--color: red;
{% if (state_attr(config.entity, "rgb_color") or []).join(',') == '255,0,0' %}
--label-filter: invert(1);
{% endif %}
}
- tap_action:
action: call-service
service: light.turn_on
data:
color_name: red
target:
entity_id: light.chandelier
confirmation: true
option: 255,255,0
label: Gelb
icon: mdi:lightbulb
entity_id: light.deckenventilator_lampe_rgb
type: button
value_attribute: state
styles: |
:host {
--label-color: yellow;
--color: yellow;
{% if (state_attr(config.entity, "rgb_color") or []).join(',') == '255,0,0' %}
--label-filter: invert(1);
{% endif %}
}
- tap_action:
action: call-service
service: light.turn_on
data:
color_name: green
target:
entity_id: light.chandelier
option: 0,255,0
label: Grün
icon: mdi:lightbulb
entity_id: light.deckenventilator_lampe_rgb
type: button
value_attribute: state
styles: |-
:host {
--label-color: green;
--color: green;
{% if (state_attr(config.entity, "rgb_color") or []).join(',') == '0,255,0' %}
--label-filter: invert(1);
{% endif %}
}
- tap_action:
action: call-service
service: light.turn_on
data:
color_name: blue
target:
entity_id: light.chandelier
option: 0,0,255
label: Blau
icon: mdi:lightbulb
entity_id: light.deckenventilator_lampe_rgb
type: button
value_attribute: state
styles: |-
:host {
--label-color: blue;
--color: blue;
{% if (state_attr(config.entity, "rgb_color") or []).join(',') == '11,0,255' %}
--label-filter: invert(1);
{% endif %}
}
- tap_action:
action: call-service
service: light.turn_on
target:
entity_id: light.chandelier
data:
color_name: purple
option: 254,11,255
label: Purpel
icon: mdi:lightbulb
entity_id: light.deckenventilator_lampe_rgb
type: button
value_attribute: state
styles: |-
:host {
--label-color: purple;
--color: purple;
{% if (state_attr(config.entity, "rgb_color") or []).join(',') == '254,11,255' %}
--label-filter: invert(1);
{% endif %}
}
styles: |-
:host {
flex-basis: 500%;
}
.background {
{% if is_state(config.entity, "on") %}
--background: rgb({{ state_attr(config.entity, "rgb_color") }});
{% endif %}
}
autofill_entity_id: true
styles: ''
view_layout:
grid-area: Licht_Buro
- type: vertical-stack
cards:
- show_name: true
show_icon: true
type: button
entity: fan.deckenventilator_buro
name: Deckenventilator Büro
icon: mdi:fan
tap_action:
action: none
hold_action:
action: none
card_mod:
style:
ha-icon:
$: >
{% set p = state_attr(config.entity, 'percentage') |
default(0) | float %}
{% if is_state(config.entity, 'on') and p > 0 %}
animation: spin {{ 2 - (p / 100) * 1.5 }}s linear infinite;
transform-style: preserve-3d;
perspective: 800px;
{% if p > 70 %}
filter: drop-shadow(0 0 12px #00bfff);
{% endif %}
{% endif %}
- type: custom:custom-features-card
features:
- type: custom:service-call
entries:
- type: toggle
tap_action:
action: toggle
target:
entity_id: fan.deckenventilator_buro
unchecked_icon: mdi:fan
checked_icon: mdi:fan-off
- type: custom:service-call
entries:
- type: selector
entity_id: fan.deckenventilator_buro
value_attribute: percentage_step
options:
- option: 5%
icon: mdi:tally-mark-1
tap_action:
action: perform-action
perform_action: fan.set_percentage
target:
device_id: 5706b666700e40b63af7c71c700235be
data:
percentage: 5
- option: 25%
icon: mdi:tally-mark-2
tap_action:
action: perform-action
perform_action: fan.set_percentage
target:
device_id: 5706b666700e40b63af7c71c700235be
data:
percentage: 25
- option: 45%
icon: mdi:tally-mark-3
tap_action:
action: perform-action
perform_action: fan.set_percentage
target:
device_id: 5706b666700e40b63af7c71c700235be
data:
percentage: 45
- option: 65%
icon: mdi:tally-mark-4
tap_action:
action: perform-action
perform_action: fan.set_percentage
target:
device_id: 5706b666700e40b63af7c71c700235be
data:
percentage: 65
- option: 85%
icon: mdi:tally-mark-5
tap_action:
action: perform-action
perform_action: fan.set_percentage
target:
device_id: 5706b666700e40b63af7c71c700235be
data:
percentage: 85%
card_mod:
style: |
:host {
width: 100%;
max-width: 500px;
}
view_layout:
grid-area: Ventilator