Visualisierung – Teil 4 (Ajax Set Button)

Heute habe ich mich mal etwas ausführlicher mit dem Senden von Befehlen beschäftigt. Das Thema Websockets habe ich erst mal weit nach hinten geschoben und das ganze mit Ajax realisiert. Die Lösung kann eigenständig genutzt werden und kann somit in der Visualisierung mit Ajax als auch in der „einfachen“ Visualisierung mit PHP verwendet werden.

Der Aufbau der Visualisierung ist diesmal wieder recht simpel. Wir haben wieder die config.php in der die Verbindungsdaten gepflegt werden, die loxone.php als Schnittstelle zum Loxone Miniserver und die index.php als Startdatei. Wie üblich gibt es das ganze Skript wieder im Download Bereich.

Der Ablauf: Wird der Button (Arbeitszimmer Licht) gedrückt, wird die Variable „EG-Arbeitszimmer-Taster-3“ an die AJAX / JavaScript Funktion LoxonePulse übergeben. Der Button ist wieder wie in den vorherigen Visualisierungen in ein DIV-Element eingesetzt und kann somit per CSS entsprechend positioniert werden.

...
<div id="a_button">
   <button type="button" onclick="LoxonePulse('EG-Arbeitszimmer-Taster-3')">Arbeitszimmer Licht</button>
</div>
...

Die Variable „EG-Arbeitszimmer-Taster-3“ wird dann im Skript dank Ajax ohne Refresh der Seite an die loxone.php übergeben. Das Skript ist so geschrieben das es auch für mehrere Buttons genutzt werden kann. Dafür muss lediglich ein neuer Button mit passenden Werten hinzugefügt werden.

...
<script>
  function LoxonePulse(LoxoneLabel){
  var label = LoxoneLabel;
  $.ajax({
          url: "loxone.php?label=" + label,
          type: "POST"
  });
      }
 </script>
...

In der loxone.php wird dann die Variable mit cURL an den Loxone Webservice übergeben. Wichtig hierbei ist das nur ein Impuls an das entsprechende Objekt gesendet wird. Dies wird durch pulse am Ende des Aufrufs erreicht. Man könnte mit ein wenig Umbau z. B. auch Werte senden.

...
$label = $_GET["label"];

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, "http://$Username:$Password@$Miniserver/dev/sps/io/$label/pulse");
curl_setopt($ch, CURLOPT_HEADER, false);

// grab URL and pass it to the browser
curl_exec($ch);

// close cURL resource, and free up system resources
curl_close($ch);
...

2 thoughts to “Visualisierung – Teil 4 (Ajax Set Button)”

  1. Guten Morgen Stefan,

    ich habe mich nun auch endlich mal der Kombi raspberry-pi und loxone gewidmet.
    Raspberry-Pi habe ich aufgesetzt, Apache und PHP7 installiert und alles getestet. Läuft soweit alles…

    Nun habe ich versucht auf Grund deiner Visu-Vorlagen auch eine php-Datei zu erstellen auf der ich einen Temperaturwert und einen Lichtschalter einbinde.

    Allerdings zeigt es mir weder den Tempwert an noch kann ich die Leuchte schalten. Könntest du mir hier vielleicht auf die Sprünge helfen und findest eventuell meinen Fehler?

    Die „loxone-set.php“ ist bei mir unverändert:

    ebenso die „config.php“ mit den MS-Daten.

    Die Daten „visu.php“ soll den Button und den Tempwert darstellen.
    Die Datei wird dargestellt und auch der Button angezeigt.

    Zum Schalten habe ich die UUID von dem Licht genommen.
    Wenn ich nun den Befehl
    „http://$Username:$Password@$Miniserver/dev/sps/io/UUID/pulse“ in die Adressleiste eingebe schaltet das Licht – allerdings eben nicht über den Button in der Webpage.

    Erkennst du irgendwo meinen Fehler?
    LG Markus

Schreibe einen Kommentar

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

*

code