Hintergrund von Home Assistant Login Page für eigenes Dashboard nutzen (aktiver particles Background)

[jayjojayson]

Hi, heute möchte eine Möglichkeit aufzeigen, wie ihr eure Dashboards im Hintergrund animieren könnt. Ihr werdet alle die Login-Seite von Home Assistant kennen und ich finde den Hintergrund dort eigentlich sehr ansprechend. Daher habe ich einen Weg gesucht, wie ich das bei mir auf dem Dashboard umsetzen kann. Nach einigem hin- und her, habe ich eine Lösung gefunden. Mit dieser Methode kann man auf jedem beliebigen Dashboard den Hintergrund hinzufügen.

großes Foto, kann es leider nicht anders hier hochladen

Anleitung:

• Für den Particles Background sind zwei Dinge notwendig. Zuerst müsst ihr unter Geräte & Dienste einen Helfer mit dem Typ Schalter und dem Namen Button Background Dashboard angelegen. Somit könnt ihr im Anschluss bequem per Schalter den partikel Hintergrund ein- oder ausblenden. Ich habe den Schalter in der Unterseite Einstellungen hinterlegt.

• Das zweite ist das Anlegen der Dateien, kopiert dazu einfach die Dateien aus meinem github (aktueller release) aus dem Ordner „z-particles background“ und fügt sie bei euch unter www/particles/ in HA ein. Den Ordner „particles“ müsst ihr vorab unter www erstellen.

• Je nachdem auf welcher Seite ihr den Hintergrund letztlich nutzten möchtet, muss eine conditional card eingefügt werden. Die Card bleibt erstmal leer und durch Card Mod wird sie an die richtige Stelle gesetzt. Die Positionierung der Card innerhalb des Dashboards sollte beim neuen Design von HA am Ende erfolgen. Beim alten Design, muss sie wahrscheinlich an den Anfang gepackt werden. Die Farben der Punkte, Linien und des Hintergrundes können in der css und in der app.js bearbeitet werden (Cache danach löschen nicht vergessen). Die Transparenz wird direkt in der Card definiert.

Der Code für die conditional card sieht wie folgt aus:

type: conditional
conditions:
  - condition: state
    entity: input_boolean.button_background_dashboard
    state: "on"
card:
  type: iframe
  url: /local/particles/background/index.html
  aspect_ratio: 50%
  card_mod:
    style: |
      ha-card {
        border: none !important;
        border-radius: 0px !important;
        background: none !important;
        box-shadow: none !important;
        z-index: -1;
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        opacity:0.3;
      }

Releases · jayjojayson/HA_homedashboard

Viel Spaß beim nachbasteln. Wie gefällt euch der Hintergrund, würde mich über ein Feedback sehr freuen.

[Flashpixel]

Ist ne coole Idee.

[jayjojayson]

Danke, ich finde das auch richtig gut. Habe es mir so eingestellt, dass es unauffällig den Hintergrund aufhübscht.

[meins57]

Ja hat was

[jayjojayson]

Hat keiner weiter Interesse das mal zu testen? Würde mich freuen, ich kann gerne bei der Installation helfen, wenn ihr irgendwo nicht weiterkommt.

[heinzie]

Danke, werde das einmal testen.
Könnte man ggf. auch eine aktuelle online Wetterkarte dort hinterlegen?

[jayjojayson]

Bitte. @heinzie

Nein, eigentlich nicht. Wenn man sich auskennt, kann man die index.html bearbeiten und dort die online-Wetterkarte hinterlegen. Aber der bewegende Hintergrund würde bleiben bzw. müsste ebenfalls in der index.html entfernt werden. Also alles in allem nicht so leicht. Ich habe da schon ein bisschen gefummelt, bis ich das alles so hatte, wie wir es brauchen. Habe also die ganzen Dateien entsprechend bearbeitet.

Für dein Vorhaben würde ich anders vorgehen. Nimm eine website-card, stecke deinen link von der Wetterkarte dort rein und dann musst du in der yaml unten diesen Code für Card Mod einfügen. Im Anschluss wird der iframe im kompletten Hintergrund dargestellt (ungetestet) aber Code lügt nicht. Sollte funktionieren.

card_mod:
  style: |
    ha-card {
      border: none !important;
      border-radius: 0px !important;
      background: none !important;
      box-shadow: none !important;
      z-index: -1;
      position: fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      opacity:0.3;
    }

[heinzie]

Vielen Dank, das funktioniert.

Nur Bedien kann ich die Seite leider nicht, vermute das liegt daran das die im Hintergrund ist, oder?

[jayjojayson]

ja korrekt, würde sie im Vordergrund liegen, könntest du das restliche Dashboard nicht mehr bedienen. Anders ist es leider nicht möglich.

[heinzie]

Hatte ich befürchtet. Kann man denn ggf. irgendwo einstellen den Hintergrund z.B. alle 5 Sekunden zu aktualisieren?

[jayjojayson]

Ja das geht aber auch nur wieder umständlich mit eigener custom.html. Ein bisschen weiter unten im Thread hat es einer mit einer config-template-card geschafft.

[meins57]

Werde das heute oder morgen auch mal testen. Soll dann den Hintergrund des Screensaver Dashboards aufpäppeln.

Edit: Kannst mir sagen wie ich die particle langsamer bekomme🫣

[Schorsch]

Gefällt mir sehr gut. Prima Präsentation.
Ich vermute, dass die CPU-Last dadurch nicht signifikant ansteigt.
Das würde ich auch gerne mal ausprobieren.
Leider ist es bei mir zurzeit so, dass mein Dashboard auf demTablet dermaßen kompakt und flächendeckend mit Visualisierungen gefüllt ist, daß kaum noch sichtbarer Hintergrund bleibt.

[meins57]

Klappt soweit super @jayjojayson

Bildschirmaufnahme 2025 02 12 um 14 14 15

Nur auf Farben ändern reagiert es bei mir nicht.

[jayjojayson]

Könnte sein, dass es mit dem screensaver an sich zusammenhängt. Du wirst ja sicherlich auch in der js und css Datei versucht haben Änderungen vorzunehmen?

@Schorsch läuft bei mit raspi ohne Probleme.

[meins57]

Jepp, bei beiden probiert. Der Screensaver ist eigentlich ein angelegtes Dashboard welches über den Fully Kiosk Browser nach 30 sec als Bildschirmschoner aufgerufen wird.

[jayjojayson]

Ah ok, nutze keinen screensaver. Jetzt ist mir das klarer. Wenn der screensaver angeht, bleiben die Farben z.B. in Bildern normalerweise erhalten oder werden die dann durch den fully Screensaver schwarz/weiß. Auf jeden Fall komisch, wenn er die js abspielen kann, muss er doch auch die Farben übernehmen.

[meins57]

@jayjojayson

Wenn der screensaver angeht, bleiben die Farben z.B. in Bildern normalerweise erhalten oder werden die dann durch den fully Screensaver schwarz/weiß.

die Farben bleiben erhalten. Kann alles an Farben ändern wie z.B. bei der Uhr oder über ein Theme. Aber egal ob ich am PC das Screensaver Dashboard aufrufe oder über den Fully. Das macht keinen Unterschied bei deinem genialen Hintergrund.

[Smartzeug]

Kurze Verständnisfrage:
Warum als conditional und nicht als richtiger Hintergrund?
Ich hatte in einen meiner ersten Video (Achtung peinlich) Matrix Hintergrund mal gemacht (https://www.youtube.com/watch?v=jgXhLYNE7kM&t=124s)

Würde das mit den particles nicht gehen?

[jayjojayson]

Hi, nein geht leider nicht. Dein Video zeigt nur ein Theme mit gif Hintergrund. Bei mir wird per js der Hintergrund gezeichnet.

Die conditinal card hat nur den Grund, dass so der background ein- oder ausgeschaltet werden kann. Der eigentliche Hintergrund wird durch eine js Datei erzeugt und dann in einer html Seite ausgegeben. Leider reicht mein Wissen hier noch nicht aus, um den particles background direkt in den Hintergrund von HA zu schreiben. Schön wäre wenn man das über hacs zu Installation anbieten könnte, aber meine Versuche dahingehend waren bisher nicht erfolgreich.