Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Widget mit Bedingung CSS Klasse ändern

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.7k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.2k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.1k

Widget mit Bedingung CSS Klasse ändern

Geplant Angeheftet Gesperrt Verschoben Visualisierung
11 Beiträge 4 Kommentatoren 369 Aufrufe 4 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • S Offline
    S Offline
    Schnischna
    schrieb am zuletzt editiert von
    #1

    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.

    S 1 Antwort Letzte Antwort
    0
    • S 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.

      S Offline
      S Offline
      Schnischna
      schrieb am zuletzt editiert von
      #2

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

      {sonnen.0.status.flowConsumptionBattery:false;pulseShadow}
      
      sigi234S OliverIOO 2 Antworten Letzte Antwort
      0
      • S Schnischna

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

        {sonnen.0.status.flowConsumptionBattery:false;pulseShadow}
        
        sigi234S Online
        sigi234S Online
        sigi234
        Forum Testing Most Active
        schrieb am zuletzt editiert von
        #3

        @schnischna

        VIS2 Version?

        Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
        Immer Daten sichern!

        S 2 Antworten Letzte Antwort
        0
        • sigi234S sigi234

          @schnischna

          VIS2 Version?

          S Offline
          S Offline
          Schnischna
          schrieb am zuletzt editiert von
          #4

          @sigi234 Ja VIS-2

          1 Antwort Letzte Antwort
          0
          • sigi234S sigi234

            @schnischna

            VIS2 Version?

            S Offline
            S Offline
            Schnischna
            schrieb am zuletzt editiert von
            #5

            @sigi234 2.9.64

            sigi234S 1 Antwort Letzte Antwort
            0
            • S Schnischna

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

              {sonnen.0.status.flowConsumptionBattery:false;pulseShadow}
              
              OliverIOO Offline
              OliverIOO Offline
              OliverIO
              schrieb am zuletzt editiert von OliverIO
              #6

              @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

              Meine Adapter und Widgets
              TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
              Links im Profil

              S 1 Antwort Letzte Antwort
              0
              • OliverIOO 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

                S Offline
                S Offline
                Schnischna
                schrieb am zuletzt editiert von Schnischna
                #7

                @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:
                b7a8bd47-ac78-46af-bc08-fa24681a97d3-image.png

                1 Antwort Letzte Antwort
                0
                • S Schnischna

                  @sigi234 2.9.64

                  sigi234S Online
                  sigi234S Online
                  sigi234
                  Forum Testing Most Active
                  schrieb am zuletzt editiert von
                  #8

                  @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

                  Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                  Immer Daten sichern!

                  1 Antwort Letzte Antwort
                  0
                  • OliverIOO Offline
                    OliverIOO Offline
                    OliverIO
                    schrieb am zuletzt editiert von
                    #9

                    @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.

                    Meine Adapter und Widgets
                    TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                    Links im Profil

                    S 1 Antwort Letzte Antwort
                    1
                    • OliverIOO 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.

                      S Offline
                      S Offline
                      Schnischna
                      schrieb am zuletzt editiert von
                      #10

                      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" : ""}
                      
                      arteckA 1 Antwort Letzte Antwort
                      0
                      • S 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" : ""}
                        
                        arteckA Offline
                        arteckA Offline
                        arteck
                        Developer Most Active
                        schrieb am zuletzt editiert von
                        #11

                        @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

                        zigbee hab ich, zwave auch, nuc's genauso und HA auch

                        1 Antwort Letzte Antwort
                        0
                        Antworten
                        • In einem neuen Thema antworten
                        Anmelden zum Antworten
                        • Älteste zuerst
                        • Neuste zuerst
                        • Meiste Stimmen


                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        618

                        Online

                        32.4k

                        Benutzer

                        81.5k

                        Themen

                        1.3m

                        Beiträge
                        Community
                        Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                        ioBroker Community 2014-2025
                        logo
                        • Anmelden

                        • Du hast noch kein Konto? Registrieren

                        • Anmelden oder registrieren, um zu suchen
                        • Erster Beitrag
                          Letzter Beitrag
                        0
                        • Home
                        • Aktuell
                        • Tags
                        • Ungelesen 0
                        • Kategorien
                        • Unreplied
                        • Beliebt
                        • GitHub
                        • Docu
                        • Hilfe