Monatsrückblick Januar/Februar 2026 ist online!

[Matthes]

Hallo Zusammen,

seit ca. 6 Monaten nutze ich ioBroker und bin begeistert.
Meine Visualisierung mache ich mit ioBroker VIS auf Smartphone.
Vieles habe ich schon durch mitlesen gelernt und umgesetzt.

Jetzt stoße ich aber an meine Grenzen. und erbitte Eure Hilfe.

Ich habe 2 Widgets "Basic-String (unescaped)" unter einander angeordnet.
Das erste zeigt die HM-Geräte mit leeren Batterien, das zweite aktuell offene Fenster. Zur Anzeige werden jeweils Systemvariablen aus der CCU genutzt, die per Script gefüllt werden. Das klappt alles sehr gut.

Beim ersten Widget habe ich im Bereich "css Allgemein" eingegeben:
left: 110px
top: 420px
width: 290px

Beim zweiten Widget habe ich im Bereich "css Allgemein" eingegeben:
left: 110px
top: 550px
width: 290px

Wenn nun z.B. ein weiteres Gerät die Batterie leer hat, verlängert sich der Ausgabetext des oberen Widgets um eine Zeile. Die Höhe des Widgets wächst.
Dadurch werden die letzte Zeile des oberen und die erste Zeile des unteren Widgets ineinander dargestellt.

Ich suche nun die Möglichkeit, den Wert "top" des zweiten Widgets variabel von der Höhe des erste Widgets zu steuern.

Also bei "top" im zweiten Widget nicht statisch "550px" sondern so:
top: "{Höhe des ersten Widgets} + 420px+100px"
oder so ähnlich.
=> 420 ist "top" des ersten Widgets und "100" der gewünschte Abstand der Widgets untereinander.

Damit sollen die beiden Widgets immer mit gleichen Abstand untereinander dargestellt werden, egal wieviel Text bzw. wieviel Zeilen die Widgets enthalten.

Gibt es dazu eine Möglichkeit?

Liebe Grüße aus dem Sauerland
Matthes

[Stabilostick]

Nachdem Du je einen String pro Widget hast... : Warum hängst Du nicht die beiden Strings mit einem Zeilenumbruch aneinander und stellst das in einem Widget dar?

[liv-in-sky]

@Matthes

vielleicht hilft das - nennt sich binding

hier eintragen:

{wert:controll-own.0.AAATEST.TestZahlPx;wert >200 ? wert+"px":: "100px"}

bedeutet :
wert ist der datenpunkt controll-own.0.AAATEST.TestZahlPx
wenn wert größer 200 dann benutze wert wenn nicht benutze 100

kann in jeden wert verwendet werden

anderes beispiel:

• in css klasse feld eingetragen (anime ist in css definiert)
  {val:javascript.0.CountdownGelberSack.Termin.Rest.Tage; val<=1? "anime": val>=2? "": ""} ->object dreht sich wenn val kleiner 1
  val: xxx.xxx.xxx; val = ..? : ... : ...
  wenn val gleich ... ist oder wenn val ... ist sonst ....

auf dem bild siehst du was passiert, wenn ich den datenpunkt (controll-own.0.AAATEST.TestZahlPx) ändere:

• von 100 auf 201 auf 300 auf 400 auf 50
  

[Matthes]

Hallo liv-in_sky,

Der Ansatz ist schon gut (glaube ich) - binding ist wohl das Thema.

Aber Leider hilft mir das Beispiel nicht wirklich.
Wenn ich es richtig verstehe, wird bei Deinem Beispiel auf den Datenpunkt der HM-Variable gebunden. Ich brauche aber die Höhe eines andern (des ersten) Widgets, um daran das zweite Widget auszurichten.

Wenn ich nach Deinem Beispiel vorgehe, kann ich auf den Inhalt der CCU-Variable zugreifen, aber nicht auf das Widget, welches die CCU-Variable darstellt.

Also hiermit:

kann ich den Inhalt der Variable darstellen:

aber nicht die Höhe des Widgets in px. Das ist aber, was ich brauche.

Konkret
Das Widget "w00454" beginnt bei "top" 420px
Das Widget "w00460" soll beginnen bei "top des Widget w00454 plus höhe des Widget w00454 plus 100" in px.

Also wenn das Widget "w00454" eine Höhe von 500px hat, soll das Widget "w00460" als Wert für "top" haben
420px + 500px + 100px = 1020px
Dafür hoffe ich, gibt es eine Formel, die ich in "top" des Widget "w00460" eingeben kann.

Ich hoffe, damit ist die Fragen noch etwas klarer formuliert.

Danke schon mal für eure Hilfe.

Grüße aus dem Sauerland.
Matthes

[liv-in-sky]

@Matthes das weiß ich nicht, wie das geht - vielleicht meldet sich noch jemand, der sich besser auskennt

wenn es keine einfache lösung gibt, könnte man das erste widget anhand seiner länge in einem script berechnen und anzeigen - dann weißt du denn wert - anschließend in abhängigkeit des ersten das zweite berechnen - beide werte dann mit binding angeben

ich würde dazu ein blockly oder javascript nutzen und die werte in datenpunkte schreiben - es gibt aber auch in der vis einen tab zu jedem widget, wo scripte drüber steht - wie man da drin etwas macht, weiß ich nicht - wenn man das widget exportiert stehen die werte drin - ob man die ansprechen kann ?

[Matthes]

@liv-in-sky Vielen Dank für Deine Rückmeldung.
Dann warte ich mal, ob sich noch jemands anderes meldet, der helfen kann.

Evtl. ist ja auch mein Ansatz ganz falsch und es gibt andere Möglichkeiten zur variablen Platzierung von Objekten in VIS

Mal sehen, was noch kommt.

Liebe Grüße aus dem Sauerland.
Matthes

[Stabilostick]

Nachdem Du je einen String pro Widget hast... : Warum hängst Du nicht die beiden Strings mit einem Zeilenumbruch aneinander und stellst das in einem Widget dar?

[Matthes]

@Stabilostick
Danke, das ist die Lösung!
Manchmal sieht man den Wald vor lauter Bäumen nicht:-)
so habe ich es nun gemacht:

und das Ergebis ist, wie ich es haben wollte.

[Stabilostick]

@Matthes

Es war mir eine Freude. 🤗