Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[Gezi70]

Hallo zusammen, ich weiß nicht ob das Thema besser in "Vis" aufgehoben ist oder hier. Aber ich versuche mich in Blockly und in das System einzufitzen.
Ich habe inmeiner Visualisierung einige Punkte erstellt, die Statusse...Staten (?) anzeigen. Diese werden mir -so weit bin ich schon - als Widgets angezeigt. Durch einige Versuche und gute Erklärungen hier im Forum bin ich auch darauf gekommen wie man diese blinken lassen kann.
Nun kam mir der Gedanke, dass wenn das Garagentor offen steht, das Widget mit grünem Rahmen durch eines mit rotem ausgetauscht wird. Jetzt soll aber - und da stehe ich auf dem Schlauch - nach 5 min offenem Tor noch ein Rahmen - Widget, welches pulsiert, angezeigt werden. Ein Blockly, welches das steuert, habe ich bereits zusammengeklickt. Aber welchen Datenpunkt muss ich für ein Widget in der vis ins Blockly eintragen? Geht das überhaupt?

[mickym]

@gezi70 Ich kann Dir nur Anregungen geben, wie ich sowas gemacht habe. Ich habe mich allerdings bei meiner VIS an diesem Projekt angelehnt.

Das ist aber eigentlich egal. Ich habe zur Darstellung der States halt 2 Datenpunkte angelegt.
Im 1. Datenpunkt wird herkömmlich der State dargestellt
im 2. Datenpunkt der Effekt - ich habe den meist vis genannt.

Das hat aber dann mit ccs Styles was zu tun. Da gibts hier sicher einige Spezialisten - ich habe wie gesagt mich an die von dem oben verlinkten Projekt von @Uhula verwendet.

Die verwendeten Widgets sind hier die jqui-container Icons.

Man sieht unter Quelle wird das Bild des Icons eingetragen und mit dem Binding kann man durch ein weiteres Binding den Effekt darstellen . (wie in Deinem Fall statt grünen Rahmen roter Rahmen.

Bei mir erscheint zum Beispiel bei dem gelben Licht ein gelber Rahmen hinter dem Icon.

So sieht dass dann aus. Ich steuere meine Datenpunkte zwar mit Node Red - aber das geht natürlich mit Blockly genauso. Du musst halt nur die Punkte Deiner Bindings füllen.

Links unten siehst Du dann das Icon im ausgeschalteten Zustand, anderes Bild und kein Hintergrundleuchten.

[Gezi70]

@mickym danke erstmal, das muss ich mir mal in Ruhe zu Gemüte führen.

[mickym]

/gelöscht

[Gezi70]

@mickym wie schon gesagt, die Sache mit den Widgets und der Animation steht. Ich habe zwei Widgets, eines mit rotem und eines mit grünem Rahmen, welche mit dem Status wechselt. Ich habe halt noch einen Rahmen gebastelt, ihn im CSS animiert und jetzt muss ich diesen halt irgendwie zeitversetzt ansteuern können.

[mickym]

@gezi70 Wenn Du einen CSS Style hast dann steht da ja ein Text drin - in Deinem Widget. Wie Du unten siehst machst Du mit den geschweiften Klammern ein Binding zu einem Datenpunkt den Du erstellt hast. Wenn Du dann in den Datenpunkt einfach den Text des CSS Styles kopierst - dann sollte sich das Aussehen sofort ändern, sobald der Text sich im Datenpunkt ändert. Der Rest ist ja dann ein Kinderspiel mit Deiner Logikmaschine diese DP zu füllen.

Im NodeRed gibts so was wie ein trigger - da kann ich wenn Offen - eine Nachricht schicken und dann nach z Bsp 5 Minuten die nächste. Wenn Du dann damit Deinen Datenpunkt fütterst, hast Du mE genau das was Du brauchst. Das geht im Blockly sicher genauso.

[Gezi70]

@mickym danke erstmal. Heute ist mein Kopf zu voll. Das guck ich mir in Ruhe mal an.

[Gezi70]

Ich musste doch nochmal den Status auf ungelöst setzen, denn ich habe einen Fehler im Blockly und weiß nicht wo.
Ich triggere auf die Veränderung eines Kontaktes, welches den Zustand des Garagentores zeigt. Wenn Garagentor true, dann setze Datenpunkt (selbst erstellt) mit 5 Minuten Verzögerung auf true. Sonst wenn Garagentor falsch, setze Datenpunkt ohne Verzögerung auf falsch. Ich habe das schon mit "aktualisiere" und mit "steuere" versucht - aber der Datenpunkt bleibt immer wahr...

[Kusi]

@gezi70 "Bärleins Garagentor.State" ist das korrekte Objekt? Warum brauchst du einen eigenen Datenpunkt und die Verzögerung?

[MCU]

@mickym Da du Dich mit Bindings in CSS-Klasse beschäftigt hast:
Gibt es auch eine Möglichkeit die VIEW-Hintergründe aller Views mit CSS-Klasse zu beeinflussen:

Andere Frage wäre:
in CSS:

Kann ich irgendwie die background-color mit Bindings erreichen?

.vis-view{background-color:{binding}}??

[mickym]

@mcu sorry da bin ich leider überfragt.

Vielleicht hilft ja das https://github.com/ioBroker/ioBroker.vis irgendwie weiter. So bekommt man ggf. den aktuellen view und kann dann vielleicht mit den Styles:

There are a number different internal bindings to provide additional information in views:

username - shows logged-in user
view - name of actual view
wname - widget name
widget - is an object with all data of widget. Can be used only in JS part, like {a:a;widget.data.name}
wid - name of actual widget
language - can be de, en or ru.
instance - browser instance
login - if login required or not (e.g. to show/hide logout button)
Note: to use ":" in calculations (e.g. in string formula) use "::" instead.

Remember, that style definitions will be interpreted as bindings, so use {{style: value}} or just

{
style: value
}
Vielleicht kann man über die Style definitions und/oder über das Binding des aktuellen Views via Script was machen. Ich habe mich dazu aber zuwenig bislang mit VIS beschäftigt.