Widget mit Bedingung CSS Klasse ändern

[Schnischna]

Hi, ich versuche ein Widget bei einer bestimmten Bedingung pulsieren zu lassen (VIS-2). Kann mir jmd sagen was ich falsch mache?

Ich habe CSS so definiert:

.pulseShadow {
  animation: shadowPulse 3s infinite ease-in-out;
}

@keyframes shadowPulse {
  0% {
    box-shadow: 0 0 10px 4px rgba(76, 175, 80, 0.4);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(76, 175, 80, 0.8);
  }
  100% {
    box-shadow: 0 0 10px 4px rgba(76, 175, 80, 0.4);
  }
}

und dann ein Script:

    let bedingung = getState("sonnen.0.status.flowConsumptionBattery").val;
    if (true) {
      $("[data-wid=w000005]").addClass("pulseShadow");
    } else {
      $("[data-wid=w000005]").removeClass("pulseShadow");
    }

Das Pulsieren ohne Bedingung klappt, nur das An- und Ausschalten bei true / false nicht.

Vielen Dank für Eure Hilfe.

[Schnischna]

Ich habe es auch mit einer "Bindung" der CSS-Klasse probiert, klappt leider auch nicht.

{sonnen.0.status.flowConsumptionBattery:false;pulseShadow}

[sigi234]

@schnischna

VIS2 Version?

[Schnischna]

@sigi234 Ja VIS-2

[Schnischna]

@sigi234 2.9.64

[OliverIO]

@schnischna sagte in Widget mit Bedingung CSS Klasse ändern:

Ich habe es auch mit einer "Bindung" der CSS-Klasse probiert, klappt leider auch nicht.

{sonnen.0.status.flowConsumptionBattery:false;pulseShadow}

Dieses Binding kann nicht funktionieren.
Wenn es ein ternärer Operator sein soll, dann ist der Doppelpunkt an der falschen Stelle das semicolon überflüssig. Die vergleichsoperation fehlt dasfragezeichen fehlt, pulseshadow muss in Anführungsstriche, der Datenpunkt muss einer variable zugeordnet sein, anstatt false leere Anführungsstriche verwenden

Um zu testen, ob das funktioniert, am besten das in ein HTML Widget kopieren

[Schnischna]

@oliverio ok, danke, du meinst so? So funktioniert es leider nicht (auch nicht im HTML widget)

{sonnen.0.status.flowConsumptionBattery ? "" : "pulseShadow"}

Das Object sieht übrigens so aus:

[sigi234]

@schnischna sagte in Widget mit Bedingung CSS Klasse ändern:

@sigi234 2.9.64

https://github.com/ioBroker/ioBroker.vis-2

Ev. funktioniert es mit der Beta Version, siehe Changelog 2.12.12

[OliverIO]

@schnischna

Ist immer noch fehlerhaft

{v:sonnen.0.status.flowConsumptionBattery; v==true? "" : "pulseShadow"}

Meistens ist der ankommende Datentyp eine kleine Herausforderung, ob dieser hier ein echter bool ist oder nur ein String, in dem true drin steht. Daher im HTML Widget testen.
Auch empfehle ich dir die Dokumentation zum binding noch mal zu lesen beziehungsweise hier im Forum zu suchen, da gibt es massenhaft Beispiele dazu.

[Schnischna]

Hi, dank Eurer Anregungen habe ich es hinbekommen, so klappt es jetzt:

{v:sonnen.0.status.flowConsumptionBattery; (v === false || v === "false" || v === 0 || v === "0") ? "pulseShadow" : ""}

[arteck]

@schnischna sagte in Widget mit Bedingung CSS Klasse ändern:

(v === false || v === "false" || v === 0 || v === "0")

ja was den nu ein boolean oder ein string oder ein numerischees Wert..
mische bitte nicht die Varaibeln definition .. schaue dir den RAW Wert des DP sonnen.0.status.flowConsumptionBattery an und dann kannst du danach deine Abfrage bauen..

aj es funktioniert ist aber vieles unnütz .. schon mal für die Zukunft