Dieses Tutorial setzt voraus, dass FHEM bereits installiert und konfiguriert ist und der Umgang mit AngularJS bekannt ist

Ich habe in vorherigen Beiträgen bereits beschrieben, wie ich den RaspBerry PI zur Heimautomation verwende. Ich erkenne bereits das SmartPhone, das FitBit und kontrolliere Webcam sowie die Harmony Fernbedienung mittels einiger Shell-Scripte und einem Webinterface.

Als nächsten Schritt wollte ich Heizungsthermostate von HomeMatic (z.B. erhältlich bei ELV) ansteuern und schick darstellen.

Genutzte Hardware:

  • HomeMatic Funk-Konfigurationsadapter LAN (HM-CFG-LAN)
  • HomeMatic Thermostat HM-CC-RT-DN
  • Raspberry Pi V2.

Verwendete Software:

  • HTML/CSS
  • JavaScript
  • AngularJS
  • FHEM
  • PHP (optional)

Bevor wir anfangen, solltest du sicherstellen, dass FHEM bereits korrekt funktioniert und die Thermostate ansteuert. Ich werde diese Schritte nicht genauer erläutern, da dafür bereits gute Tutorials existieren im FHEM Wiki

Ich habe ein „universelle“ PHP-Script zur Kommunikation mit FHEM geschrieben. Der PHP-Part ist nicht zwingend notwendig; Da ausschließlich GET-Requests verwendet werden ließe sich das auch komplett per JavaScript oder sogar per HTML-Links erledigen. Der Grund PHP zu verwenden war für mich, dass das Webinterface von „außen“ – also über das Internet erreichbar ist, die eigentliche Steuerung aber nicht. Das ist ein gewolltes Verhalten, so dass ein Zugriff vom Client (JavaScript) nicht möglich ist. Innerhalb meines LANs über den Server (PHP) jedoch schon.

Der langen Rede kurzer Sinn, das (simple) PHP-Script

Um das Script anzupassen muss lediglich die IP-Adresse und evtl. der Port in der $host-Variable angepasst werden. Ob das Script funktioniert kann leicht getestet werden:

Ersetze „Sensorname“ durch den namen des Sensors, wie er in FHEM angezeigt wird. Das Ergebnis sollte die aktuelle Temperatur des Sensors sein.

Zeigen wir nun die Daten auf der Website an. Damit es schick aussieht verwende ich die Gauges von ng-Google-Chart

Die HTML-Datei ist wie folgt:

Ein klein bisschen Erklärung:

getStats() lädt zu Beginn die Sensoren über FHEM.php. Die HTML-Seite verwendet Bootstrap (für das Responsive Design) und Font Awesome um das Batteriesymbol anzuzeigen. Beide verwenden CSS und die Seite sollte zunächst auch ohne diese Bibliotheken funktionieren.

Nun zum Angular-Controller:

In $scope.heaterSettings.allHeaters Müssen die Namen sämtlicher anzuzeigender Sensoren eingetragen werden.

 

Das war es bereits. Viel Spaß damit 🙂