[gelöst] Widget zur Anzeige einer Webseite
-
Hallo,
ich versuche mich gerade in Javascript und will mir eine User-freundliche FLOT-Selektion bauen.
Das Script kann aus vorgefertigten Datenpunkte wählen und den Zeitraum bestimmen - mehr nicht.
Das Ergebnis schreibe ich ein eine Variable als HTML-Link.
Diesen Link will ich nun aufrufen und anzeigen lassen. Aber irgendwie finde ich dafür kein Widget.
Alle die ich gesehen haben könne nur feste Texte (über einen Editor erfasst) anzeigen.
Ich brauche aber eines, dass die HTML-Zeile aus einem Objekt holt.
Habe ich da was übersehen?
tnx.
-
Hallo,
ich versuche mich gerade in Javascript und will mir eine User-freundliche FLOT-Selektion bauen.
Das Script kann aus vorgefertigten Datenpunkte wählen und den Zeitraum bestimmen - mehr nicht.
Das Ergebnis schreibe ich ein eine Variable als HTML-Link.
Diesen Link will ich nun aufrufen und anzeigen lassen. Aber irgendwie finde ich dafür kein Widget.
Alle die ich gesehen haben könne nur feste Texte (über einen Editor erfasst) anzeigen.
Ich brauche aber eines, dass die HTML-Zeile aus einem Objekt holt.
Habe ich da was übersehen?
tnx. `
anzeigen und aufrufen sowie in einer iFrame oder forward/redirect ?
~Dutch
-
Danke für die schnelle Antwort.
Eigentlich so wie das Widget "basic - iFrame", nur halt die "Quelle" aus der Variablen "javascript.0.dyn_Diagramm.tempHTML".
-
Kann man sowas vielleicht über ein Skript machen? Z.B. als Skript im Widget - das habe ich noch nicht gemacht…
-
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]
