Ich möchte ein dashboard bauen ähnlich meinem Fhem Dashboards

Zeigt mal her eure gelungenen Dasboards.
Welche Sind eure Lieblings Karten.
Und natürlich Rat und Tat zum Thema Dashboard.


Antworten
moonsorrox
Beiträge: 19
Registriert: Sa 20. Mai 2023, 17:47
Has thanked: 4 times

Ich möchte ein dashboard bauen ähnlich meinem Fhem Dashboards

Beitrag von moonsorrox »

Wie du Überschrift schon sagt besitze ich noch die Hausautomation Fhem und diese macht eben mein Smarthome.
Da mir aber HA besser gefällt und sehr modern und umfangreich ist denke ich das ich nun gern alles mit HA machen möchte, weil es auch vielfältiger ist und wesentlich mehr an Umfang zu bieten hat wie mein Fhem.
Also der Wechsel steht fest und ich habe auch schon viel gesehen und einiges bei mir ausprobiert (sage ich mal so)
Anfangen möchte ich mit einer Startseite auf der ich den Status meiner Geräte habe, dazu hänge ich mal ein Screenshot ran wie das bei mir momentan aussieht.
Das mit den durchsichtigen Fenstern und em Hintergund in HA habe ich bereits umgesetzt und sogar noch besser, deshalb schon gefällt mir HA super.
Diese Themes und Hintergründe die ich einsetze habe ich in YT Beiträgen gesehen.

Jetzt soll es aber losgehen mit den ganzen Anzeigen und Steuerungsmöglichkeiten

  • Uhrzeit und Datum soll zu sehen sein
    Mein Dashboard soll also oben diese Icons haben wo ich zu den verschidenen Seiten komme, diese Unterseiten gestalte ich dann später anders als in Fhem.
  • In der Mitte habe ich ein großes Statusfenster in dem nur angezeigt wird welche Geräte noch eingeschaltet sind, sind sie später aus ist nichts mehr zu sehen.
  • Die Rollläden möchte ich immer im Blick haben weil diese auch je nach Beschattung dann verschiedene Positionen haben
  • Die Temperaturen möchte ich sehen
  • Anrufe ist erstmal zweitrangig, weil meine Fritbox noch vor der OPNsense ist
  • die beiden EG und OG kann ich auch dann über Button erreichen oder ich mache es jeweils in Räumen
  • Garagentor öffnen schließen ist wichtig
  • PV Anlagen Übersicht möcvhte ich haben
  • Spritpreise sollen zu sehen sein
  • die einzelnen Kalender sollen zu sehen sein und sich einfärben wenn etwas ansteht (am vorher zeigt Fhem mir eine Zahl an wieviel Ereignisse)
  • Müllanzeige und wenn Akkus alle sind erscheinen unten rechts Fenster offen usw. (das kann ich dann individuell einbauen.
    Der Rest ist eigentlich ziemlich selbst erklärend.
    Dies Struktur möchte ich gerne so in etwa aufbauen und dieser Aufbau was wo hinkommt fällt mir gerade etwas schwer, da ich die Karten alle noch nicht kenne.

Ich habe einige schon herunter geladen, aber sicher fehlen noch welche das wird man dann sehen.

Dateianhänge
fhem_dashboard_klein.png
fhem_dashboard_klein.png (176 KiB) 856 mal betrachtet
moonsorrox
Beiträge: 19
Registriert: Sa 20. Mai 2023, 17:47
Has thanked: 4 times

Re: Ich möchte ein dashboard bauen ähnlich meinem Fhem Dashboards

Beitrag von moonsorrox »

Ist wohl doch etwas aufwändiger, deshalb kaum Meldungen.

Aber ich war nicht untätig und habe einiges dazu gelernt und habe etwas gefunden womit ich mir ein Layout ähnlich meinem Fhem Dashboard aufbauen kann. Es soll ja nicht gleich aussehen, aber ähnlich weil es mir gefällt und mit HA soll es auch etwas moderner werden :)

Also ich habe in HACS die Layout-card gefunden mit der recht viel möglich ist. Das layout kann man dabei mega gut gestalten.
Sieht dann in etwa ein Kachel oder ein Feld wie auch immer so aus.

Code: Alles auswählen

type: custom:button-card
aspect_ratio: 3/1
name: Z2-1 - Test
styles:
  card:
    - border: 1px solid blue
    - font-size: 40px
    - text-transform: uppercase
    - border-radius: 10px
view_layout:
  grid-area: z2_1

Mein Problem ist jetzt aber da ich noch recht neu in HA bin wie gestaltete ich jetzt den Inhalt dieser Karte. Ich habe es mal probiert und bekomme in diese Karte eine Entität rein das sieht das so aus:

Code: Alles auswählen

type: custom:button-card
aspect_ratio: 3/1
name: Ladestation
styles:
  card:
    - border: 1px solid blue
    - border-radius: 10px
view_layout:
  grid-area: z2_2
  type: button
tap_action:
  action: toggle
entity: switch.tasmota_10_0_0_148
icon: mdi:lamp
icon_height: 30px
show_state: true
theme: ios-dark-mode-dark-green-alternative

Ob das so richtig ist weiß ich nicht, ich habe es mal probiert
Aber dann haben sie mich verlassen, wenn jetzt eine Karte von der Größe es hergibt 3 oder 4 Entitäten darzustellen, dass bekomme ich nicht hin.
Vllt. kann mir hier jemand helfen mit einem Beispiel.?
Vielen Dank

Benutzeravatar
Osorkon
Administrator
Beiträge: 1905
Registriert: Sa 17. Jul 2021, 16:53
2
Wohnort: Langenargen
Has thanked: 60 times
Been thanked: 516 times
Kontaktdaten:

Re: Ich möchte ein dashboard bauen ähnlich meinem Fhem Dashboards

Beitrag von Osorkon »

Das Thema Dashboard war bei mir nie im Fokus, wird aus meiner Sicht auch überbewertet. 🤷‍♂️

Du hast soviel Möglichkeiten, was fast schon ein Fluch und kein Segen mehr ist!

Ich würde mich an Deiner Stelle erstmal mit den Standard Karte beschäftigen, bevor Du Dich unzähligen HACS Karten widmest. Ich habe mich mit den zum Teil extrem komplexen Karten nie anfreunden können und beschränke mich mich vorwiegend auf einfache Karten.

Gruß
Osorkon

Einer muss ja für Ordnung sorgen. :D
Jim_OS

Re: Ich möchte ein dashboard bauen ähnlich meinem Fhem Dashboards

Beitrag von Jim_OS »

Osorkon hat geschrieben: Sa 27. Mai 2023, 10:28

bevor Du Dich unzähligen HACS Karten widmest. Ich habe mich mit den zum Teil extrem komplexen Karten nie anfreunden können und beschränke mich mich vorwiegend auf einfache Karten.

Dto. :) Auch sollte man bedenken das externe Integrationen oder Add-ons, die nicht zum Standard von HA gehören, immer potentielle, zusätzliche Fehlerquellen nach HA Updates sein können. Wenn es externe Integrationen/Add-ons sind die von extrem vielen Usern genutzt werden ist die Change das ein evtl. Problem damit nach einem HA Update schnell gefixt wird natürlich größer. Ansonsten heißt es abwarten bis der Code-Owner (oder ggf. auch jemand anderes) es hoffentlich fixt und an die neue HA Version anpasst. Ich kenne schon einige externe Integrationen/Add-ons die nicht mehr (wirklich) gepflegt werden und somit bei HA zu Problemen führen. Z.B. die Dahua Integration von rroller. :(

Ich würde daher für einen Einsteiger auch empfehlen sich immer erst auf die Standardmöglichkeiten von HA zu beschränken und erst wenn man "weiß wie der Hase läuft" und nachdem man schon div. HA Updates mitgemacht hat, sich Schritt für Schritt mit den unzähligen anderen Möglichkeiten zu befassen. M.M.n. ist Funktion und stabiler Betrieb wichtiger als die Optik. Aber ok das ist natürlich Geschmackssache. :)

JG Jim

moonsorrox
Beiträge: 19
Registriert: Sa 20. Mai 2023, 17:47
Has thanked: 4 times

Re: Ich möchte ein dashboard bauen ähnlich meinem Fhem Dashboards

Beitrag von moonsorrox »

Ihr habt sicher recht, hilft mir aber jetzt nicht weiter....
Grund ist einfach ich möchte von Fhem weg und bin auch dabei umzustellen und habe deshalb auch zwei Tablet mit dem Dashboard von Fhem.
Da dieses aber echt extrem quälend läuft wollte ich den Wechsel, ein Tablet mein Haupttablet davon habe ich in der Küche in der Wandverkleidung... ein Loch sieht also häßlich aus und es soll bleiben und eben darauf dann HA laufen.

Deshalb versuche ich auch schnellstmöglich den Umstieg und eben das Dashboard zu erstellen.

Benutzeravatar
Osorkon
Administrator
Beiträge: 1905
Registriert: Sa 17. Jul 2021, 16:53
2
Wohnort: Langenargen
Has thanked: 60 times
Been thanked: 516 times
Kontaktdaten:

Re: Ich möchte ein dashboard bauen ähnlich meinem Fhem Dashboards

Beitrag von Osorkon »

Keiner sagt, dass Du das Thema Dashboard sein lassen sollst.
Nur die Möglichkeiten sind annähernd unendlich groß! Vor allem wenn man sich die ganzen Sachen aus dem HACS anschaut.
Du solltest Dich zu beginn mit dem Out of the Box Karten auseinander setzen, bevor Du Dich an den komplexen Sachen versuchen tust.

Ich weiss auch nicht, was genau hier Deine Erwartungshaltung ist? Willst auf Basis Deines gezeigten FHEM Screenshot's einen fertigen Code bereitgestellt bekommen?

Für die Aufteilung des Dashboards kannst Du dir mal die Horizontal und Vertikal Karten sowie die Grid Karte anschauen.

Ansonsten wären konkrete Fragestellungen einfacher zu beantworten.

Gruß
Osorkon

Einer muss ja für Ordnung sorgen. :D
Jim_OS

Re: Ich möchte ein dashboard bauen ähnlich meinem Fhem Dashboards

Beitrag von Jim_OS »

Moin,

ich nutze die custom:button-card zwar nicht, aber das hier sollte vermutlich helfen:
Beispiele: https://smarthomeyourself.de/wiki/homea ... tton-card/
Aufbau: https://smarthomeyourself.de/wiki/homea ... tankkarte/

Auf der Github Seite dazu sind dann ja auch alle Befehle und Möglichkeiten mit ein paar kurzen Beispielen beschrieben: https://github.com/custom-cards/button-card

Was das "kaum Meldungen" betrifft: Ich habe in der ersten Posting hier im Beitrag nicht wirklich eine Frage gesehen. :) Du hast da nur div. Dinge aufgelistet die Du alle bei/mit HA nutzen willst. Wie man das dann umsetzt ist ganz individuell. Oder anders gesagt. Wenn man jetzt zu den aufgezählten Punkten irgendwelche mögliche Lösungsansätze posten wollte wären das unzählige. Hinzu kommt das Du auch gar nicht beschrieben hast welche Hardware Du wie und womit bei HA eingebunden hast.

Was das Design des Dashboards im Allgemeinen betrifft. Auch das ist ja ganz individuell und jeder macht das auf seine Weise. Es gibt bei HA nicht irgendwelche Designvorlagen bei denen ein Dashboard dann so oder so aussieht, oder bei denen dann dieses oder jenes enthalten ist.

Der normale Ablauf wäre daher eher: Du hast z.B. eine PV-Anlage und diese ließe sich z.B. per MQTT oder ESPHome in HA einbinden. Dann würdest Du fragen wie man die Werte im Dashboard ggf. darstellen könnte, bzw. wie User das bei sich gemacht haben.
Oder Du möchtest z.B. ein Dashboard erstellen auf dem alles was mit Strom zu tun hat dargestellt wird. Also z.B. die PV-Anlage, der Stromzähler, irgendwelche Strommessgeräte, Steckdosen usw. Dann könnte man hier z.B. wieder fragen wie andere User das ggf. gemacht u d umgesetzt haben.
Oder Du hast ein konkretes Problem das Du z.B. für den Zustand eines Fensters (offen - geschlossen) ein animiertes Icon haben möchtest und Du Dich fragst wie oder womit man das am besten machen könntest.

VG Jim

Jim_OS

Re: Ich möchte ein dashboard bauen ähnlich meinem Fhem Dashboards

Beitrag von Jim_OS »

Weil Du das Thema Wandtablet angesprochen hast: Das hatte ich früher auch mal und darauf wurde dann ein extra Dashboard angezeigt, weil mein Standard-Dashboard, was ich am PC benutze, natürlich nicht darauf ausgelegt ist alles mögliche auf einer 10" Startseite darzustellen.
Inzwischen nutze ich statt den Tablets aber Google Hubs
Bild
und steuere darüber alles über Sprachbefehle, sodass mir die Optik oder das Design der HA-Oberfläche auf dem Nest Hub nicht so wichtig ist.

Damit Du mal sehen kannst wie ich den Standard-Desktop bei mir umgesetzt habe hier drei Screenshots. Wie schon gesagt lege ich keinen großen Wert auf das Design. :)

Bei mir ist das ganz einfach: Es gibt oben die Auswahl für verschiedene Seiten des Dashboards. Das ist bei mir ganz einfach Text bzw. Abkürzungen und keine Icons. Die HA Startseite sieht dann so aus.

HA_Dashboard.jpg

Da werden mir die Dinge angezeigt die ich immer direkt im Blick haben möchte. Konkret sind das aktuell:

  • Außenkameras
  • Wetter und Regenradar
  • Termine
  • Leistung PV
  • ein paar Temperaturen
  • weiter unten - hier nur im Ausschnitt zu sehen - wird dann der Status von allen Türen und Fenstern angezeigt
  • links gibt es noch zwei Button mit denen ich zwischen dem Standard-HA-Dashboard und dem für Google Home erstellen Dashboard umschalten kann

Natürlich könnte ich auf der Startseite noch jede Menge andere Dinge anzeigen lassen, aber mehr möchte ich da gar nicht haben und je mehr ich da hätte umso unübersichtlich wäre das für mich. Wenn man jetzt irgendwelche Dinge über die Startseite des Dashboard steuern will - also z.B. Rollläden herunter oder herauf fahren - dann kann man dies da natürlich auch noch - auf unterschiedliche Art und Weise - integrieren und anzeigen lassen.

Dann gibt es oben noch die Auswahl um verschiedene Ansichten für die verschiedenen Räume (HWR, Küche usw.), oder auch für einzelne Dinge (Alarmanlage, PV-Anlage, Stromverbauch) anzuzeigen. Beispiel PV-Anlage (Balkonkraftwerk):

HA_PV.jpg

Stromverbrauch von div. Geräten, Zählerstand usw. Also alles was mit Strom und Stromverbräuchen zu tun hat.

HA_Strom.jpg

All diese Dinge sind mit den Standardmöglichkeiten von HA erstellt worden, ohne für die Darstellung irgendwelche externe Integrationen oder Add-ons zu benutzen. Man könnte mit den Standard-Features von HA auch noch viel mehr machen und kompl. andere Designs, aber wie schon gesagt lege ich darauf nicht so viel Wert und wie ebenfalls schon gesagt mache ich das meiste inzwischen per Sprachsteuerung, sodass ich bei mir auf dem Dashboard immer weniger Anzeigen und Steuerungsmöglichkeiten brauche und habe. Die die es noch gibt sind eigentlich nur noch da damit ich am PC auch noch ein wenig sehe und weil es sie auch schon vor der Sprachsteuerung gab. :lol:

Natürlich gibt es mit den HA Standard-Featues beim Design Grenzen und dann kann man auf solche Dinge wie custom button-card oder auch Mushroom https://github.com/piitaya/lovelace-mushroom ausweichen, bzw. HA um diese ergänzen. Aber wie man dann damit etwas umsetzt und gestaltet ist vollkommen individuell und das macht jeder anders und für sich passend.

Was man machen kann ist sich auf anderen Webseiten bzw. z.B. im HA-Forum Inspirationen zu holen. Beispiel: https://community.home-assistant.io/t/m ... n/484525/8

Was nicht funktioniert ist zu sagen: Das ist meine Fhem-Ansicht was muss ich jetzt machen das das bei HA auch so aussieht. Das geht alles nur Schritt für Schritt und auf ganz unterschiedliche Wege. :)

VG Jim

moonsorrox
Beiträge: 19
Registriert: Sa 20. Mai 2023, 17:47
Has thanked: 4 times

Re: Ich möchte ein dashboard bauen ähnlich meinem Fhem Dashboards

Beitrag von moonsorrox »

Vorab vielen Dank für die große Mühe hier alles zu erklären.
Meine Frage im 2. Beitrag war...
Vllt. kann mir hier jemand helfen mit einem Beispiel.?

Mir ging es um diese beiden Karten die ich oben im Code erstellt hatte.
die 1. war eine komplett leere
die 2. war die gleiche Karte mit einer Entität

dazu und nur dazu wollte ich gerne eine Erklärung haben wie ich dort mehrere Entitäten rein bekomme, denn das ist mir ncht gelungen.
Weiter wollte ich garnichts ;)

Der Rest den baue ich selber zusammen, sorry wenn ich das nicht richtig ausgedrückt habe.
Es ist nicht so das ich nichts von HA weiß ich habe unzählige Beispiele von Karten, Dashboard und weitere schon angeschaut bevor ich mit HA angefangen habe.
Denn mir war am Anfang nicht klar ob ich das möchte, ca. ein halbes vllt, auch dreiviertel Jahr später habe ich dann angefangen mit HA und ja sicher habt ihr recht man sollte erstmal alles mit den normalen Karten ausprobieren. Ich habe aber sehr schnell gemerkt das eben damit nicht alles geht ist mir auch klar.
Jim ich möchte dir besonders danken für die vielen Beispiele und es ist nicht so das ich das alles ignoriere, nein ich werde mir alles genau anschauen.
Ich hoffe es wurde jetzt verstanden und nein ich möchte kein kompletten Code für mein Dashboard haben das mache ich schon wenn ich es besser kann und alles probiert habe.

Jim_OS

Re: Ich möchte ein dashboard bauen ähnlich meinem Fhem Dashboards

Beitrag von Jim_OS »

moonsorrox hat geschrieben: Mo 29. Mai 2023, 17:30

die 2. war die gleiche Karte mit einer Entität

dazu und nur dazu wollte ich gerne eine Erklärung haben wie ich dort mehrere Entitäten rein bekomme, denn das ist mir ncht gelungen.
Weiter wollte ich garnichts ;)

So ganz genau weiß ich immer noch nicht worum es Dir geht. :) Wie willst Du in eine Button-Card mehrere entity bekommen? Eine Button-Card ist für eine Aktion zuständig. Wenn Du jetzt z.B. in einer Ansicht (weil es ja vermutlich um das Thema Optik/Design geht) mehrere Cards mit verschiedenen Entitäten haben willst kannst Du z.B. mit vertikalen oder horizontalen Stabeln arbeiten.

Beispielcode auf die Schnelle mit zwei entity.

Button_Stapel.png

Code: Alles auswählen

type: horizontal-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: switch.growatt_shinestick_onoff
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: light.ad110_haustur_ring_light

Oder hier ein Code-Beispiel bei der Verwendung von custom:button-card aus dem HA-Forum.

Code: Alles auswählen

type: 'custom:button-card'
template: container
color: '#EDE7B0'
name: Eating & Patio
custom_fields:
  buttons:
    card:
      type: horizontal-stack
      cards:
        - entity: switch.ge_14291_in_wall_smart_switch_switch_2
          name: Kitchen
          template: standard
          icon: 'mdi:wall-sconce-flat'
          type: 'custom:button-card'
        - entity: light.ge_14294_in_wall_smart_dimmer_level_10
          name: Table
          template: standard
          icon: 'mdi:ceiling-light'
          type: 'custom:button-card'
        - entity: light.ge_14294_in_wall_smart_dimmer_level_7
          name: Dining
          template: standard
          icon: 'mdi:ceiling-light'
          type: 'custom:button-card'
        - entity: switch.patio_light
          template: standard
          name: Patio
          icon: 'mdi:outdoor-lamp'
          type: 'custom:button-card'

Oder hier ein Raster mit Cards und in dem Fall 9 entity das ich nutze

HA_Raster.png

Sollen mit einem Schalter (Button-Card) mehrere Aktionen ausgelöst werden kannst Du z.B. mit Group arbeiten https://www.home-assistant.io/integrations/group/

Schau Dir einfach mal den "Fun with custom:button-card" Beitrag im HA-Forum an. Ich nehme an das darin Deine Fragen zu dem Thema custom:button-card beantwortet werden: https://community.home-assistant.io/t/f ... ard/238450

VG Jim

moonsorrox
Beiträge: 19
Registriert: Sa 20. Mai 2023, 17:47
Has thanked: 4 times

Re: Ich möchte ein dashboard bauen ähnlich meinem Fhem Dashboards

Beitrag von moonsorrox »

Alles klar die Antwort hast du mir gegeben... ich wußte bisher noch nicht das eine button-card nur für eine Entität ist.
Da habe ich mich wohl von der Beschreibung der button-card irritieren lassen. Da gibt es in der Beschreibung einige Bilder und deshalb dachte ich man kann mehrere Eintitäten rein bringen.
Gute dann muss ich mich weiter informieren. Deine Code Beispiele werde ich ebenfalls nutzen
Hänge mal ein Screenshot ran

button-card.png
button-card.png (50.5 KiB) 776 mal betrachtet

Der Link mit der custom:button-card ist sehr gut denn diese habe ich ja und möchte ich auch nutzen, da sind recht gute Beispiele drin
EDIT:// habe nun auf der Seite doch einige Dinge gesehen z.B. ein "horizontal-stack" und da kann man dann je nach Breite einige Entitäten rein bringen.
Vielen Dank für den Denkanstoß mit der verlinkten Seite :D

Jim_OS

Re: Ich möchte ein dashboard bauen ähnlich meinem Fhem Dashboards

Beitrag von Jim_OS »

moonsorrox hat geschrieben: Di 30. Mai 2023, 00:23

EDIT:// habe nun auf der Seite doch einige Dinge gesehen z.B. ein "horizontal-stack" und da kann man dann je nach Breite einige Entitäten rein bringen.

Ähm - die beiden Code-Beispiele von mir nutzen doch auch den horizontal-stack. ;)

Du kannst halt z.B. type:horizontal-stack, type:vertical-stack, type: grid nutzen, oder auch type: picture-glance und Dir so etwas (Kamera-Livestream mit einigen Buttons) anlegen

HA_picture-glance_Beispiel.png

Halt alles wo sich Buttons mit einer Entität integrieren lassen. Die custom:button-card ist quasi nur dafür da die Buttons selber/anders zu gestalten, bzw. diese um ein paar weitere Möglichkeiten zu ergänzen.

Was die weiteren "Designmöglichkeiten" betrifft gibt es neben den von Dir bereits entdeckten custon_button-card halt noch die von mir bereits genannten Lovelace-Mushroom und z.B. noch lovelace-card-mod (https://github.com/thomasloven/lovelace-card-mod bzw. https://community.home-assistant.io/t/c ... ard/120744) Um nur mal die Sachen zu nennen die von vielen Usern genutzt werden.
Weitere Dinge die die Gestaltungsmöglichkeiten betrifft findest Du im HA-Forum halt unter Dashboards & Frontend https://community.home-assistant.io/c/p ... rontend/34

OK ich denke das Thema ist soweit abgehakt. :)

VG Jim

Antworten