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. Farbverlauf funktioniert nicht

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    3.8k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.2k

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.5k

Farbverlauf funktioniert nicht

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
10 Beiträge 4 Kommentatoren 2.1k 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
    saeft_2003
    Most Active
    schrieb am zuletzt editiert von
    #1

    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 Antwort Letzte Antwort
    0
    • S Offline
      S Offline
      saeft_2003
      Most Active
      schrieb am zuletzt editiert von
      #2

      @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

      GlasfaserG 1 Antwort Letzte Antwort
      0
      • S saeft_2003

        @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

        GlasfaserG Offline
        GlasfaserG Offline
        Glasfaser
        schrieb am zuletzt editiert von Glasfaser
        #3

        @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"}]
        

        Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

        S 1 Antwort Letzte Antwort
        2
        • GlasfaserG 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 Offline
          S Offline
          saeft_2003
          Most Active
          schrieb am zuletzt editiert von
          #4

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

          GlasfaserG 1 Antwort Letzte Antwort
          0
          • S saeft_2003

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

            GlasfaserG Offline
            GlasfaserG Offline
            Glasfaser
            schrieb am zuletzt editiert von
            #5

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

            Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

            S O 2 Antworten Letzte Antwort
            1
            • GlasfaserG Glasfaser

              @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 Offline
              S Offline
              saeft_2003
              Most Active
              schrieb am zuletzt editiert von
              #6

              @Glasfaser

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

              1 Antwort Letzte Antwort
              0
              • GlasfaserG Glasfaser

                @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 )
                
                O Offline
                O Offline
                Oli
                schrieb am zuletzt editiert von Oli
                #7

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

                Gruß
                Oliver

                GlasfaserG 1 Antwort Letzte Antwort
                0
                • O 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?

                  GlasfaserG Offline
                  GlasfaserG Offline
                  Glasfaser
                  schrieb am zuletzt editiert von
                  #8

                  @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

                  Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                  O 1 Antwort Letzte Antwort
                  0
                  • GlasfaserG Glasfaser

                    @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 Offline
                    O Offline
                    Oli
                    schrieb am zuletzt editiert von
                    #9

                    @Glasfaser

                    Super, danke hat geklappt

                    Gruß
                    Oliver

                    1 Antwort Letzte Antwort
                    0
                    • R Offline
                      R Offline
                      roughestboy
                      schrieb am zuletzt editiert von
                      #10

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

                      501

                      Online

                      32.7k

                      Benutzer

                      82.4k

                      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