{"id":12656,"date":"2026-04-10T14:22:50","date_gmt":"2026-04-10T12:22:50","guid":{"rendered":"https:\/\/de.elv.com\/elvjournal\/?p=12656"},"modified":"2026-04-14T17:09:16","modified_gmt":"2026-04-14T15:09:16","slug":"plugin-react-fluid-webui-weboberflache-fur-die-home-control-unit","status":"publish","type":"post","link":"https:\/\/de.elv.com\/elvjournal\/plugin-react-fluid-webui-weboberflache-fur-die-home-control-unit\/","title":{"rendered":"Plugin: ReAct-Fluid-WebUI – Weboberfl\u00e4che f\u00fcr die Home Control Unit"},"content":{"rendered":"\n

ReAct-Fluid-WebUI<\/strong><\/p>\n\n\n\n

Wenn ein Smart-Home-Enthusiast die fehlende Oberfl\u00e4che selbst baut<\/h1>\n\n\n\n

Wie aus einem Community-Wunsch ein vollwertiges WebUI-Plugin f\u00fcr die Home Control Unit wurde<\/strong><\/p>\n\n\n\n

<\/div>\n\n\n\n

Vom L\u00f6tkolben zum Code<\/h2>\n\n\n\n

Manche Leidenschaften beginnen fr\u00fch. 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 \u2013 parallel zur Ausbildung als Energieelektroniker \u2013 f\u00fchrte mich mein beruflicher Weg zun\u00e4chst in eine ganz andere Richtung: Mechanik, 2500 bar Hydraulik und zahlreiche Auslandseins\u00e4tze.<\/p>\n\n\n\n

Doch auch fernab der Heimat fand die Technik ihren Weg zu mir zur\u00fcck. \u00dcber einen Home-Entertainment-PC wurde ich vom reinen Anwender zum aktiven Entwickler und habe \u00fcber zehn Jahre lang Frontends f\u00fcr die Open-Source-Projekte MediaPortal und Kodi mitgestaltet.<\/p>\n\n\n\n

Heute, mit 46 Jahren, arbeite ich im Bereich Software, Virtualisierung und K\u00fcnstliche Intelligenz in der Zentrale eines gro\u00dfen Automobilzulieferers. Mein Name ist Gerrit E\u00dfers \u2013 und das hier ist die Geschichte, wie aus einer ganz pers\u00f6nlichen Unzufriedenheit ein Plugin wurde, das eine echte L\u00fccke im Homematic IP \u00d6kosystem schlie\u00dft.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Mein Haus, mein Labor<\/h2>\n\n\n\n

Nach der R\u00fcckkehr aus dem Ausland und dem Hausbau \u2013 man ist schlie\u00dflich Schwabe \u2013 packte mich die Begeisterung f\u00fcr Smart Home und Automatisierung. Unser gesamtes Haus habe ich mit Homematic IP Komponenten best\u00fcckt: Rolll\u00e4den, Thermostate, Klimasteuerung, Gartenbew\u00e4sserung \u2013 alles ist automatisiert und per Sprache steuerbar. Wer einmal erlebt hat, wie das Zuhause morgens selbstst\u00e4ndig die Rolll\u00e4den hochf\u00e4hrt, die Heizung regelt und abends das Licht dimmt, m\u00f6chte diesen Komfort nicht mehr missen.<\/p>\n\n\n\n

Meine ersten Gehversuche in der Homematic IP Welt bestanden darin, Skripte f\u00fcr die CCU3 zu schreiben. Funktional war das durchaus brauchbar \u2013 aber als jemand, der jahrelang Benutzeroberfl\u00e4chen f\u00fcr Mediacenter entwickelt hat, war ich ehrlich gesagt nicht begeistert. Mir schwebte schon damals etwas anderes vor: eine intuitive, visuell ansprechende und nicht \u00fcberladene Oberfl\u00e4che zum Bedienen und Automatisieren. Eine Oberfl\u00e4che, die man gerne \u00f6ffnet.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Die HCU als Wendepunkt<\/h2>\n\n\n\n

Mit der Home Control Unit<\/span> \u00e4nderte sich alles. Die HCU brachte nicht nur die Integration meiner Doorbird-Anlage, sondern vor allem die M\u00f6glichkeit, Plugins mit eigener Weboberfl\u00e4che zu entwickeln \u2013 keine Skripte mehr, sondern echte Webanwendungen. Als die Connect API Dokumentation ver\u00f6ffentlicht wurde, setzte ich mich relativ zeitnah daran und war erstaunt, wie schnell man etwas Produktives auf die Beine stellen konnte.<\/p>\n\n\n\n

Mein erstes Projekt war die \u00dcberf\u00fchrung 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 \u2013 und schnell entstanden im Forum weitere W\u00fcnsche. Einer davon stach besonders hervor.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Eine Oberfl\u00e4che, die es nicht gab<\/h2>\n\n\n\n

Der Wunsch war klar formuliert: eine Web-Oberfl\u00e4che zum Steuern der Ger\u00e4te. Denn seitens Homematic IP gibt es momentan nur die App f\u00fcr iOS und Android \u2013 wer am Desktop-PC, am Laptop oder an einem Wandtablet sein Smart Home bedienen m\u00f6chte, schaut in die R\u00f6hre.<\/p>\n\n\n\n

F\u00fcr mich als UX-Enthusiast war das die perfekte Herausforderung. Mein Ziel: ein UI, das diese L\u00fccke schlie\u00dft, aber gleichzeitig nahtlos auf Tablets und Smartphones skaliert. Es sollte absolut intuitiv und visuell ansprechend sein. Apple Home hatte mich dabei schon immer inspiriert \u2013 diese Klarheit, diese Reduktion auf das Wesentliche. So entstand die Idee zu ReAct-Fluid-WebUI<\/strong> (Bild 1)<\/mark>.<\/p>\n\n\n\n

\"Bild
Bild 1: Plugin \u00dcbersicht – das gesamte Smart Home im Blick<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Das Plugin im \u00dcberblick<\/h2>\n\n\n\n

ReAct-Fluid-WebUI ist eine moderne Weboberfl\u00e4che f\u00fcr die Home Control Unit, die als Plugin auf selbiger l\u00e4uft. Die Bedienung erfolgt \u00fcber den Browser \u2013 auf jedem Ger\u00e4t, ohne Installation, ohne App-Store.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Die Startseite: Alles auf einen Blick<\/h3>\n\n\n\n

Nach dem \u00d6ffnen begr\u00fc\u00dft die Home-Ansicht den Nutzer mit einer \u00fcbersichtlichen Darstellung aller R\u00e4ume als Kacheln. Eine Wetterleiste zeigt aktuelle Bedingungen, und \u00fcber eine Kategorienavigation lassen sich Ger\u00e4te nach Funktion filtern \u2013 etwa Licht, Klima, Rolll\u00e4den oder Sicherheit. Der Anspruch war, dass man den Zustand des gesamten Hauses mit einem Blick erfassen kann.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Raumansicht und Ger\u00e4testeuerung<\/h3>\n\n\n\n

Tippt man auf einen Raum, \u00f6ffnet sich die Detailansicht mit allen zugeh\u00f6rigen Ger\u00e4ten. Die Bedienung ist dabei auf das jeweilige Ger\u00e4t zugeschnitten: Schalter lassen sich per Toggle umlegen, Dimmer \u00fcber flie\u00dfende Slider regeln, Rolll\u00e4den stufenlos positionieren. Thermostate werden \u00fcber ein Drehrad eingestellt, Farblichter \u00fcber einen intuitiven Farbw\u00e4hler angesteuert. Selbst Garagentore haben ihr eigenes, dediziertes Bedienelement. Jedes Ger\u00e4t reagiert dabei in Echtzeit \u2013 ohne merkliche Verz\u00f6gerung.<\/p>\n\n\n\n

\"Bild
Bild 2: Auch alle Beschattungselemente k\u00f6nnen selbstverst\u00e4ndlich \u00fcber die UI gesteuert werden.<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Breite Ger\u00e4teunterst\u00fctzung<\/h3>\n\n\n\n

Das Plugin unterst\u00fctzt derzeit \u00fcber 50 verschiedene Homematic IP Ger\u00e4tetypen. Das Spektrum reicht von einfachen Schaltsteckdosen und Wandtastern \u00fcber Dimmer, Rolll\u00e4den und Jalousien bis hin zu Rauchmeldern, Bewegungssensoren, Wassersensoren, T\u00fcrschl\u00f6ssern und komplexen Wettersensoren f\u00fcr Regen, Wind und Sonnenschein. Auch Schaltgruppen und Heizungsgruppen werden erkannt und lassen sich direkt bedienen.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Personalisierung<\/h3>\n\n\n\n

Die Oberfl\u00e4che passt sich den Vorlieben des Nutzers an. Raumreihenfolge, Ger\u00e4tesichtbarkeit und Ger\u00e4tereihenfolge lassen sich individuell konfigurieren. Hintergr\u00fcnde k\u00f6nnen als Farbverl\u00e4ufe oder Bilder gew\u00e4hlt werden, und Ger\u00e4teicons lassen sich bei Bedarf anpassen. So wird die Oberfl\u00e4che nicht nur funktional, sondern auch pers\u00f6nlich.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Energie im Blick<\/h3>\n\n\n\n

Ein integriertes Energie-Dashboard visualisiert den Energieverbrauch und gibt dem Nutzer die M\u00f6glichkeit, Verbr\u00e4uche im Auge zu behalten \u2013 direkt in der gleichen Oberfl\u00e4che, ohne zwischen verschiedenen Tools wechseln zu m\u00fcssen.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\n
\n

Lokal, sicher und schnell<\/h3>\n\n\n\n

Ein zentraler Designgrundsatz von ReAct-Fluid-WebUI ist die vollst\u00e4ndig lokale Kommunikation. Die Verbindung zur HCU l\u00e4uft \u00fcber eine SSL-verschl\u00fcsselte Verbindung im Heimnetzwerk. Keine Daten verlassen das Haus, keine Cloud wird ben\u00f6tigt. Das sorgt nicht nur f\u00fcr Datenschutz, sondern auch f\u00fcr sp\u00fcrbar schnelle Reaktionszeiten. Es gibt optional auch ein User-Management, das zum einen die M\u00f6glichkeit des Passwortschutzes und zum anderen Restriktionen und Anpassungsoptionen f\u00fcr Benutzer bietet. Auch das ist ein Feature, dass es momentan nicht in der Homematic IP App gibt. Status\u00e4nderungen werden in Echtzeit an alle ge\u00f6ffneten Browser-Fenster \u00fcbertragen \u2013 schaltet jemand ein Licht per Wandtaster, aktualisiert sich die Weboberfl\u00e4che sofort.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Responsive \u2013 eine Oberfl\u00e4che f\u00fcr alles<\/h3>\n\n\n\n

Ob Desktop-Monitor, Wandtablet oder Smartphone: Die Oberfl\u00e4che skaliert nahtlos und passt Layout und Bedienelemente an die jeweilige Bildschirmgr\u00f6\u00dfe an. Fl\u00fcssige Animationen, umgesetzt mit Framer Motion, sorgen dabei f\u00fcr ein hochwertiges und modernes Bediengef\u00fchl, das man von nativen Apps kennt.<\/p>\n<\/div>\n\n\n\n

\n
\"Bild
Bild 3: Sieht auch auf dem Smartphone dank Responsive Design perfekt aus<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

Ausblick und Fazit<\/h2>\n\n\n\n

ReAct-Fluid-WebUI ist ein lebendes Projekt, das stetig w\u00e4chst. Amazon-Echo-Ger\u00e4te wurden bereits in das Plugin integriert und lassen sich \u00fcber die Home Control Unit automatisieren. Auch das Beschattungsplugin ist mittlerweile vollst\u00e4ndig eingebunden.<\/p>\n\n\n\n

Die Automatisierungsm\u00f6glichkeiten des Plugins sowie die Integration und Steuerung von Amazon-Echo-Ger\u00e4ten sind jeweils so umfangreich, dass ihnen eigene Artikel gewidmet werden \u2013 beide erscheinen in kommenden Artikeln.<\/p>\n\n\n\n

Dar\u00fcber hinaus besch\u00e4ftige ich mich mit der Idee, ReAct-Fluid-WebUI auch als native App f\u00fcr iOS, Windows und Android anzubieten \u2013 in Verbindung mit der Cloud API, sodass das Smart Home auch von unterwegs bedienbar w\u00e4re, ohne auf den Komfort der gewohnten Oberfl\u00e4che verzichten zu m\u00fcssen.<\/p>\n\n\n\n

Was als pers\u00f6nliche Unzufriedenheit mit dem Status quo begann und durch einen Community-Wunsch den entscheidenden Ansto\u00df bekam, ist heute ein vollwertiges Smart-Home-Frontend f\u00fcr die Home Control Unit. ReAct-Fluid-WebUI zeigt, was m\u00f6glich ist, wenn Begeisterung, Erfahrung und eine engagierte Community zusammenkommen. Die HCU-Plattform bietet daf\u00fcr das ideale Fundament \u2013 und ich bin gespannt, wohin die Reise noch geht.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Download \u00fcber Forum:<\/strong>
ReAct-Fluid-WebUI im Homematic-Forum<\/a><\/p>\n\n\n\n

Gerrit E\u00dfers<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Mit dem ReAct-Fluid Plugin f\u00fcr die Home Control Unit erh\u00e4lt die Zentrale eine komfortable und ansprechende Weboberfl\u00e4che zur Steuerung sowie zum Auslesen von Ger\u00e4ten – inklusive einer ausgefeilten Rollladenautomatik. <\/p>\n","protected":false},"author":7,"featured_media":12658,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[163],"tags":[2031,2030,2025,332,2026,2024,101,1791,2023,1798,2027,2028,2029],"post-author":[2022],"class_list":["post-12656","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-smart-home-automation","tag-alexa-hcu","tag-beschattungsautomatik","tag-gerrit-essers","tag-home-control-unit","tag-homematic-community","tag-homematic-forum","tag-homematic-ip","tag-plugin","tag-react-fluid","tag-rollladensteuerung","tag-smart-home-oberflaeche","tag-webui-hcu","tag-webui-home-control-unit","post-author-gerrit-essers"],"acf":[],"info":{"thumbnail":{"url":"https:\/\/elvjournal.elv.com\/wp-content\/uploads\/artikel_header-1600x507.jpg","alt":"ReAct Fluid Plugin mit Alexa"},"teaserImage":{"ID":12824,"id":12824,"title":"liste-beitrag_react_fluid_t1_neu","filename":"Liste-Beitrag_react_fluid_t1_neu.jpg","filesize":43848,"url":"https:\/\/elvjournal.elv.com\/wp-content\/uploads\/Liste-Beitrag_react_fluid_t1_neu.jpg","link":"https:\/\/de.elv.com\/elvjournal\/plugin-react-fluid-webui-weboberflache-fur-die-home-control-unit\/liste-beitrag_react_fluid_t1_neu\/","alt":"","author":"5","description":"","caption":"","name":"liste-beitrag_react_fluid_t1_neu","status":"inherit","uploaded_to":12656,"date":"2026-04-13 12:16:13","modified":"2026-04-13 12:19:14","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/elvjournal.elv.com\/wp-includes\/images\/media\/default.png","width":433,"height":274,"sizes":{"thumbnail":"https:\/\/elvjournal.elv.com\/wp-content\/uploads\/Liste-Beitrag_react_fluid_t1_neu-250x250.jpg","thumbnail-width":250,"thumbnail-height":250,"medium":"https:\/\/elvjournal.elv.com\/wp-content\/uploads\/Liste-Beitrag_react_fluid_t1_neu-300x190.jpg","medium-width":300,"medium-height":190,"medium_large":"https:\/\/elvjournal.elv.com\/wp-content\/uploads\/Liste-Beitrag_react_fluid_t1_neu.jpg","medium_large-width":433,"medium_large-height":274,"large":"https:\/\/elvjournal.elv.com\/wp-content\/uploads\/Liste-Beitrag_react_fluid_t1_neu.jpg","large-width":433,"large-height":274,"1536x1536":"https:\/\/elvjournal.elv.com\/wp-content\/uploads\/Liste-Beitrag_react_fluid_t1_neu.jpg","1536x1536-width":433,"1536x1536-height":274,"2048x2048":"https:\/\/elvjournal.elv.com\/wp-content\/uploads\/Liste-Beitrag_react_fluid_t1_neu.jpg","2048x2048-width":433,"2048x2048-height":274,"gform-image-choice-sm":"https:\/\/elvjournal.elv.com\/wp-content\/uploads\/Liste-Beitrag_react_fluid_t1_neu.jpg","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":190,"gform-image-choice-md":"https:\/\/elvjournal.elv.com\/wp-content\/uploads\/Liste-Beitrag_react_fluid_t1_neu.jpg","gform-image-choice-md-width":400,"gform-image-choice-md-height":253,"gform-image-choice-lg":"https:\/\/elvjournal.elv.com\/wp-content\/uploads\/Liste-Beitrag_react_fluid_t1_neu.jpg","gform-image-choice-lg-width":433,"gform-image-choice-lg-height":274}},"categories":[{"id":163,"name":"Smart Home & Automation","slug":"smart-home-automation"}],"authors":[{"id":2022,"name":"Gerrit E\u00dfers","slug":"gerrit-essers"}],"document":false,"epaper":"","date":"10. April 2026","excerpt":"Mit dem ReAct-Fluid Plugin f\u00fcr die Home Control Unit erh\u00e4lt die Zentrale eine komfortable und ansprechende Weboberfl\u00e4che zur Steuerung sowie zum Auslesen von Ger\u00e4ten - inklusive einer ausgefeilten Rollladenautomatik. "},"_links":{"self":[{"href":"https:\/\/de.elv.com\/elvjournal\/wp-json\/wp\/v2\/posts\/12656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/de.elv.com\/elvjournal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/de.elv.com\/elvjournal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/de.elv.com\/elvjournal\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/de.elv.com\/elvjournal\/wp-json\/wp\/v2\/comments?post=12656"}],"version-history":[{"count":10,"href":"https:\/\/de.elv.com\/elvjournal\/wp-json\/wp\/v2\/posts\/12656\/revisions"}],"predecessor-version":[{"id":13216,"href":"https:\/\/de.elv.com\/elvjournal\/wp-json\/wp\/v2\/posts\/12656\/revisions\/13216"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/de.elv.com\/elvjournal\/wp-json\/wp\/v2\/media\/12658"}],"wp:attachment":[{"href":"https:\/\/de.elv.com\/elvjournal\/wp-json\/wp\/v2\/media?parent=12656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/de.elv.com\/elvjournal\/wp-json\/wp\/v2\/categories?post=12656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/de.elv.com\/elvjournal\/wp-json\/wp\/v2\/tags?post=12656"},{"taxonomy":"post-author","embeddable":true,"href":"https:\/\/de.elv.com\/elvjournal\/wp-json\/wp\/v2\/post-author?post=12656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}