Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Fortschrittsbalken mit variabler Wert-Farbe

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Fortschrittsbalken mit variabler Wert-Farbe

    This topic has been deleted. Only users with topic management privileges can see it.
    • arteck
      arteck Developer Most Active last edited by

      @SKB du bist doch der css experte

      1 Reply Last reply Reply Quote 1
      • SKB
        SKB Developer Most Active @BertDerKleine last edited by

        @bertderkleine Dein CSS ist für den Text richtig. Dieser passt auch dann automatisch an den Hintergrund an.

        BertDerKleine 1 Reply Last reply Reply Quote 0
        • BertDerKleine
          BertDerKleine @SKB last edited by

          @skb sagte in Fortschrittsbalken mit variabler Wert-Farbe:

          @bertderkleine Dein CSS ist für den Text richtig. Dieser passt auch dann automatisch an den Hintergrund an.

          Ok, kannst Du mir konkret sagen, welches Widget ich verwenden muss für den Text und in welches Feld ich dieses CSS dann reinschreiben muss, wenn ich es über einen Fortschrittsbalken schieben will?

          Meine bisherigen Versuche mit einem Basic HTML Widget klappten so gar nicht, laut KI hat das potentiell irgendwas mit Z-Ebenen oder Hintergründen von VIS Widgets zu tun.

          Daher suche ich nach etwas, das konkret und definitiv funktioniert.

          SKB 1 Reply Last reply Reply Quote 0
          • SKB
            SKB Developer Most Active @BertDerKleine last edited by

            @bertderkleine ich würde es mit einem Text Widget versuchen und dort dann die entsprechende CSS Klasse zuweisen.

            BertDerKleine 1 Reply Last reply Reply Quote 0
            • BertDerKleine
              BertDerKleine @SKB last edited by

              @skb sagte in Fortschrittsbalken mit variabler Wert-Farbe:

              @bertderkleine ich würde es mit einem Text Widget versuchen und dort dann die entsprechende CSS Klasse zuweisen.

              Was für Dich klar ist, ist für mich leider nicht so klar, sorry.
              Was konkret wäre ein geeignetes "Text Widget" und wo und wie "weise ich eine CSS Klasse zu"? Und welche?

              Ro75 SKB 2 Replies Last reply Reply Quote 0
              • Ro75
                Ro75 @BertDerKleine last edited by

                @bertderkleine Leider ist nicht zu erkennen, welche Visualisierung du nutzt Falls VIS 1, dann schau dir doch mal die Material Design Widgets an.

                Ro75.

                1 Reply Last reply Reply Quote 0
                • SKB
                  SKB Developer Most Active @BertDerKleine last edited by SKB

                  @bertderkleine Na, ein Widget, was Text beinhaltet. Egal welches. Das wirst Du finden.

                  Diesem Element weist du dann eine CSS Klasse zu mit den CSS Eigenschaften, die du bereits hast.

                  .meineKlasse {
                  color: #000;               /* Schwarz als Fallback */
                  mix-blend-mode: difference;  /* Invertiert automatisch den Hintergrund */
                  }
                  
                  1 Reply Last reply Reply Quote 1
                  • BertDerKleine
                    BertDerKleine last edited by

                    @skb
                    Ich habe es in VIS 1 versucht mit einem "basic - HTML" widget gegenüber einem "materialdesign - progress".
                    Eingetragen habe ich es so:
                    q1.jpg
                    Das Ergebnis funktioniert aber nicht:
                    q2.jpg
                    Beiden habe ich denselben z-index zugewiesen.
                    Ich nutze einen aktuellen Firefox.

                    SKB 1 Reply Last reply Reply Quote 0
                    • SKB
                      SKB Developer Most Active @BertDerKleine last edited by SKB

                      @bertderkleine wenn das HTML die 87% sind, funktioniert es doch.

                      Das Schwarz ist ja nicht unter der 87%.

                      BertDerKleine 1 Reply Last reply Reply Quote 0
                      • BertDerKleine
                        BertDerKleine @SKB last edited by

                        @skb
                        Wenn ich den Text voll auf den schwarzen Balken schiebe, bleibt der Text leider schwarz, was zeigt, dass es leider nicht funktioniert.

                        SKB 1 Reply Last reply Reply Quote 0
                        • SKB
                          SKB Developer Most Active @BertDerKleine last edited by

                          @bertderkleine Ich denke mal, dass es daran liegt, das der Balken ein Element ist und der Text auch. Somit wird kein Bezug hergestellt.

                          Die Farbe wird wohl nur bei direkt zusammenhängenden/verschachtelten Elementen adaptiert.

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

                          Support us

                          ioBroker
                          Community Adapters
                          Donate

                          473
                          Online

                          31.9k
                          Users

                          80.1k
                          Topics

                          1.3m
                          Posts

                          5
                          14
                          128
                          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