VERA im Intranet: Aktion starten

SMART HOME Controller wie VERA verfügen über ein User-Interface, um das System komplett zu verwalten. Leider sind solche spezifischen Oberflächen nicht für alle Benutzertypen gut geeignet. Denn Gelegenheits-Benutzer müssen das UI immer wieder neu finden/starten und sich in dessen Bedienungslogik einfinden.
Existiert jedoch ein Intranet, so sind die Benutzer mit den Intranet-Webseiten vertraut. Warum also SMARTHOUSE nicht direkt aus den relevanten Intranetseiten heraus steuern? Beispielsweise mit einem Action Button (oder mit mehr Schick). Zudem lassen sich dort auch die relevanten SMARTHOUSE Informationen anzeigen. Beispielsweise mit Ampeln zur Signalisierung des Zustands von Ein-Aus Sensoren oder Actoren. Natürlich sind auch Zahlen-Felder darstellbar, z.B. mit Temperaturangaben (vgl. VERA im Intranet: Ampeln + Zahlenwerte). Auch weitere Geräte lassen sich so direkt einbinden. Zum Beispiel Cam-Aufzeichnungen oder Cam-Livestreams.

VERA Aktionen per http-GET und xHttp

VERA verfügt über eine leistungsfähige CGI-Schnittstelle. Damit kann eine Html-Seite im Intranet per Http-GET Aufruf “data_request?id=action” eine Änderungs-Aktion auf VERA auslösen. Beispielweise Scenes oder das Umschalten von Actoren. Der Aufruf eines GET-Strings auf einer Html-Seite ist einfach zu realisieren. Beispielweise per Action-Link oder per Action-Button.

Allerdings lässt sich auf diese Weise nur ein einziges Kommando absenden. Und man muss eine neue Seite laden, um die Antwort von VERA darzustellen. Beides entspricht nicht den Anforderungen. Stattdessen will man nämlich meist mehrere Abfragen gleichzeitig ausführen. Und den Return von VERA will man direkt in der aktuellen Webseite sehen.

Die Lösungsmethode für diese Anforderung nennt sich xHttp bzw. genauer XMLHttpRequest. Damit lassen sich damit aus einer HTML-Seite gleichzeitig mehrere cgi-Aufrufe an VERA starten. Gleichzeitig können die Antworten von VERA auf der gleichen Seite anzeigt werden, ohne dass ein Neuladen erforderlich ist.

Hier zeige ich eine einfache Umsetzung mit Action-Buttons für anwesend=grün / abwesend=gelb und einer entsprechenden Zustands-Ampel. Bei Bedarf wäre auch mehr Schick möglich. Die Methode rund um die Ampel Steuerung ist genauer beschrieben in “VERA im Intranet: Ampeln + Zahlenwerte”.

Das Beispiel geht davon aus, dass VERA Scene 123 u.a. das Schalter-Device 999 umschaltet. Der Klick auf den Webseiten-Button “set BModus: abwesend” ruft zwei Funktionen auf. Zum einen startet httpGet() in VERA die Scene 123. Anschließend fragt loadValues() in VERA der Zustand von Device 999 ab und passt die Farbe des Signalfelds signal999 entsprechend an.
Die Lösung besteht aus den drei Bausteinen: Cross-Domain ermöglichen, aus
einigen Html- bzw. JS-Einträgen im Body und aus einigen JS-Scripts im Header.

Cross-Domain ermöglichen

Die Intranet-Webseite soll auf die IP-Adresse von VERA zugreifen können. Allerdings ist ein solcher Cross-Domain Zugriff aus Sicherheitsgründen normalerweise nicht erlaubt. Was kann man tun? Man kann eine Ausnahme einstellen via Internetexplorer > Internetoptionen > Sicherheitseinstellungen. Nachteil: Bei Windows-Updates werden diese Einstellungen zurückgesetzt.
Deshalb habe ich das Addon “cross domain-cors” installiert, aktiviert und IP:Port von VERA zugelassen “:3480”.

Html-Body

Definition der Felder (Button, Ampel-Image)
In HTML-Body sind an den gewünschten Stellen Buttons zu definieren, die mit onClick nacheinander zwei JavaScript Funktionen (httpGet und loadValues) aufrufen. Per httpGet lassen sich beispielsweise Scenes aufrufen oder Devices schalten. Daneben sind Signale in Form von Image-Tags (gruen.gif, rot.gif) zu definieren und mit einer eindeutigen ID zu versehen.

<button onClick="httpGet('http://[veraIP]:3480/data_request?id=action&serviceId=urn:micasaverde-com:serviceId:HomeAutomationGateway1&action=RunScene&SceneNum=123&output_format=json', 'callAction', ''); 
  loadValues();">set BModus: abwesend</button>

<img src="images/gruen.gif" id="signal999" >  

Aktualisierung der Signal-Felder
Am Ende von HTML-Body steht nachfolgender Aufruf. So erfolgt die Ausführung am Ende des Ladevorgangs der Webseite.

<script  type="text/JavaScript">
 loadValues();
</script>  

Html-Header

Im HTML-Header sind folgende JS-Funktionen definiert:

• httpGet: Ein variabler xHttp-Aufruf, dessen Response mittels alternativer Funktionen weiterbearbeitet wird
• switchSignal: Folgeverarbeitung = Aktualisierung des Ampel-Files in einem Signalfeld
• callAction: Folgeverarbeitung = im einfachsten Fall Nichts
• loadValues: httpGet werden die entsprechenden Parametersets zugeordnet

<script type="text/JavaScript">

function httpGet(theUrl, callFkt, callArg) {
 // xhttp-Zugriff ist für Firefox ausgelegt
 // Aufruf erfolgt aus loadSignal
 // startet synchrone xmlHttp-Requests
 // URL wird mit Zufallszahl verlängert, 
 //     um Abruf aus Browser-Cache zu vermeiden
 // ruft nach erfolgreichem Abschluss callFct auf, 
 //     mit callArg = Signal-ID
  var min = 100;
  var max = 999999;
  var x = Math.floor(Math.random() * (max - min)) + min;
  theUrl = theUrl + "&" + x
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange=function() {
   if (xhttp.readyState==4 && xhttp.status==200) {
    var ret = eval (callFkt)(xhttp.responseText, callArg);
   }
  }
  xhttp.open("GET", theUrl, false );
  xhttp.send();
}

function switchSignal(veraResponse, callArg) {
 // der Aufruf erfolgt aus httpGet
 // veraResponse aktualisiert die File-Zuordnung im Signal-Feld
 // callArg = Signalfeld-ID
 if (veraResponse == "0") {
  document.getElementById(callArg).src = "images/rot.gif"
 } else if (veraResponse == "1") {
  document.getElementById(callArg).src = "images/gruen.gif"
 } else if (veraResponse == "2") {
  document.getElementById(callArg).src = "images/gelb.gif";
 }
}

function loadValue() {
 // der Aufruf erfolgt Seitenstart aus Body
 // fragt mittels httpGet den Device-Status ab
 //   callFkt definiert die Folgeverarbeitung
//   callArg definiert die Zielfeld-ID
 httpGet('http://[veraIP]:3480/data_request?id=action&DeviceNum=999&serviceId=urn:upnp-org:serviceId:SwitchPower1&action=GetStatus, 'switchSignal', 'signal999');

 // ... Definition weiterer Abfragen zu entspr. Tags in Body
}

</script>  

Dieser Beitrag gehört zur Themengruppe
Smarthouse Schnittstellen und Integration

SMARTHOUSE erfordert oft Schnittstellen zwischen bzw. Integration von heterogenen Systemen. Typischerweise benötigt das Z-WAVE Dachsystem eine Integration mit bereits existenten Dritt-Systemen, z.B. Einbruchmeldesystem, 433-MHz-Fernsteuerungen, Cam's oder Intranet. Bei den Neuentwicklungen kann man dann meist zwischen mehreren Neusystemen und Integrations-Konzepten wählen, z.B. zwischen Benutzer-Oberflächen, Smartphone Apps, Nachrichtensystemen (für Email, SMS,...) oder zusätzlichen IP-Cams. Schnittstellen und Integration sollten wohlüberlegt sein. Sie beeinflussen wesentlich die Komplexität von SMARTHOUSE. Dabei geht es nicht nur darum, den Überblick zu behalten. Man muss auch Aspekte wie Datensicherheit und Datenschutz im Auge behalten. Weiterhin lohnt es sich, die Einmal-Kosten und die laufenden Kosten zu steuern. Nicht zuletzt geht es um die Zukunftssicherheit bei der Änderungen von Teilsystemen und bei Weiterentwicklung der Anwendung.

• Smart RainSensor
  Mein Smart Rainsensor ist über den Cloudservice WeatherUnderground (WUnderground) mit meiner eigenen Wetterstation (PWS) verbunden. Er steuert mithilfe ...
• Smart RainSensor = VERA Sitesensor, PHP, WUnderground, …
  Smart RainSensor verkettete mehrere Komponenten von Smart House. Auf dem VERA Controller startet die App SiteSensor periodisch die Verarbeitung, wertet ...
• VERA im Intranet: Ampeln + Zahlenwerte
  SMART HOME Controller wie VERA verfügen über ein User-Interface mit dem man das System komplett verwalten kann. Solche spezifischen Oberflächen ...