Glashaus – VIS-2-Design mit 3D-Hausmodell und Live-Demo

djlex

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
---	---	---

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

V-Pixel

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!

djlex

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.