Visualisierung – Teil 3 (Ajax)

Was im Teil 2 noch gefehlt hat, ist ein automatischer Refresh der Werte und nicht der ganzen Seite. Da ich mit den von Loxone verwendeten Websockets noch nicht weiter gekommen bin, habe ich mich erst mal mit dem Thema Ajax (also Asynchronous JavaScript and XML und nicht Putzmittel) beschäftigt. Hier wird zwar auch JavaScript genutzt aber dafür findet man zu Ajax etwas mehr im Internet was mir den Einstieg sehr erleichtert hat. Ein beim Refresh wechselndes Hintergrundbild oder sich verschiebende und/oder wechselnde Symbole in der Visualisierung sind aber (noch) nicht möglich. Das liegt aber aktuell noch an meiner Fähigkeit JavaScript (Ajax), CSS und PHP unter einen Hut zu bekommen … jedenfalls hoffe ich das.

Für mich ist es noch nicht die richtige Lösung und bleibe deshalb erst mal bei einem einfachen Refresh der Seite. Ich habe die Visualisierung der KWL trotzdem als Beispiel auf Ajax umgebaut.

Vorweg: Wer wissen will wie Ajax funktioniert, sollte nicht mich, sondern eine Suchmaschine des Vertrauens befragen. Das Beispiel liegt wieder im Download Bereich.

Kommen wir jetzt zu den Aufgaben der drei Skripte. Fangen wir mit dem einfachsten an. Die kwl_config.php ist wieder die Konfigurationsdatei in der die Verbindungsdaten zur Loxone etc. gespeichert werden. Durch die loxone.php werden die Daten vom Loxone Miniserver und/oder anderer Datenquellen gesammelt und im JSON Format ausgegeben. Innerhalb der index.php genauer gesagt im Ajax Abschnitt wird dann die loxone.php aufgerufen und die JSON Ausgabe geparst.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
function update(){
$.ajax({
url: "loxone.php",
type: "POST",
success: function(data)
{
var response = $.parseJSON(data);

Als nächstes werden dann die Werte der entsprechenden ID zugeordnet.

document.getElementById('date').innerHTML = response.date;
document.getElementById('aussen').innerHTML = response.aussen;
...

Dann wird das Script bzw. die Function ausgeführt und ein Intervall gesetzt, in dem die Daten neu geladen werden sollen.

update();
setInterval(update, 3000);

Der CSS Abschnitt ist nahezu identisch nur die div ID muss eindeutig sein. Durch Ajax werden jetzt die Texte wie DATE und AUSSEN durch die geparsten Informationen ersetzt.

<div id="a_date">
<p id="date">DATE</p>
</div>

<div id="a_aussen">
<p id="aussen">AUSSEN</p>
</div>

Wenn jetzt die index.php geöffnet wird, sollten die Werte alle 3 Sekunden durch Ajax aktualisiert werden.

Bemerkung: Es ist scheinbar noch irgendwo ein Fehler, denn normalerweise sollte sich die Werte gleich beim ersten Aufruf aktualisieren. Sobald ich den Fehler gefunden habe passe ich den Artikel und den Download an.

In Teil 4 (schon in Vorbereitung) werde ich mich dann um die Kommunikation in die andere Richtung kümmern damit auch direkt in der Visualisierung geschaltet werden kann. Zusätzlich bin ich am überlegen ob es nicht Sinn macht, dass der Loxone Miniserver bei Änderung eines Wertes diesen einfach in eine SQLite DB schreibt. So würden die HTTP Abfragen wegfallen und es könnte der Ajax Refresh auch auf 1 Sekunde gestellt werden. Ich weiß nur nicht ob das die DB mitmacht 😉 . Dazu aber später mehr …

Ein Gedanke zu „Visualisierung – Teil 3 (Ajax)“

Schreibe einen Kommentar

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