Monatsrückblick Januar/Februar 2026 ist online!

[MartinK.]

Hallo Kollegen :-) Ich suche für meine VIS noch ein Wasserhahn Widget , am liebsten etwas mit "Signalbild" wo man sieht das der Wasserhahn "läuft" und wenn er geschlossen ist.. Gibt es schon so etwas ? oder muss ich das selber basteln ?? :grinning: ?

[liv-in-sky]

@MartinK

was hälst du von sowas - rot aus - grün ein-drehend

image ist von mfg-svg - übereinander gelegt und mit sichtbarkeit gearbeitet

[MartinK.]

@liv-in-sky Ja, das wäre schon nicht schlecht :-)

[MartinK.]

@liv-in-sky Ich versuche mal ob ich das auch hinbekomme ;-)

[liv-in-sky]

@MartinK wenn hilfe benötigt - einfach melden

für das drehen brauchs du ein einen css eintrag

.anime { animation: turner 4s infinite linear !important}

@keyframes turner{
    from{  transform: rotateY(0deg)   }
    to  {  transform: rotateY(360deg) }
}

die widgets als adapter installieren :

mfd icons as svg

[MartinK.]

@liv-in-sky Also als Adapter habe ich das jetzt installiert

aber in der VIS-Widget Liste finde ich diese Symbole noch nicht ??
Irgendwas mache ich noch falsch ?? :unamused:

[liv-in-sky]

@MartinK

wenn du das bild auswählst kopiere das mal in den "pfad"

/icons-mfd-svg/

[liv-in-sky]

@MartinK

kannst auch das testen

[sigi234]

Vielleicht kannst du es gebrauchen........

[MartinK.]

@liv-in-sky Ja, vielen Dank.... Ich stehe als Newbee in Sachen ioBroker jetzt gerade vor der Frage, wie - oder als was ich dieses Icon einfügen muss ?

Als Signalbild für den Button ? Dort wo das X - ist soll das Icon hin ...

[MartinK.]

@MartinK Die Buttons sind alle bereits mit dem Shelly verknüpft... nur das Bild eben nicht ;-)

[liv-in-sky]

@MartinK du brauchst das image widget - zweimal übereinander - einmal das rote - einmal das grüne definieren- nimm erstmal die icons, die ich oben eingefügt hatte

blau: hier definierst du, wann das bild angezeigt wird - die objectid vom shelly
lila: hier wählst du das bild aus - downloade die icons vom forum auf deinen rechner -

in diesem datei manager kannst du dann mit dem grünen pfeil die beiden bilder in die vis hochladen (von deinem computer - es geht ein popup auf und du musst dann die beiden bilder reinziehen

[MartinK.]

@liv-in-sky SUPER!! ... Vielen Dank ! :-) Das hat schon mal geklappt:+1:
jetzt muss ich nur noch das drehen mit dem CSS Eintrag hinbekommen...
wenn ich den code einfach so in den CSS einfüge klappt das noch nicht so ganz ...

bekomme dann immer eine Fehlermeldung... Ich habe da sicher noch irgendwo einen
Fehler drin...:grimacing:

[liv-in-sky]

@MartinK

zusätzlich:

css im widget angeben - css ist für alle widget da

wenn du den fehler mit dem ausrufezeichen im css meinst - ist normal - habe ich auch

[liv-in-sky]

es gibt auch einen trick mit nur einem bild zu arbeiten - das nennt sich binding:

dazu musst du "quasi" ein kleines script in die punkte eintragen

css:

{val:controll-own.0.mount.CPULuefter; val=="true" ? "anime": val=="false" ? "": ""}

quelle :

{val:controll-own.0.mount.CPULuefter; val=="true" ? "/vis.0/armin/img/wh-gruen.png": val=="false" ? "/vis.0/armin/img/wh-rot.png": ""}

dasbedeutet if/wenn

wenn der val/wert von datenpunkt "controll-own.0.mount.CPULuefter" wahr ist nutze ..... wenn falsch nutze ... sonst "" (hier gibt es kein sonst!)

das kann in vielen dieser vis-settings genutzt werden z.b farbe des textes oder beim rahmen, ...

kann sein, dass das bild im vis-editor nicht mehr angezeigt wird - aber im browser sieht man es !

[MartinK.]

@liv-in-sky Vielen Dank für Eure hilfe... !!! :+1: :+1: Ich habe es auch geschafft das "Es" sich dreht, aber es dreht sich jetzt der Ganze Tab in der VIS... und nicht das Wasserhahn Icon :fearful: ....
Woran kann das denn liegen ??? :relieved:

[liv-in-sky]

@MartinK

bei welcher version? ich meine mit der erst-erklärten vorgehensweise oder der zweiten mit dem binding

hab ich noch nie gesehen - evtl kannst du das css mal unter project einfühgen und bei global löschen

das hatte ich noch nie ?

[MartinK.]

@liv-in-sky Mit der erste Version.. Auch unter project dreht sich der ganze Tab ?

[liv-in-sky]

@MartinK

du könntest mal den name des css eintrages ändern - im css das anime mal nach anime1 unbenennen

und auch in den anderen feldern, wo du es benutzt

welche version der vis hast du ? siehe adapter tab - hinten in der zeile !

[liv-in-sky]

@MartinK du kannst auch mal das !important im css löschen - aber bei funktioniert es dann nicht mehr