Hallo zusammen,
ich bin auf der Suche eine oder mehrere Cards auf bzw. zuzuklappen? Bisher habe ich es über einen input_boolean-Helfer und eine Bedingungskarte gelöst. Ich fände allerdings eine Accordion-Funktion oder ähnliches besser. Kennt von euch jemand sowas, was auch noch aktuell gehalten wird? Gefunden habe ich in HACS nämlich schon fold-entity-row und lovelace-expander-card. Aber beide scheinen nicht mehr wirklich aktiv/aktuell.
Ich habe beide ausprobiert und die expander card hat derart genervt mit all ihren bugs (haben auch die meisten forks), dass ich nur noch die fold-entity-row von thomasloven (Thomas Lovén) · GitHub nutze. Seine cards finde ich eigentlich alle sehr gelungen.
Sie funktioniert und mit einer stack-in-card oder dem custom:hui-element kann man sie sogar ausserhalb einer Entitätenkarte verwenden. Auch wenn Thomas selbst schreibt, man solle sie nur dort drin verwenden.
Edit: und da ich vieles von Thomas nutze, scheint er, wenn es nötig wird, seine Repositories auch zu aktualisieren.
1 „Gefällt mir“
Ich habe es getestet. Leider ist man bei der Expander Card zu eingeschränkt, welche Karten man nutzen kann. Ich habe jetzt mal auf popup-card umgestellt und eine bereits vorhandene Entität (input_boolean) genommen. Das klappt auch ganz gut.
Vielleicht gibt es ja noch andere Ideen.
Was‘n das ?
Bubble card ?
Gehört zu browser_mod
https://github.com/thomasloven/hass-browser_mod
Dann hast du eine popup-card
https://www.reddit.com/r/homeassistant/comments/xassjl/browser_mod_20_popup_card_opens_moreinfo_behind/
Die expander-card(s) ist/sind meiner Meinung nach kaputt und echt nicht mehr zu empfehlen.
Fold-entity-row ist nichts für dich? Hat zwar keinen UI-Mode und man muss alles in YAML konfigurieren, aber ich konnte alles was ich wollte damit umsetzen. Zusammengeklappt ist sie bei mir wie eine tile-card für eine Leuchte. Ausgeklappt dann zusätzlich der Helligkeitsregler (Slider) der tile-card und ein paper-buttons-row mit overflow-x: scroll (vertikales scrollen). Das funktioniert bestens.
Andere Karten habe ich noch nicht ausprobiert. Was für Karten möchtest du denn einbetten?
Mehrere verschachtelte Karten, unter anderem Mushroom und vertical stack
Also ich könnte mir vorstellen, dass das geht. Hier mal mein Beispiel:
Ich benutze die expander-card(fork). Was geht denn bei euch nicht? Ich benutze Sie allerdings auch nur zum gruppieren und ein und ausklappen wie Sie gedacht ist. Bisher gingen alle Karten vor allem die mushroom Karten.
Beim Aufklappen kommen dann halt die einzel Rolladen.
Das sieht mal fein aus. Kannst du den Code teilen?
Ich würde gerne sowas in der Art abbilden können. Das habe ich zumindest jetzt mit der Popup-Card realisiert.
type: custom:popup-card
title: Personen
dismissable: true
card:
type: custom:stack-in-card
title: ''
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-person-card
entity: person.xyz
secondary_info: last-changed
icon_type: entity-picture
card_mod:
style: |
ha-card {
border: none;
}
- type: tile
entity: sensor.sm_s926b_battery_level
name: Phone
card_mod:
style: |
ha-card {
border: none;
}
- type: tile
entity: sensor.galaxy_watch5_pro_d40z_battery_level
name: Watch
card_mod:
style: |
ha-card {
border: none;
}
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-template-card
primary: ''
secondary: |
{{ states('sensor.sm_s926b_geocoded_location') }}
icon: ''
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: map
entities:
- entity: person.xyz
auto_fit: true
dark_mode: false
default_zoom: 12
hours_to_show: 24
hold_action:
action: none
card_mod:
style: |
ha-card {
border: none;
margin-top: -20px;
margin-left: 50px;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-person-card
entity: person.wife
secondary_info: last-changed
icon_type: entity-picture
card_mod:
style: |
ha-card {
border: none;
}
- type: tile
entity: sensor.wife_sm_a546b_battery_level
name: Phone
card_mod:
style: |
ha-card {
border: none;
}
- type: markdown
content: ' '
card_mod:
style: |
ha-card {
border: none;
}
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-template-card
primary: ''
secondary: |
{{ states('sensor.wife_sm_a546b_geocoded_location') }}
icon: ''
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: map
entities:
- entity: person.wife
auto_fit: true
dark_mode: false
default_zoom: 12
hours_to_show: 24
hold_action:
action: none
card_mod:
style: |
ha-card {
border: none;
margin-top: -20px;
margin-left: 50px;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-person-card
entity: person.son
icon_type: entity-picture
secondary_info: last-changed
card_mod:
style: |
ha-card {
border: none;
}
- type: tile
entity: sensor.moto_g54_5g_battery_level
name: Phone
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-entity-card
entity: device_tracker.kidswatch
name: Kidswatch
icon: mdi:clock
card_mod:
style: |
ha-card {
border: none;
}
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-template-card
primary: ''
secondary: |
{{ states('sensor.moto_g54_5g_geocoded_location') }}
icon: ''
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: map
entities:
- entity: person.son
auto_fit: true
dark_mode: false
default_zoom: 12
hours_to_show: 24
hold_action:
action: none
card_mod:
style: |
ha-card {
border: none;
margin-top: -20px;
margin-left: 50px;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-person-card
entity: person.abc
secondary_info: last-changed
icon_type: entity-picture
card_mod:
style: |
ha-card {
border: none;
border-top: 1px dashed;
border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
}
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-template-card
primary: ''
secondary: |
{{ states('sensor.abc_sm_s928b_geocoded_location') }}
icon: ''
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: map
entities:
- entity: person.abc
auto_fit: true
dark_mode: false
default_zoom: 12
hours_to_show: 24
hold_action:
action: none
card_mod:
style: |
ha-card {
border: none;
margin-top: -25px;
margin-left: 50px;
}
entity: input_boolean.somebody_is_home
Ich wüsste nicht wie ich das mit der Expander-Card machen soll. Ist halt stack-in-card kombiniert mit mushroom- und tile-cards
@Chrizzz ja klar, gerne:
type: custom:stack-in-card
cards:
- type: custom:fold-entity-row
head:
type: custom:hui-element
card_type: tile
name: Kugelleuchte
entity: light.kuche_kugelleuchte
card_mod:
style: |
ha-card {
background: none;
border: none;
box-shadow: none;
}
padding: 0
entities:
- type: custom:hui-element
card_type: tile
entity: light.kuche_kugelleuchte
features:
- type: light-brightness
card_mod:
style: |
.content {
display: none !important;
}
hui-card-features {
padding-top: 12px;
}
ha-card {
background: none;
border: none;
box-shadow: none;
}
- type: divider
style:
margin-top: '-4px'
margin-left: 14px
margin-right: 12px
opacity: 0.7
- type: custom:paper-buttons-row
styles:
justify-content: flex-start
padding: 0px 0px 6px 0px
margin-left: 6px
margin-right: 12px
overflow-x: scroll
base_config:
name: false
layout: icon
ripple: none
styles:
icon:
height: 40px
width: 40px
button:
filter: |-
{% if is_state('light.kuche_kugelleuchte','off') %}
saturate(10%)
{% endif %}
state_styles:
'on':
icon:
outline: 2px solid rgba(128, 128, 128, 0.7)
outline-offset: 2px
buttons:
- entity: scene.kuche_kugelleuchte_0_nachtlicht
image: >
{{
state_attr('scene.kuche_kugelleuchte_0_nachtlicht','entity_picture')
}}
- entity: scene.kuche_kugelleuchte_1_abendlicht
image: >
{{
state_attr('scene.kuche_kugelleuchte_1_abendlicht','entity_picture')
}}
- entity: scene.kuche_kugelleuchte_2_warm
image: >
{{ state_attr('scene.kuche_kugelleuchte_2_warm','entity_picture')
}}
- entity: scene.kuche_kugelleuchte_3_hell
image: >
{{ state_attr('scene.kuche_kugelleuchte_3_hell','entity_picture')
}}
- entity: scene.kuche_kugelleuchte_4_strahlend
image: >
{{
state_attr('scene.kuche_kugelleuchte_4_strahlend','entity_picture')
}}
- entity: scene.kuche_kugelleuchte_5_neutral
image: >
{{
state_attr('scene.kuche_kugelleuchte_5_neutral','entity_picture')
}}
- entity: scene.kuche_kugelleuchte_6_kalt
image: >
{{ state_attr('scene.kuche_kugelleuchte_6_kalt','entity_picture')
}}
Du brauchst dafür:
stack-in-card
hui-element
fold-entity-row
paper-buttons-row
card_mod
Und die icon-Bilder für die Szenen habe ich hier her: hue-scene-icons/icons at main · mattmon/hue-scene-icons · GitHub
Klasse, herzlichen Dank.
Hab mir jetzt nicht alles angeschaut, aber eine Beschreibung oder Bild wäre sicherlich leichter dein Vorhaben zu verstehen
Ok, der Code steht ja schon weiter oben, hier noch ein Screenshot
Das würde ich gerne komplett zuklappen/verstecken können. Ist eine custom:stack-in-card mit mehreren verschachtelten custom:stack-in-card und custom:mushroom-template-card. Bisher hatte ich es über eine Conditional-Card gemacht, habe aber jetzt auf Popup-Card umgeschwenkt.
Und was passiert mit der expander Card?
Seh jetzt kein Element was nicht tun sollte
Es passt irgendwie nicht richtig rein. Habe schon alle Padding-Werte auf 0 gesetzt
Sieht halt etwas unschön aus, aber ich teste noch. Und je nach Auflösung wird es noch schlimmer
Ok sieht echt komisch aus. Muss ich doch mal nachbauen
1 „Gefällt mir“
Das Problem scheint, dass sich die Expand-Card von der Größe her nicht am Inhalt orientiert.
