Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Widget mit animiertem Schatten/Rand (CSS)

    NEWS

    • Wir empfehlen: Node.js 22.x

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker goes Matter ... Matter Adapter in Stable

    Widget mit animiertem Schatten/Rand (CSS)

    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      sebwirtz last edited by

      Hi
      ich hoffe mir kann hier jemand helfen.
      Ich möchte gerne mit einem Widget (Inventwo) ein Objekt schalten. In meiner VIS soll das Widget, wenn es aktiv ist, so (wie im Link) animiert (Custom-radio-Glow) aussehen.
      Ist das umsetzbar oder nicht. Bin im Thema CSS noch nicht so fit.

      Ich danke euch schon einmal für eure Hilfe.

      https://forum.iobroker.net/topic/51380/css-training/

      Glasfaser 1 Reply Last reply Reply Quote 0
      • Glasfaser
        Glasfaser @sebwirtz last edited by

        @sebwirtz sagte in Widget mit animiertem Schatten/Rand (CSS):

        wenn es aktiv ist, so (wie im Link) animiert (Custom-radio-Glow) aussehen.

        im Feld CSS Klasse

        3df31a0c-ed37-4182-a041-79e1564f24df-grafik.png

        {var1:0_userdata.0.Test123; var1=="true" ? "custom-radio-glow":""} 
        
        R 1 Reply Last reply Reply Quote 0
        • R
          Revobobo @Glasfaser last edited by

          @glasfaser said in Widget mit animiertem Schatten/Rand (CSS):

          {var1:0_userdata.0.Test123; var1=="true" ? "custom-radio-glow":""} 
          

          Wie sieht denn der komplette Code aus, wenn ich als Standard Ansicht z.B. custom-radio auf false umschalten möchte?

          Danke und viele Grüße

          Glasfaser 1 Reply Last reply Reply Quote 0
          • Glasfaser
            Glasfaser @Revobobo last edited by Glasfaser

            @revobobo sagte in Widget mit animiertem Schatten/Rand (CSS):

            auf false

            einfach den Wert true ändern , auf false :

            {var1:0_userdata.0.Test123; var1=="false" ? "custom-radio-glow":""}
            
            R 1 Reply Last reply Reply Quote 0
            • R
              Revobobo @Glasfaser last edited by

              @glasfaser
              Moin - das ist mir schon klar - Danke.
              Wie stelle ich in dem Code einen Wechsel dar?
              Wechsel von "custom-radio-glow" auf "custom-radio" mit "true" und "false"!

              Glasfaser 1 Reply Last reply Reply Quote 0
              • Glasfaser
                Glasfaser @Revobobo last edited by Glasfaser

                @revobobo sagte in Widget mit animiertem Schatten/Rand (CSS):

                Moin - das ist mir schon klar - Danke.

                von "custom-radio-glow" auf "custom-radio"

                Konnte ich so nicht erlesen ... ,
                da ich das CSS nicht kenne und es auch ein custom-radio gibt

                {var1:0_userdata.0.Test123; var1=="true" ? "custom-radio-glow":"custom-radio"}
                
                Enrico Fischer 1 Reply Last reply Reply Quote 0
                • Enrico Fischer
                  Enrico Fischer @Glasfaser last edited by

                  @glasfaser said in Widget mit animiertem Schatten/Rand (CSS):

                  @revobobo sagte in Widget mit animiertem Schatten/Rand (CSS):

                  Moin - das ist mir schon klar - Danke.

                  von "custom-radio-glow" auf "custom-radio"

                  Konnte ich so nicht erlesen ... ,
                  da ich das CSS nicht kenne und es auch ein custom-radio gibt

                  {var1:0_userdata.0.Test123; var1=="true" ? "custom-radio-glow":"custom-radio"}
                  

                  @Glasfaser danke fürs einspringen.Ich bin unter der Woche viel unterwegs und komme nicht zum antworten. Aber es scheint ja alles dank dir geklärt zu sein.

                  1 Reply Last reply Reply Quote 0
                  • Ivan Andric
                    Ivan Andric last edited by

                    @Enrico-Fischer @Glasfaser
                    Gibt es die Möglichkeit abhängig von zwei oder mehreren Werten die Farbe für den Rand zu setzen?

                    Als Beispiel:
                    wenn wert:0_wled.0.10521c644bc8.on;wert == "true"
                    und wert:wled.0.10521c644bc8.ps;wert == "5"
                    setze Farbe auf #6595c8

                    Vielen Dank!

                    1 Reply Last reply Reply Quote 0
                    • Glasfaser
                      Glasfaser last edited by

                      @ivan-andric

                      wenn wert ..... und wert

                      Beispiel :

                      {var1:0_userdata.0.1; var2:0_userdata.0.2; var1=="true"  && var2=="5"     ? "#6595c8":""}
                      
                      Ivan Andric 1 Reply Last reply Reply Quote 1
                      • Ivan Andric
                        Ivan Andric @Glasfaser last edited by

                        @glasfaser Vielen Dank!

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post

                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        519
                        Online

                        31.9k
                        Users

                        80.3k
                        Topics

                        1.3m
                        Posts

                        5
                        10
                        686
                        Loading More Posts
                        • Oldest to Newest
                        • Newest to Oldest
                        • Most Votes
                        Reply
                        • Reply as topic
                        Log in to reply
                        Community
                        Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                        The ioBroker Community 2014-2023
                        logo