Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[MaThoPa1973]

Hallo Leute,

erst einmal ein frohes Osterfest gewünscht.

Und dann hätte ich auch schon das nächste "Attentat" auf Euch ioBroker- und Programmierspezialisten vor... keine Angst - tut auch nicht weh.

Ich habe mir für die Visualisierung unseres smarten Heimes ein 3D-Modell (statisch) unseres Hauses gemacht, Lichter, Steckdosen und Wandthermostate sind insoweit schon platziert und funktionieren auch alle. Auch habe ich die im Github bereitgestellten Funktionen FensterUeberwachen und LichtUeberwachen implementiert - funktionieren insoweit auch super klasse. Vielen Dank @Pittini und @der-eine einfach grandios.

Überall an den Steckdosen und Lichtern habe ich mir zudem noch ein "Kontrolllämpchen" für den Onlinestatus des Elements platziert, welches nur rot leuchtet wenn der onlinestatus 0 ist (einfaches html, 20 x 20 px, radius 10, roter Hintergrund mit Sichtbarkeitsbedingung).

Nun kommt Ihr ins Spiel...

Ich würde gerne in dem 3D-Plan (statisch) die Fenster mit einem html-Bool versehen, grüner Rahmen wenn Fenster zu, roter Rahmen wenn Fenster auf. Einfach, damit man auch im Plannsofort sieht, welches Fenster geöffnet ist. Soweit und bis hierher wäre es auch für mich kein Problem. Jetzt aber...

In einem 3D-Plan blickt man nun mal nicht immer frontal auf die Fensterfläche, weshalb die Fenster sodann nicht immer rechteckig oder quadratisch, sondern als Parallelogramm dargestellt sind. Im Internet habe ich hier (https://blog.kulturbanause.de/2016/01/parallelogramme-mit-css-erstellen/) eine Anleitung gefunden wie man über CSS eben solche umsetzen könnte. Wo und wie müsste ich nun bei ioBroker vorgehen um den Rahmen dann entsprechend verformen zu können. Ich habe keine Lust für jede Seite eines Fensters ein gesondertes html-Bool einzufügen - ich denke, das würde das auch zu sehr aufblähen und fehleranfällig machen. Was denkt Ihr - kann das funktionieren?

Euch allen einen schönen Sonntag.

Gruß
Markus

[Almixx]

@mathopa1973
Nimm deine 3D Zeichnung, kopiere sie sooft wie du Fenster hast, färbe dann mit einem Zeichenprogramm (z.B. Gimp) die Fenster einzeln pro Bild ein und verknüpfe sie in der Vis mit dem Punkt Sichtbarkeit. Wenn du alle Bilder genau übereinanderlegst wird dir das passende dann dargestellt. So hab ich es mit einem 3d Haus Modell und beleuchteten Fenstern gemacht...

[MaThoPa1973]

Hallo @almixx

danke vielmals für den Gedankenansatz. Bei nur wenigen Fenstern mag das sicherlich eine Möglichkeit sein - hatte ich auch schon in Betracht gezogen - aber wenn ich schon allein in einem Raum drei zu überwachende Fenster habe kämen hier ja 3 hoch 2 gleich 8 Kombinationen in Frage wie die Fenster geöffnet oder geschlossen sein könnten (Wohnzimmer). In Verbindung mit den anderen Räumen würde dann nochmals der Faktor 2 dazu kommen.

Ich denke, ich werde bis ich eine andere Möglichkeit gefunden habe, erst einmal aus dem Bool-Kasten einen Kreis machen und den rot oder grün darstellen... besser als nix.

Gruß
Markus

[liv-in-sky]

@mathopa1973 bin mir nicht sicher ob ich das überhaupt richtig versteh

aber rein theoretisch: wenn das fenster durch eine klasse oder id gekennzeichnet ist, kann man mit jquery z.b die farbe des objects ändern - man müßte also eine abfrage nach dem zustand (dp) machen und dann mit jquery die farbe ändern

mit chrome und rechts-klick auf das fenster , kann man im menu bei untersuchen herausfinden, wie die fenster gekennzeichnet sind

soviel zur theorie - in der praxis ist das wahrscheinlich nicht so einfach

[MaThoPa1973]

@liv-in-sky Ich habe unser Haus zwar in Auto-CAD Architektur erstellt und in diesem ist jede Wand, jedes Fenster und jede Türe ein Objekt für sich aber ich bezweifle, dass ioBroker derartige Dateien 1:1 einlesen, verarbeiten und als solches darstellen kann. Aus diesem Grund habe ich von dem 3D-Modell dann, um es in der Visualisierung dazustellen, lediglich ein Bild/Screenshot gemacht. Hier hast Du also keinen Zugriff mehr auf die einzelnen Objekte.

Gruß
Markus

[Asgothian]

@mathopa1973 sagte in html-bool als Parallelogramm verformen?:

Aus diesem Grund habe ich von dem 3D-Modell dann, um es in der Visualisierung dazustellen, lediglich ein Bild/Screenshot gemacht.

Ich bin kein Experte in AutoCad, aber Du solltest mal schauen ob es Dir gelingt das 3D Modell in einer 2D Ansicht als SVG zu exportieren, an statt ein Bild zu machen. Dann hast du ein (im Idealfall editierbares) Vektorkonstrukt aus dem Du dir die einzelnen Elemente durchaus heraus suchen kannst. Ich weiss das auch von 3D Modellen 2D dxf Ansichten erzeugt werden können - auch das sind Vektorgrafiken.

Ob das mehr oder weniger Arbeit ist als das Erzeugen von einzelnen Shapes für jedes Fenster kann ich allerdings nicht sagen.

A.

[MaThoPa1973]

@asgothian Danke für den Hinweis - soweit habe ich noch nicht gedacht da ich auch sonst nie mit Vektorgrafiken (bewusst) gearbeitet habe. Muss ich mal in einer extra Visualisierung versuchen ob ich das hinbekomme... und ob und wie ich dann die einzelnen Bestandteile der Grafik über iobroker ansprechen kann um deren Aussehen (Farbgebung) zu verändern.

Gruß
Markus