CREATOR NEO Webseiten-Element: Gerätestatus als Diagramm visualisieren

Mit dem in AIO CREATOR NEO Version 2.5.1 veröffentlichten Webseiten-Element können eine Vielzahl unterschiedlicher Gestaltungsmöglichkeiten für einen Status realisiert werden.

Hier erfahren Sie, wie Sie mit Hilfe des Webseiten-Elements Gerätestatus als Diagramm visualisieren können.

Voraussetzungen

  • AIO CREATOR NEO 2.5.1 oder höher
  • AIO REMOTE NEO 1.62 oder höher
  • NEO SERVER

Systemvariable anlegen und dem Webseiten-Element zuweisen

Auf dem NEO SERVER wird eine Systemvariable namens Diagramm-Daten vom Typ String angelegt.

Diese wird dem Webseiten-Element als Status zugewiesen.

Diagramm-Status

Automation Manager: Skripteditor

Im Skripteditor wird anschließend folgendes Skript angelegt:

Das Diagramm im Skripteditor
var values = '';
var maxItems = 30;


var shortenItems = function(status) {
    var items = String(status).split(';');
    var numItems = items.length;

    if (numItems > maxItems) {
        items = items.slice(numItems - maxItems, numItems);
    }

    return items.join(';');
};


var getCurrentTemp = function(cb) {
    getDeviceStatus(
        'Wohnzimmer',
        'Thermostat 1',
        { value: 'currentTemp' },

        function(err, status) {
            err && console.error(err.message);

            if (err || !status) {
                console.error('Temperatur konnte nicht abgefragt werden.');
                return;
            }

            cb(status);
        }
    );
}


var setDiagrammData = function(values) {
    executeDeviceCommand(
        'NEO SERVER',
        'Diagramm-Daten',
        { value: 'setValue', ext: values },

        function(err) {
            err && console.error(err.message);

            if (!err) {
                console.log('Diagramm-Daten wurden aktualisiert.');
            }
        }
    );
};


getDeviceStatus(
    'NEO SERVER',
    'Diagramm-Daten',
    { value: 'state' },

    function(err, status) {
        err && console.error(err.message);

        if (err) {
            console.error('Diagramm-Systemvariable konnte nicht abgefragt werden.');
            return;
        }

        values = shortenItems(status);

        getCurrentTemp(function(temp) {
            values += temp + ';';
            setDiagrammData(values);
        });
    }
);

Dieses Skript führt Folgendes aus:

  • Die Diagramm-Systemvariable wird abgefragt.
  • Die Anzahl der Werte wird auf 30 reduziert, damit die Variable im Laufe der Zeit nicht immer größer wird.
  • Ein neuer Wert wird abgefragt. In diesem Beispiel handelt es sich um die aktuelle Temperatur eines Thermostats.
  • Die erhaltene Temperatur wird an die Werte angehängt. Das Semikolon dient hierbei als Trennzeichen zwischen den Werten.
  • Die Werte werden wieder in die Diagramm-Systemvariable geschrieben.

Damit das Skript mit Ihren Geräten funktioniert, müssen Sie folgende Bereiche anpassen:

Code für Diagramm-Visualisierung

Raum, Gerätename und Status-Bezeichnung Ihres Gerätes können Sie ganz einfach herausfinden, indem im Skripteditor ein neues Skript anlegen und  den Status für das entsprechende Gerät über das Code-Snippet für Statusabfragen einfügen. Hier können Sie die benötigten Stellen nun einfach für Ihr Diagramm-Skript übernehmen.

Status des Gerätes im Code

Automation Manager: Blockeditor

Als nächstes wird ein neuer Task angelegt, der als Auslöser einen Intervall-Block verwendet und so z.B. alle 30 Minuten das Skript ausführt.