Hi there,
I’ve looked through various threads here and on reddit and haven’t found what I’m looking for, so I hope somebody can help. I’ve tried nesting this in a grid and a horizontal card and I’ve tried working with various CSS properties (to the best of my limited abilities).
What I’m looking for: The svg (floorplan card) on the left side of the dashboard is currently aligned to the top of the “page”. Ideally, I’d like it to center itself so that it’s less obvious when the tabs on the right side (alarm panel, garbage pickups, open windows, turned-on lights, etc) are “longer” than the svg-file is high. I could circumvent this by simply increasing the height of the svg-file, but I fear that doing so will make the svg-file look “too tall” 90% of the time.
Alternatively - if possible - the white background of the svg-file would scale to the height of the right side. So that the image of the house itself would be centered but the white background would grow so that visually, both sides are of equal heights.
Here’s my YAML:
type: horizontal-stack
cards:
- type: custom:floorplan-card
full_height: false
config:
image: /local/floorplan/examples/home/haus3.1.svg
stylesheet: /local/floorplan/examples/home/home.css
defaults:
hover_action: null
tap_action: null
rules:
- entity: ''
tap_action:
action: navigate
navigation_path: /lovelace-kiosk/roomplan_eg
element: floor.eg
- entity: ''
tap_action:
action: navigate
navigation_path: /lovelace-kiosk/dachgeschoss
element: floor.dg
# The following entity is only a placeholder for a video-doorbell I want to get later on;
# whenever that's the case, the doorbell's feed would appear
# instead of the vaccume's map.
- entity: ''
element: doorbell
tap_action:
action: call-service
service: browser_mod.popup
service_data:
content:
type: picture-entity
entity: camera.xiaomi_cloud_map_extractor
camera_view: live
aspect_ratio: '1:1'
style:
width: 100%
height: 100%
align-self: center
justify-self: center
display: flex
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: |2-
{{ as_timestamp(states('sensor.date_time_iso')) | timestamp_custom('%A, der %d.
%B %Y @ %H:%M Uhr; KW %W') | replace("January","Januar")| replace("February","Februar")| replace("March","März")| replace("May","Mai")| replace("June","Juni")| replace("July","Juli")| replace("October","Oktober")| replace("December","Dezember")| replace("Monday","Montag") | replace("Tuesday","Dienstag") | replace("Wednesday","Mittwoch") | replace("Thursday","Donnerstag") | replace("Friday","Freitag") | replace("Saturday","Samstag") | replace("Sunday","Sonntag")}}
picture: ''
icon: mdi:calendar-clock
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.wertstoff_on
state: 'on'
chip:
type: entity
entity: sensor.wertstoff
double_tap_action:
action: none
content_info: name
name: Wertstoff
icon_color: yellow
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: input_boolean.restmull_on
state: 'on'
chip:
type: entity
entity: sensor.restmuell
double_tap_action:
action: none
name: Restmüll
content_info: name
icon_color: black
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: input_boolean.bio_on
state: 'on'
chip:
type: entity
entity: sensor.biomuell
double_tap_action:
action: none
name: Biomüll
content_info: name
icon_color: green
tap_action:
action: none
hold_action:
action: none
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: weather
entity: weather.dwd_weather_berlin_tegel
show_conditions: true
show_temperature: true
- type: entity
entity: sensor.s_bahn
- type: entity
entity: sensor.ersatzverkehr_u6
icon: mdi:train-variant
use_entity_picture: false
alignment: center
- type: custom:tabbed-card
attributes:
isFadingIndicator: true
options: {}
tabs:
- card:
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.home_alarm
states:
- armed_home
- armed_away
name: Alarmsystem
fill_container: false
show_keypad: true
attributes:
label: Alarm
icon: mdi:shield-home
- card:
type: vertical-stack
cards:
- type: entities
entities:
- type: custom:hui-element
label: Müll
card_type: vertical-stack
cards:
- type: markdown
content: |2-
## <ha-icon icon="mdi:trash-can"></ha-icon> Müllabholung
{% set date_1 = states.sensor.abfallnaechster_2.attributes | first |
as_timestamp %} {% set date_2 = states.sensor.biomuell.attributes | first
| as_timestamp %} {% set date_3 = states.sensor.restmuell.attributes |
first | as_timestamp %} {% set date_4 = states.sensor.wertstoff.attributes
| first | as_timestamp %}
{% set entity_1 = "sensor.abfallnaechster_2" %} {% set entity_2 =
"sensor.biomuell" %} {% set entity_3 = "sensor.restmuell" %} {% set
entity_4 = "sensor.wertstoff" %}
{% set type_1 = states.sensor.abfallnaechster_2.attributes.values() |
first %} {% set type_2 = states.sensor.biomuell.attributes.values() |
first %} {% set type_3 = states.sensor.restmuell.attributes.values() |
first %} {% set type_4 = states.sensor.wertstoff.attributes.values() |
first %}
{% set dict_1 = date_1,type_1 %} {% set dict_2 = date_2,type_2 %} {% set
dict_3 = date_3,type_3 %} {% set dict_4 = date_4,type_4 %}
{% set dict_11 = date_1,entity_1 %} {% set dict_12 = date_2,entity_2 %} {%
set dict_13 = date_3,entity_3 %} {% set dict_14 = date_4,entity_4 %}
{% set type = ([dict_1, dict_2, dict_3, dict_4] | min)[1] %} {% set date
= (([dict_11, dict_12, dict_13, dict_14] | min)[0]) %} {% set entity =
([dict_11, dict_12, dict_13, dict_14] | min)[1] %}
Die nächste Abholung ist der <b>{{type | replace("Hausabfall", "Restmüll")
| replace("Biomuell", "Biomüll") | replace("Biogut", "Biomüll") }}</b>, am
<b> {{date | timestamp_custom("%A</b>, den %d. %b. %Y") |
replace("Monday", "Montag") | replace("Tuesday", "Dienstag") |
replace("Wednesday", "Mittwoch") | replace("Thursday", "Donnerstag") |
replace("Friday", "Freitag") | replace("Saturday", "Samstag") |
replace("Sunday", "Sonntag") | replace("Mar", "Mrz") | replace("May",
"Mai") | replace("Oct", "Okt") | replace("Dec", "Dez") }} ({{
states(entity) | replace("in 0 Tagen", "<b>heute</b>") | replace("in 1
Tagen", "<b>morgen</b>")}}).
- type: entities
entities:
- entity: sensor.restmuell
- entity: sensor.biomuell
- entity: sensor.wertstoff
secondary_info: none
name: Gelber Sack
attributes:
label: Müll
icon: mdi:trash-can
- card:
type: custom:auto-entities
show_empty: true
card:
show_name: true
show_icon: true
show_state: true
type: glance
title: Lichter - an
state_color: true
filter:
include:
- domain: light
state: 'on'
options:
tap_action:
action: toggle
exclude:
- group: light.einzellichter
- entity_id: light.einzellichter
- integration: browser_mod
attributes:
label: Lichter
icon: mdi:lightbulb
# The auto-entity card for doors/windows isn't programmed yet. Placeholder.
- card:
type: custom:auto-entities
show_empty: true
card:
show_name: true
show_icon: true
show_state: true
type: glance
title: ''
state_color: true
filter:
include:
- group: Türen
state: 'on'
options:
tap_action:
action: toggle
attributes:
label: Fenster & Türen
icon: mdi:door-open
view_layout:
position: sidebar
Thank you for your help! If there’s any additional info you need, let me know.