VERA im Intranet: Ampeln + Zahlenwerte

Last Updated on

SMART HOME Controller wie VERA verfügen über ein User-Interface mit dem man das System komplett verwalten kann. Solche spezifischen Oberflächen sind nicht für alle Benutzertypen gut geeignet. Gelegenheitsnutzer müssen nämlich das UI immer neu finden/starten und sich in dessen Bedienungslogik einfinden.
Hat man ein Intranet, so werden diese Webseiten regelmäßig benutzt. Warum nicht direkt auf den relevanten Intranetseiten auch SMARTHOUSE Informationen anbieten? Beispielsweise Ampeln zur Signalisierung des Zustands von Ein-Aus Sensoren oder Actoren. Oder Zahlen-Felder z.B. mit Temperaturangaben. Bei Bedarf kann auf solchen Seiten auch eine Fernsteuerung erfolgen (vgl. VERA im Intranet: Aktion starten). Man könnte dort auch zusätzliche Geräte direkt einbinden. Zum Beispiel Cam-Aufzeichnungen oder Cam-Livestreams.

Ampeln und Zahlen 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=variableget” Werte aus VERA abfragen. Entsprechend kann man per “data_request?id=action” Änderungs-Aktionen auf VERA auslösen. Der Aufruf eines GET-String auf einer Html-Seite ist einfach. Beispielweise per Action-Link oder per Action-Button.

Allerdings lässt sich auf diese Weise nur ein Kommando absenden und man muss eine neue Seite laden, um die Antwort von VERA darzustellen. Tatsächlich möchte man jedoch oft mehrere Abfragen gleichzeitig ausführen. Und die Antwort von VERA will man in der aktuellen Webseite sehen. Die Lösungsmethode für dieses Problem nennt sich xHttp bzw. genauer XMLHttpRequest. Damit lassen sich aus einer HTML-Seite gleichzeitig mehrere cgi-Aufrufe starten. Die Antwort wird auf der gleichen Seite angezeigt, ohne dass ein Neuladen erforderlich ist.

Hier meine Umsetzung zur Abfrage von 0-1-Zuständen aus VERA, dargestellt als Rot-Grün-Ampeln im Intranet.

Und die Darstellung von Zahlenwerten aus VERA Devices als gesperrtes Input-Feld auf einer Intranet-Seite. Im Beispiel ist es ein Temperaturwert. Sie besteht aus den folgenden Bausteinen: Cross-Domain ermöglichen, einigen Html- bzw. JS-Einträgen im Body und einigen JS-Scripts im Header.
Mit einer ähnlichen Methode kann man Actions in VERA auslösen (Scenes starten, Devices schalten,…).

Cross-Domain ermöglichen

Die Intranet-Webseite soll auf die IP-Adresse von VERA zugreifen können. Ein solcher Cross-Domain Zugriff ist aus Sicherheitsgründen normalerweise nicht erlaubt. 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 (Ampel-Images, Input)
In html-Body werden beliebig viele Signale an den gewünschten Stellen Image-Tags (gruen.gif, rot.gif) definiert und mit einer eindeutigen ID versehen. Diese Signale entsprechen dem Feldinhalt eines 0-1-Devices (hier eines virtuellen Devices der App MultiString). Die Zuordnung der VERA-Werte zum Webseiten-Feld erfolgt durch Definition der entsprechenden Aufruf-Parameter in httpGet() in loadValues().
Nach dem gleichen Prinzip kann man Zahlenwerte aus VERA Devices in Input-Felder der Webseite anzeigen.

<img src="images/gruen.gif" id="signal4711">
<img src="images/rot.gif" id="signal4712">
<input type="Text" id="wertAnzeige4713" value="" readonly> 

Aktualisierung des Signal- und Input-Felds starten
Am Ende von html-body wird nachfolgender Aufruf eingetragen. So erfolgt die Ausführung am Ende des Ladevorgangs der Webseite. Die Aktualisierung kann auch manuell gestartet werden z.B. per Button. Möglich wäre auch eine automatische Auslösung durch andere Prozesse.

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

Html-Header

Im HTML-Header sind folgende JavaScript Funktionen zu definieren:

  • httpGet: Ein variabler xHttp-Aufruf, dessen Response mittels alternativer Funktionen weiterbearbeitet wird
  • switchSignal: Folgeverarbeitung = Aktualisierung des Ampel-Files in einem Signalfeld
  • switchSignalN: Wie switchSignal aber mit vertauschter rot/grün-Zuordnung
  • getInput: Folgeverarbeitung = Aktualisierung des Zahlenwerts eines Inputfelds
  • loadValues: httpGet werden die entsprechenden Parameter-Sets 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"
 } 
}

function switchSignalN(veraResponse, callArg) {
 // wie switchSignal, jedoch grün/rot umgekehrt zugeordnet
 if (veraResponse == "0") {
  document.getElementById(callArg).src = "images/gruen.gif"
 } else if (veraResponse == "1") {
  document.getElementById(callArg).src = "images/rot.gif"
 }
}

function getInput(veraResponse, callArg) {
 // der Aufruf erfolgt aus httpGet
 // veraResponse aktualisiert die Zahl im Input-Feld
 // callArg = Inputfeld-ID
 document.getElementById(callArg).value = veraResponse;
}

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=variableget&DeviceNum=111&serviceId=urn:upnp-org:serviceId:VContainer1&Variable=Variable5', 'switchSignal', 'signal4711');

 httpGet('http://[veraIP]:3480/data_request?id=variableget&DeviceNum=222&serviceId=urn:upnp-org:serviceId:VContainer1&Variable=Variable1', 'switchSignal', 'signal4712');

 httpGet('http://[veraIP]:3480/data_request?id=variableget&DeviceNum=333&serviceId=urn:upnp-org:serviceId:TemperatureSetpoint1&Variable=CurrentSetpoint','getInput', 'wertAnzeige4713');

 // ... Definition weiterer Abfragen zu Body-Tags
}

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

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ich akzeptiere