iFrame Widget mit HTML/js - Datenaustausch zu iob objekten

[WillyIobrok]

Hallo,
ich habe eine funktionierende HTML-Seite aus den ioBroker Benutzerdaten in einem iFrame Widget visualisiert.
Jetzt möchte ich, daß bei jeder Änderung des iobroker-objektes "mqtt.0.rot_LP" eine entsprechende Variable in der HTML-Seite nachgezogen wird.

Habe im Moment eine aufwendige Lösung mit Hilfe von ChatGPT geschnitzt:

// Asynchrone Funktion, um den ioBroker Wert SP/LP abzurufen
async function get_LP_ioBroker() {
    try {
        // HTTP-Anfrage an die API senden
        const response = await fetch('http://192.168.27.147:8087/get/mqtt.0.rot_LP');
        const data = await response.json();
        const LP = data.val;
        // Optional: Wert in der Konsole ausgeben
        // console.log('Wert der Variable mqtt.0.rot_LP:', LP);        
        return LP;
    } catch (error) {	// Fehlerbehandlung
        console.error('Fehler beim Abrufen des Wertes:', error);
        return null;	// oder ein anderer Fehlerwert
    }
}
// Aufruf:	

	(async () => {
		LP = await get_LP_ioBroker();
		console.log('Abgerufener Wert:', LP);

	})(); // async ...

Wie kann ich denn das besser machen?

Vor allem stört mich, dass mit meiner Lösung Änderungen am ioBroker Objekt erst übernommen werden, wenn ich in der HTML-Seite etwas starte das den Status aktiv abfrägt.

Gruß

WillyIoBrok

[OliverIO]

@willyiobrok

ist die html seite separat?

ich würde mir in vis eine view bauen
in der dann deine daten, die regelmäßig aus dem iobroker aktualisiert werden sollen, enthalten sind.

diese view würde ich dann per iframe in deiner html seite "einblenden".
dadurch wird der ganze mechanismus bereitgestellt, der vollautomatisch dann die daten aktualisiert ohne das du die html seite neu laden musst.

die daten direkt aus der html seite abzurufen ist leider etwas aufwändiger, da du mehr oder weniger den mechanismus aus vis nachbauen musst (websocket erzeugen, mit iobroker verbinden, datenpunkte abonnieren, dann auf gemeldete ereignisse reagieren, html in deiner webseite aktualisieren mit den gemeldeten daten)

die andere möglichkeit wäre, die daten regelmäßig zu pollen, also automatisch einen reload der seite zu initieren, was aber dann entsprechende last auf den client und den server/iobroker erzeugt.

[WillyIobrok]

@oliverio
hmmm, HTML-Seite separat? kann ich jetzt nicht beurteilen, da kenne ich mich viel zu wenig aus.
Ich vermute ja. Ich kann die webseite auf meinem Windows-PC unter Firefox anschauen (und debuggen):

Die View, in der diese HTML-Seite per iFrame Widget eingebettet ist, sieht dann so aus:

Jetzt möchte ich abhängig von dem inhalt des iobroker-Objekts "SP" (boolean) in der HTML-Karte etwas modifizieren: die Farbe der Linie zwischen dem blauen und dem roten Marker.

Das habe ich mit dem o.g. Code auch geschafft. Aber wenn ich auf "SP" drücke und das Objekt von true <->false umschalte passiert (verständlicherweise) nichts in dem getrennt programmierten HTML/js System.

@OliverIO :

• websocket erzeugen, etc. ... das kriege ich mit meinem rudimentären Grundwissen nicht hin
• regelmässig pollen fällt m.M. wegen der zusätzlichen Rechenlast aus (nur Raspi 4!)

Deshalb kam ich auf die Idee, daß es vielleicht einen Weg über die Systemgrenzen hinweg gibt, über den ich vom ioBroker in's HTML/js System eingreifen kann.

in ioBroker skripten habe ich ja sowas zur Verfügung (und schon erfolgreich benutzt) z.B.

// Trigger bei Wertänderung des Verbrauchs
on("solarlog.0.status.conspac", function(dp) {
   update_solar_p_netz();
});

meine Idee war jetzt "solarlog.0.status.conspac" durch "http://192.168.27.147:8087/mqtt.0.rot_LP" o.Ä. zu ersetzen und das script im HTML/js System laufen zu lassen
oder eben ein ioBroker script zu schreiben das die Info in's HTML/js System pushed

Ihr merkt an meiner Ausdrucksweise, daß ich an dieser Stelle so gut wie keine Ahnung habe ... wenn das nicht geht dann dann sagt's mir bitte und ich lasse es ... ich kann gut mit dem bisher erreichten leben

Bin gespannt auf eure Kommentare, vielen Dank im Voraus

WillyIoBrok

[OliverIO]

so habe ich dich verstanden

ich habe eine funktionierende HTML-Seite aus den ioBroker Benutzerdaten in einem iFrame Widget visualisiert.

@willyiobrok sagte in iFrame Widget mit HTML/js - Datenaustausch zu iob objekten:
@oliverio
hmmm, HTML-Seite separat? kann ich jetzt nicht beurteilen, da kenne ich mich viel zu wenig aus.

und hast du hier ja auch erklärt

Das habe ich mit dem o.g. Code auch geschafft. Aber wenn ich auf "SP" drücke und das Objekt von true <->false umschalte passiert (verständlicherweise) nichts in dem getrennt programmierten HTML/js System.

dann musst du dein aktuelles setting genauer erklären. dann habe ich es noch nicht verstanden.
wenn jemand von einer html-seite spricht, dann verstehe ich da etwas ausserhalb von iobroker
wenn du etwas in iobroker bspw mit vis visualisiert, dann hätte ich das schlüsselwort vis oder view erwartet.

also welche seite, hast du wo eingebunden. welche visualisierung verwendest du?

Gerne kannst du das was du hast exportierte view oder html hier posten, dann kann man sich das besser vorstellen

Deshalb kam ich auf die Idee, daß es vielleicht einen Weg über die Systemgrenzen hinweg gibt, über den ich vom ioBroker in's HTML/js System eingreifen kann.

ja das gibt es
aber halt so wie oben geschrieben

der on befehl im javascript adapter macht das genau so, websocket zum iobroker und dann informiert der aktiv, wenn der javascript adapter was machen soll.

das polling könnte man relativ klein halten indem immer alle paar sekunden die api für den datenpunkt abgefragt und verglichen wird ob sich da etwas geändert hat.

[WillyIobrok]

@oliverio

ok, ich versuch's nochmal mit meinen laienhaften Worten (bin C/C++ Microcontroller-Programmierer, habe nur sehr wenig mit html und js gemacht)

ja, ich habe eine getrennte und unabhängige HTML - Webseite, bestehend aus den beiden Files
"Rotor.html" und "distDir2.js"
Diese Files habe ich mit Hilfe der ioBroker "Dateien"-Funktion auf den ioBroker Raspberry 4 in den Benutzerdaten-Bereich geladen

Zum Anzeigen des Ganzen habe ich über den vis editor ein View gebaut, in dem das Widget iFrame benutzt wird.
Darüberhinaus werden hier noch einige andere ioBroker Objekte mit Hilfe verschiedener Widgets angezeigt.

Wenn ich jetzt in die Weltkarte tippe (mit Maus oder Touchscreen) dann wird ein zweiter Marker gesetzt und zwischen den beiden Markern eine Linie gezogen.
Darüberhinaus wird eine Richtung von Marker1 zu Marker2 errechnet, die an das iobrokersystem zur Weiterverarbeitung übergeben wird (HTML/js System -> ioBroker System):

// Rückmeldung der Ergebnisse an ioBroker ------------------------------------------	
		function reportResult(distance, direction) {

			if (distance!=0) {


				fetch(`http://192.168.27.147:8087/set/0_userdata.0.distance?value = ${encodeURIComponent(distance)}`, {
					method: "GET"
				});


				fetch(`http://192.168.27.147:8087/set/0_userdata.0.direction?value = ${encodeURIComponent(direction)}`, {
					method: "GET"
				})
				;	// muß gelöscht werden, wenn die response Zeilen aktiviert werden ...
				/*
				.then(response => response.json()) // Antwort als JSON parsen
				.then(data => console.log(data)) // Daten verarbeiten
				.catch(error => console.error('Fehler:', error))
				;
				*/
			}

Die Weiterverarbeitung in ioBroker funktioniert in diesem Falle (gefühlt) sofort, alles gut.

Was ich jetzt zusätzlich wollte ist halt die Gegenrichtung (ioBroker System -> HTML/js System), die ich jetzt irgendwie recht kompliziert wegen Timingproblemen (siehe 1.Post) hingekriegt habe.

Das was noch fehlt werde ich wohl oder übel per polling einmal pro ? sekunden realisieren müssen, das sehe ich jetzt auch so - danke für die "Meinungsbildung"

Hoffe, das war jetzt verständlicher...

[OliverIO]

@willyiobrok

ja, danke, viel verständlicher.

probier mal einmal die sekunde und schau auf die systemlast.
ich denke das wird schon gehen.

[WillyIobrok]

@oliverio
Das mit dem Pollen hat prima geklappt!
Danke für die Hilfe!