<![CDATA[Glashaus – VIS-2-Design mit 3D-Hausmodell und Live-Demo]]>Titel: Glashaus – VIS-2-Widgets mit 3D-Hausmodell und Live-Demo

Update 24.10.2026: Glashaus gibt es jetzt als echtes Widget-Set für VIS 2 – 14 Widgets in der Palette, eigene Datenpunkte im Editor wählen, Beispielprojekt zum Importieren. Details unten.

Hallo zusammen,

ich habe in den letzten Wochen an einem Dashboard im Glas-Look gebastelt und stelle es als Open Source zur Verfügung. Vielleicht kann es jemand gebrauchen oder hat Lust, mitzumachen.

Startseite

Was ist das?

„Glashaus“ ist ein ruhiges Design mit Milchglas-Kacheln, großer Typografie und hell/dunkel. Im Hintergrund steht eine Linienzeichnung, die beim Drüberstreichen in Partikel zerfließt und sich wieder zusammensetzt. Gedacht ist es vor allem für ein Wand-Tablet.

Partikel

Neu: Widget-Set für VIS 2

GitHub: https://github.com/djlex83/ioBroker.vis-2-widgets-glashaus

Der Adapter vis-2-widgets-glashaus bringt 14 Widgets in die VIS-2-Palette (Gruppe „Glashaus“). Die Datenpunkte wählt ihr wie gewohnt im Editor. Solange keiner gewählt ist, zeigt jedes Widget Demo-Werte – man kann also erst gestalten und dann verbinden.

Widget Was es zeigt
Hintergrund Wort + Linienzeichnung (Haus mit Wetter, Energie, Heizung, Hausgeräte, Einfahrt, Grundriss oder eigenes Bild), zerfließt unter dem Finger
Überschrift Begrüßung nach Tageszeit, Text, Uhr, Knöpfe zu anderen Seiten
Navigation Links zu euren Seiten, Hell/Dunkel-Umschalter, Uhr
Wert Kachel mit Zahl, Einheit, Status nach Grenzwerten und 24-h-Verlauf
Schalter wird beim Einschalten schwarz; Taster, Szene, Dimmer
Ring Prozentwerte, z. B. Batterie-Ladestand
Meldungen bis zu 20 Bedingungen als Liste oder nur aktive Meldungen
Energiefluss PV, Haus, Batterie, Netz, Wallbox, Extra-Verbraucher mit wanderndem Fluss und Autarkie
Verlauf bis zu 4 Reihen aus history/influxdb/sql als Linie oder Säulen
Jahres-Skyline ein Jahr Tageswerte als 3D-Skyline, mehrere Jahre als Streifen
Wetter animiertes Symbol, Werte, optional 24 h / 7 Tage
Hausgerät animierte Waschmaschine, Trockner, Spülmaschine mit Restzeit
Kamera Snapshot mit Aktualisierung, Live- und Bewegungs-Anzeige, große Ansicht
Hausmodell 3D Glashaus aus eurem Grundriss (in Metern) mit Lampen, Fenstern, Meldern, Thermostaten
Dunkel Energie Haus
--- --- ---
Dunkel Energie Haus

Die Bilder zeigen das Beispielprojekt (drei Seiten für ein Tablet mit 1280 × 800, 22 Widgets, Demo-Werte). Es liegt im Repo unter examples/glashaus-demo.zip und lässt sich im VIS-2-Editor unter Projekte → Importieren einspielen.

Voraussetzungen: vis-2 ab 2.20 (aktuell im latest-Repository) und der web-Adapter.

Installation (Vorabversion zum Testen)

Noch nicht im ioBroker-Repository und nicht auf npm – zum Testen gibt es eine Vorabversion: https://github.com/djlex83/ioBroker.vis-2-widgets-glashaus/releases/tag/beta-0.1.0

Im Admin: Adapter → oben das GitHub-Symbol („Aus eigener URL installieren“) → beliebige URL → diese Adresse einfügen:

https://raw.githubusercontent.com/djlex83/ioBroker.vis-2-widgets-glashaus/release-packages/iobroker.vis-2-widgets-glashaus-0.1.0.tgz

Danach beim Adapter „vis-2-widgets-glashaus“ eine Instanz anlegen (+) und vis-2 einmal neu starten – erst dann holt vis-2 die Widgets in die Palette.

Oder auf der Konsole:

iobroker url https://raw.githubusercontent.com/djlex83/ioBroker.vis-2-widgets-glashaus/release-packages/iobroker.vis-2-widgets-glashaus-0.1.0.tgz
iobroker add vis-2-widgets-glashaus
iobroker restart vis-2.0

Danach im vis-2-Editor in der Palette die Gruppe Glashaus öffnen:

[hier Bild 5-editor-palette.png hochladen]

Hinweis für alle, die vis-2 2.20.4 neu über den Admin installieren: Der Lizenzdialog bleibt dort zurzeit leer und lässt sich nicht bestätigen (gemeldet: https://github.com/ioBroker/ioBroker.vis-2/issues/707). Über die Konsole geht es: iobroker add vis-2.

Schriften (Geist, Instrument Serif) sind im Paket enthalten, es wird nichts von fremden Servern geladen. Oberfläche in 11 Sprachen.

Das ursprüngliche Design

Die erste Fassung mit sieben fertigen Seiten (Zuhause, Energie, Heizung, Geräte, Einfahrt, Haus, Zimmer) gibt es weiter als Live-Demo im Browser: https://djlex83.github.io/glashaus-vis2/ (GitHub: https://github.com/djlex83/glashaus-vis2). Das Haus dort ist erfunden.

Hausmodell

Technik

  • React/TypeScript nach der offiziellen vis-2-Widget-Vorlage, MIT-Lizenz
  • DEVELOPMENT.md im Repo erklärt, wie man ein Widget ergänzt; ein „Harness“ zeigt alle Widgets ohne ioBroker mit simulierten Werten
  • Automatischer Test bei jedem Push: installiert ioBroker mit vis-2, öffnet den Editor und fügt jedes Widget ein

Feedback und Mitmachen

Ich freue mich über Rückmeldungen: Was fehlt euch, welches Widget würdet ihr euch wünschen, was sieht auf eurem Display nicht gut aus? Issues und Pull Requests gern direkt auf GitHub.

Viele Grüße

]]>https://forum.iobroker.net/topic/85640/glashaus-vis-2-design-mit-3d-hausmodell-und-live-demoRSS for NodeSat, 07 Nov 2026 04:59:07 GMTWed, 21 Oct 2026 21:36:15 GMT60<![CDATA[Reply to Glashaus – VIS-2-Design mit 3D-Hausmodell und Live-Demo on Sat, 07 Nov 2026 04:02:18 GMT]]>Ich bin beeindruckt!

]]>https://forum.iobroker.net/post/1362191https://forum.iobroker.net/post/1362191Sat, 07 Nov 2026 04:02:18 GMT<![CDATA[Reply to Glashaus – VIS-2-Design mit 3D-Hausmodell und Live-Demo on Fri, 30 Oct 2026 22:10:31 GMT]]>Vielen Dank für dieses wundervolle Design. Ich hab das gleich für mich angepasst und Umgesetzt.
Dashboard

]]>https://forum.iobroker.net/post/1361178https://forum.iobroker.net/post/1361178Fri, 30 Oct 2026 22:10:31 GMT<![CDATA[Reply to Glashaus – VIS-2-Design mit 3D-Hausmodell und Live-Demo on Sat, 24 Oct 2026 11:30:20 GMT]]>Danke dir!

Ja, die erste Fassung ist eher „eine Seite pro Thema“ und wird auf dem Tablet gescrollt. Ich nutze selbst ein Amazon Fire Max 11 (2000 × 1200, quer an der Wand) mit Fully Kiosk. Damit es im Alltag nicht nach Scrollen aussieht, gibt es einen Standby: Nach ein paar Minuten zeigt das Tablet nur noch Uhr und ein paar kompakte Kacheln (PV, Batterie, Warmwasser, Außentemperatur, Müll …), nachts gedimmt.

Genau dein Punkt war auch ein Grund für das neue Widget-Set für VIS 2 (siehe Update im ersten Beitrag): Dort ist jede Kachel ein eigenes Widget, und du stellst dir nur das zusammen, was auf dein Display passt. Das Beispielprojekt ist für 1280 × 800 gebaut und kommt ganz ohne Scrollen aus.

Zu den Linienzeichnungen: Geschmackssache, verstehe ich. Im Widget-Set ist der Hintergrund ein eigenes Widget, das du einfach weglassen kannst – die Kacheln funktionieren auch auf normalem Hintergrund. Wer nur ein bisschen Atmosphäre möchte, stellt beim Hintergrund-Widget „Zeichnung“ auf „Keine (nur das Wort)“ oder macht die Zeichnung über „Zeichnung ab/bis (% der Höhe)“ kleiner.

1-zuhause-hell.png
2-zuhause-dunkel.png
3-energie.png
4-haus.png
5-editor-palette.png

]]>https://forum.iobroker.net/post/1360339https://forum.iobroker.net/post/1360339Sat, 24 Oct 2026 11:30:20 GMT<![CDATA[Reply to Glashaus – VIS-2-Design mit 3D-Hausmodell und Live-Demo on Sat, 24 Oct 2026 08:28:50 GMT]]>Wirklich schick geworden, es erfordert aber für den "Haufen" an Infos ein recht großes Display bzw. man muss scrollen, korrekt?
Welches Wanddisplay nutzt du selbst?

Die Linienzeichnungen haben für mich persönlich keinen großen Nutzen und verschwenden recht viel wertvollen Platz, die Kacheln sind aber wirklich extrem schön und übersichtlich.

Respekt für die Visualisierung!

]]>https://forum.iobroker.net/post/1360301https://forum.iobroker.net/post/1360301Sat, 24 Oct 2026 08:28:50 GMT