Weihnachtsangebot 2025! 🎄

[Merlin123]

@carsten04 Ah klasse! Muss ich morgen mal probieren :)

[Merlin123]

@carsten04 Klappt! Danke :)

[carsten04]

Um auch Farbverläufe gut handeln zu können, habe ich für background noch einen passenden Picker spendiert. Bitte testen und hier oder auf GitHub Feedback geben.

[Merlin123]

Hab mit dem Widget (und auch bei den VIS2 Meßgeräte Widgets) das Problem, dass die Ansicht im Editor nicht mit der in der Runtime übereinstimmt.
Bei allen anderen Widgets stimmt es. Vielleicht hast Du ne Idee...

Editor (Windows, Chrome):

Laptop (wie Editor):

Handy (Android, Chrome)

[Merlin123]

@carsten04 Farbverlauf klappt :)

[carsten04]

@merlin123 Schau mal, ob Du alles auf PX beim Widget stehen hast. Default ist bei position relativ und bei width 100%. Wenn Du bei den verschiedenen Endgeräten unterschiedliche Auflösungen hast, dann führt das mit diesen Einstellungen auch zu unterschiedlichen Darstellungen.

Wenn es so ähnlich aussieht,

dann sollte sich auch die Darstellung nicht ändern.

[Merlin123]

@carsten04 Ah! Danke! Das hab ich übersehen.... Bei den meisten ist ja px eingestellt. Geht jetzt :)

[Merlin123]

@carsten04 Das Widget hat ja quasi nen Hintergrund (wo auch der Headertext steht) und den "Button" mit dem Icon.
Ich habe gerade versucht den Hintergrund in dem grauen Verlauf zu lassen und den Button abhängig vom Wert des Objektes (true/false) zu färben.
Ich kann aber nur das ganze Widget färben, oder?

[carsten04]

@merlin123 Der Rahmen ist immer farblich zum Inhalt abgestuft, es sei denn Du setzt Elevation auf 0, dann ist die Farbe für Rand und Inhalt identisch.

[Merlin123]

@carsten04 OK. Kannst es ja vielleicht mal als Idee für eine Erweiterung im Hinterkopf behalten, dass man die zwei Bereiche unterschiedlich färben kann. :)

[carsten04]

@merlin123 Du kannst jetzt Rahmen und Inhalt unterschiedlich einfärben, also auch die Rahmenfarbe beibehalten.

Ich habe zusätzlich noch geringfügig angepasst und optimiert. Wenn Du testen möchtest, dann Widgets bitte komplett neu anlegen.

[Merlin123]

@carsten04 Danke :) Aber wie stell ich das ein? Finde das irgendwie nicht

[carsten04]

@merlin123 sagte in vis-2-widgets-collection:

@carsten04 Danke :) Aber wie stell ich das ein? Finde das irgendwie nicht

hier:

und auch individuell für jeden Wert, falls vorhanden.

[Merlin123]

@carsten04 Er hatte das Update des Adapters irgendwie nicht gemacht. Hab den nochmal von Git geladen, dann hab ich die Settings gesehen. Gehen auch :+1:

Was mir aber aufgefallen ist: Ich schaffe es nicht das Icon größer zu machen, ohne dass das grüne Feld auch größer wird. Das soll aber nicht größer werden, aber das Icon soll das besser ausfüllen.
Geht das nicht?

Icon Größe 50

Icon Größe 75

[sigi234]

@merlin123
Da fehlt ein t. :grinning:

[carsten04]

@merlin123 sagte in vis-2-widgets-collection:

@carsten04 Er hatte das Update des Adapters irgendwie nicht gemacht. Hab den nochmal von Git geladen, dann hab ich die Settings gesehen. Gehen auch :+1:

Was mir aber aufgefallen ist: Ich schaffe es nicht das Icon größer zu machen, ohne dass das grüne Feld auch größer wird. Das soll aber nicht größer werden, aber das Icon soll das besser ausfüllen.
Geht das nicht?

Icon Größe 50

Icon Größe 75

Schau dir mal das Icon mit z.B. Gimp an. Ich vermute mal, das der Transparenzbereich (Alpha-Kanal) um Dein Icon ziemlich groß ist.

[Merlin123]

@carsten04 Das sind die aus dem Material Icon Selector.... Keine Ahnung, wie ich mir die einzeln anschauen kann

@sigi234 ups. Danke ;) War so auf das Icon fokusiert, dass ich das übersehen hab :P

[carsten04]

@merlin123 sagte in vis-2-widgets-collection:

@carsten04 Das sind die aus dem Material Icon Selector.... Keine Ahnung, wie ich mir die einzeln anschauen kann

@sigi234 ups. Danke ;) War so auf das Icon fokusiert, dass ich das übersehen hab :P

Es gab auch noch einen CSS-Fehler. Jetzt sollte alles funktionieren wie erwartet.

[Merlin123]

@carsten04 Geht :) Ein Träumchen

[carsten04]

Die Widgets lassen sich jetzt als npm-Package installieren und sind auch demnächst im Beta-Repo verfügbar. Wer die Widgets schon jetzt ausprobieren möchte, kann wie folgt vorgehen:

cd iobroker
iobroker url iobroker.vis-2-widgets-collection@latest

oder

und dann im Admin unter Adapter eine Instanz anlegen. Danach sind die Widgets in der Vis 2 nutzbar.