🍬 Bonbon Strategy - eine vollautomatische Dashboard Strategie

Hallo Zusammen! Darf ich vorstellen?

:candy: Bonbon Strategy

Das hier hab ich in den letzten Wochen entwickelt und wĂĽrde mich ĂĽber Feedback freuen!

Die Dashboard Strategie ist entstanden, weil das Standard Dashboard von Home Assistant bis vor Kurzem kaum derartiges anbot. Auch das jĂĽngste Update, was zwar einige Funktionen in diese Richtung mitbringt, sieht insgesamt trocken aus.

Das ständige manuelle Zusammenklicken von Karten und Entitäten oder das rumkopieren von Karten-YAML sobald etwas neues dazu kommt oder den Raum wechselt, wurde langsam nervig.

Ich stellte mir die Frage warum es denn die Norm ist sich selbst für die absoluten Grundfunktionen manuelle Dashboards bauen zu müssen, obwohl man schon so viele Sachen in HA selbst pflegt, wie zum Beispiel Etagen, Bereiche, dazugehörige Sensoren, Icons, Bezeichnungen etc.

Mit einer Dashboard Strategy macht man das ganze nur einmal. Im Grunde ist eine Dashboard Strategie ein YAML Generator, deren Funktionsweise man komplett in der Hand hat.

Ăśber Feedback wĂĽrde ich mich sehr freuen! Scheut euch auch nicht ein issue aufzumachen!

Hier ist der GitHub Link: GitHub - trashbytes/bonbon-strategy: A Home Assistant strategy which automatically generates a colorful dashboard.

Ihr könnt die Repository bei HACS hinzufügen und es darüber installieren.

Sieht recht gut aus.

Das Einzige was mich immer etwas stört, sind die “geschlossenen” Fenster und Türen.

Mich interessiert nicht wenn ein Fenster geschlossen ist, sondern nur wenn es NICHT geschlossen ist.

Ich habe dafür die custom card “auto-entities” genommen.

  • “include” alle TĂĽren und Fenster
  • “exclude” geschlossen

Dadurch sehe ich auf einen Blick, welche Fenster und TĂĽren noch offen sind.

Mich würd glaub ich eher stören wenn die Karten kommen und gehen, aber du könntest tatsächlich auch mit dieser Strategie deinen Ansatz gehen.

Du könntest bei bonbon_openings das disabled: true setzen und dann eine eigene Section erzeugen. Kopier einfach die Options von bonbon_openings und füg zusätzlich cards: ein, wo du dann deine auto-entities card einfügst. Stand jetzt müsstest du das allerdings für jeden Bereich duplizieren und dann area_id: area_id setzen und darin deine Filter für jeden Bereich anpassen.

bonbon_openings:
  disabled: true
viel_bessere_openings:
  name: Fenster & TĂĽren
  icon: mdi:window-open-variant
  order: 7
  hide_separator: false
  area_id: <area_id> # hier deine area id
  min_columns: 1
  max_columns: 2
  cards: # hier dein auto-entities, zusätzlich gefiltert für area id

Damit es auch so aussieht wie der Rest, empfiehlt es sich bei card in auto-entities natürlich Bubble Card zu nehmen. Der card_param muss dann “entity” sein. Wenn du hide_separator auf false lässt, solltest du natürlich auch eine else Karte liefern, die besagt, dass keine Fenster offen sind, aber dann wärst du ja wieder beim Ursprungsproblem :smiley:

Sauberer wäre es die Section komplett zu verstecken und einen eigene View zu erzeugen, wie ich ihn habe, nur halt mit auto-entities.

So sind meine Standard Parameter fĂĽr ein Bubble Card:

type: custom:bubble-card
card_type: button
button_type: state
show_state: true
use_accent_color: true
tap_action:
  action: none
button_action:
  tap_action:
    action: toggle

Hab ich jetzt nicht getestet, aber in der Theorie muss das gehen.

Ich könnte dir natürlich auch einen Replacer zur Verfügung stellen, den du dann nutzen kannst um das nicht zig mal schreiben zu müssen. Ich könnte deine Karten-Parameter durchlaufen und dann zB. einen String wie “<area_id>” mit der tatsächlichen area_id ersetzen, sodass dein Filter dynamisch bleibt. Dann müsstest du nur bei viel_bessere_openings unter area_id alle deine area_ids listen, in der dieser Bereich angezeigt werden soll, und der Rest wird dynamisch gefüllt.

EDIT: Ich hab das jetzt mal ausprobiert:

viel_bessere_openings:
  name: Fenster & TĂĽren
  icon: mdi:window-open-variant
  order: 7
  hide_separator: false
  area_id: buro
  min_columns: 1
  max_columns: 2
  cards:
    - type: custom:auto-entities
      bonbon_area_id: buro
      card:
        type: grid
        columns: 1
        square: false
      card_param: cards
      filter:
        include:
          - entity_id: binary_sensor.*contact
            state: "on"
            area: BĂĽro
            options:
              type: custom:bubble-card
              card_type: button
              button_type: state
              show_state: true
              use_accent_color: true
              tap_action:
                action: none
              button_action:
                tap_action:
                  action: toggle

Funktioniert, aber da greifen die Styles nicht, weil die Karten ja erst in der Runtime existieren und nicht schon in der Strategy. Es sind also zwar Bubble Cards, aber die sehen nicht aus wie die restlichen. Schatten, Farben, Hover-Effekte us.

Besser funktionieren tut das hier:

noch_bessere_openings:
  name: Fenster & TĂĽren
  icon: mdi:window-open-variant
  order: 8
  hide_separator: false
  area_id: buro
  min_columns: 1
  max_columns: 2
  cards:
    - type: custom:bubble-card
      card_type: button
      button_type: state
      show_state: true
      use_accent_color: true
      tap_action:
        action: none
      button_action:
        tap_action:
          action: toggle
      entity: binary_sensor.0xa4c138ae116175b9_contact
      styles: |
        :host {
          display: ${hass.states['binary_sensor.0xa4c138ae116175b9_contact'].state == 'on' ? '' : 'none'} !important;
        }

Hier nutzen wir die nativen Funktionen von Bubble Card, etwas was ich noch intensiver nutzen möchte. Allerdings müsste man es damit auch alles manuell machen.

Ich denke die Idee mit string replacern für <area_id>, <entity_id> etc. ist ganz cool. Dann könnte ich es ermöglichen den automatisch aggregierten Karten eigene Styles zu verpassen, die dann automatisch die richtigen Werte auflösen und funktionieren.

Hey @Gurumir, ich hab nun in v2.1.0 eine Pseudo Funktion namens :hide() für den Selektor implementiert. Damit ist nun das, was du mit auto-entities löst, direkt möglich:

cards: binary_sensor.*[device_class=door|garage_door|window|opening]:hide([state=off])

Das hab ich mir mal auf Home gepackt.

Mich interessieren die Codes der einzelnen Buttons. WĂĽrdest du die Codes bereitstellen?

LG

Ich stimme dir voll und ganz zu - was “in Ordnung” ist, wird nicht angezeigt.
Ich habe auch einiges mit der “auto-entilitie”-Card gemacht.
Ist ein (oder mehre) Fenster offen, erscheint ein entsprechendes Badge (in rot).
Klickt man darauf erscheint eine Unteransicht mit allen geöffneten Fenstern.
Das setze ich für verschiedene Sachen ein, z. B. Heizung, Solaranlage, Urlaub, Waschmaschine…
Nur wenn hier die Auslöser “wahr” sind, werden die Badge angezeigt.
Das hält mein Desktop schön übersichtlich und nicht so überfrachtet.
Darum habe ich fĂĽr Handy und Wandtablet das selbe Desktop - muss also auch nur eins pflegen

Ich versuche schon die ganze Zeit ein Dashboard damit zu bauen. Ohne Erfolg.

Bei den einzelnen Räumen werden mir ganz unten sämtliche Entitäten angezeigt, die kein Mensch benötigt.

wie stelle ich ein, dass ich nur Lichter, Rollläden, Heizung und Automationen angezeigt bekomme?

Hi @Stricki, das kannst du nun so ähnlich auch direkt mit Bonbon Strategy machen. Allerdings nicht im Popup/mit Unteransich. Überlege noch ob und wie ich Popups implementiere. Hier ein paar Beispiele:

cards:
  - "*[label=always_on][hidden=*]:hide([state=on])" # Entitäten mit der Bezeichnung „always_on“ werden angezeigt, falls sie ausgeschaltet sind
  - binary_sensor.*smoke:hide([state=off|unknown]) # Rauchmelder bei Rauchentwicklung
  - binary_sensor.*leak:hide([state=off|unknown]) # Wassersensoren bei der Erkennung von Wasser
  - sensor.*battery[entity_category=diagnostic]:hide([state>10]) # Akkus und Batterien unter 10 %
  - binary_sensor.*contact[device_class=door]:hide([state=off]) # Offene TĂĽren
  - binary_sensor.*contact[device_class=window]:hide([state=off]) # Offene Fenster
  - input_boolean.briefkasten:hide([state=off]) # Mein Briefkasten, der durch einen Zigbee-PIR-Bewegungssensor im Inneren ausgelöst wird; durch Antippen wird er geleert
  - light.*:not([label=nightlight|stimmungslicht]):not([platform=group]):hide([state=off]) # alle Leuchten auĂźer Nacht- und Stimmungsleuchten sowie eingeschaltete Leuchtengruppen

Hi @Adri

Dafür gibt’s den “Sichtbar” Schalter in Home Assistant. Die Entitäten, die keiner braucht, versteckst du damit einfach. Drück lange auf den Button drauf und deaktiviere dann den Schalter “Sichtbar”.

Alternativ kannst du auch ein label namens “hidden” oder “bonbon_hidden” hinzufügen. Dann wird’s nur für Bonbon Strategy versteckt und nicht für andere Dashboard Strategien (wie zB. die von Simon oder auch integrierte Standard Strategien).

Es ist ganz normal, dass du anfangs viel “aufräumen” musst. Sobald das einmal getan ist, dauert’s bei neuen Geräten oft nur 5 Sekunden die unnötigen Schalter und Infos zu verstecken, wenn überhaupt. So ist es mit allen Strategien.

Danke!

Jetzt habe ich noch zwei Fragen:

  1. Wie kann ich mir das Haus auf der Startseite generieren?
  2. Wie bekomme ich es farblich so gestaltet, wie bei dir? Magst du mir deinen Code zur VerfĂĽgung stellen? :slight_smile:

Das ist mein aktueller Code:

strategy:
  type: custom:bonbon-strategy
  options:
    styles:
      use_bonbon_colors: true
      primary_accent_color: '#009ac7'
      card_background_color_light: '#fff'
      card_background_color_dark: '#222'
      card_text_color_light: '#111'
      card_text_color_dark: '#eee'
      background_image_light: null
      background_image_dark: null
    actions:
      default:
        icon: none
        button: auto
    views:
      view_key:
        max_columns: 1
        icon: mdi:icon-name
        sections:
          bonbon_weather:
            name: Wetter
          bonbon_persons:
            name: Personen
          bonbon_favorites:
            name: Favoriten
          bonbon_areas:
            name: Bereiche
          bonbon_robots:
            name: Roboter
          bonbon_security:
            name: Sicherheit
          section_key:
            name: Display Name
            icon: mdi:icon-name
            column: auto
            order: 1
            disabled: false
            hide_separator: false
            min_columns: 1
            max_columns: 2
            separator_buttons: null
            show_graphs: false
            show_forecast: false
            prefix: false
            cards:
              - entity_id
              - light.*
              - binary_sensor.*[device_class=door]
              - etc.
      bonbon_home:
        sections:
          bonbon_weather:
            name: Wetter
            separator_buttons: false
            cards: weather.*
            show_forecast: daily
          bonbon_persons:
            hide_separator: true
          bonbon_areas:
            separator_buttons: light.*:not([label=nightlight])
            separator_combine_lights: when-on
            sub_buttons: light.*:not([label=nightlight])
            sub_comine_lights: when-on
      bonbon_area:
        sections:
          bonbon_environment:
            name: Raumklima
          bonbon_scenes:
            name: Szenen & Skripte
          bonbon_lights:
            name: Beleuchtung
          bonbon_switches:
            name: Schalter & Taster
          bonbon_media:
            name: Media Player
          bonbon_climate:
            name: Heizung & Klima
          bonbon_covers:
            name: Rollläden & Beschattung
          bonbon_openings:
            name: Fenster & TĂĽren
          bonbon_valves:
            name: Wasser
          bonbon_miscellaneous:
            name: Sonstiges

Ich komme leider überhaupt nicht weiter…

LG

Gerne!

Zunächst noch ein Hinweis: Du hast den Erklär-Code kopiert. Du solltest alles ab “actions” entfernen.

Ich nutze das Theme “Catpppuccin Auto Latte Frappe” von hier: GitHub - catppuccin/home-assistant: 🏠 Soothing pastel theme for Home Assistant · GitHub

AuĂźerdem dann diese Farbwerte und Hintergrundbilder:

styles:
  primary_accent_color: "#ca9ee6"
  card_background_color_light: "#eff1f5"
  card_background_color_dark: "#303446"
  background_image_dark: /local/dashboard-background-dark.png
  background_image_light: /local/dashboard-background-light.png

Die Hintergrundbilder kannst du dir hier runterladen:

FĂĽr das Haus hab ich einfach Google Gemini ein Foto von unserem Haus geschickt und dann gebeten eine isometrische Grafik wie aus einem Videospiel daraus zu erzeugen und anschlieĂźend in Photoshop verbessert. Dann nochmal Gemini geschickt und gebeten eine Nacht-Version zu erzeugen. AnschlieĂźend beides in PS freigestellt.

Dargestellt wird das Haus mit “Atmospheric Weather Card” und ein paar Bubble Cards: GitHub - shpongledsummer/atmospheric-weather-card: Animated weather card for Home Assistant · GitHub

Ich ordne das auf einem Picture Elements Card mit einem leeren 16:9 png an, damit ich da meine eigenen Bubble Cards frei positionieren kann, aber vielleicht reicht dir schon Atmospheric Weather Card alleine.

Hier ist meine Config dazu:

      bonbon_weather:
        hide_separator: true
        order: 1
        cards:
          - type: picture-elements
            image: /local/16x9-00000000.png?v=5
            card_mod:
              style: |
                ha-card {
                  height: auto !important;
                  width: 100% !important;
                  aspect-ratio: 16/9 !important;
                  border: none !important;
                  box-shadow: none !important;
                  background: transparent !important;
                  background-color: transparent !important;
                  overflow: visible !important;
                }
                ha-card:before,
                ha-card:after {
                  display: none !important;
                }
                .type-custom-atmospheric-weather-card {
                  height: 100% !important;
                  pointer-events: none;
                }
            elements:
              - type: custom:atmospheric-weather-card
                weather_entity: weather.wetter_zuhause
                day: /local/aw8-day.png?v=10
                night: /local/aw8-night.png?v=10
                moon_phase_entity: sensor.moon_phase
                sun_moon_x_position: 80
                sun_moon_y_position: 50
                sun_entity: sun.sun
                full_width: true
                image_alignment: bottom-right
                image_scale: 92
                disable_text: true
                moon_style: blue
                card_mod:
                  style: |
                    #card-root {
                      width: 100% !important;
                      height: auto !important;
                      aspect-ratio: 16/9;
                    }
                    canvas {
                      width: 100% !important;
                      height: 100% !important;
                    }
                    :host {z-index: -1}
                style:
                  transform: none
                  top: 0
                  right: 0
              - type: custom:bubble-card
                card_type: separator
                name: Zuhause
                styles: |-
                  .bubble-button-container {
                    overflow: visible;
                  }
                  .bubble-button {
                    width: min-content;
                  }
                  .bubble-name {
                    font-size: 24px;
                  }
                  .bubble-icon {
                    display: none;
                  }
                style:
                  transform: none
                  bottom: 30px
                  left: 10px
              - type: custom:bubble-card
                card_type: button
                button_type: state
                name: Aktuelles Wetter
                show_name: false
                entity: weather.wetter_zuhause
                show_attribute: true
                attribute: temperature
                rows: 0.5
                styles: |-
                  .bubble-icon-container {
                    background: transparent;
                    margin-left: 2px !important;
                    margin-right: 0 !important;
                  }
                  .bubble-button-container {
                    overflow: visible;
                  }

                  .bubble-button-background {
                    background-color: transparent !important;
                    opacity: 0 !important;
                  }
                  .bubble-button {
                    width: min-content;
                    background: transparent;
                    border: none !important;
                    box-shadow: none !important;
                    background: transparent !important;
                    overflow: visible !important;
                  }
                style:
                  transform: none
                  bottom: 10px
                  left: "-2px"
              - type: custom:bubble-card
                card_type: sub-buttons
                styles: |-
                  .bubble-container {
                    height: auto !important;
                  }
                  .bubble-sub-buttons-container {
                    overflow: visible;
                  }
                  .bubble-sub-button-bottom-container {
                    width: min-content;
                    position: static;
                    margin: 0;
                  }
                  .bubble-sub-button {
                    height: 24px;
                    border-radius: 12px;
                  }
                sub_button:
                  bottom:
                    - entity: sensor.draussen_temperatur
                      show_icon: true
                      state_background: false
                      show_background: true
                      scrolling_effect: false
                      show_state: true
                      icon: mdi:sun-thermometer
                      tap_action:
                        action: none
                      button_action:
                        tap_action:
                          action: none
                style:
                  transform: translateY(-50%)
                  top: 40%
                  right: 71%
              - type: custom:bubble-card
                card_type: sub-buttons
                styles: |-
                  .bubble-container {
                    height: auto !important;
                  }
                  .bubble-sub-buttons-container {
                    overflow: visible;
                  }
                  .bubble-sub-button-bottom-container {
                    width: min-content;
                    position: static;
                    margin: 0;
                  }
                  .bubble-sub-button {
                    height: 24px;
                    border-radius: 12px;
                  }
                sub_button:
                  bottom:
                    - entity: sensor.drinnen_temperatur
                      show_icon: true
                      state_background: false
                      show_background: true
                      scrolling_effect: false
                      show_state: true
                      icon: mdi:home-thermometer
                      tap_action:
                        action: none
                      button_action:
                        tap_action:
                          action: none
                style:
                  transform: translateY(-50%)
                  bottom: 30%
                  left: 62%

Ich habe jetzt versucht, mir mein Wetter wie folgt einzublenden:

strategy:
  type: custom:bonbon-strategy
  options:
    views:
      bonbon_home:
        sections:
          bonbon_weather:
            name: Wetter
            hide_separator: true
            order: 1
            cards:
              - type: custom:clock-weather-card
                entity: weather.dwd
                title: null
                sun_entity: sun.sun
                temperature_sensor: sensor.outdoor_temp
                humidity_sensor: sensor.outdoor_humidity
                weather_icon_type: line
                animated_icon: true
                forecast_rows: 4
                locale: de
                time_pattern: HH:mm
                time_format: 24
                date_pattern: ccc, dd.MM.yy
                hide_today_section: false
                hide_forecast_section: false
                show_humidity: true
                hide_clock: false
                hide_date: false
                hourly_forecast: false
                use_browser_time: true
                time_zone: null
                show_decimal: false
                tap_action:
                  action: navigate
                  navigation_path: /dashboard-tablet/regenradar
          bonbon_persons:
            name: Personen
          bonbon_favorites:
            name: Favoriten
          bonbon_areas:
            name: Bereiche
          bonbon_robots:
            name: Roboter
          bonbon_security:
            name: Sicherheit
      bonbon_area:
        sections:
          bonbon_environment:
            name: Raumklima
          bonbon_scenes:
            name: Szenen & Skripte
          bonbon_lights:
            name: Beleuchtung
          bonbon_switches:
            name: Schalter & Taster
          bonbon_media:
            name: Media Player
          bonbon_climate:
            name: Heizung & Klima
          bonbon_covers:
            name: Rollläden & Beschattung
          bonbon_openings:
            name: Fenster & TĂĽren
          bonbon_valves:
            name: Wasser
          bonbon_miscellaneous:
            name: Sonstiges

Jetzt ist der Balken mit dem Wetter oben zwar weg, aber das Wetter wird mir auch nicht angezeigt…

Funktioniert bei mir ohne Probleme:

Ist Clock Weather Card installiert und geladen?

Ja. Auf anderen Dashboards funktioniert die Karte. Hintergrund lässt sich auch nicht ändern. Ich lege mal ein komplett neues Dashboard an.

Funktioniert nicht…

strategy:
  type: custom:bonbon-strategy
  options:
    views:
      bonbon_home:
        sections:
          bonbon_weather:
            name: Wetter
            hide_separator: true
            order: 1
            cards:
              - type: custom:clock-weather-card

“Funktioniert nicht…” ist nicht hilfreich.

Beschreibe das Problem, zeig Fehlermeldungen, mach nen Screenshot vom Problem, sonst kann ich leider nicht helfen.

Dashboard:

Code dazu:

strategy:
  type: custom:bonbon-strategy
  options:
    views:
      bonbon_home:
        sections:
          bonbon_weather:
            name: Wetter
            hide_separator: true
            order: 1
            cards:
              - type: custom:clock-weather-card
                entity: weather.dwd
                title: null
                sun_entity: sun.sun
                temperature_sensor: sensor.outdoor_temp
                humidity_sensor: sensor.outdoor_humidity
                weather_icon_type: line
                animated_icon: true
                forecast_rows: 4
                locale: de
                time_pattern: HH:mm
                time_format: 24
                date_pattern: ccc, dd.MM.yy
                hide_today_section: false
                hide_forecast_section: false
                show_humidity: true
                hide_clock: false
                hide_date: false
                hourly_forecast: false
                use_browser_time: true
                time_zone: null
                show_decimal: false
                tap_action:
                  action: navigate
                  navigation_path: /dashboard-tablet/regenradar

Ansicht auf einem anderen, alten Dashboard:

Komischerweise lässt sich auch der Hintergrund nicht, wie in der Doku beschrieben, ändern…

Verwendest du die aktuelle Version 3.0.0 von Bonbon Strategy?

Parallel zu deinem Post habe ich die Strategy gelöscht und das Repository neu hinzugefügt und über Hacs die Strategs neu installiert und einen kompletten Neustart gemacht. Jetzt funktioniert es! Wahnsinn!

Und wie bekomme ich diese blaue Schaltfläche rechtsseitig weg?

Sorry für diese “dummen” Fragen!

Sehr schön! Ich helfe gern, dumm sind Fragen selten!

bonbon_areas:
  separator_buttons: false # entfernt die blaue Schaltfläche bei den Etagen-Trennern
  sub_buttons: false # entfernt die Schaltfläche innerhalb der Bereichs-Karten

Jetzt stehe ich (leider wieder) auf dem Schlauch.

An welcher Stelle muss ich den Snippet einfĂĽgen?


Erledigt. Habs gefunden :slight_smile:

Wie kann ich das alles einspaltig machen? Sprich, es sollen keine Schaltflächen nebeneinander, sondern nur untereinander angezeigt werden. Leider bekomme ich das nicht hin :frowning: