[Sammelthread] Vorstellung eurer Dashboards

Ich wollte einfach mal das Thema Dashboards auch hier starten. Zeigt euer Design bzw. eure Dashboards! Hier können wir uns austauschen und bestimmt wieder die ein oder andere Idee für das eigene Dashboard sammeln.

Meins ist inzwischen auch fast fertig. Hier mal auf mal meine Übersichtsseite auf dem Wandtablet. Viele Dinge lasse ich mir nur dynamisch anzeigen. Zum Beispiel Lichter, werden nur die eingeschalteten angezeigt, genauso ist es beim Abfall, Multimedia, Solar und allen Fensterkontakten. Die anderen Seiten werde ich auch noch zeigen, aber da bin ich noch nicht ganz fertig.

Bitte aufklappen bzw. klicken für mehr Infos zu meinem Dashboard

Ich habe jetzt ebenfalls ein github erstellt und dort alles was ich nutze aufgeführt und für euch bereitgestellt. Schaut also gerne vorbei und bedient euch an Ideen und Codeschnipseln. :blush: Ich hoffe alles ordentlich aufbereitet zu haben, steckt doch eine Menge Arbeit darin.

hauptseiten

Das Dashboard besteht aus 10 Seiten, davon 6 Hauptseiten und 4 Unterseiten. Die Hauptseiten sind in die Bereiche Startseite/Übersichtseite, Heizung, Licht, Garten, Wetter und Strom aufgeteilt. Die Unterseiten zeigen Infos zu Einstellungen (Geräte, Raspi, Netzwerke), Roboter, Sicherheit und Multimedia an. Alles ist für die Tabletansicht gestaltet, geht aber auch auf dem Handy inzwischen ganz gut. Viele der großen Cards habe ich dazu angepasst, so dass sie im Layout auf dem Handy gebrochen und nicht gequetscht werden.

unterseiten

Die Startseite zeigt zudem sehr viel dynamisch an, im Normalzustand ist sie aufgeräumt. Dazu können per Popup viele wichtige Daten wie Heizung, Strom, Wetter oder weitere Kamera(s) eingeblendet werden. Eine Vorschau (gif) findet ihr im github.

github Link HA_homedashboard

Ich bin denke ich mal noch lange nicht fertig, werde jetzt aber versuchen mein dashboard auf github aktuell zu halten.

Kleines Update:
Den Header von Homeassitant ausblenden wollen. Wie das geht steht in meinem github. Alle Haupt- und Unterseiten haben jetzt einen „zurück Button“ erhalten, der immer wieder auf die Startseite verweist. Code dazu findet ihr im github. Die einzelne yaml-Datei ist auf allen Seiten und Unterseiten hinterlegt. Der Button wird im Anschluss fest am unteren Bildschirmrand eingebunden.

11 „Gefällt mir“

Da mach ich auch mal mit :slight_smile:

Ich bin auch noch nicht fertig. Bin gerade auch dabei Komplett aufzuräumen. Habe in den letzten Wochen die Sachen auf die neue Sektionsansicht umgestellt. Das erleichtert die Arbeit enorm. Erst recht weil man nun alles per Drag & Drop hin und her schieben kann. Zusätzlich bin ich dabei die Entity Ansichten umzustellen auf Tile & Mushroom Karten. Irgendwie hat man dadurch mehr Platz und ich erhoffe mir dadurch eine Bessere Übersicht und lass mir damit dann nur noch Infos anzeigen die mich wirklich Interessieren. Man kann sich nämlich echt mit Infos auf einem Dashboard erschlagen. Aber wann braucht man das? Hinzu kommt das ich gerne mit Pop Ups und Unterseiten arbeite um es zusätzlich Aufgeräumt zu halten. Naja hier mal paar Bilder. Wer möchte kann das (noch) alte Dashboard und den Code auf Github sehen. Das ist aber wie gesagt nicht mehr aktuell und sobald ich alles soweit in meiner Zufriedenheit geändert habe, werde ich das aktualisieren.

Anbei derzeit aktuelle Bilder. (Die Netzwerk/Geräte Seite fehlt noch da ich dort seit gestern am Basteln bin :slight_smile: )




5 „Gefällt mir“

Wie hast du die Unterteilung beim Robi mit Übersicht, Details und Logbuch realisiert? Das sind doch sozusagen Karteikarten die angeklickt werden können, oder?

2 „Gefällt mir“

Ja genau. Nutze dafür die Tabbed Card aus dem hacs

2 „Gefällt mir“

oh nice, die kannte ich noch nicht… werde ich heute Abend gleich umsetzen. habe da auch ein paar gute Anwendungen für.

2 „Gefällt mir“

Wäre absolut super wenn ihr ein bisschen Code mitgeben würdet. Da finden sich auf den dashboards immer wieder Elemente die finde ich echt cool könnte sie aber so nicht nachbauen.
Dankeschön

3 „Gefällt mir“

Hi, na klar machen wir doch gerne… :slight_smile: Fange ich mal an. Ich bin jetzt auch erst zwei Monate bei HA, vorher iobroker und würde mich daher eher als Einsteiger mit etwas Grunderfahrung bezeichnen.
Meine Übersichtsseite auf dem Tablet besteht hauptsächlich aus custom:vertical-stack-in-cards die dann entsprechend unterteilt und mit card-mod konfiguriert sind. Fand ich für mich erstmal den besten Ansatz, da ich mich mit CSS gut auskenne.

Uhr- und Infocard:


Der Abfall wird nur eingeblendet wenn eine Ziehung ansteht, ansonsten wird die Uhr zentriert. EDIT: Habe die Card inzwischen überarbeitet und sie wird jetzt auf Handy, Tablet und PC korrekt dargestellt. Passt sich dynamisch an und es können auch zwei Tonnen für den nächsten Tag angezeigt werden, wenn halt zwei Tonnen zur Ziehung anstehen.

type: custom:vertical-stack-in-card
card_mod:
  style: |
    ha-card {  
      margin-bottom: 2px; 
      border: none;   
      box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px
                  13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important;   
    }
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr auto
      grid-template-rows: auto
    cards:
      - type: custom:digital-clock
        dateFormat:
          weekday: short
          day: 2-digit
          month: short
          year: numeric
        timeFormat:
          hour: 2-digit
          minute: 2-digit
        card_mod:
          style: |
            ha-card {
              justify-self: center; /* Zentriert die Uhrzeit, wenn keine Tonne da ist */
              background-color: transparent !important;
              color: var(--primary-color) !important;
              border: none !important;
              margin-top: 5px;
            }
      - type: custom:vertical-stack-in-card
        card_mod:
          style: |
            ha-card {
              background-color: transparent !important;
              color: var(--primary-color) !important;
              border: none !important;
              border-radius: 0px !important; 
              zoom: 80%; 
            }
        cards:
          - type: custom:trash-card
            event_grouping: true
            drop_todayevents_from: "8:00:00"
            next_days: 1
            pattern:
              - icon: mdi:flower
                color: green
                type: organic
                pattern: Biotonne
                image: /local/bilder/gruen.jpg
              - icon: mdi:newspaper
                color: blue
                type: paper
                pattern: Papiertonne
                image: /local/bilder/blau.png
              - icon: mdi:recycle-variant
                color: amber
                type: recycle
                pattern: Gelber Sack
                image: /local/bilder/gelb.png
              - icon: mdi:trash-can-outline
                color: grey
                type: waste
                pattern: Restabfall
                image: /local/bilder/schwarz.png
              - icon: mdi:dump-truck
                color: purple
                type: others
            day_style: counter
            alignment_style: center
            color_mode: icon
            items_per_row: 2
            refresh_rate: 600
            with_label: false
            layout: vertical
            entities:
              - calendar.abfall
            filter_events: false
            use_summary: false
            hide_time_range: false
            full_size: false
            card_mod:
              style: |
                ha-card {
                  background-color: transparent !important;
                  color: var(--primary-color) !important;
                  border: none !important;
                  border-radius: 0px !important;
                  position: relative;
                  padding-bottom: 0px !important;
                  width: 100px;
                }
                .card-container {
                    display: block !important;
                }
                /* Skaliert die Icons */
                .icon-container {
                  transform: scale(1.5); /* Vergrößert nur die Icons */
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin-top: 12px;
                }
                /* Begrenzt den Einfluss des Scales auf den Rest */
                .icon-container ha-tile-image {
                  margin: 0 !important;
                }
                /* Text kleiner machen */
                .content {
                  font-size: 12px !important; /* Anpassung der Textgröße */
                  text-align: center;
                }    
  - type: horizontal-stack
    cards:
      - type: custom:vertical-stack-in-card
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-entity-card
                entity: sensor.steps_kilometer_taglich
                name: Jan
                primary_info: state
                fill_container: false
                secondary_info: none
                icon: mdi:walk
                icon_color: grey
                tap_action:
                  action: more-info
                  entity: person.jayjojayson
                card_mod:
                  style: |
                    ha-card {
                      background: none !important;
                      border-radius: 0px !important;
                      border-right: 1px solid grey !important; 
                      border-left: none !important; 
                      border-top: none !important; 
                      border-bottom: none !important;
                      display: flex !important;
                      align-items: center !important;
                      justify-content: center !important;
                      height: 75% !important;
                      text-align: center !important;
                      zoom: 75%; 
                      padding-right: 10px; 
                    }
                    mushroom-shape-icon {
                      --shape-color: none !important;
                    }
                    ha-state-icon {
                      margin-right: -20px;
                    } 
              - type: custom:mushroom-entity-card
                entity: device_tracker.samsung_s24
                name: Jan
                primary_info: name
                fill_container: false
                secondary_info: none
                icon: m3of:person-4
                icon_color: grey
                tap_action:
                  action: more-info
                  entity: person.jayjojayson
                card_mod:
                  style: |
                    ha-card {
                      background: none !important;
                      border-radius: 0px !important;
                      border-right: 1px solid grey !important; 
                      border-left: none !important; 
                      border-top: none !important; 
                      border-bottom: none !important;
                      display: flex !important;
                      align-items: center !important;
                      justify-content: center !important;
                      height: 75% !important;
                      text-align: center !important;
                      zoom: 85%;
                      padding-right: 30px; 
                    }
                    mushroom-shape-icon {
                      --shape-color-disabled: transparent !important;
                      --shape-color: none !important;
                    }
                    ha-state-icon {
                      margin-right: -15px;
                      color: {% if states('device_tracker.samsung_s24') == 'home' %} green {% else %} grey {% endif %};
                    } 
              - type: custom:mushroom-entity-card
                entity: device_tracker.23124ra7eo
                name: Mutti
                primary_info: name
                fill_container: false
                secondary_info: none
                icon: m3of:person-3
                icon_color: grey
                tap_action:
                  action: more-info
                  entity: person.mutti
                card_mod:
                  style: |
                    ha-card {
                      background: none !important;
                      border-radius: 0px !important;
                      border-right: 1px solid grey !important; 
                      border-left: none !important; 
                      border-top: none !important; 
                      border-bottom: none !important;
                      display: flex !important;
                      align-items: center !important;
                      justify-content: center !important;
                      height: 75% !important;
                      text-align: center !important;
                      zoom: 85%;
                      padding-right: 30px; 
                    }
                    mushroom-shape-icon {
                      --shape-color-disabled: transparent !important;
                      --shape-color: none !important;
                    }
                    ha-state-icon {
                      margin-right: -15px;
                    } 
                    ha-state-icon {
                      margin-right: -15px;
                      color: {% if states('person.mutti') == 'home' %} green {% else %} grey {% endif %};
                    }
              - type: custom:mushroom-entity-card
                entity: sensor.23124ra7eo_steps_sensor
                name: Mutti
                primary_info: state
                fill_container: false
                secondary_info: none
                icon: mdi:walk
                icon_color: grey
                icon_tap_action:
                  action: toggle
                card_mod:
                  style: |
                    ha-card {
                      background: none !important;
                      border-radius: 0px !important;
                      border: none !important;
                      display: flex !important;
                      align-items: center !important;
                      justify-content: center !important;
                      height: 75% !important;
                      text-align: center !important;
                      zoom: 75%;
                      padding-right: 30px; 
                    }
                    mushroom-shape-icon {
                      --shape-color: none !important;
                    } 
                    ha-state-icon {
                      margin-right: -20px;
                    } 
        card_mod:
          style: |
            ha-card {
              background: none !important;
              border-radius: 0px !important;
              border: none !important; 
              margin-top: -10px !important; margin-bottom: -3px; 
            }

Wetter-Card

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      background-color: none !important;
    }
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: horizontal-stack
        cards:
          - type: entity
            entity: sensor.aussentemperatur_temperatur
            name: " "
            state_color: false
            icon: none
            theme: Temps
            card_mod:
              style: |
                ha-card {
                  background-color: transparent !important;
                  text-align: center;
                  font-weight: bold !important; 
                  border: none !important;
                  border-radius: 0px !important;     
                  padding-right: 20px !important;         
                  padding-left: 10px !important;
                  height: 75px !important;
                  --primary-text-color:
                      {% if is_state('sensor.temperature_color', 'steelblue') %}
                        steelblue
                      {% elif is_state('sensor.temperature_color', 'green') %}
                        green
                      {% elif is_state('sensor.temperature_color', 'orange') %}
                        orange
                      {% else %}
                        red
                      {% endif %};
                      .value {
                      font-size: 30px !important; /* Ändere die Schriftgröße */
                      }
                }
          - type: entity
            entity: sensor.aussentemperatur_luftfeuchtigkeit
            name: " "
            state_color: false
            icon: none
            theme: Temps
            card_mod:
              style: |
                ha-card {
                  background-color: transparent !important;
                  text-align: center;
                  font-weight: bold !important; 
                  border: none !important;
                  border-radius: 0px !important;     
                  padding-right: 10px !important;         
                  padding-left: 50px !important;
                  height: 75px !important;
                }
                .value {
                  font-size: 24px !important; /* Ändere die Schriftgröße */
                }
      - type: custom:weather-chart-card
        entity: weather.fuerstenwalde_spree
        show_main: true
        show_temperature: false
        show_current_condition: false
        show_attributes: false
        show_time: false
        show_time_seconds: false
        show_day: false
        show_date: false
        show_humidity: false
        show_pressure: false
        show_wind_direction: false
        show_wind_speed: false
        show_sun: true
        show_feels_like: false
        show_dew_point: false
        show_wind_gust_speed: false
        show_visibility: false
        show_last_changed: false
        use_12hour_format: false
        icons_size: "45"
        animated_icons: true
        icon_style: style1
        autoscroll: false
        forecast:
          precipitation_type: rainfall
          show_probability: false
          labels_font_size: "13"
          precip_bar_size: "0"
          style: style2
          show_wind_forecast: false
          condition_icons: true
          round_temp: false
          type: daily
          number_of_forecasts: "7"
          disable_animation: false
          chart_height: "160"
        units:
          speed: ""
        temp: sensor.aussentemperatur_temperatur
        humid: sensor.aussentemperatur_humidity
        card_mod:
          style: |
            ha-card {
              background-color: transparent !important;
            }
            .card{
              padding-top: 0px !important;
            }        
            .main {
              margin-bottom: 0px !important;
            }
            .main img {
              margin: 0 auto !important;
              margin-top: -65px !important;
            }

Zu dieser Card habe ich einen sensor in der configuration.yaml angelegt, der die Außentemperatur entsprechend der Gradzahl einfärbt.

#Sensor um Temperaturwerte einzufärben
sensor:
  - platform: template
    sensors:
      temperature_color:
        friendly_name: "Außentemperatur Farbconfig"
        value_template: >
          {% set temp = states('sensor.aussentemperatur_temperatur') | float %}
          {% if temp < 10 %}
            steelblue
          {% elif temp < 15 %}
            green
          {% elif temp < 23 %}
            orange
          {% else %}
            red
          {% endif %}

Menü-Card
3

type: horizontal-stack
cards:
  - type: custom:mushroom-entity-card
    entity: person.jayjojayson
    fill_container: false
    primary_info: none
    secondary_info: none
    icon: mdi:cog
    icon_type: entity-picture
    icon_color: primary
    tap_action:
      action: navigate
      navigation_path: /dashboard-test/einstellungen
    hold_action:
      action: navigate
      navigation_path: /dashboard-test/einstellungen
    card_mod:
      style: |
        mushroom-shape-icon {
          --shape-color: transparent !important;
          --icon-size: 45px !important;
          background: none !important;
          box-shadow: none !important;
        }
        ha-card {
          background: none !important;
          box-shadow: none !important;
          border: none !important;
          border-right: 1px solid grey !important;
          border-radius: 0px !important;
          padding-right: 10px;
        }
  - type: custom:mushroom-entity-card
    entity: person.jayjojayson
    fill_container: false
    primary_info: none
    secondary_info: none
    icon: mdi:robot-mower
    icon_type: entity-picture
    tap_action:
      action: navigate
      navigation_path: /dashboard-test/robter-steuerung
    hold_action:
      action: navigate
      navigation_path: /dashboard-test/robter-steuerung
    icon_color: primary
    card_mod:
      style: |
        mushroom-shape-icon {
          --shape-color: transparent !important;
          --icon-size: 45px !important;
          background: none !important;
          box-shadow: none !important;
        }
        ha-card {
          background: none !important;
          box-shadow: none !important;
          border: none !important;
          border-right: 1px solid grey !important;
          border-radius: 0px !important;
          padding-right: 10px;
        }
  - type: custom:mushroom-entity-card
    entity: person.jayjojayson
    fill_container: false
    primary_info: none
    secondary_info: none
    icon: mdi:cctv
    icon_type: entity-picture
    tap_action:
      action: navigate
      navigation_path: /dashboard-test/sicherheit
    hold_action:
      action: navigate
      navigation_path: /dashboard-test/sicherheit
    icon_color: primary
    card_mod:
      style: |
        mushroom-shape-icon {
          --shape-color: transparent !important;
          --icon-size: 45px !important;
          background: none !important;
          box-shadow: none !important;
        }
        ha-card {
          background: none !important;
          box-shadow: none !important;
          border: none !important;
          border-right: 1px solid grey !important;
          border-radius: 0px !important;
          padding-right: 10px;
        }
  - type: custom:mushroom-entity-card
    entity: person.jayjojayson
    fill_container: false
    primary_info: none
    secondary_info: none
    icon: mdi:cast-audio
    icon_type: entity-picture
    tap_action:
      action: navigate
      navigation_path: /dashboard-test/multimedia
    hold_action:
      action: navigate
      navigation_path: /dashboard-test/multimedia
    icon_color: primary
    card_mod:
      style: |
        mushroom-shape-icon {
          --shape-color: transparent !important;
          --icon-size: 45px !important;
          background: none !important;
          box-shadow: none !important;
        }
        ha-card {
          background: none !important;
          box-shadow: none !important;
          border: none !important;
          border-radius: 0px !important;
          padding-right: 10px;
        }      

Heizung Übersicht Card
Hier lasse ich mir oben vom Luftreiniger die ppm Werte mit einem minigraph anzeigen. Die Linie und der Wert werden wieder mit zwei sensoren in der config.yaml entsprechend der Luftqualität eingefärbt.

type: custom:vertical-stack-in-card
cards:
  - type: custom:mini-graph-card
    entities:
      - sensor.starkvind_luftreiniger_pm2_5
    name: Luftqualität
    hours_to_show: 10
    points_per_hour: 0.25
    refresh_interval: 5
    height: 80
    show:
      labels: true
      name: false
      state: false
      icon: false
    line_color: var(--line-color)
    card_mod:
      style: |
        ha-card {
          background-color: rgba(22,22,22, 0);
          --line-color: {{ states('sensor.luftquality_line_color') }};
        }
  - type: custom:button-card
    tap_action:
      action: call-service
      service: fan.toggle
      service_data:
        entity_id: fan.starkvind_luftreiniger_ventilator
    styles:
      card:
        - background-color: rgba(22,22,22, 0.1)
        - text-align: center
        - border: none
        - border-radius: 0px
        - padding: 10px
        - "--primary-text-color": |
            [[[
              if (states['sensor.luftquality_color'].state === 'green') return 'green';
              if (states['sensor.luftquality_color'].state === 'yellow') return 'yellow';
              if (states['sensor.luftquality_color'].state === 'orange') return 'orange';
              return 'red';
            ]]]
    name: |
      [[[
        const quality = states['sensor.starkvind_luftreiniger_pm2_5'].state;
        const fanState = states['fan.starkvind_luftreiniger_ventilator'].state === 'on' 
          ? '<ha-icon icon="mdi:fan-auto" style="width: 20px; height: 20px; margin-left: 5px; vertical-align: top; color: var(--primary-color);"></ha-icon>' 
          : '';
        return `Luftqualität - ${quality} µg/m³ ${fanState}`;
      ]]]
  - type: entities
    entities:
      - entity: sensor.wandthermostat_jan_temperatur
        name: Wandthermostat Jan
      - entity: sensor.wandthermostat_jan_luftfeuchtigkeit
        name: Wandthermostat Jan Luftfeuchte
      - entity: sensor.werkstatt_thermostat_temperatur
        name: Werkstatt Temperatur
      - entity: sensor.wandthermostat_mutti_temperatur
        name: Wandthermostat Mutti
      - entity: sensor.wandthermostat_mutti_luftfeuchtigkeit
        name: Wandthermostat Mutti Luftfeuchte
    theme: grey-icon
    card_mod:
      style: |
        ha-card {
          background-color: rgba(22,22,22, 0);
        }

angelegter Sensor für Farben der Linie und der Wertes

  - platform: template
    sensors:
      luftquality_color:
        friendly_name: "Luftqualität Farbconfig"
        value_template: >
          {% set temp = states('sensor.starkvind_luftreiniger_pm2_5') | float %}
          {% if temp < 50 %}
            green
          {% elif temp < 100 %}
            yellow
          {% elif temp < 150 %}
            orange
          {% else %}
            red
          {% endif %}
          
  - platform: template
    sensors:
      luftquality_line_color:
        friendly_name: "Luftqualitäts Line Color"
        value_template: >
          {% if is_state('sensor.luftquality_color', 'green') %}
            green
          {% elif is_state('sensor.luftquality_color', 'yellow') %}
            yellow
          {% elif is_state('sensor.luftquality_color', 'orange') %}
            orange
          {% else %}
            red
          {% endif %}

Wenn noch Fragen zu einer Card bestehen, fragt mich. Den Rest werde ich dann mal gesammelt und zusammen vorstellen.

4 „Gefällt mir“

Ich bin eher minimalistisch unterwegs und mit Pop Ups.

Wichtig ist mir auch, dass es im Handy sehr gut und einfach bedienbar ist.
Quasi in einem One Page Design ohne scrollen.

Wenn ich z.B. auf die kleine Wetterkarte drücke erscheint im Pop Up eine ausführlichere. Wenn auch auf das Auto Symbol drücke erscheint ein Pop Up mit mehr Infos zum Auto. Und viele weitere Gimmicks.

Hier Beispiele (Video folgt irgendwann wenn ich Zeit habe :smiley: )





4 „Gefällt mir“

Auch eine schöne Visualisierung. Mit den Popus ist auf jeden Fall eine gute Lösung um mehr Informationen auf einer Seite unterzubringen. Nutze da gerade noch angelegte sensoren die bestimmte Dinge bei Klick auf den jeweiligen Button einblenden oder nicht. Gestern hab ich auch mit der tabbed card begonnen, die ist auf jeden Fall auch sehr praktisch für kleinere Displays.
Wie hast du das gelöst, dass die popups von unten her aufgehen bzw. oben der Blick auf den Content dahinter nicht verdeckt wird?

Ich gebe dir Recht, so viel scrollen sollte nicht dabei sein. Auf meinem Wandtablet sehe ich eigentlich alles wichtige ohne scrollen zu müssen. Auf Grund meiner vielen Geräte ist es aber schwer nur mit Button/Icon zu arbeiten. Ich brauche die Texte, Beispiel Lichter, davon habe ich so viele dass ich nicht immer ein passendes Icon vergeben könnte. Die icons würden sich wiederholen. Daher arbeite ich mit Bereichen für Übersicht, Heizung, Licht, Garten, Wetter, Strom und Settings.

Freue mich auf dein Video dazu. :slight_smile:

1 „Gefällt mir“

Wenn ich das beantworten darf, das sind die Pop ups von der bubble-Card :see_no_evil:

2 „Gefällt mir“

Mein perfektes Dashboard – Work in Progress 🚀

Mein Dashboard wächst und entwickelt sich stetig weiter, und langsam wird es für mich wirklich perfekt! 🎉
Eine bunte Mischung aus Mushroom, Bubble-Card, Paperbuttons und Card-Mod sorgt für eine individuelle und moderne Optik. Dabei habe ich Wert auf Funktionalität und Übersichtlichkeit gelegt – und natürlich ein paar kleine Hingucker eingebaut. 😉

Nachdem ich mein Dashboard bereits im Forum von SIMON42 und auf Facebook vorgestellt habe, möchte ich es auch hier präsentieren.
Vielleicht findet ihr ja Inspiration für eure eigenen Dashboards! 📊

Ein paar meiner Highlights:

  • Ausklappbare und zusammengefasste Benachrichtigungen
  • Individuelle Popups für Räume und Geräte
  • Dynamische Hintergrundfarben für kritische Sensorwerte
  • Eine Tibber-Übersicht mit Live-Daten und detaillierten Statistiken

1. Ausklappbare Benachrichtigungen

Benachrichtigungen werden übersichtlich dargestellt und können bei Bedarf ein- und ausgeklappt werden – so bleibt das Dashboard sauber und aufgeräumt.

2. Individuelle Popups für Räume und Geräte

Jeder Raum und jedes Gerät hat ein eigenes Popup mit allen wichtigen Informationen. So kann ich schnell und einfach alles im Blick behalten – von der aktuellen Temperatur bis hin zur Statusanzeige von Geräten wie der Waschmaschine.

3. Dynamische Hintergrundfarben für Sensorwerte

Die Hintergrundfarbe bei Sensorwerten ändert sich automatisch, je nach Temperatur, Luftfeuchtigkeit oder anderen Werten. Kritische Zustände sind so sofort sichtbar, ohne dass ich lange suchen muss.

2116c044a17fc2afe3d48431b996a03216eb4bac

4. Tibber-Übersicht mit Live-Daten

Dank meiner Tibber-Integration sehe ich nicht nur den aktuellen Strompreis, sondern auch detaillierte Verbrauchsdaten und Statistiken. Perfekt, um den Energieverbrauch im Blick zu behalten und Kosten zu sparen. 💡


Work in Progress: Ich experimentiere und optimiere ständig weiter. Das Dashboard ist also noch lange nicht fertig – aber genau das macht den Spaß aus!
Auf GitHub habe ich ein Repository erstellt, wo ich die einzelnen Karten nach und nach hochlade. Aktuell ist die Willkommenskarte bereits online, und es wird regelmäßig ergänzt. Schaut gerne vorbei! 😊

5 „Gefällt mir“

Schön, schön neuer Input. :slight_smile: Hatte mir dein github die Tage schon einmal angeschaut und ein paar Inspirationen für meins gesammelt.

Hier mein Dashboard, welches ich mit Grafana erstellt habe.
Nur zur Info:Alkly hat heute (20.12.2024) ein Video über die Installation InfluxDB und Grafana bei YouTube hochgeladen.
Wie bereits dort von mir kommentiert: Ich kenne derzeit keine Anwendung, mit der man besser und flexibler Messwerte visualisieren kann.

4 „Gefällt mir“

Sieht gut aus. :smiling_face: Mit was hast du die Tabsleiste gemacht bei deiner Tibber Übersicht?

1 „Gefällt mir“

das sind paper-button mit local-conditional-card

die komplette Tibber-Seite ist grad mein Projekt um das kommentiert mit auf GitHub zu stellen

3 „Gefällt mir“

Ah okay, danke für die schnelle Antwort. Hab sowas ähnliches erstmal nur mit den Mushroom Chipscard umgesetzt. Aber ich suche nach der Optik genau nach dem was du da hast. Dann warte ich mal bis du das auf GitHub hinzugefügt hast :slight_smile:

//edit: habe schon was passendes bei YouTube gefunden. :slight_smile:

1 „Gefällt mir“

Hi, wie hast du diesen Sensor angelegt?

sensor.abfall_voraus_morgen

So hier und der prüft dann ob übermorgen ein Termin anliegt, wenn ja gibt er „on“ sonst „off“ wieder.

template:
- sensor:
      - name: "Abfall voraus Morgen"
        state: >
          {% set start_time = state_attr('calendar.abfall', 'start_time') %}
          {% if start_time %}
            {% if (start_time | as_datetime).date() == (now() + timedelta(days=1)).date() %}
              on
            {% else %}
              off
            {% endif %}
          {% else %}
            off
          {% endif %}
2 „Gefällt mir“

Danke, werde ich mal testen

Hallo, wie hast du diesen Sensor erstellt?

sensor.mullabholung

Liebe Grüße