Homematic Webcontrol

User stellen ihre Haussteuerung vor

Moderator: Co-Administratoren

ColdFireIce
Beiträge: 407
Registriert: 06.03.2009, 15:38
Wohnort: Karlsruhe
Danksagung erhalten: 1 Mal

Homematic Webcontrol

Beitrag von ColdFireIce » 12.08.2010, 06:43

Hallo zusammen,

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:
Bild Bild Bild Bild Bild Bild
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 :wink: 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.
Die restlichen Parameter sind eher etwas für Profis und erkläre ich vielleicht in einem Späteren Tutorial. Sie beziehen sich vorallem auf die eingebaute History Funktion.

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>
Wichtig dabei ist dass die "prototype.js" immer als letztes eingebunden wird.
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>
Teile davon kann man jedoch je nach Bedarf weg lassen. näheres kann man den Kommentaren oder später im Tutorial entnehmen.
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.
Zulässige Typen (Ich werde versuchen dass noch irgendwie schöner darzustellen):

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()
Profis können auch in der site_functions.js nachschaun welche Typen wie integriert sind.

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:
Bild Bild Bild Bild Bild Bild Bild Bild

Grundriss:
Bild

Rollo:
Bild

iPhone:
Bild Bild Bild Bild Bild Bild Bild

HD2 Smartphone:
Bild Bild Bild Bild Bild Bild Bild

HD2 Smartphone Icons:
Bild Bild Bild Bild Bild

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
Dateianhänge
webcontrol_0_1_tutorial.zip
Empfohlen!
(525.5 KiB) 1767-mal heruntergeladen
webcontrol_0_1_clean.zip
(201.62 KiB) 935-mal heruntergeladen
Zuletzt geändert von Roland M. am 05.07.2018, 16:44, insgesamt 13-mal geändert.
Grund: Thema verschoben

ColdFireIce
Beiträge: 407
Registriert: 06.03.2009, 15:38
Wohnort: Karlsruhe
Danksagung erhalten: 1 Mal

Homematic Webcontrol Tutorial

Beitrag von ColdFireIce » 12.08.2010, 06:43

So dann wollen wir mal.

Ich werde mich hier auf das packet beziehen welches im Anhang ist, bzw beim webcontrol_0_1_tutorial.zip schon dabei ist.
Es handelt sich dabei um eine absolut minimalistische Homepage an hand derer ich die Integration der Aktoren erklären will.

Als erstes werde ich auf die verschiedenen JavaScript Dateien zu sprechen kommen und was sie jeweils enthalten und ob sie für die aktuelle Integration überhaupt nötig sind. Ich werde dabei allerdings nicht auf HTML Typische Includes eingehen, also zB das CSS File in dem ich die Position der Elemente festgelegt habe. Dieser 1. Block ist Pflicht, und wird zwingend benötigt damit HW überhaupt funktioniert.

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 -->
Wichtig!: Hier muss, und sollte nichts geändert werden. Hier sollten nur leute Hand anlegen die Ahnung von der Materie haben.
  • globals.inc.js: Hier werden die globalen Variablen angelegt die HW nutzt um die Zustände der Aktoren zwischen zu speichern. Es ist eigentlich eine 1:1 Kopie der Session ID Arrays, auf die Ich später noch zu sprechen komme.
  • functions.js: Grundlegende Funktionen unteranderem auf für die Status LED.
  • json-minified.js: JSON Format
  • site_functions.js: That's where the magic happens. Hier sind alle wichtigen Funktionen wie die Update-Routinen und die Inizialiserungs-Routinen von HW.
auf eine Datei möchte ich aber gesondert eingehen:

includes/global_style.js
Diese Datei legt sozusagen den Style für die aktuelle Seite fest. Hier wird bestimmt welche Bilder bspw. für einen Schalter angezeigt werden sollen, wenn er aus oder an ist. Auch die vorgefertigten Texte werden hier festgelegt. Im Beispiel ist diese Datei schon gefüllt und ich denke die Logik dahinter ergibt sich aus den Texten oder den Namen der Variablen. Bspw. wird für den TYP "SWITCH_TEXT" der Wert der Variable GLOBAL_textOn in den Container geschrieben falls der Aktor an ist, also im Beispiel "An".
Weiter unten gibt es die Punkte

Code: Alles auswählen

/* Error und Debug anzeigen */
var GLOBAL_errorReporting = false;
var GLOBAL_debugReporting = false;
Hier kann man festlegen ob Fehler- und/oder Debugmeldungen angezeigt werden sollen. Diese Funktion ist allerdings noch nicht wirklich ausgereift. Ich würde empfehlen es auf false, false zu lassen.
Der letzte Teil in der Datei beschäftigt sich mit den Einstellungen für die Slider (gibt es nur für Dimmer und Rollläden).

Code: Alles auswählen

var STYLE_SLIDER_ANIMATE = 1000;
var STYLE_SLIDER_RANGE = 'min';
var STYLE_SLIDER_ORIENTATION = 'horizontal';
var STYLE_SLIDER_VALUE = 0;
var STYLE_SLIDER_STEP = 1;
var STYLE_SLIDER_MIN = 1;
var STYLE_SLIDER_MAX = 100;
var STYLE_SLIDER_DISABLED = false;
da es sich um Slider eines fremden Frameworks handelt verweise ich hier einfach auf die orginal Quelle von jQuery UI: http://jqueryui.com/demos/slider/#options ganz unten stehen die verschiedenen Eigenschaften, ihre Bedeutung und ihre gültigen Werte.
Wenn wir schon beim Slider sind, noch etwas zu den CSS Eigenschaften dessen. Hier ist ein Beispiel wie ich den Slider für das Touch Layout angepasst habe. Dabei bezieht sich ".Slider" auf die Klasse die ich dem Container zu gewiesen habe:

Code: Alles auswählen

<div class="Slider" id="Irgendeine_ID"></div>
es ist jedoch nicht wichtig wie diese Klasse heißt, nur dass sie eben übereinstimmen. die anderen Klassennamen wie zB ".ui-slider-range" werden von jQueryUI automatisch generiert und müssen so übernommen werden.

Code: Alles auswählen

/* Slider */
.Slider{
	position:absolute;
	background: none;
	border:none;
	background-image:url(../pictures/dimback.png);
	-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px;
}
/* Slider-background (range) */
.Slider .ui-slider-range{
	background: none;
	background-image:url(../pictures/dim.jpg);
}
/* Slider-button */
.Slider .ui-slider-handle{
	border:none;
	-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px;
	background: none;
	outline: none;
}
/* Slider-button  mouse down */
.Slider .ui-state-active{
	background: none;
}
/* Slider-horizontal */
.Slider.ui-slider-horizontal{
	width:288px;
	height:50px;
}
/* Slider-horizontal button */
.Slider.ui-slider-horizontal .ui-slider-handle{
	width:30px;
	height:50px;
	margin-left:-15px;
	top:0px;
}
/* Slider-vertical */
.Slider.ui-slider-vertical{
	width:50px;
	height:300px;
}
/* Slider-vertical button */
.Slider.ui-slider-vertical .ui-slider-handle{
	width:50px;
	height:30px;
	margin-bottom:-15px;
	left:0px;
}
So, wieder zurück zur eigentlichen Seite. Weiter mit den benötigten Dateien. Jetzt wird es erst mal optional.

Will man bspw. Slider nutzen, also bei Dimmern, oder Rollläden, dann muss man diese 3 Dateien einbinden:

Code: Alles auswählen

<!-- 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>
Für das auslesen/setzen von Homematic Systemvariablen, oder das starten von Homematic Programmen benötigt man diese Datei (alle Typen die mit "REGAHSS_" beginnen):

Code: Alles auswählen

 <!-- Benötigt für ReGa-HSS Zugriffe -->
<script type="text/javascript" src="../../includes/js/regaHss_functions.js"></script>
Will man alle anderen Sorten von Aktoren auslesen, oder steuern werden immer diese Dateien benötigt:

Code: Alles auswählen

<!-- 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>
So jetzt kommen wir noch zur 2. Pflichteinbindung:

Code: Alles auswählen

<script type="text/javascript" src="../../includes/js/prototype.js"></script>
dabei handelt es sich um das Prototype Framework.


Als nächstes wird mit <script type="text/javascript"> ein eigener Script Block geöffnet der auf wieder mit </script> beschlossen werden sollte.
die 1. Anweisung die wir hier rein schreiben ist Event.observe(window, "load", init); Das sorgt dafür dass beim laden der Homepages die Funktion init aufgerufen wird. diese haben wir weiter unten auch angelegt ( function init(){....} ).

Nun folgt dass schon erwähnte SITE_devicesArray. Wie wir hier dann die Einzelnen Verknüpfungen einpflegen erkläre ich später.
Danach stehen 2 globale Variabeln die den Intervall angeben mit dem die Status Informationen aus dem PHP-Session Array in die Homepage kopiert werden sollen. jeweils eine Variable für die ReGaHSS Variablen (SITE_regaHssRefreshRate) und eine für den Rest (SITE_refreshRate). Die Zeit wird in Millisekunden (1000ms=1s) angegenen. Um so keiner die Zahl ist, um schneller spricht die Seite auf Änderungen an. Alllerdings auf kosten der Performance. Ich empfehle keine Werte unter 500ms.
die Zeile var regaHss_requestString = ''; ist wichtig wenn man mit ReGaHSS Typen Arbeitet. Es handelt sich später um den String der per TCLReGa.exe an die CCU geschickt wird. dieser wird auch gleich als erstet in der init Methode mit Inhalt gefüllt, und zwar an hand des SITE_devicesArray.

init()
Mit dem 2. Befehl (xmlRpc_init();) meldet sich die Homepage bei der CCU an und erwaretet ab jetzt Events. Diese Funktion muss theoretisch nur 1x aufgerufen werden, da sich die CCU diese Anfrage bis zum nächsten Neustart merkt. Man könnte sie also auf einen Knopft auslagern bspw. mit:

Code: Alles auswählen

document.getElementById("ID_Init_Button").onclick = function(){ xmlRpc_init(); };
Ich habe noch keine genauen Informationen darüber ob es der CCU etwas ausmacht wenn man sich immer wieder neu anmeldet, da Ich sie eh ab und an neustarte, aber ich glaube es ehrlich gesagt nicht.

site_initOnclickEvent(SITE_devicesArray); diese Funktion führt für jede ID die sich im SITE_devicesArray befindet eine Initialisierung durch. Meistens werden Buttons mit der Funktion xmlrpc_getValue(...) belegt die dafür sorgt dass der Satus des Aktors abgefragt wird. Wenn man bspw. die Seite das aller erste mal läd und in der PHP-Session Variable noch kein Wert für einen Schalter oder so angekommen ist. dann kann man damit eine Abfrage erzwingen.

updateXmlRpcDevices(); und updateRegaHssDevices(); starten jeweils eine Endlosschleife mit den oben angegebenen Intervallzeiten die dann die entsprechenden Geräte Stati abfragen. die 2 functionen dafür folgen direkt nacht der init Mehtode.

Die letzen 3 Funktione sind dazu da dem Entwickler die Möglichkeit zu geben eigene Typen zu definieren, oder auf vorhandenes Verhalten einzuwirken.
page_update() wird bspw jedes mal am ende eines Update Zyklus aufgerufen.
Die anderen beiden Funktionen erkläre ich wenn ich auf eigene Datentypen eingehe.

Das Geplänkel hätten wir hinter uns. Jetzt machen wir uns mal an die Seite:

Lektion 1:
wir fügen in den <body> einfach mal 3 div Container ein. Einen für die Status LED und 2 für 1x Text und 1x ein Icon:

Code: Alles auswählen

<div id="Status_LED"></div>
<div class="TestContainerText" id="Text1"></div><div class="TestContainerIcon" id="Icon1"></div>
der CSS Code um sie zu positionieren sieht so aus:

Code: Alles auswählen

.TestContainerText{
	position:absolute;
	width:590px;
	height:80px;
	background-color:#EEE;
	left:0px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 36px;
	line-height: 80px;
	font-weight: bold;
	text-align: right;	
}
.TestContainerIcon{
	position:absolute;
	width:85px;
	height:80px;
	background-color:#CCC;
	left:600px;
}

#Text1, #Icon1{
	top:0px;
}
daraus resultiert dann etwas dass:
1.jpg
1.jpg (2.26 KiB) 46758 mal betrachtet
Ich werde diesen Roling nutzen um euch ein paar Funktionen zu zeigen.

Lektion 2:
Als ersten verknüpfen wir einen Schaltaktor mit den Icon Platzhalter.
Dazu müsst ihr in dem SITE_devicesArray einen Eintrag anlegen, Euer Interface festlegen, die Seriennummer des Aktors eingeben, den Container Icon1 angeben, und den Typ SWITCH wählen. das Array sollte dann etwa so aussehen (andere SN und ggf. anderes INTERFACE ist ja klar.):

Code: Alles auswählen

var SITE_devicesArray = {	
	'ID01':{'INTERFACE':'RF', 'SN':'EEQ0000001:1','HTML_CONTAINER':'Icon1','TYP':'SWITCH'}
};
nun sollte eure Seite etwa so aussehen:
2.jpg
2.jpg (4.09 KiB) 46758 mal betrachtet
Lektion 3:
Jetzt verknüpfen wir auf noch das vordere lange Feld (Text1) mit dem gleichen Aktor, diese mal allerdings nicht als Bild sondern als Text. gleiches Spiel, diese Mal ist aber der Typ SWITCH_TEXT. das Array sieht dann also so aus:

Code: Alles auswählen

var SITE_devicesArray = {	
	'ID01':{'INTERFACE':'RF', 'SN':'EEQ0000001:1','HTML_CONTAINER':'Icon1','TYP':'SWITCH'},
	'ID02':{'INTERFACE':'RF', 'SN':'EEQ0000001:1','HTML_CONTAINER':'Text1','TYP':'SWITCH_TEXT'}
};
Wichtig ist darauf zu achten, dass die IDs an erster Stelle also hier ID01 und ID02 IMMER eindeutig sind! Also niemals die gleichen benutzen.
Wenn alles geklappt hat sollte das jetzt so aussehen:
3.jpg
3.jpg (4.99 KiB) 46758 mal betrachtet
Lektion 3.1:
Wir erweitern jetzt mal fix die Seite um noch ein paar Zeilen leer Container damit wir mehr Platz haben:

Code: Alles auswählen

<div class="TestContainerText" id="Text2"></div><div class="TestContainerIcon" id="Icon2"></div>
<div class="TestContainerText" id="Text3"></div><div class="TestContainerIcon" id="Icon3"></div>
<div class="TestContainerText" id="Text4"></div><div class="TestContainerIcon" id="Icon4"></div>
<div class="TestContainerText" id="Text5"></div><div class="TestContainerIcon" id="Icon5"></div>
<div class="TestContainerText" id="Text6"></div><div class="TestContainerIcon" id="Icon6"></div>
<div class="TestContainerText" id="Text7"></div><div class="TestContainerIcon" id="Icon7"></div>
<div class="TestContainerText" id="Text8"></div><div class="TestContainerIcon" id="Icon8"></div>
<div class="TestContainerText" id="Text9"></div><div class="TestContainerIcon" id="Icon9"></div>
und die CSS Datei:

Code: Alles auswählen

#Text2, #Icon2{
	top:100px;
}
#Text3, #Icon3{
	top:200px;
}
#Text4, #Icon4{
	top:300px;
}
#Text5, #Icon5{
	top:400px;
}
#Text6, #Icon6{
	top:500px;
}
#Text7, #Icon7{
	top:600px;
}
#Text8, #Icon8{
	top:700px;
}
#Text9, #Icon9{
	top:800px;
}
Lektion 4:
So, als nächstes wollen wir einen Dimmer Slider mit dazu gehörigem Button einbinden. Der Button schaltet zwischen "Aus", und dem letzten Wert ungleich von "Aus" um. Die Typen sind hier: DIMMER_SLIDER und DIMMER_SWITCH. Der Aktor sollte natürlich auch angepasst werden. SITE_devicesArray:

Code: Alles auswählen

var SITE_devicesArray = {	
	'ID01':{'INTERFACE':'RF', 'SN':'EEQ0000001:1','HTML_CONTAINER':'Icon1','TYP':'SWITCH'},
	'ID02':{'INTERFACE':'RF', 'SN':'EEQ0000001:1','HTML_CONTAINER':'Text1','TYP':'SWITCH_TEXT'},
	'ID03':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Icon2','TYP':'DIMMER_SWITCH'},
	'ID04':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Text2','TYP':'DIMMER_SLIDER'}
};
Das Ergebnis:
4.jpg
4.jpg (15.88 KiB) 46758 mal betrachtet
Wie man das Aussehen des Sliders verändert habe ich im Abschnitt zu global_style.js erklärt.

Lektion 5:
Will man nur den Wert anzeigen der sich in einem Datenpunkt befindet geht dass mit dem Typ VALUE. Der Einfachheit halber lesen wir den Datenpunkt LEVEL des Dimmers aus. Hierzu muss auch noch dieser Datenpunkt in das Array eingetragen werden, dies geschieht mit dem Attribut DATAPOINT also so:

Code: Alles auswählen

var SITE_devicesArray = {	
	'ID01':{'INTERFACE':'RF', 'SN':'EEQ0000001:1','HTML_CONTAINER':'Icon1','TYP':'SWITCH'},
	'ID02':{'INTERFACE':'RF', 'SN':'EEQ0000001:1','HTML_CONTAINER':'Text1','TYP':'SWITCH_TEXT'},
	'ID03':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Icon2','TYP':'DIMMER_SWITCH'},
	'ID04':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Text2','TYP':'DIMMER_SLIDER'},
	'ID05':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Text3','TYP':'VALUE', 'DATAPOINT':'LEVEL'}
};
Das Ergebis zeigt im Container Text3 den Wert des Dimmers zwischen 0 und 1 an:
5.jpg
5.jpg (18.33 KiB) 46758 mal betrachtet
Lektion 6:
Nun sieht diese Ergebnis aber nicht sonderlich toll aus. Also nutzen wir die Funktionen die vom Framework aufgerufen werden um das etwas an zu passen.
die Funktion page_update() wird jedes mal aufgerufen wenn das Framework fertig ist damit alle Statusinformationen zu aktualisieren. das ist genau dass was wir brauchen. Der folgende Code liest den aktuellen Text der im Text3 Container steht aus, wandelt ihn in eine Zahl, multipliziert diese mit 100 und hängt noch ein % Zeichen ans Ende. Dann wird dass wieder in den Container geschrieben:

Code: Alles auswählen

function page_update(){
	var wert = parseFloat(document.getElementById('Text3').innerHTML);
	document.getElementById('Text3').innerHTML = (wert*100)+' %';
}
und siehe da:
6.jpg
6.jpg (18.8 KiB) 46758 mal betrachtet
Lektion 7:
Und als letzte Lexion zeige ich euch noch wie man eigene Framework Typen schreibt.
Wir wollen ein Icon haben dass eine Sonne anzeigt wenn der Dimmer heller als 30% ist und sonst eine Regenwolke. Man könnte dass natürlich ähnlich wie eben lösen aber man kann auch seinen eigenen Framework typ erstellen, mit dem man sowas dann auch wieder verwerten kann.
Als erstes fügen wir noch eine Zeile in das SITE_devicesArray ein. wir nehmen den Icon3 Container für unser Experiment. als Typ können wir jetzt irgendetwas schreiben dass mit CUSTOM_ anfängt. Wir nehmen einfach mal CUSTOM_DIMMER_WEATHER_ICON:

Code: Alles auswählen

var SITE_devicesArray = {	
	'ID01':{'INTERFACE':'RF', 'SN':'EEQ0000001:1','HTML_CONTAINER':'Icon1','TYP':'SWITCH'},
	'ID02':{'INTERFACE':'RF', 'SN':'EEQ0000001:1','HTML_CONTAINER':'Text1','TYP':'SWITCH_TEXT'},
	'ID03':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Icon2','TYP':'DIMMER_SWITCH'},
	'ID04':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Text2','TYP':'DIMMER_SLIDER'},
	'ID05':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Text3','TYP':'VALUE', 'DATAPOINT':'LEVEL'},
	'ID06':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Icon3','TYP':'CUSTOM_DIMMER_WEATHER_ICON'}
};
die Funktion page_IdIterator() wird bei jedem Update Durchlauf für des Element dass in SITE_devicesArray ist, aufgerufen. Die übergebenen Parameter sind: die ID, das Interface, die Seriennummer, der HTML Container und der Typ. Also alles was wir angegeben haben.
In unserem Fall wollen wir nur reagieren wenn der Typ = 'CUSTOM_DIMMER_WEATHER_ICON' ist. danach müssen wir den aktuellen LEVEL des Dimmers auslesen. und hier kommen wir zu einem wichtige Punkt:

Einschub Lektion 8:
das GLOBAL_statusArray (GLOBAL_regaHssArray):
Hier wird die Kopie des PHP Session Arrays abgelegt. also befinden sich hier auch alle Stati aller Aktoren. Wenn ihr euch diese PHP Array von dem ich die ganze Zeit rede mal anschauen wollt, müsst ihr einfach diese Seite in eurem Browser öffnen. natürlich mit angepassten Adressen:

Code: Alles auswählen

http://<Adresse Eures Servers (IP Port RootPfad)>/includes/php/phpSession_displayArray.php?array=homematic
Diese Array wird regelmäßig in dass JS GLOBAL_statusArray kopiert.

Lektion 7.1
Also greift ihr auch hier euren aktuelle Dimmer status ab, um mal wieder zurück zu kommen. In unserem Fall nehmen wir als Seriennummer, die uns übergeben wird von der Funktion und lesen den Datenpunkt LEVEL aus: GLOBAL_statusArray[var_Sn]['LEVEL']
dann prüfen wir den, in eine Zahl gewandelten Wert, und passen dann das Hintergrund bild des Containers an, den wir auch übergeben bekommen in der Variablen var_Container. Der zugehörige Code:

Code: Alles auswählen

function page_IdIterator(var_Id, var_Interface, var_Sn, var_Container, var_Typ){
	if (var_Typ == 'CUSTOM_DIMMER_WEATHER_ICON'){
		var wert = parseFloat(GLOBAL_statusArray[var_Sn]['LEVEL']);
		if (wert > 0.3){
			document.getElementById(var_Container).style.backgroundImage = 'url(pictures/sun.png)';;
		} else {
			document.getElementById(var_Container).style.backgroundImage = 'url(pictures/rain.png)';;
		}
	}
}
Und das resultierende Ergebnis:
7.jpg
7.jpg (21.3 KiB) 46758 mal betrachtet
das Ergebnis der Lektionen gibt es auch im Simulator: http://root.xenorate.com/homematic/sites/webcontrol/

Noch ein Hinweis zu den Farben in denen die LED blinkt. rot = ReGaHSS Update, schwarz = sonstiges Update. Wer keine LED will, einfach den Container mit der id="Status_LED" löschen bzw. weglassen.

// Edit 13.08.2010:

Lektion 9
Mir ist noch eingefallen dass ich vielleicht die etwas spezielle Verknüpfung von Homematic Systemvariablen bzw. Programmen noch etwas genauer erklären sollte.
Da diese ja bekanntlich keine Serienummer haben wird hier einfach der Name eingetragen. Wir nehmen hier als Beispiel einfach einmal die Systemvariable "Anwesenheit" da die ja standardmäßig in der CCU schon vorhanden ist. Wir verknüpfen sie mit Text4 wie gewohnt im SITE_devicesArray, nur diesesmal eben nicht mit der Seriennummer sondern dem Namen. Es bleibt aber das Feld 'SN'. Das Interface müssen wir auch ändern. zu HSS. Wir nehmen als Typ REGAHSS_VARIABLE_TEXT. damit wird einfach der Inahlt einer Variable in das Feld geschrieben.

Code: Alles auswählen

var SITE_devicesArray = {
	'ID01':{'INTERFACE':'RF', 'SN':'EEQ0000001:1','HTML_CONTAINER':'Icon1','TYP':'SWITCH'},
	'ID02':{'INTERFACE':'RF', 'SN':'EEQ0000001:1','HTML_CONTAINER':'Text1','TYP':'SWITCH_TEXT'},
	'ID03':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Icon2','TYP':'DIMMER_SWITCH'},
	'ID04':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Text2','TYP':'DIMMER_SLIDER'},
	'ID05':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Text3','TYP':'VALUE', 'DATAPOINT':'LEVEL'},
	'ID06':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Icon3','TYP':'CUSTOM_DIMMER_WEATHER_ICON'},
	'ID07':{'INTERFACE':'HSS', 'SN':'Anwesenheit','HTML_CONTAINER':'Text4','TYP':'REGAHSS_VARIABLE_TEXT'}
};
Da es sich bei der Systemvariable um einen Wahrheitswert (boolean) handelt wird für wahr nur die 1 angezeigt. Das kann man aber wie in Lektion 6 gezeigt noch anpassen, oder man baut sich sogar einfach seinen eigenen Typ wie in Lektion 7.

Lektion 9.1
Jetzt binden wir noch ein Programm ein. Soll heißen, es wird ein Button angezeigt der, wenn er geklickt wird, ein Homematic Programm startet. Dabei werden, soweit ich weiß, die Bedingungen des Programms ignoriert und einfach der Dann Block ausgeführt.
Auch hier wird wieder der Name des Programms anstelle der Seriennummer eingetragen und das Interface auf HSS gesetzt. Container ist diesemal Icon4. der Typ für ein HSS Programm ist REGAHSS_PROGRAM:

Code: Alles auswählen

var SITE_devicesArray = {
	'ID01':{'INTERFACE':'RF', 'SN':'EEQ0000001:1','HTML_CONTAINER':'Icon1','TYP':'SWITCH'},
	'ID02':{'INTERFACE':'RF', 'SN':'EEQ0000001:1','HTML_CONTAINER':'Text1','TYP':'SWITCH_TEXT'},
	'ID03':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Icon2','TYP':'DIMMER_SWITCH'},
	'ID04':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Text2','TYP':'DIMMER_SLIDER'},
	'ID05':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Text3','TYP':'VALUE', 'DATAPOINT':'LEVEL'},
	'ID06':{'INTERFACE':'RF', 'SN':'EEQ0000002:1','HTML_CONTAINER':'Icon3','TYP':'CUSTOM_DIMMER_WEATHER_ICON'},
	'ID07':{'INTERFACE':'HSS', 'SN':'Anwesenheit','HTML_CONTAINER':'Text4','TYP':'REGAHSS_VARIABLE_TEXT'},
	'ID08':{'INTERFACE':'HSS', 'SN':'Name_eines_Programms','HTML_CONTAINER':'Icon4','TYP':'REGAHSS_PROGRAM'}
};
Das Ergebnis dieser Lextion sollte etwa so aussehen: (beachte: im Simulator funktionieren REGAHSS Typen nicht.)
9.jpg
Lektion 10
Um Infos über das History System zu bekommen einfach diesen Post hier lesen: http://homematic-forum.de/forum/viewtop ... 357#p30357

Im Anhang natürlich das zip File mit allen Bildern und CSS. Ich werde diese Tutorial auch in die anderen Packete integrieren.

Viele Grüße
Daniel
Dateianhänge
webcontrol_tutorialseite.zip
(323.56 KiB) 663-mal heruntergeladen
Zuletzt geändert von ColdFireIce am 16.08.2010, 23:33, insgesamt 4-mal geändert.

erik
Beiträge: 776
Registriert: 31.10.2007, 13:32
Hat sich bedankt: 6 Mal
Danksagung erhalten: 6 Mal

Re: Homematic Webcontrol

Beitrag von erik » 12.08.2010, 08:45

Hi Daniel,

C O O L !!!
Mein Feierabend ist gerettet.
Frau muß warten!!!
Werde das heute Abend mal sofort ausprobieren.

Danke

Erik

ong
Beiträge: 146
Registriert: 25.07.2010, 15:20
Danksagung erhalten: 1 Mal

Re: Homematic Webcontrol

Beitrag von ong » 12.08.2010, 13:47

Hallo,

muss man an der CCU noch etwas .. machen wie z.B. den XML Patch ( http://www.homematic-inside.de/software ... mlapi.html ) einbasteln?

PS: Sieht absolut spitze aus!

Olaf
* ca. 70 Geräte (alle Wireless, Stand 2019/2013) *
* Datenbankentwicklung *
* Individuell, Qualitativ, Regional *
* https://datenbank-projekt.de *

uwi
Beiträge: 4
Registriert: 05.11.2008, 19:50

Re: Homematic Webcontrol

Beitrag von uwi » 12.08.2010, 14:23

Sieht wirklich interessant aus! Muss mich dann mal daran versuchen. :D

Frage: ist es auch denkbar das Ganze direkt auf der CCU mit PHP-Server (PRO) laufen zu lassen? :?:

Viele Grüsse
Urs Winkelmann

ColdFireIce
Beiträge: 407
Registriert: 06.03.2009, 15:38
Wohnort: Karlsruhe
Danksagung erhalten: 1 Mal

Re: Homematic Webcontrol

Beitrag von ColdFireIce » 12.08.2010, 14:39

ong hat geschrieben:Hallo,

muss man an der CCU noch etwas .. machen wie z.B. den XML Patch ( http://www.homematic-inside.de/software ... mlapi.html ) einbasteln?

PS: Sieht absolut spitze aus!

Olaf
Hallo Olaf,

danke viel mal. Nein man muss auf der CCU nichts weiter installieren. Ich nutzen die native XML-RPC Schnittstelle. Das einzige was eingestellt werden muss, ist eben die Firewalls der 2 Geräte (CCU und ggf. der PC) so dass sie mit einander kommunizieren können.

Viele Grüße
Daniel

ColdFireIce
Beiträge: 407
Registriert: 06.03.2009, 15:38
Wohnort: Karlsruhe
Danksagung erhalten: 1 Mal

Re: Homematic Webcontrol

Beitrag von ColdFireIce » 12.08.2010, 14:44

uwi hat geschrieben:Sieht wirklich interessant aus! Muss mich dann mal daran versuchen. :D

Frage: ist es auch denkbar das Ganze direkt auf der CCU mit PHP-Server (PRO) laufen zu lassen? :?:

Viele Grüsse
Urs Winkelmann
Danke sehr.
Wenn ich mich mal selbst zitieren darf ;)
ColdFireIce hat geschrieben: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.
Also ja es geht, muss man aber noch nen passenden Style erstellen der Möglichst "leicht" ist. und die CCU nicht so sehr belastet.

Viele Grüße
Daniel

erik
Beiträge: 776
Registriert: 31.10.2007, 13:32
Hat sich bedankt: 6 Mal
Danksagung erhalten: 6 Mal

Re: Homematic Webcontrol

Beitrag von erik » 12.08.2010, 22:20

Hi Daniel,

wie sieht das aus, wenn ich Dein Projekt auf einen Webserver mit SSL legen möchte?
Was muß ich da wo eintragen, damit das Script sich selber findet?
Denke, das in der php_global mit

Code: Alles auswählen

	// XMLRPC-Client Data
	define("XMLRPC_CLIENT_ADDRESS", "das ist eine dyndns adresse");
	define("XMLRPC_CLIENT_PORT", "8001");
	define("XMLRPC_CLIENT_PATH", "/homematic/includes/php/xmlrpc_server.php");
	define("XMLRPC_CLIENT_COMPLETE_PATH", XMLRPC_CLIENT_ADDRESS.":".XMLRPC_CLIENT_PORT.XMLRPC_CLIENT_PATH);
was angepaßt werden muß, finde nur nicht, wo ich das "s" noch hinpacken soll....


Danke

Erik

ColdFireIce
Beiträge: 407
Registriert: 06.03.2009, 15:38
Wohnort: Karlsruhe
Danksagung erhalten: 1 Mal

Re: Homematic Webcontrol

Beitrag von ColdFireIce » 12.08.2010, 22:45

ha, hmm da hab ich wohl garnicht so dran gedacht...
Aber es müsste

Code: Alles auswählen

define("XMLRPC_CLIENT_COMPLETE_PATH", "https://".XMLRPC_CLIENT_ADDRESS.":".XMLRPC_CLIENT_PORT.XMLRPC_CLIENT_PATH);
so gehen.

Habs grad mal mit

Code: Alles auswählen

define("XMLRPC_CLIENT_COMPLETE_PATH", "http://".XMLRPC_CLIENT_ADDRESS.":".XMLRPC_CLIENT_PORT.XMLRPC_CLIENT_PATH);
getestet, und das geht.

Viele Grüße
Daniel

erik
Beiträge: 776
Registriert: 31.10.2007, 13:32
Hat sich bedankt: 6 Mal
Danksagung erhalten: 6 Mal

Re: Homematic Webcontrol

Beitrag von erik » 12.08.2010, 23:39

Hi Daniel,

danke für die schnelle Antwort.
Leider komme ich nicht sehr weit.
Habe die CCU adresse eingetragen und einfach die Seriennummer eines Aktors eingetragen in einem Deiner Beispiele eingetragen.
Leider ist anschließend der betreffende Aktor mit [ ? ] markiert.
Wie kann man das ganze debuggen?

Habe das ganze auf einem WAMP Server liegen, die SSL Seite ist zudem Passwort geschützt, also um den Parser zu öffnen muß man auch ein Login eintragen....
Kann die SSL Seite öffnen, aber wie und wer greift den auf den XML_Server zu?

Grüße

Erik

Antworten

Zurück zu „Projektvorstellungen“