es ist wieder mal so weit. Ich habe lange nicht von meiner Entwicklung hören lassen da ich sehr viel überarbeitet und geändert habe. Vorallem auch den Namen. deswegen auch als neuer Post. (alter Post: http://homematic-forum.de/forum/viewtopic.php?t=4208) Ich werden Homematic Webcontrol im weitern mit HW abkürzen.
Um was geht es eigentlich hier?
Kurz gesagt ist HW ein Framework mit dem man einfach eine simple HTML Homepage dazu befähigt Homematic Aktoren zu steuern und deren Status an zu zeigen.
Als Demonstration erst einmal ein paar Screenshots von Seiten die alle die gleichen Aktoren steuern aber für verschiedene Geräte ausgelegt sind:
Die ersten beiden sind für ein kleines Touchscreen welches in die Wand eingebaut ist ausgelegt. Die 3. für das iPhone und 4 und 5 sind für bspw. einen HTC HD2 Smartphone.
Ich wollte hier einfach mal die Vielfalt an Möglichkeiten aufzeigen.
Das 6. Bild ist für andere Aktoren ausgelegt bassiert aber auch auf HW. Gedacht ist diese Seite für ein etwas größeres Touchscreen, aber ebenfalls in der Wand.
Wie funktioniert das ganze?
Es handelt sich um eine mit HTML und CSS designte Homepage, welche in regelmäßigen Abständen per JavaScript über AJAX die aktuelle PHP-Session ausliest (polling), in der alle Aktor Stati gespeichert werden. Gleichzeitig wird ein PHP XML-RPC Server zur Verfügung gestellt der sich bei der CCU anmeldet, events empfängt und diese in der PHP Session ablegt. Dadurch werden auch von außen ausgelöste Statusänderungen schnellst möglich auf der Homepageebene sichtbar. Befehle an die CCU laufen einen ähnlichen Weg. HTML->JS->AJAX->PHP->XML-RPC->CCU. Desweiteren ist es aber auch möglich CCU interne Stati abzufragen und zu ändern, zB. Systemvariablen oder Programme. Hierzu wird dann über die TCL-ReGa Schnittstelle ein Befehl abgesetzt oder ein Status ausgelesen.
Man sieht es spielen hier sehr viele verschiedene Technologien (HTML, CSS, JS, AJAX, PHP, XML-RPC, TCL-ReGa) zusammen um ein tolles Ergebnis zu erzielen.
Des Weitern greife auch ich auf andere Frameworks zurück wie zB. Protorype und dessen Nachfolder jQuery.
Trotz dieser Technologie Komplexität ist es extrem einfach das Framework in seine eigene Homepage einzubinden.
Was benötige ich?
Da das ganze immer noch eine Homepage ist, wird ein WebServer benötigt. Dieser muss PHP unterstützen. Der Server sollte sich möglichst im lokalen Netzwerk mit der CCU befinden da sonst die XML-RPC Schnittstelle dieser nach draußen geöffnet werden müsste, und dies doch sehr unsicher ist.
Auf der CCU selbst muss nur der PC auf dem der WebServer läuft freigegeben werden.
Es ist prinzipiel egal ob der WebServer auf einem Linux oder Windows PC läuft. Für unerfahrene Einsteiger gibt es auch komplett Packete mit WebServer PHP und allem nötigen. Ich persönlich nutze den Apache aus XAMPP da dieser sehr einfach einzurichten ist und danach sofort funktioniert (http://www.apachefriends.org/de/xampp.html). Es gibt diese Komplett packet auf für Linux früher hieß das ganze da mal LAMPP. Da es auch für die CCU einen PHP Server gibt ist es sogar möglich das Framework direkt auf der CCU zu nutzen. Hierfür sollte allerdings ein etwas höherer Aktualisierungsintervall gewählt werden, da die CCU doch sehr langsam ist.
Womit kann ich Homematic Webcontrol anzeigen?
Und wieder sind wir bei den Vorteilen der Homepage implementierung und dem eigentlichen Grund warum ich mich für diesen Weg entschieden habe: Jedes Gerät dass eine Homepage anzeigen kann und JavaScript Unterstützung hat (eigentlich in allen Browsern standard) kann genutzt werden um die Stati an zu zeigen oder gar zu ändern. das Gerät selbst benötigt keine rausragenden Performanz. Es reichen sogar einfache und langsame Webpads oder Handys.
Kann ich das ganze mal testen?
Wie der Zufall es will habe ich tatsächlich einen Simulator für alle die oben gezeigten Beispiele online gestellt. Es sei darauf hingewießen dass keine Systemvariablen, Programmstarts, oder ähnliches was mit der ReGa-HSS zu tun funktionieren (auch der Wecker). Auch funktioniert die, in manchen Beispielen eingebaute, Musik Steuerung nicht. Die Live Daten, also zB vom Bewegungsmelder oder dem Wetter sind natürlich auch keine Aktuellen, aber ich denke um ein bisschen das look and feel zu bekommen dürfte es reichen. Ich wollte nicht mehr arbeit in den Simulator stecken als in das Framework selbst. und nun der Link:
http://root.xenorate.com/homematic/
Was kommt alles auf mich zu?
Wenn man die oben angesprochenen Bedingungen hergestellt hat sind es nur noch 4 Dinge die man erledigen muss:
1. includes/globals.inc.php anpassen.
2. eigene HTML Seite erstellen.
3. Framework einbinden.
4. Aktoren mit HTML Containern verknüpfen
1. Was muss ich in der "includes/globals.inc.php" anpassen?
Hier werden alle globalen PHP Variablen definiert. der 1. Parameter, dass was immer großgeschrieben ist, ist der Name der Variable und der 2. Parameter ist der Wert - dieser muss angepasst werden für:
- XMLRPC_SERVER_ADDRESS: IP-Adresse der CCU
- XMLRPC_CLIENT_ADDRESS: IP-Adresse des WebServers auf dem die Homepage später liegt. (meistens der Rechner auf dem ihr XAMPP oder ähnliches installiert habt. Manchmal aber auch die CCU siehe oben)
- XMLRPC_CLIENT_PORT: Port des WebServers. Standard ist 80.
- XMLRPC_CLIENT_PATH Pfad zum PHP XML-RPC Script. diese liegt in "includes/php/xmlrpc_server.php" falls ihr dass packet direkt in euren root Pfad entpackt (bei XAMPP "xampp/htdocs") dann könnt ihr den Standard eingestellt lassen: "/includes/php/xmlrpc_server.php"
Daraus ergibt sich dann der XMLRPC_CLIENT_COMPLETE_PATH Anfänger sollten hier nichts ändern, wenn sie die 3 oberen Parameter richtig gesetzt haben.
2. Wie erstelle ich eine eigene HTML Seite?
Also dass würde jetzt zu weit gehen wenn ich jetzt auch noch erklären würde wie man HTML programmiert. Ich verweiße da einfach mal auf das Internet. Zu erwähnen wäre allerdings dass als Steuerungselemente immer <div> Container genutzt werden, bei denen das Hintergrundbild oder der enthaltene Text ausgetauscht wird. Die Interaktion wird hergestellt indem das "onClick" event gesetzt wird. Ich werde aber teilweiße in meinem nachfolgenden Tutorial darauf eingehen.
Ich empfehle die erstellten Seiten in den Ordner sites/<irgendwas>/ zu legen, so können mehrere Homepages auf den gleichen Datenbestand zugreifen siehe Simulator. meine Beispiele gehen davon aus dass wir an der Seite /sites/webcontrol/index.html arbeiten.
3. Wie binde ich das Framework ein?
Im Header müssen die richtigen JavaScript Dateien eingebunden werden.
Code: Alles auswählen
<!-- Beginn des 1. Pflichtblocks -->
<script type="text/javascript" src="includes/global_style.js"></script>
<script type="text/javascript" src="../../includes/globals.inc.js"></script>
<script type="text/javascript" src="../../includes/js/functions.js"></script>
<script type="text/javascript" src="../../includes/js/json-minified.js"></script>
<script type="text/javascript" src="../../includes/js/site_functions.js"></script>
<!-- Ende des 1. Pflichtblocks -->
<!-- Benötigt für alle nicht ReGa-HSS Zugriffe (also fast immer) -->
<script type="text/javascript" src="../../includes/js/xmlrpc_functions.js"></script>
<script type="text/javascript" src="../../includes/js/phpSession_functions.js"></script>
<!-- Benötigt für ReGa-HSS Zugriffe -->
<script type="text/javascript" src="../../includes/js/regaHss_functions.js"></script>
<!-- Benötigt für Slider -->
<link href="css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../includes/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../../includes/js/jquery-ui-1.8.2.custom.min.js"></script>
<!-- Beginn des 2. Pflichtblocks -->
<script type="text/javascript" src="../../includes/js/prototype.js"></script>
Ebenfalls in den Header sollte noch diese Script:
Code: Alles auswählen
<script type="text/javascript">
// start init function on window.load
// starte init Funktion bei window.load
Event.observe(window, "load", init);
// config-array with all devices/variables,etc. that will be updated periodically
// Konfigurationsarray mit allen Geräten/Variablen, usw. die regelmäßig aktualisiert werden
var SITE_devicesArray = {
'ID01':{'INTERFACE':'RF', 'SN':'GEQ0001234:1', 'HTML_CONTAINER':'Schalter', 'TYP':'SWITCH'},
};
// refresh rate for normal XML-RPC IDs in SITE_devicesArray, in ms
// Wiederholfrequenz für standard XML-RPC IDs im SITE_devicesArray, in ms
var SITE_refreshRate = 1000;
// refresh rate for ReGa-Hss IDs in SITE_devicesArray, in ms
// Wiederholfrequenz für ReGa-Hss IDs im SITE_devicesArray, in ms
var SITE_regaHssRefreshRate = 3000;
// global variables
// globale Variablen
var regaHss_requestString = '';
// Init
function init(){
// generate ReGa-HSS string to request states
// generiere ReGa-HSS string um Werte ab zu fragen
regaHss_requestString = regaHss_createRequestString();
// suscribte to CCU XML-RPC Interface
// melde sich bei der CCU XML-RPC Schnittstelle an
xmlRpc_init();
// init onclick events for every ID in SITE_devicesArray
// belege jede ID in SITE_devicesArray mit einem standard onclick event
site_initOnclickEvent(SITE_devicesArray);
// start updates
// starte Aktualisierungen
updateXmlRpcDevices();
updateRegaHssDevices();
}
// request all ReGaHSS device states every <SITE_regaHssRefreshRate> ms
// Frage alle ReGaHSS IDs alle <SITE_regaHssRefreshRate> ms ab
function updateRegaHssDevices(){
regaHss_RequestGlobalDeviceArray(regaHss_requestString);
setTimeout("updateRegaHssDevices()", SITE_regaHssRefreshRate);
}
// request all device states every <SITE_refreshRate> ms
// Frage alle IDs alle <SITE_refreshRate> ms ab
function updateXmlRpcDevices(){
phpSession_RequestGlobalDeviceArray();
setTimeout("updateXmlRpcDevices()", SITE_refreshRate);
}
// this function is called for every ID in SITE_devicesArray with every refresh. use this for custom functions
// diese Funktion wird für jede ID im SITE_devicesArray bei jedem Update aufgerufen. Benutzen Sie dies für eigene Funktionen
function page_IdIterator(var_Id, var_Interface, var_Sn, var_Container, var_Typ){
}
// called by site_updateControls after every refreh
// wird von site_updateControls nach jedem Update aufgerufen
function page_update(){
}
// this function is called for every ID in SITE_devicesArray with site_initOnclickEvent(SITE_devicesArray). use this for custom inits
// diese Funktion wird für jede ID im SITE_devicesArray beim Aufrunf von site_initOnclickEvent(SITE_devicesArray) aufgerufen. Benutzen Sie dies für eigene Init-Funktionen
function page_customInitIterator(var_Id, var_Interface, var_Sn, var_Container, var_Typ){
}
</script>
PS. Wenn man im <body> ein "<div id="Status_LED"></div>" hat, dann blick diese wärend eines Polls.
4. Wie verknüpfe ich die HM-Aktoren mit der Homepage?
im SITE_devicesArray wird für jede Verknüpfung eine ID angelegt die ein assoziatives Array (Hash-Liste) mit allen Eigenschaften enthält. Die Grundeigenschaften sind INTERFACE, SN, HTML_CONTAINER und TYP. je nach Typ kommen noch andere Elemente hinzu.
Ein solches Element sieht also etwa so aus:
Code: Alles auswählen
'ID01':{'INTERFACE':'RF', 'SN':'GEQ0001234:1', 'HTML_CONTAINER':'Schalter', 'TYP':'SWITCH'},
- INTERFACE: zulässige Werte sind WIRED, RF, SYSTEM. Hiermit wird angegeben um welche Art von Aktor es sich handelt. WIRED für HS-485 Aktoren und RF für Funk Aktoren.
- SN: die Seriennummer des Aktors plus Kanal sollte jeder schon mal gesehen haben. lässt sich einfach aus der WebUI auslesen.
- HTML_CONTAINER: die ID des HTML Elements mit dem der Aktor verknüpft werden soll. Wie schon erwähnt am besten ein <div>
- TYP: Um welche Art von Aktor/Verknüpfung handelt es sich.
Code: Alles auswählen
VALUE: benötigt zusätzlich das Element DATAPOINT. fordert den aktuellen Wert aus Datenpunkt <DATAPOINT> an.
GET_VALUE: benötigt zusätzlich das Element DATAPOINT. liest Wert aus Datenpunkt <DATAPOINT>
SWITCH: Bild Schalter (an / aus)
SWITCH_TEXT: Text Schalter (an / aus)
DIMMER_SWITCH: Bild Schalter für Dimmer (0.0 / alter Wert)
DIMMER_SWITCH_DISABLED: Bild für Dimmer (an / aus)
DIMMER_TEXT: % Text für Dimmer (an / aus)
BLIND_TEXT: % des Jalousie Aktors als Text
LEVEL_TEXT: % Text für LEVEL Datenpunkt
WINMATIC_ICON: Bild (verschlossen / zu / auf)
WINMATIC_TEXT: Text (verschlossen / zu / auf)
WINMATIC_TEXT_PERCENT: Text (verschlossen / % Öffnung)
VALVE_STATE_TEXT: Text % Ventil Öffnung
VALVE_STATE_ICON: Bild (Vetil offen / zu)
DIMMER_SLIDER: Schieberegler 100 Schritte
BLIND_SLIDER: Schieberegler 100 Schritte
WINMATIC_SLIDER: Schieberegler 100 Schritte
DIMMER_SLIDER_INVERSE: Schieberegler 100 Schritte invers
BLIND_SLIDER_INVERSE: Schieberegler 100 Schritte invers
WORKING_ICON: Bild (Status von WORKING Datapoint)
WORKING_TEXT: Text (Status von WORKING Datapoint)
KEYMATIC_STATE_ICON: Bild (verschlossen / offen)
KEYMATIC_STATE_TEXT: Text (verschlossen / offen)
RAINING_ICON: Bild (Regen / kein Regen)
RAINING_TEXT: Text (Regen / kein Regen)
CONTACT_ICON: Bild (zu / auf)
CONTACT_TEXT: Text (zu / auf)
MOTION_ICON: Bild (Bewegung / keine Bewegung)
MOTION_TEXT: Text (Bewegung / keine Bewegung)
BRIGHTNESS: Text (Helligkeitswert BRIGHTNESS Datapoint)
SETPOINT: Text (Vetil offen / zu / Temperatur in °C)
SETPOINT_ICON: Bild (Vetil offen / zu / Temperatur in °C)
RAIN_COUNTER: Text in mm
WIND_SPEED: Text in km/h
WIND_DIRECTION: Text in °
WIND_DIRECTION_RANGE: Text in °
SUNSHINEDURATION: Text in min
AIR_PRESSURE: Text in nPa
TEMPERATURE: Text in °C
HUMIDITY: Text in %
HISTORY_VALUE: benötigt zusätzlich das Element DATAPOINT und HISTORY, liest Werte History Nummer <HISTORY> für Datenpunkt <DATAPOINT>
HISTORY_TIME: benötigt zusätzlich das Element DATAPOINT und HISTORY, liest Zeit History Nummer <HISTORY> für Datenpunkt <DATAPOINT>
REGAHSS_VARIABLE_TEXT: liest Systemvariable <SN>
REGAHSS_VARIABLE_STATE: liest boolean Systemvariable (0, 1) <SN>. Bild Schalter (ja / nein)
REGAHSS_VARIABLE_STATE_IO: liest boolean Systemvariable (0, 1) <SN>. Bild Schalter (an / aus)
REGAHSS_VARIABLE_STATE_DISABLED: boolean Systemvariable (0, 1) <SN>. Bild (ja / nein)
REGAHSS_PROGRAM: Startet Programm mit dem Namen <SN>
STOP: sendet Action STOP an Aktor
BLIND_STOP: sendet Action STOP an Aktor
PRESS_LONG: sendet Action kurzer Tastendruck an Aktor
PRESS_SHORT: sendet Action langerTastendruck an Aktor
PRESS: sendet Action PRESS an Aktor
CUSTOM_xxx: alle Typen mit CUSTOM werden ignoriert. Hier kann man eigene Typen einbinden mit hilfe von page_IdIterator(), page_update() und page_customInitIterator()
So, nun seid ihr fertig. Klingt schlimmer als es eigentlich ist. Ich werde im 2. Post ein Tutorial schreiben wie man seine eigene 1. kleine Seite erstellt und sie mit Grundelementen füllt.
Abschliesend noch ein paar Screenshots für die einzelnen Integrationen da der Simulator ja nicht alles richtig an zeigt, und der Artikel damit etwas bunter wird
Touch:
Grundriss:
Rollo:
iPhone:
HD2 Smartphone:
HD2 Smartphone Icons:
Ich möchte noch darauf hinweisen dass ich folgende externe Inhalte nutze
http://icons.mysitemyway.com/ - Icons
http://www.prototypejs.org/ - JS Framework
http://jquery.com/ - JS Framework
http://www.json.org/ - Dataformat
http://iwebkit.net/ - iPhone Web-Framework
http://cubiq.org/spinning-wheel-on-webk ... ipod-touch - Spinningwheel für iPhone Webpages
http://phpxmlrpc.sourceforge.net/ - PHP XML-RPC Server/Client
http://www.weather.com/ - SOAP Wetterschnittstelle
und nun natürlich der Download: Es gibt 3 Versionen, 1. ohne alles. Also nur das Framework. 2. Mit der Tutorial Site als Einstieg und 3. Mit allem, also mit allen Seiten die auf der Simulation zu finden sind.
Meine Empfehlung ist Nummer 2: webcontrol_0_1_tutorial.zip
Vom Gesamtpacket würde ich Einsteigern abraten, auch wenn es auf den ersten Blick sehr verlockend ist. Sicher könnt ihr euch inspiration daraus holen, aber versuchen es auf eure Bedürfnisse an zu passen würde ich nicht als 1. Aufgabe ansetzen. Mit dem Tutorial hat man eine gute Grundlage, und kann sich dann langsam hoch arbeiten.
Das Gesamtpacket muss ich extern lagern, es ist sonst zu groß: webcontrol_0_1_all.zip (nicht empfohlen)
Ich würde mich über Vorschläge, Kritik, Feedback und Tester sehr freuen. Wie man sehen kann besitze ich nur Licht Schalter/Dimmer, Kontakte und einen Bewegungsmelder. Ich konnte die anderen Gewerke also nicht selbst testen. Habe sie aber nacht bestem Wissen und Dokumenation integriert.
Viel Spaß beim Testen und Viele Grüße
Daniel
// Todo
- Siterefreshtime messen
- Debug / Error Handling verbessern
- Achtung: Aktueller Traffic Fresser: bei Refreshintervall nicht immer komplettes SessionArray lesen, sondern nur die Unterschiede seid dem letzten Mal (siteID implementieren)
- History-Log-Verzeichnis einstellbar machen.
- ReGa-HSS Elemente über IDs ansprechbar machen (neue Typen)
- TYP Beschreibung verbessern