FritzBox jQUERY GUI - Do it yourself!

[mediastudio]

Mittels jQUERY und Fhem ein Web-GUI bauen.
Als FHEM Anfänger habe ich lange einige Foren durchstöbert, bis ich in der Lage war, ein für mich Funktionsfähiges Web-GUI mit jQUERY, HTML und CSS3 zu gestalten.
Es sollte ein GUI sein, das beim Smartphon die Bedienungselemente auf dem gesamten Display gut lesbar darstellt.

Fhem Befehle kann man über HTTP ausführen, und deren Ergebnisse direkt zurückbekommen. 

Ein Beispiel für Schaltbefehle:
<button   onclick="FW_cmd('/fhem?XHR=1&amp;cmd.Terrassentuer_Rollo=set Terrassentuer_Rollo AUF&amp ;room=Wohnbereich')" >HOCH</button>

Ein Beispiel für  Aktorzustand - ICON aus FHEM abrufen:
<img width="80" height="80" src=http://fritz.box:8083/fhem/icons/Terrassentuer_Rollo> Terrassentür</img>

Der Terrassentuer_Rollo Aktor  wird so geschaltet und der Zustand des ICON ändert sich beim Pagen- refresh.

Weitere Informationen können wie folgt abgefragt werden.
Schreibt man folgenden Link im Browser  http://fritz.box:8083/fhem?cmd=list&XHR=1
erhalten wir eine Auflistung aller in der  CFG  programmierten Geräte , sowie die Zustände der Aktoren  und Sensoren.

Statusabfrage existiert für "text", XML und JSON:
http://fritz.box:8083/fhem?cmd=list&XHR=1
http://fritz.box:8083/fhem?cmd=xmllist&XHR=1
http://fritz.box:8083/fhem?cmd=jsonlist&XHR=1

Zum Beispiel die Abfrage aller EnOcean Actoren und Sensor mit Ausgabe:

"name": "Aussenbeleuchtung_Actor",
"state": "on"

http://fritz.box:8083/fhem?cmd=jsonlist%20EnOcean&XHR=1.json
für eigene Abfragen ändern----------------------EnOcean z.B. FS20

Wenn man keine Auflistung bekommt dann folgendes ausführen:
HUE auf der Fritzbox  / JSON Ist eine Möglichkeit via HTTP auf Änderungen zuzugreifen
Da auf der FB standardmäßig kein JSON installiert ist, muss dies nachinstalliert werden:
Man lädt das JSON-Paket http://search.cpan.org/CPAN/authors/id/M/MA/MAKAMAKA/JSON-2.53.tar.gz, packt es aus und kopiert den Inhalt
vom lib-Verzeichnis nach \fhem\lib\perl5\site_perl\5.12.2

FHEM Forum http://www.fhemwiki.de/wiki/Hue#HUE_auf_der_Fritzbox

Hier ist das Projekt meines jQUERY – GUI.  /     Google-Browser /  Browser. Firefox

Ich habe noch ein Problem mit der effektiven Ansteuerung der Dimmer.
Hier könnte ich noch Hilfe brauchen. Ich habe ein ,,function dimmer_1(Element)" eingebaut,
hier brauche ich ¬eine Funktion, die universell für mehrere Dimmer funkioniert.

Ansonsten kann man die jQueryFHEM.html auf seine eigenen Bedürfnisse ändern.
jQuery lernen und einsetzen ONLINE – BUCH: http://www.dpunkt.de/jquery_html/
Das Tabellenlayout  habe ich auf dieser Seite erstellt:   http://www.csstablegenerator.com/
Das Buttonlayout habe ich auf dieser Seite erstellt:   http://css3button.net/

Die Datei JQueryFHEM.html in das Verzeichnis kopieren: fhem/www/images/
Die Datei  HomeFHEM.css  nach pgm2 kopieren: fhem/www/pgm2/

In Fhem einen neuen Order für jQUERY  anlegen: jquerymobile
fhem/www/images/jquerymobile/
Die Dateien von jquerymobile in das Verzeichnis jquerymobile  kopieren.

Aufruf im Browser: http://fritz.box:8083/fhem/images/jQueryFHEM.html