Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Farbverlauf funktioniert nicht

    NEWS

    • Neues Video "KI im Smart Home" - ioBroker plus n8n

    • Neues Video über Aliase, virtuelle Geräte und Kategorien

    • Wir empfehlen: Node.js 22.x

    Farbverlauf funktioniert nicht

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

      Hallo,

      ich bin im Moment dabei, etwas mit Farbverläufen zu experimentieren. Jetzt habe ich ein Problem und weiß nicht warum das so ist und zwar klappt der Farbverlauf wenn die grüne Farbe auf der linken Seite ist, aber wenn sie auf der rechten ist funktioniert der Farbverlauf nicht. Wisst ihr warum das so ist bzw wie ich es von beiden Seiten hinbekomm?

      farbverlauf.jpg

      geht (grün links):

      {b:sonoff.0.DVES_22F787.POWER;b=="false" ? "red" : "-webkit-linear-gradient(-45deg, #00e027 0%,#484c55 30%)"}

      geht nicht (grün rechts):

      {b:sonoff.0.DVES_22F787.POWER;b=="false" ? "red" : "-webkit-linear-gradient(-45deg, #484c55 30%,#00e027 0%)"}

      1 Reply Last reply Reply Quote 0
      • S
        saeft_2003 Most Active last edited by

        @Glasfaser

        Weißt du das zufällig? Weil ich hab gesehen das du dich mit Farbverläufen auskennst...

        https://forum.iobroker.net/topic/26933/frage-zu-usv/36

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

          @saeft_2003

          2.JPG

          -webkit-linear-gradient(-45deg, #484c55 40%,#00e027  80%)
          
          -webkit-linear-gradient(-45deg, #484c55 70%,#00e027  80%)
          

          oder kennst du das !?

          1.JPG

          [{"tpl":"tplValueFloatBar","data":{"oid":"snmp.0.192_168_178_11.NAS_Temp","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","min":"20","max":"60","orientation":"horizontal","color":"","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"mdui-h-bargraph mdui-segment-10 mybargraph","name":"Temp Server"},"style":{"left":"497px","top":"189px","z-index":"2","background":"linear-gradient(to right, #008000 0px, #FFA500 120px, #FF0000 220px )","border-radius":"10px","width":"188px","height":"25px","font-family":"Jura-DemiBold"},"widgetSet":"basic"}]
          

          S 1 Reply Last reply Reply Quote 2
          • S
            saeft_2003 Most Active @Glasfaser last edited by

            @Glasfaser

            Danke geht 🙂 eine Frage noch und zwar geht es auch das links grün ist in der Mitte der grau Ton und rechts wieder grün? Also zweimal einen Farbverlauf?

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

              @saeft_2003

              Den Mittelwert dazu und dann musst du mit den % Spielen .

              1.JPG

              -webkit-linear-gradient(-45deg, #00e027 30%,#484c55 50%,#00e027  90%)
              

              oder so , nur die Farben vorgeben :

              2.JPG

              -webkit-linear-gradient(-45deg, #00e027 , #484c55 , #484c55 , #00e027 )
              

              oder so
              44.JPG

              -webkit-linear-gradient(-45deg, #00e027 ,#484c55 ,#484c55 , #b700e0, #484c55 , #484c55 , #00e027 )
              
              S O 2 Replies Last reply Reply Quote 1
              • S
                saeft_2003 Most Active @Glasfaser last edited by

                @Glasfaser

                Vielen Dank! Jetzt sind mir ein paar Sachen klar geworden...

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

                  @Glasfaser

                  ich stelle meine Vis gerade auf ein responisve Layout um und versuche mich gerade an einem Farbverlauf, aber leider funktioniert das nicht so wie ich mir das Vorstelle.

                  Darstellen möchte ich einen Temperaturverlauf von -20 bis 40 Grad,

                  Farbe bis 0 Grad Blau
                  Farbverlauf von 0 - 15 Grad von Blau zu Grün
                  Farbe von 15 - 25 Grad Grün
                  Farbverlauf von 25 - 40 Grad von Grün zu Rot

                  Bis jetzt bin ich leider kläglich gescheitert

                  Momentan sieht es folgendermaßen aus

                  Volle Bildschirmauflösung:
                  5402a962-50ee-4221-a48b-2df7d1b27d90-image.png

                  Verringerte Bildschirmauflösung:
                  2e39b8a8-2b70-4a60-a4e8-0009f575d54c-image.png

                  Eingabe bei backround im Widget:

                  linear-gradient(to right, #0e6ed8 0%, #4CAF50 65%, #F44336 100% )
                  

                  Die Länge des Widget berechne ich mit "calc(100% - 40px)"

                  Hast du vielleicht eine Idee?

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

                    @Oli sagte in Farbverlauf funktioniert nicht:

                    @Glasfaser
                    Darstellen möchte ich einen Temperaturverlauf von -20 bis 40 Grad,

                    Farbe bis 0 Grad Blau
                    Farbverlauf von 0 - 15 Grad von Blau zu Grün
                    Farbe von 15 - 25 Grad Grün
                    Farbverlauf von 25 - 40 Grad von Grün zu Rot

                    Hast du vielleicht eine Idee?

                    Im Moment fällt mit nichts ein , da es ein Farbverlauf ist .

                    Vielleicht so :

                    Einen Datenpunkt mit den einzelnen Werten füllen ( Skript mit 4 Bedingungen anlegen ) :

                    1.JPG

                    2.JPG

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

                      @Glasfaser

                      Super, danke hat geklappt

                      1 Reply Last reply Reply Quote 0
                      • R
                        roughestboy last edited by

                        @oli @Glasfaser
                        Vielleicht ist ja noch jemand hier...
                        Wie würde die Eingabe im background Feld eines Widgets statt

                        linear-gradient(to right, #0e6ed8 0%, #4CAF50 65%, #F44336 100% )
                        

                        aussehen, wenn ich anstelle der festen Hexcodes für die Farben Datenpunkte aus iobroker verwenden möchte, welche die Hexcodes enthalten ? Kriege ich grade nicht gebacken.

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

                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        911
                        Online

                        32.1k
                        Users

                        80.6k
                        Topics

                        1.3m
                        Posts

                        vis
                        4
                        10
                        1856
                        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