Symbol ausblenden wenn "on"

Dashboard/Cards/Frontend
1

HI ich versuche seit Tagen/Wochen ein Symbol bzw den ganzen “Knopf” wenn ein Fenster Z.B. geschlossen ist auszublenden…

Ich habe es ja schon mal geschafft das die Symbole zentriert sind und kein Hintergrund haben aber bekomme es nicht hin sie auszublenden.

Wer mir nen Tipp gibt welcher Früchte trägt bekommt n Bier :laughing:

type: grid
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: binary_sensor.tor_sensor2
        name: Bad
        icon: phu:lift-in-window-open1
        content_info: name
        use_entity_picture: false
        icon_color: red
        card_mod:
          style: |
            ha-card {
            justify-content: space-between;
              --chip-icon-size: 48px;
              --chip-height: 58px;
              --width: var(--chip-height) !important;
              border-radius: 50% !important;
              --chip-background: rgba(0, 0, 0, 0);
            }
        visibility: null
      - condition: state
        entity: binary_sensor.8ksensorbuero_sensor_2_tor
        state: "on"
      - type: entity
        entity: binary_sensor.tor_sensor2
        name: Tor
        icon: phu:lift-in-window-open1
        content_info: name
        use_entity_picture: false
        icon_color: red
        card_mod:
          style: |
            ha-card {
            justify-content: space-between;
              --chip-icon-size: 48px;
              --chip-height: 58px;
              --width: var(--chip-height) !important;
              border-radius: 50% !important;
              --chip-background: rgba(0, 0, 0, 0);
            }
        visibility: null
      - condition: state
        entity: binary_sensor.8ksensorbuero_sensor_2_tor
        state: "on"
      - type: entity
        entity: binary_sensor.tor_sensor2
        name: Bad
        icon: phu:lift-in-window-open1
        content_info: name
        use_entity_picture: false
        icon_color: red
        card_mod:
          style: |
            ha-card {
            justify-content: space-between;
              --chip-icon-size: 48px;
              --chip-height: 58px;
              --width: var(--chip-height) !important;
              border-radius: 50% !important;
              --chip-background: rgba(0, 0, 0, 0);
            }
        visibility: null
      - condition: state
        entity: binary_sensor.8ksensorbuero_sensor_2_tor
        state: "on"
      - type: entity
        entity: binary_sensor.tor_sensor2
        name: Tor
        icon: phu:lift-in-window-open1
        content_info: name
        use_entity_picture: false
        icon_color: red
        card_mod:
          style: |
            ha-card {
            justify-content: space-between;
              --chip-icon-size: 48px;
              --chip-height: 58px;
              --width: var(--chip-height) !important;
              border-radius: 50% !important;
              --chip-background: rgba(0, 0, 0, 0);
            }
        visibility: null
      - condition: state
        entity: binary_sensor.8ksensorbuero_sensor_2_tor
        state: "on"
    grid_options:
      columns: full
    alignment: center
column_span: 3

Einer von denen:

Screenshot 2024-11-26 193542
Screenshot 2024-11-26 1935421305×269 21.3 KB

OOODER diese hier zentrieren wenn sie sichtbar sind. Unsichtbar kann man sie machen aber sie werden immer rects ausgerichtet wenn sie sichtbar werden. Das ist einem Monk wie mir ein Graus…

Screenshot 2024-11-26 202025
Screenshot 2024-11-26 2020251255×257 15 KB

Im Bearbeitungsmodus sind es ja eni paar mehr…

Screenshot 2024-11-26 201957
Screenshot 2024-11-26 2019571366×332 26.6 KB

HIer der Code:

type: grid
cards:
  - square: false
    type: grid
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: binary_sensor.fenster_dominicbuero
        name: Dominic 1
        icon: phu:lift-in-window-open1
        theme: Graphite Light
        show_state: false
        icon_height: 50px
        visibility:
          - condition: state
            entity: binary_sensor.fenster_dominicbuero
            state: "on"
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: binary_sensor.fenster_badezimmer
        name: Bad
        icon: phu:lift-in-window-open1
        theme: Graphite Light
        show_state: false
        icon_height: 50px
        visibility:
          - condition: state
            entity: binary_sensor.fenster_badezimmer
            state: "on"
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: binary_sensor.fenster_dominicwohnzimmer
        name: Dominic 2
        icon: phu:lift-in-window-open1
        theme: Graphite Light
        show_state: false
        icon_height: 50px
        visibility:
          - condition: state
            entity: binary_sensor.fenster_dominicwohnzimmer
            state: "on"
          - show_name: true
      - show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: binary_sensor.fenster_dominicbuero
        name: Dominic 1
        icon: phu:lift-in-window-open1
        theme: Graphite Light
        show_state: false
        icon_height: 50px
        visibility:
          - condition: state
            entity: binary_sensor.fenster_dominicbuero
            state: "on"
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: binary_sensor.fenster_badezimmer
        name: Bad
        icon: phu:lift-in-window-open1
        theme: Graphite Light
        show_state: false
        icon_height: 50px
        visibility:
          - condition: state
            entity: binary_sensor.fenster_badezimmer
            state: "on"
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: binary_sensor.fenster_dominicwohnzimmer
        name: Dominic 2
        icon: phu:lift-in-window-open1
        theme: Graphite Light
        show_state: false
        icon_height: 50px
        visibility:
          - condition: state
            entity: binary_sensor.fenster_dominicwohnzimmer
            state: "on"
    columns: 12
    grid_options:
      columns: full
    alignment: center
column_span: 3
grid_options:
  "-columns": full
alignment: center
2

Die conditions gehören immer unter visibility. Wenn du das bei den Chips korrigiert, wird das dort funktionieren. Bei den Buttons ist es richtig.

3

Hmm… Ja das veruche ich ja. Bei den Buttons ist das kein Problem, aber bei den chhips bekomme ich es nicht hin. Ich kann entweder ALLE oder keinen ausblenden sobald mehr als einer drin ist…

Und sobald ich speichere setzt er mir immer die -condition in " "

type: grid
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        visibility:
          -condition: state
          entity: binary_sensor.fenster_badezimmer
          state: "on"
        entity: binary_sensor.fenster_badezimmer
        name: Bürotür
        icon: phu:lift-in-window-open1
        content_info: name
        use_entity_picture: false
        icon_color: red
        card_mod:
          style: |
            ha-card {
            justify-content: space-between;
              --chip-icon-size: 48px;
              --chip-height: 58px;
              --width: var(--chip-height) !important;
              border-radius: 50% !important;
              --chip-background: rgba(0, 0, 0, 0);
            }
      - type: entity
        entity: binary_sensor.tor_sensor2
        name: Bad
        icon: phu:lift-in-window-open1
        content_info: name
        use_entity_picture: false
        icon_color: red
        card_mod:
          style: |
            ha-card {
            justify-content: space-between;
              --chip-icon-size: 48px;
              --chip-height: 58px;
              --width: var(--chip-height) !important;
              border-radius: 50% !important;
              --chip-background: rgba(0, 0, 0, 0);
            }
    grid_options:
      columns: full
    alignment: center
alignment: center
column_span: 3
4

Für einen Chip kann man so keine visibility setzen, nur für die Chip-Karte.
Du musst also in dem Raster für jede Entität eine Chip-Karte machen und dort die bedingte Sichtbarkeit einstellen. Das hat aber leider wieder den Nachteil, dass die Chip-Karten wieder linksbündig angeordnet werden.

type: grid
cards:
  - type: custom:mushroom-chips-card
    visibility:
      - condition: state
        entity: binary_sensor.fenster_badezimmer
        state: "on"
    chips:
      - type: entity
        entity: binary_sensor.fenster_badezimmer
        name: Bürotür
        ...
5

Ja, das ist ja das Problem. Habe glaube ich schon aaaalle Möglichkeite die es so gibt getestet aber ich komme immer zum Ergebnis:

Entweder susgeblendbar und Linksbündig ODER Zentriert und nicht ausblendbar.

Das ist echt Mist. Ich weiß, Luxusprobleme aber ich bin der Meinung das das so ziemlich Standardfunktionen sind aber leider nicht im HA.

6

Ich meine, es ist bei allen Dingen so. Wenn man die “visibility” auf false setzt, wird nicht nur der Button, etc. nicht angezeigt, sondern der Platz wird “freigegeben”. Daher rutscht alles nach. Ist doof, aber scheinbar gehört es so.