Moin zusammen 😊
ich versuche aktuell, ein 3D-Dashboard aus Home Assistant (floor3d-card mit Grundriss) als Webseite im AIO CREATOR NEO einzubinden.
Ziel:
– Das 3D-Modell soll „freischwebend“ auf meinem AIO-Hintergrund liegen
– und ich möchte oben drüber noch eigene Icons/Buttons aus NEO platzieren.
Technisch klappt die Einbindung grundsätzlich, aber das Webseitenelement zeigt immer einen schwarzen Hintergrund im kompletten iframe-Bereich – also einen rechteckigen schwarzen Block hinter dem 3D-Grundriss. Links und rechts sehe ich deutlich meinen rosa AIO-Hintergrund, aber das iframe-Rechteck bleibt komplett schwarz.
Was ich bisher gemacht habe:
1. Home Assistant freigegeben
In der configuration.yaml:
yaml:
http:
use_x_frame_options: false
→ „Verbindung abgelehnt“ ist damit weg, HA lässt sich per iframe einbinden.
2. HTML-Gerüst im AIO CREATOR NEO
– Im Webseitenelement ist das Feld „Webseite“ leer
– ich nutze nur das HTML-Gerüst:
html:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: transparent;
overflow: hidden;
}
iframe {
border: 0;
width: 100%;
height: 100%;
background: transparent;
}
– „Native WebView“ ist beim Webseitenelement deaktiviert.
3. Transparenter Hintergrund in Home Assistant
Ich verwende ein eigenes Theme 3d_transparent, in dem alle relevanten Hintergründe auf transparent gesetzt sind (lovelace-background, primary-background-color, card-background-color, background-color etc.).
Über card-mod-root-yaml werden zusätzlich html, body, ha-app-layout, hui-view und #view auf
css:
background: transparent !important;
gesetzt.
4. floor3d-card
Die Karte ist u. a. so konfiguriert:
yaml:
type: custom:floor3d-card
path: /local/floor3d/
objfile: grundriss.obj
mtlfile: grundriss.mtl
backgroundColor: 'transparent'
overlay: 'no'
header: 'no'
plus card_mod mit transparentem ha-card und einer längeren entities-Liste für meine Lampen (funktioniert alles soweit).
Verhalten:
– Im Browser (Chrome) klappt es: der Bereich außerhalb des 3D-Modells wird nicht mehr schwarz/weiß gefüllt, die Theme-Anpassungen greifen.
– In der AIO CREATOR NEO-Vorschau ist der Bereich des Webseitenelements jedoch weiterhin komplett schwarz hinterlegt, obwohl iframe und HTML auf „transparent“ stehen.
Meine Vermutung:
Die von NEO verwendete WebView setzt selbst einen schwarzen Hintergrund und lässt die Transparenz des iframes nicht bis auf den Designer-Hintergrund durch.
Fragen an euch:
– Hat jemand Home Assistant (oder eine andere Webseite mit transparentem Hintergrund) schon erfolgreich per iframe im AIO CREATOR NEO eingebunden, sodass wirklich nur der Inhalt und nicht ein schwarzer/weißer Block sichtbar ist?
– Wird die Transparenz evtl. nur in der mobilen AIO REMOTE NEO App korrekt dargestellt und nicht in der PC-Vorschau?
– Gibt es einen bekannten Trick oder Workaround (CSS, bestimmte Einstellung), damit der Hintergrund wirklich transparent wird?
Ich freue mich sehr über Erfahrungen, Tipps oder Beispiel-Konfigurationen. Vielleicht übersehe ich ja nur einen kleinen Haken.
Vielen Dank schon mal fürs Mitdenken und eure Hilfe! 🙏
Liebe Grüße
Martin
Von
Moin Fonzo,
danke dir für deine Rückmeldung und deine Idee mit dem PNG, die wäre für einen wirklich statischen Grundriss auf jeden Fall eine saubere Lösung. 😊
In meinem Fall ist der 3D-Grundriss aber nicht nur eine reine Ansicht:
• Ich kann ihn drehen/schwenken und zoomen, also die Perspektive aktiv verändern.
• Zusätzlich kann ich direkt im 3D-Modell Lampen anwählen/anklicken und schalten.
Genau diese Interaktivität ist mir wichtig, weil ich über dieses Dashboard mehr Übersichtlichkeit reinbringen möchte und nicht so viele Schalter/Regler auf der Startseite haben will. Die Idee ist, dass man sich im 3D-Raum orientiert und von dort aus die wichtigsten Dinge direkt bedienen kann, ohne Icon-Flut.
Ganz nebenbei ist die Bedienung dadurch auch so einfach und intuitiv, dass sie bei uns zu Hause „frauengerecht“ ist 😉,
also wirklich leicht verständlich und ohne viel Erklärungsbedarf.
Zur technischen Umsetzung:
Die Webseite mit der 3D-Ansicht soll nicht als kompletter Hintergrund laufen, sondern der interaktive 3D-Grundriss soll über dem im AIO CREATOR NEO gewählten Hintergrund „schweben“. Heißt: Im NEO wähle ich einen ganz normalen Hintergrund, darüber liegt die 3D-Ansicht (idealerweise mit transparentem Hintergrund / aktuell Schwarz) und die NEO-Icons kann ich dann wiederum als weitere Ebene über dem 3D-Grundriss platzieren.
Viele Grüße
Martin
Von
Danke für die zusätzlichen Informationen, dann kann ich mir zumindest vorstellen was Du beabsichtigst. Ich stelle es mir nur schwierig bis unmöglich vor Icons im AIO CREATOR NEO statisch zu platzieren, die ihre Position ja nicht ändern, gleichzeitig aber einen variablen drehbaren Hintergrund zu haben.
Wenn ich Zeit habe, schaue ich mir das mal bei Gelegenheit an und gebe Dir Rückmeldung wegen dem Hintergrund bzw. ob sich das so wie von Dir gewünscht ansatzweise realisieren lässt.
Von
Du erwartest also, das die Neo Icons ihre Position und Drehungen ändern, wenn deine 3D webhintergrund gedreht wird? Haben wir das so zu verstehen?
Von
@mbkirkie Die Icons die im AIO CREATOR NEO platziert werden sind immer statisch. Wenn man also ein vollständige dynamische drehbare Benutzeroberfläche haben will, lässt sich das nur umsetzen, indem der gesamte Steuerungsumfang auch innerhalb der benutzen Webseite realisiert wird. Das Hauptproblem, das marthome schildert, ist ja eher das die eingebettete Webseite keinen transparenten Hintergrund anzeigt, sondern schwarzen Hintergrund. Ob es dazu in der Kombination eine Lösung gibt, kann ich so zumindest nicht beurteilen, da ich diese Kombination nicht nutze. Grundsätzlich ist es aber möglich das eingebettete Webseiten mit transparentem Hintergrund angezeigt werden, das nutze ich ja selber intensiv.
Die eigentliche Frage bzw. Problem ist also, wie bekommt marthome mit der genutzten Kombi den schwarzen Hintergrund weg?
Neuen Kommentar hinzufügen