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.

Diagramm im Blockeditor

Webseiten-Element: HTML-Gerüst festlegen

Um das Diagramm darzustellen, wird für dieses Beispiel die C3.js-Bibliothek verwendet: https://c3js.org/
Zunächst müssen die externen JavaScript-Dateien für C3.js und D3.js eingebunden werden. Der Server-Pfad wird in diesem Beispiel über <base href="" /> festgelegt. Es kann aber auch der komplette Pfad eintragen werden, also z.B. <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.9/c3.min.js"></script>.

Das nötige CSS von C3.js konnten wir leider nicht wie das JavaScript extern gehostet finden, daher haben wir es direkt eingefügt.

HTML-Geruest fuer Diagramm festlegen
<!DOCTYPE html><html><head><meta charset="utf-8" />
<base href="https://cdnjs.cloudflare.com/ajax/libs/" />
<style>html{background:#FFF;color:#000;font-family:sans-serif;padding:10px;}</style>
<script src="c3/0.6.9/c3.min.js"></script>
<script src="d3/5.7.0/d3.min.js"></script>
<style>
.c3 svg{font:10px sans-serif;-webkit-tap-highlight-color:transparent}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc rect{stroke:#fff;stroke-width:1}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:grey;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:1;fill-opacity:.75}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-item-hidden{opacity:.15}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-title{font:14px sans-serif}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #ccc}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#fff}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:#fff}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max{fill:#777}.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000}.c3-chart-arc.c3-target g path{opacity:1}.c3-chart-arc.c3-target.c3-focused g path{opacity:1}.c3-drag-zoom.enabled{pointer-events:all!important;visibility:visible}.c3-drag-zoom.disabled{pointer-events:none!important;visibility:hidden}.c3-drag-zoom .extent{fill-opacity:.1}
</style>
</head><body>

<h1 style="border-bottom: 1px dotted black; font-size: 12px;">Diagramm</h1>

<div id="chart"></div>

<script>
var daten = '%neo_state%';

if (daten[daten.length - 1] === ';') {
    daten = daten.substr(0, daten.length - 1);
}

var col1 = daten.split(';');
col1.splice(0, 0, 'Messwerte');

var chart = c3.generate({
    bindto: '#chart',
    data: { columns: [col1] }
});
</script>

</body></html>

Das fertige Diagramm im Webseiten-Element sieht dann in der CREATOR-Vorschau z. B. so aus:

Diagramm Vorschau

WICHTIG: Sie benötigen eine Internetverbindung, damit das Webseiten-Element befüllt werden kann.

Tags:

Ads

You May Also Like

Gardena Mähroboter

Mach Deinen Garten smart! Mit GARDENA smart systems und mediola

Macht euren Garten smart! Wir zeigen euch spannende Automatisierungen mit den GARDENA Gartenprodukten.

CREATOR Version 2.8.5

AIO CREATOR NEO Release 2.8.5 – HTTP-Status-Request & viele neu unterstützte Geräte

Die aktuelle CREATOR Version 2.5.8 bietet neu unterstütze Geräte und als besonderes Feature die ...

morning

Silent Motion Rollläden und IQONTROL NEO – Flüsterleise und doppelt smart

Sie wären das Highlight der diesjährigen Frühjahrsmessen gewesen: die super leisen Rollläden der Hersteller ...

mediola access point

Mit dem AIO CREATOR NEO und dem Homematic IP Access Point die ganze Welt des Smart Home steuern

Der AIO CREATOR NEO und der Homematic IP Access Point formen jetzt ein unschlagbares ...

Fensterfront

Smarte Fenstersysteme mit IQONTROL NEO – 3 Beispiele für effiziente Fensterautomation

Luftqualität, Wohlbefinden, Energieeffizienz und Sicherheit - all das lässt sich mit einem automatisierten Smart ...