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);
...