Monatsrückblick Januar/Februar 2026 ist online!

[weidlix]

Hallo,

ich brauche mal euren Ratschlag. Ich habe folgende Visualisierung:

Würde jetzt gerne einen Insichtbaren Button über die verschiedenen Bereiche Legen um beim Klick Detailinfos anzuzeigen.
In etwa so:

Das funktioniert statisch auch schoin einigermaßen. Aber eigentlich würde ich das gerne so umsetzen dass ich nur eine View baue mit 4 Diagramcontainern und die jeweiligen Links dynamisch belegt.
Also z.B. beim Link auf Bad Temperatur schreibe ich irgendwie die 4 Flot Links in 4 States und die View soll dann diese Links benutzen. Beim Klick auf einen anderen Bereich schreibe ich 4 andere Links in den State aber rufe die gleiche View nur mit andern Links auf.

Kann das funktionieren? Ich glaub ein iFrame kann sich den Link aus einem State holen. Aber gibt es auch einen Button der gleichzeitig einen State schreiben und die View wechseln kann? Bzw. kann ich das irgendwie über ein Skript steuern das checkt von welchem Button ich komme, die entsprechenden Links setzt und dann in eine andere View springt?

[Homoran]

@weidlix sagte in VIS Dynamisch Flot Diagramme einblenden:

Aber gibt es auch einen Button der gleichzeitig einen State schreiben und die View wechseln kann?

nicht direkt, aber:

@weidlix sagte in VIS Dynamisch Flot Diagramme einblenden:

kann ich das irgendwie über ein Skript steuern

Ja, du triggerst auf den State mit der URL, wenn sich die Ändert

[weidlix]

@Homoran said in VIS Dynamisch Flot Diagramme einblenden:

Ja, du triggerst auf den State mit der URL, wenn sich die Ändert

Kann dir leider noch nicht so folgen. Welchen URL State meinst du? Der von der aktuellen VIS View? Wenn ja wo finde ich den? Ich glaube du meinst was anderes. Es gibt ja nicht den einen aktuellen VIS view. Kann ja sein das mehrere Clients auf VIS zugreifen.

[Homoran]

@weidlix sagte in VIS Dynamisch Flot Diagramme einblenden:

Welchen URL State meinst du?

Hab ich dich richtig verstanden, dass du die FLOT-Urls in einen Datenpunkt schreiben willst?

[weidlix]

@Homoran said in VIS Dynamisch Flot Diagramme einblenden:

Hab ich dich richtig verstanden, dass du die FLOT-Urls in einen Datenpunkt schreiben willst?

Ja hast Du richtig verstanden. Allerdings muss ich beim Button Click 2 Actions in folgender Reihenfolge triggern:

1. Schreibe die entsprechenden URLs in die Datenpunkte
2. Rufe die View auf die die URLs abgreift und die Flot Diagramme anzeigt

[Homoran]

@weidlix
Also nicht ganz so einfach.

Der Button (die Buttons???) lösen (irgendetwas) aus.
Dadurch wird das Skript getriggert, Dann kann die Reihenfolge eingehalten werden

(da war ein längerer Thread zu automatische View umschalten)

[weidlix]

@Homoran

Ok dann schau ich da mal weiter. Ich versuche mal mit den Buttons einen Datanpunkt zu schreiben auf dem ein Trigger sitzt der die URLs entsprechend setzt und anschließen versuche ich auf die entsprechende View zu switchen.
Das müsste damit gehen oder?

setState('vis.0.control.data', myNewView);
setState('vis.0.control.command', 'changeView');

[Homoran]

@weidlix
ich bin kein Skripter.

Ich würde es mit try and error folgendermaßen versuchen:

So viele Datenpunkte anlegen, wie es Charts geben soll. + einen weiteren (active_chart)
sowie so viele Datenpunkte typ Logik wie es Buttons gibt.
Im View EIN iframe -widget (gesteuert über Sichtbarkeit)

Beim Drücken auf Button1 erfolgt die Umschaltung resp. Aktualisierung des States1
Diese Aktualisierung triggert jetzt dass die URL von Chart1 in active_Chart geschrieben wird.
Dieses aktiviert über die Sichtbarkeit den Chart.

Irgendwie ;-) muss dann noch der State active_Chart hinterher geleert werden

[weidlix]

Ich bin endlich mal dazu gekommen das zu testen.
Nochmal zur Problemstellung ... Ich habe ca 10 Xiaomi Temperatursensoren und wollte für diese eine Page mit Diagrammen erstellen auf der dynamisch die entsprechenden Diagramme der Sensoren eingeblendet werden können. Wollte also keine 10 Pages bauen sondern eine Dynamische.
Hab das so umgesetzt dass ich erst mal im VIS über meine Sensoren einen unsichtbaren Button gelegt habe. Wenn dieser angeclickt wird, wird ein State mit der ID des Zigbee Sensors geschrieben.
Nachfolgend reagiert ein kleines Script auf den State und erstellt einsprechende Flot Diagramme:

on("javascript.0.VIS.Flot_Temperaturdiagramme.DiagramZigbeeSensor", function (obj) {
	let value = obj.newState.val;

    if(value !== ''){
      log(value);
      let searchPattern = "##ZIGBEE-ID##";

      let templateTag = getState("javascript.0.VIS.Flot_Temperaturdiagramme.Template_Tag").val
      let templateWoche = getState("javascript.0.VIS.Flot_Temperaturdiagramme.Template_Woche").val
      let templateMonat = getState("javascript.0.VIS.Flot_Temperaturdiagramme.Template_Monat").val

      setState("javascript.0.VIS.Flot_Temperaturdiagramme.Aktuell_Tag", templateTag.split(searchPattern).join(value));
      setState("javascript.0.VIS.Flot_Temperaturdiagramme.Aktuell_Woche", templateWoche.split(searchPattern).join(value));
      setState("javascript.0.VIS.Flot_Temperaturdiagramme.Aktuell_Monat", templateMonat.split(searchPattern).join(value));

      setState("vis.0.control.command", '{"instance": "FFFFFFFF", "command": "changeView", "data": "main/TemperaturDiagrams"}');

      //setState('vis.0.control.data', "main/TemperaturDiagrams");
      //setState('vis.0.control.command', 'changeView');
      setState("javascript.0.VIS.Flot_Temperaturdiagramme.DiagramZigbeeSensor", '');
    }
});

Ist so gebaut dass ich einfach Template Diagramme erstellt habe und einfach die Datenpunkt ID austausche. Wollte hier auch nicht 30 Diagramme händisch erstellen.
Wichtig ist noch zu erwähnen dass bei der Weiterleitung auf die Diagram View via "change View" die instanz FFFFFFFF mitgegeben wird, was so viel bedeutet wie dass alle VIS instanzen auf diese View weitergeleitet werden. Ohne das hatte es nämlich auf meinem Tablet nicht funktioniert.

Abschließend mal noch die 2 Pages über die ich gesprochen habe:

[OliverIO]

@weidlix du kannst dir ja das mal anschauen.
https://forum.iobroker.net/topic/28598/dashboard-für-temp-hum-mit-flot-im-grafana-stil

Bei mir läuft mehr oder weniger alles in vis im Browser nur die Datenabfrage aus der Mysql-DB läuft über iobroker.

wie geschrieben muss man sich allerdings schon ein wenig auskennen.
ich habe für die Detailsicht einen jquery-Dialog verwendet und in diesem wird dann dynamisch das jeweilige Detaildiagramm erzeugt.
Ich verwende flot allerdings direkt und nicht über einen Link zum flot-adapter