{"id":12796,"date":"2026-05-05T13:57:59","date_gmt":"2026-05-05T11:57:59","guid":{"rendered":"https:\/\/de.elv.com\/elvjournal\/?p=12796"},"modified":"2026-05-05T13:58:00","modified_gmt":"2026-05-05T11:58:00","slug":"plugin-react-fluid-webui-weboberflaeche-mit-alexa-integration-fuer-die-home-control-unit","status":"publish","type":"post","link":"https:\/\/de.elv.com\/elvjournal\/plugin-react-fluid-webui-weboberflaeche-mit-alexa-integration-fuer-die-home-control-unit\/","title":{"rendered":"Plugin: ReAct-Fluid-WebUI – Weboberfl\u00e4che mit Alexa-Integration f\u00fcr die Home Control Unit"},"content":{"rendered":"\n

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

Amazon Echo trifft Homematic IP<\/strong><\/h1>\n\n\n\n

Wie das Plugin Alexa-Ger\u00e4te in die HCU-Welt integriert und automatisierbar macht<\/strong><\/strong><\/strong>.<\/p>\n\n\n\n

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

Zwei Welten, eine Oberfl\u00e4che<\/strong><\/h2>\n\n\n\n

In den ersten beiden Teilen dieser Artikelreihe habe ich ReAct-Fluid-WebUI als Weboberfl\u00e4che f\u00fcr die HCU vorgestellt und gezeigt, wie das Plugin Rolll\u00e4den intelligent nach Sonne, Temperatur und Zeitprofilen steuert. In diesem dritten und letzten Teil geht es um eine Erweiterung, die auf den ersten Blick ungew\u00f6hnlich erscheinen mag: die Integration von Amazon-Echo-Ger\u00e4ten in ein Homematic IP Plugin.<\/p>\n\n\n\n

Der Gedanke dahinter ist naheliegend. In vielen Smart Homes stehen neben den Homematic-Komponenten auch Amazon Echo Lautsprecher \u2013 f\u00fcr Sprachsteuerung, Musik, Nachrichten oder als Multiroom-System. Doch diese beiden Welten existieren nebeneinander, ohne echte Verbindung. Man kann zwar per Sprache Homematic-Ger\u00e4te steuern, aber der umgekehrte Weg \u2013 Homematic-Ereignisse l\u00f6sen Aktionen auf dem Echo aus \u2013 war bisher nicht m\u00f6glich. Genau diese Br\u00fccke schl\u00e4gt ReAct-Fluid-WebUI.<\/p>\n\n\n\n

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

Aktivierung und Anmeldung<\/strong><\/h2>\n\n\n\n

Die Amazon-Integration ist standardm\u00e4\u00dfig deaktiviert und l\u00e4sst sich in den Plugin-Einstellungen mit einem einfachen Toggle einschalten. Nach der Aktivierung muss einmalig eine Anmeldung am Amazon-Konto erfolgen. Daf\u00fcr startet das Plugin einen lokalen Proxy-Server im Heimnetzwerk, \u00fcber den die Anmeldung direkt im Browser stattfindet \u2013 es wird kein externer Cloud-Dienst ben\u00f6tigt, und die Zugangsdaten werden zu keinem Zeitpunkt an Dritte \u00fcbertragen.<\/p>\n\n\n\n

Nach erfolgreicher Anmeldung speichert das Plugin ein Authentifizierungstoken, das fortan f\u00fcr die Kommunikation mit den Amazon-Diensten verwendet wird. Die Sitzung wird automatisch verwaltet: Das Token wird regelm\u00e4\u00dfig erneuert, und der Sitzungsstatus wird im Hintergrund \u00fcberwacht. Bei einem Verbindungsverlust versucht das Plugin automatisch, die Sitzung wiederherzustellen. F\u00fcr den Nutzer bedeutet das: einmal anmelden, danach l\u00e4uft alles automatisch.<\/p>\n\n\n\n

Sobald die Verbindung steht, erkennt das Plugin automatisch alle Amazon-Ger\u00e4te im Haushalt. Das Spektrum reicht von Echo Dot und Echo \u00fcber Echo Show mit Display bis hin zu Fire TV Sticks, Tablets und Multiroom-Gruppen. Jeder Ger\u00e4tetyp wird mit einem eigenen, passenden Icon dargestellt, und die Ger\u00e4te erscheinen als vollwertige Kacheln in der Weboberfl\u00e4che \u2013 optisch nahtlos integriert neben den Homematic IP Ger\u00e4ten.<\/p>\n\n\n\n

Standardm\u00e4\u00dfig landen alle Amazon-Ger\u00e4te in einem eigenen virtuellen Raum namens \u201eAmazon“. In den Einstellungen l\u00e4sst sich jedoch jedes Ger\u00e4t einem beliebigen bestehenden HCU-Raum zuordnen. Der Echo im Wohnzimmer erscheint dann direkt neben den Thermostaten und Rolll\u00e4den des Wohnzimmers \u2013 eine einheitliche Ansicht f\u00fcr alle Ger\u00e4te eines Raums, unabh\u00e4ngig vom Hersteller (Bild 1)<\/mark>.<\/p>\n\n\n\n

\"Bild
Bild 1: Amazon Alexa-Ger\u00e4te in der UI des ReAct Fluid Plugins<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Medienwiedergabe direkt aus dem Browser<\/strong><\/h2>\n\n\n\n
\n
\n

Ein Antippen der Amazon-Kachel \u00f6ffnet die Detailansicht mit vollwertiger Mediensteuerung. Hier werden in Echtzeit der aktuell gespielte Titel, Interpret und Album angezeigt \u2013 inklusive Album-Cover. Darunter befinden sich die gewohnten Transportsteuerungen: Play, Pause, Vor, Zur\u00fcck, Shuffle und Repeat (Bild 2)<\/mark>.<\/p>\n\n\n\n

Ein Lautst\u00e4rke-Schieberegler erlaubt die stufenlose Regelung der Wiedergabelautst\u00e4rke. Zus\u00e4tzlich werden die Bluetooth-Ger\u00e4te des jeweiligen Echo angezeigt, sodass man sehen kann, welche externen Lautsprecher oder Kopfh\u00f6rer verbunden sind.<\/p>\n\n\n\n

Auf der Ger\u00e4te-Kachel selbst l\u00e4uft der aktuell spielende Titel als Laufschrift durch \u2013 so erkennt man auf einen Blick, was gerade auf welchem Echo l\u00e4uft, ohne die Detailansicht \u00f6ffnen zu m\u00fcssen.<\/p>\n<\/div>\n\n\n\n

\n
\"Bild
Bild 2: Dialog-Screen zu Amazon Alexa-Ger\u00e4ten<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

Das Herzst\u00fcck: HCU-Automatisierungen mit Amazon<\/strong><\/h2>\n\n\n\n

\u00dcber die Automatisierungsansicht des Plugins lassen sich die Echo-Ger\u00e4te weit \u00fcber die reine Musikwiedergabe hinaus nutzen.<\/p>\n\n\n\n

Text-to-Speech:<\/strong> Beliebiger Text kann an jeden Echo im Haus gesendet werden. Der Lautsprecher spricht den Text dann \u00fcber seine integrierte Sprachausgabe aus. Das ist n\u00fctzlich f\u00fcr Durchsagen, Erinnerungen oder Statusmeldungen des Smart Home.<\/p>\n\n\n\n

Sounds:<\/strong> Eine Auswahl vordefinierter Kl\u00e4nge steht zur Verf\u00fcgung \u2013 von T\u00fcrklingeln und Kirchenglocken \u00fcber Hundegebell und Katzenger\u00e4usche bis hin zu Trompeten und Alarmsirenen. Diese lassen sich gezielt auf einzelnen Ger\u00e4ten abspielen.<\/p>\n\n\n\n

Sprachbefehle:<\/strong> Auch beliebige Alexa-Sprachbefehle k\u00f6nnen programmatisch an einen Echo gesendet werden. Das Plugin simuliert dabei die Spracheingabe, sodass jede Funktion nutzbar ist, die auch per Stimme ausl\u00f6sbar w\u00e4re.<\/p>\n\n\n\n

Musikwiedergabe:<\/strong> Musik kann gezielt gestartet werden \u2013 mit Suchbegriff und wahlweise \u00fcber Amazon Music, Spotify, TuneIn oder Apple Music als Quelle.<\/p>\n\n\n\n

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

Die eigentliche St\u00e4rke der Integration liegt jedoch in der Verbindung beider Welten durch ein regelbasiertes Automatisierungssystem. Das Prinzip: Ein Homematic IP Ger\u00e4t liefert den Ausl\u00f6ser, ein Amazon Echo f\u00fchrt die Aktion aus (Bild 3)<\/mark>.<\/p>\n\n\n\n

Ein Trigger besteht aus einem beliebigen HCU-Ger\u00e4t, einer Eigenschaft dieses Ger\u00e4ts, einem Vergleichsoperator und einem Wert. So l\u00e4sst sich beispielsweise festlegen: \u201eWenn der Bewegungsmelder im Flur eine Bewegung erkennt“ oder \u201eWenn die Au\u00dfentemperatur unter 0\u00b0C f\u00e4llt“ oder \u201eWenn der Fensterkontakt im Schlafzimmer \u00f6ffnet“. Die verf\u00fcgbaren Eigenschaften werden automatisch aus den tats\u00e4chlichen Ger\u00e4tefunktionen ermittelt \u2013 es wird nichts manuell zusammengestellt.<\/p>\n\n\n\n

Als Aktion steht das gesamte Spektrum der Amazon-Steuerung zur Verf\u00fcgung: Sprachausgabe, Sounds, Musikwiedergabe, Lautst\u00e4rke\u00e4nderung oder Wiedergabesteuerung. Jede Aktion wird einem konkreten Amazon-Ger\u00e4t zugewiesen.<\/p>\n\n\n\n

Einige Beispiele, die die M\u00f6glichkeiten verdeutlichen:<\/p>\n\n\n\n