Hallo,
inzwischen habe ich das Problem gelöst:
Ich verwende eine einfaches HTML-Widget und <iframe>. Hier das Widget mit den Daten.<br/><br /><br /><CODE><s><pre></s>[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"html":"<iframe src={javascript.0.dyn_Diagramm.tempHTML} width="890" height="490"></iframe>"},"style":{"left":"127px","top":"34px","width":"890px","height":"490px"},"widgetSet":"basic"}]
Für alle die es selber mal probieren wollen hier mein Skript:
`/* System dynamisches Diagramm
erzeugt ein dynamisches Diagramm für Temperaturen
Stand: 2017-06-05 15:43 Uhr (hf)
*********************************************************************************
Variablen, die manuell angelegt werden müssen:
javascript.0.dyn_Diagramm.tempAUS - Datenpunkt - Typ: Boolean
javascript.0.dyn_Diagramm.tempAZI - Datenpunkt - Typ: Boolean
javascript.0.dyn_Diagramm.tempBAD - Datenpunkt - Typ: Boolean
javascript.0.dyn_Diagramm.tempFLK - Datenpunkt - Typ: Boolean
javascript.0.dyn_Diagramm.tempGAR - Datenpunkt - Typ: Boolean
javascript.0.dyn_Diagramm.tempKZN - Datenpunkt - Typ: Boolean
javascript.0.dyn_Diagramm.tempKZS - Datenpunkt - Typ: Boolean
javascript.0.dyn_Diagramm.tempWZI - Datenpunkt - Typ: Boolean
javascript.0.dyn_Diagramm.tempHTML - Datenpunkt - Typ: String
javascript.0.dyn_Diagramm.tempZR' - Datenpunkt - Typ: Werteliste
Werte: 720:12 Std.;
1440:1 Tage;
4320:3 Tage;
10080:7 Tage;
20160:14 Tage;
1m:1 Monat;
3m:3 Monate;
1y:1 Jahr
*********************************************************************************/
const util = require('util'); // Modul util für debugging :-)
var html_part1 = "https://iobroker/flot/index.html?"; // Name der Webseite
//var html_part1 = '/flot/index.html?'; // alternativ Aufruf ohne Namen..
var points = [];
// Raum Variable Instanz Farbe Name
points[0] = ['AUS', 'hm-rega.0.xxxx', 'sql.0', 'FF0000', 'Au%C3%9Fen'];
points[1] = ['AZI', 'hm-rega.0.xxxx', 'sql.0', '00FF00', 'AZi'];
points[2] = ['BAD', 'hm-rega.0.xxxx', 'sql.0', 'FF00FF', 'Bad'];
points[3] = ['GAR', 'hm-rega.0.xxxx', 'sql.0', 'FFFF00', 'Garage'];
points[4] = ['FLK', 'hm-rega.0.xxxx', 'sql.0', 'FF00FF', 'Flur+KG'];
points[5] = ['KZN', 'hm-rega.0.xxxx', 'sql.0', '00FFFF', 'KiZi+Nord'];
points[6] = ['KZS', 'hm-rega.0.xxxx', 'sql.0', '800000', 'KiZi+S%C3%BCd'];
points[7] = ['WZI', 'hm-rega.0.xxxx', 'sql.0', '008000', 'WZI'];
//ACHTUNG: Der Name muss den letzten 3 Buchstaben in der Variablen entsprechen!!!
//log(util.inspect(points, { showHidden: true, depth: null }));
var html_line = ""; // Zeile für den HTML-Aufrauf des Diagramms
var erster = true; // Schalter ob erster Datenpunkt oder nicht
var i, j = 0; // Zähler
var flag = true; // Flag für gesetzt oder nicht
var raum = ""; // Variable für den Raumnamen
var range = ""; // Variable für den Anzeige-Zeitraum
// Hauptprogramm beginnt hier...
function createDiagramm(obj) {
if (obj) { // zuerst den Auslöser loggen
log('Auslösender Aktor: ' + obj.id + ': ' + obj.newState.val); // Info im Log, welcher Zustand sich geändert hat
} else {
log('manuell ausgelöst...'); // sonst manuell aufgerufen.
}
html_line = html_part1; // HTML-Zeile löschen und vorbereiten
erster = true; // Schalter für ersten Datenpunkt initialisieren
j = 0; // Zähler für Datenreigbe initialisieren
for (i=0 ; i < 8; i++) {
raum = points[i][0]; // Raumnamen holen
flag = getState("javascript.0.dyn_Diagramm.temp" + raum).val; // Flag für Datenreihe holen
log("Raum: " + raum + " - " + flag); // Informationen im Log speichern
if (flag) { // wenn Flag an, dann Datenreihe holen
if (!erster) {
html_line += '&'; // & bei allen weiteren Datenpunkten einfügen
}
html_line += 'l%5B' + j + '%5D%5Bid%5D=' + points[i][1]; // ID
html_line += '&l%5B' + j + '%5D%5Binstance%5D=' + points[i][2]; // Instanz
html_line += '&l%5B' + j + '%5D%5Boffset%5D=0'; // Offset
html_line += '&l%5B' + j + '%5D%5Baggregate%5D=minmax'; // Art
html_line += '&l%5B' + j + '%5D%5Bcolor%5D=%23' + points[i][3]; // Farbe
html_line += '&l%5B' + j + '%5D%5Bthickness%5D=3'; // Thickness
html_line += '&l%5B' + j + '%5D%5Bshadowsize%5D=3'; // ShadowSize
html_line += '&l%5B' + j + '%5D%5Bname%5D=' + points[i][4]; // Name
if (erster) { // Nur der erste Datenpunkt mit Achsen
html_line += '&l%5B' + j + '%5D%5Byaxe%5D=left'; // Y-Achse
html_line += '&l%5B' + j + '%5D%5Bxaxe%5D=bottom'; // X-Achse
erster = false; // ab jetzt kommen die Folge-Punkte
} else { // Folge-Datenpunkte ohne Achsen
html_line += '&l%5B' + j + '%5D%5Byaxe%5D=off'; // Y-Achse
html_line += '&l%5B' + j + '%5D%5Bxaxe%5D=off'; // X-Achse
}
html_line += '&l%5B' + j + '%5D%5BcommonYAxis%5D=1'; // gemeinsame Y-Achse!!!
html_line += '&l%5B' + j + '%5D%5BignoreNull%5D=true'; // NULL-Werte ignorieren
html_line += '&l%5B' + j + '%5D%5BafterComma%5D=1'; // Nachkomma-Stellen
html_line += '&l%5B' + j + '%5D%5Bunit%5D=%C2%B0C'; // Maßeinheit
++j; // Datenpunkt hochzählen...
}
}
range = getState("javascript.0.dyn_Diagramm.tempZR").val; // Zeitraum auslesen
log("Zeitraum: " + range + " gewählt."); // und ins Log schreiben
html_line += '&timeType=relative'; // Zeit-Typ
html_line += '&relativeEnd=now'; // Zeit-Ende
html_line += '&range=' + range; // Zeitraum
html_line += '&aggregateType=count'; // Aggregation: Schritttyp
html_line += '&aggregateSpan=300'; // Aggregation: Anzahl
html_line += '&bg=7'; // Hintergrund
html_line += '&legend=nw'; // Legende anzeigen oben, links
html_line += '&legColumns=2'; // Lgende Anzahl Spalten
html_line += '&hoverDetail=true'; // Hover Details
html_line += '&timeFormat=%25d.%25m.%25y'; // Zeitformat
html_line += '&useComma=false'; // Benutze Komma
html_line += '&zoom=true'; // aktiviere Zoom
html_line += '&noedit=true'; // kein Edit-Knopf
html_line += '&animation=0'; // Animation aus
setState('javascript.0.dyn_Diagramm.tempHTML', html_line); // HTML-Zeile zurück schreiben
}
on('javascript.0.dyn_Diagramm.tempAUS', function (obj) { createDiagramm(obj); }); // Aufruf
on('javascript.0.dyn_Diagramm.tempAZI', function (obj) { createDiagramm(obj); }); // wenn
on('javascript.0.dyn_Diagramm.tempBAD', function (obj) { createDiagramm(obj); }); // eine
on('javascript.0.dyn_Diagramm.tempFLK', function (obj) { createDiagramm(obj); }); // der
on('javascript.0.dyn_Diagramm.tempGAR', function (obj) { createDiagramm(obj); }); // Variablen
on('javascript.0.dyn_Diagramm.tempKZN', function (obj) { createDiagramm(obj); }); // geändert
on('javascript.0.dyn_Diagramm.tempKZS', function (obj) { createDiagramm(obj); }); // wurde.
on('javascript.0.dyn_Diagramm.tempWZI', function (obj) { createDiagramm(obj); }); // Dann
on('javascript.0.dyn_Diagramm.tempZR', function (obj) { createDiagramm(obj); }); // Neuberechnung...
// javascript.0.dyn_Diagramm.tempHTML gehört hier nicht rein, sonst gibt es eine Endlos-Schleife :-)
createDiagramm(); // zu Beginn erst mal starten...`
Ich habe es versucht übersichtlich und nicht effizient zu machen und habe es hoffentlich auch ausreichend kommentiert :-)
Da logging läuft bei mir über Variablen in der Homematic.
Zur Steuerung habe ich "Bool Checkbox" für Auswahl der Elemente und eine "Select ValueList" für die Zeit genommen, die das jeweils die Variablen ändern.
Wenn noch Fragen sind einfach melden...[/i][/i][/i][/i][/i]
