ReAct-Fluid-WebUI
Wenn ein Smart-Home-Enthusiast die fehlende Oberfläche selbst baut
Wie aus einem Community-Wunsch ein vollwertiges WebUI-Plugin für die Home Control Unit wurde
Vom Lötkolben zum Code
Manche Leidenschaften beginnen früh. Bei mir war es ein KOSMOS Elektronik-Bausatz, aus dem ich mit acht Jahren mein erstes Radio zusammensetzte. Seitdem hat mich das Zusammenspiel von Elektronik und Software nie mehr losgelassen. Nach einem dualen Studium der Mechatronik mit Schwerpunkt Systemtechnik – parallel zur Ausbildung als Energieelektroniker – führte mich mein beruflicher Weg zunächst in eine ganz andere Richtung: Mechanik, 2500 bar Hydraulik und zahlreiche Auslandseinsätze.
Doch auch fernab der Heimat fand die Technik ihren Weg zu mir zurück. Über einen Home-Entertainment-PC wurde ich vom reinen Anwender zum aktiven Entwickler und habe über zehn Jahre lang Frontends für die Open-Source-Projekte MediaPortal und Kodi mitgestaltet.
Heute, mit 46 Jahren, arbeite ich im Bereich Software, Virtualisierung und Künstliche Intelligenz in der Zentrale eines großen Automobilzulieferers. Mein Name ist Gerrit Eßers – und das hier ist die Geschichte, wie aus einer ganz persönlichen Unzufriedenheit ein Plugin wurde, das eine echte Lücke im Homematic IP Ökosystem schließt.
Mein Haus, mein Labor
Nach der Rückkehr aus dem Ausland und dem Hausbau – man ist schließlich Schwabe – packte mich die Begeisterung für Smart Home und Automatisierung. Unser gesamtes Haus habe ich mit Homematic IP Komponenten bestückt: Rollläden, Thermostate, Klimasteuerung, Gartenbewässerung – alles ist automatisiert und per Sprache steuerbar. Wer einmal erlebt hat, wie das Zuhause morgens selbstständig die Rollläden hochfährt, die Heizung regelt und abends das Licht dimmt, möchte diesen Komfort nicht mehr missen.
Meine ersten Gehversuche in der Homematic IP Welt bestanden darin, Skripte für die CCU3 zu schreiben. Funktional war das durchaus brauchbar – aber als jemand, der jahrelang Benutzeroberflächen für Mediacenter entwickelt hat, war ich ehrlich gesagt nicht begeistert. Mir schwebte schon damals etwas anderes vor: eine intuitive, visuell ansprechende und nicht überladene Oberfläche zum Bedienen und Automatisieren. Eine Oberfläche, die man gerne öffnet.
Die HCU als Wendepunkt
Mit der Home Control Unit änderte sich alles. Die HCU brachte nicht nur die Integration meiner Doorbird-Anlage, sondern vor allem die Möglichkeit, Plugins mit eigener Weboberfläche zu entwickeln – keine Skripte mehr, sondern echte Webanwendungen. Als die Connect API Dokumentation veröffentlicht wurde, setzte ich mich relativ zeitnah daran und war erstaunt, wie schnell man etwas Produktives auf die Beine stellen konnte.
Mein erstes Projekt war die Überführung meiner Beschattungsautomatisierung aus den alten CCU-Scripten in ein Plugin, das ich dabei komplett neu konzipiert und deutlich erweitert habe. Dieses Plugin kam in der Community sehr gut an – und schnell entstanden im Forum weitere Wünsche. Einer davon stach besonders hervor.
Eine Oberfläche, die es nicht gab
Der Wunsch war klar formuliert: eine Web-Oberfläche zum Steuern der Geräte. Denn seitens Homematic IP gibt es momentan nur die App für iOS und Android – wer am Desktop-PC, am Laptop oder an einem Wandtablet sein Smart Home bedienen möchte, schaut in die Röhre.
Für mich als UX-Enthusiast war das die perfekte Herausforderung. Mein Ziel: ein UI, das diese Lücke schließt, aber gleichzeitig nahtlos auf Tablets und Smartphones skaliert. Es sollte absolut intuitiv und visuell ansprechend sein. Apple Home hatte mich dabei schon immer inspiriert – diese Klarheit, diese Reduktion auf das Wesentliche. So entstand die Idee zu ReAct-Fluid-WebUI (Bild 1).
Das Plugin im Überblick
ReAct-Fluid-WebUI ist eine moderne Weboberfläche für die Home Control Unit, die als Plugin auf selbiger läuft. Die Bedienung erfolgt über den Browser – auf jedem Gerät, ohne Installation, ohne App-Store.
Die Startseite: Alles auf einen Blick
Nach dem Öffnen begrüßt die Home-Ansicht den Nutzer mit einer übersichtlichen Darstellung aller Räume als Kacheln. Eine Wetterleiste zeigt aktuelle Bedingungen, und über eine Kategorienavigation lassen sich Geräte nach Funktion filtern – etwa Licht, Klima, Rollläden oder Sicherheit. Der Anspruch war, dass man den Zustand des gesamten Hauses mit einem Blick erfassen kann.
Raumansicht und Gerätesteuerung
Tippt man auf einen Raum, öffnet sich die Detailansicht mit allen zugehörigen Geräten. Die Bedienung ist dabei auf das jeweilige Gerät zugeschnitten: Schalter lassen sich per Toggle umlegen, Dimmer über fließende Slider regeln, Rollläden stufenlos positionieren. Thermostate werden über ein Drehrad eingestellt, Farblichter über einen intuitiven Farbwähler angesteuert. Selbst Garagentore haben ihr eigenes, dediziertes Bedienelement. Jedes Gerät reagiert dabei in Echtzeit – ohne merkliche Verzögerung.
Breite Geräteunterstützung
Das Plugin unterstützt derzeit über 50 verschiedene Homematic IP Gerätetypen. Das Spektrum reicht von einfachen Schaltsteckdosen und Wandtastern über Dimmer, Rollläden und Jalousien bis hin zu Rauchmeldern, Bewegungssensoren, Wassersensoren, Türschlössern und komplexen Wettersensoren für Regen, Wind und Sonnenschein. Auch Schaltgruppen und Heizungsgruppen werden erkannt und lassen sich direkt bedienen.
Personalisierung
Die Oberfläche passt sich den Vorlieben des Nutzers an. Raumreihenfolge, Gerätesichtbarkeit und Gerätereihenfolge lassen sich individuell konfigurieren. Hintergründe können als Farbverläufe oder Bilder gewählt werden, und Geräteicons lassen sich bei Bedarf anpassen. So wird die Oberfläche nicht nur funktional, sondern auch persönlich.
Energie im Blick
Ein integriertes Energie-Dashboard visualisiert den Energieverbrauch und gibt dem Nutzer die Möglichkeit, Verbräuche im Auge zu behalten – direkt in der gleichen Oberfläche, ohne zwischen verschiedenen Tools wechseln zu müssen.
Lokal, sicher und schnell
Ein zentraler Designgrundsatz von ReAct-Fluid-WebUI ist die vollständig lokale Kommunikation. Die Verbindung zur HCU läuft über eine SSL-verschlüsselte Verbindung im Heimnetzwerk. Keine Daten verlassen das Haus, keine Cloud wird benötigt. Das sorgt nicht nur für Datenschutz, sondern auch für spürbar schnelle Reaktionszeiten. Es gibt optional auch ein User-Management, das zum einen die Möglichkeit des Passwortschutzes und zum anderen Restriktionen und Anpassungsoptionen für Benutzer bietet. Auch das ist ein Feature, dass es momentan nicht in der Homematic IP App gibt. Statusänderungen werden in Echtzeit an alle geöffneten Browser-Fenster übertragen – schaltet jemand ein Licht per Wandtaster, aktualisiert sich die Weboberfläche sofort.
Responsive – eine Oberfläche für alles
Ob Desktop-Monitor, Wandtablet oder Smartphone: Die Oberfläche skaliert nahtlos und passt Layout und Bedienelemente an die jeweilige Bildschirmgröße an. Flüssige Animationen, umgesetzt mit Framer Motion, sorgen dabei für ein hochwertiges und modernes Bediengefühl, das man von nativen Apps kennt.
Ausblick und Fazit
ReAct-Fluid-WebUI ist ein lebendes Projekt, das stetig wächst. Amazon-Echo-Geräte wurden bereits in das Plugin integriert und lassen sich über die Home Control Unit automatisieren. Auch das Beschattungsplugin ist mittlerweile vollständig eingebunden.
Die Automatisierungsmöglichkeiten des Plugins sowie die Integration und Steuerung von Amazon-Echo-Geräten sind jeweils so umfangreich, dass ihnen eigene Artikel gewidmet werden – beide erscheinen in kommenden Artikeln.
Darüber hinaus beschäftige ich mich mit der Idee, ReAct-Fluid-WebUI auch als native App für iOS, Windows und Android anzubieten – in Verbindung mit der Cloud API, sodass das Smart Home auch von unterwegs bedienbar wäre, ohne auf den Komfort der gewohnten Oberfläche verzichten zu müssen.
Was als persönliche Unzufriedenheit mit dem Status quo begann und durch einen Community-Wunsch den entscheidenden Anstoß bekam, ist heute ein vollwertiges Smart-Home-Frontend für die Home Control Unit. ReAct-Fluid-WebUI zeigt, was möglich ist, wenn Begeisterung, Erfahrung und eine engagierte Community zusammenkommen. Die HCU-Plattform bietet dafür das ideale Fundament – und ich bin gespannt, wohin die Reise noch geht.
Download über Forum:
ReAct-Fluid-WebUI im Homematic-Forum
Gerrit Eßers