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. SVG Icons Farbe ändern

NEWS

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

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.1k

SVG Icons Farbe ändern

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
9 Beiträge 4 Kommentatoren 2.3k 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.
  • dietlmanD Offline
    dietlmanD Offline
    dietlman
    schrieb am zuletzt editiert von
    #1

    Ich hab zwar hier schon einen Beitrag gefunden wo über dieses Thema diskutiert wurde, allerdings konnte ich keine Lösung für mein Problem finden.
    Ich habe eine Visualisierung meiner PV Anlage gemacht und benutze dafür auch SVG Images. Diese Images würde ich gerne je nach Wert (Leistung - Verbrauch usw.) farblich verändern. Ich habe dazu schon mit den verschiedenen "jqui-mfd" widgets experimentiert, konnte aber kein passendes widget finden. Vielleicht kann da jemand helfen. Anbei auch ein Screenshot meiner VIS damit man sich besser vorstellen kann was ich meine.Screenshot 2019-03-20 at 20.36.06.png
    Wie gesagt es geht um die Icons in den Ecken (Speicher, Hausnetz usw.) Die Werte kommen in Watt und %

    1 Antwort Letzte Antwort
    0
    • sigi234S Online
      sigi234S Online
      sigi234
      Forum Testing Most Active
      schrieb am zuletzt editiert von sigi234
      #2

      Sie dir das mal an. Ist ein Widget.

      [{"tpl":"tplMfdCustom10","data":{"oid":"hm-rpc.1.xxxxxxx.4.BATTERY_STATE","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","asButton":true,"icon0":"/icons-mfd-svg/measure_battery_0.svg","icon1":"/icons-mfd-svg/measure_battery_0.svg","icon2":"/icons-mfd-svg/measure_battery_0.svg","icon3":"/icons-mfd-svg/measure_battery_0.svg","icon4":"/icons-mfd-svg/measure_battery_0.svg","icon5":"/icons-mfd-svg/measure_battery_0.svg","icon6":"/icons-mfd-svg/measure_battery_0.svg","icon7":"/icons-mfd-svg/measure_battery_0.svg","icon8":"/icons-mfd-svg/measure_battery_0.svg","icon9":"/icons-mfd-svg/measure_battery_0.svg","icon10":"/icons-mfd-svg/measure_battery_0.svg","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,"min":"1,5","max":"3,2","name":"Wohnzimmer HK2","show_active":false,"invert_value":true,"iconColor10":"#0fcc36","iconValue0":"1,5","iconColor0":"#b7061a","iconValue1":"1,5","iconColor1":"#b7061a","iconValue2":"1,6","iconValue3":"1,6","iconValue4":"1,6","iconValue5":"1,6","iconValue6":"1,9","iconValue7":"1,9","iconValue8":"2,5","iconValue9":"3,0","iconValue10":"3,2","iconColor2":"#b7061a","iconColor3":"#fecdcd","iconColor4":"#fecdcd","iconColor5":"#fecdcd","iconColor6":"#bcfbc2","iconColor7":"#bcfbc2","iconColor8":"#9bfa6b","iconColor9":"#bcfbc2","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},"style":{"left":"205px","top":"186px","width":"35px","height":"35px","z-index":"2"},"widgetSet":"jqui-mfd"}]
      

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

      dietlmanD 1 Antwort Letzte Antwort
      0
      • sigi234S sigi234

        Sie dir das mal an. Ist ein Widget.

        [{"tpl":"tplMfdCustom10","data":{"oid":"hm-rpc.1.xxxxxxx.4.BATTERY_STATE","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","asButton":true,"icon0":"/icons-mfd-svg/measure_battery_0.svg","icon1":"/icons-mfd-svg/measure_battery_0.svg","icon2":"/icons-mfd-svg/measure_battery_0.svg","icon3":"/icons-mfd-svg/measure_battery_0.svg","icon4":"/icons-mfd-svg/measure_battery_0.svg","icon5":"/icons-mfd-svg/measure_battery_0.svg","icon6":"/icons-mfd-svg/measure_battery_0.svg","icon7":"/icons-mfd-svg/measure_battery_0.svg","icon8":"/icons-mfd-svg/measure_battery_0.svg","icon9":"/icons-mfd-svg/measure_battery_0.svg","icon10":"/icons-mfd-svg/measure_battery_0.svg","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,"min":"1,5","max":"3,2","name":"Wohnzimmer HK2","show_active":false,"invert_value":true,"iconColor10":"#0fcc36","iconValue0":"1,5","iconColor0":"#b7061a","iconValue1":"1,5","iconColor1":"#b7061a","iconValue2":"1,6","iconValue3":"1,6","iconValue4":"1,6","iconValue5":"1,6","iconValue6":"1,9","iconValue7":"1,9","iconValue8":"2,5","iconValue9":"3,0","iconValue10":"3,2","iconColor2":"#b7061a","iconColor3":"#fecdcd","iconColor4":"#fecdcd","iconColor5":"#fecdcd","iconColor6":"#bcfbc2","iconColor7":"#bcfbc2","iconColor8":"#9bfa6b","iconColor9":"#bcfbc2","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},"style":{"left":"205px","top":"186px","width":"35px","height":"35px","z-index":"2"},"widgetSet":"jqui-mfd"}]
        
        dietlmanD Offline
        dietlmanD Offline
        dietlman
        schrieb am zuletzt editiert von
        #3

        @sigi234 Danke, das hilft schon mal weiter, werd heute Abend mal damit testen und dann berichten.:+1:

        1 Antwort Letzte Antwort
        0
        • dietlmanD Offline
          dietlmanD Offline
          dietlman
          schrieb am zuletzt editiert von
          #4

          kurzer Bericht; das Widget funktioniert genauso wie ich mir das vorgestellt habe für die Batterieladung. Ich habe jetzt versucht dieses Widget auch für meine anderen Icons zu verwenden, dort sind die Werte allerdings Watt, und da kann ich leider nicht einstellen dass er z.b bei einem -Wert ein anderes Image nimmt als bei einem +Wert. Vielleicht gibt es da noch ein anderes Widget wo man das abbilden kann.
          Vielen dank nchmal für diese Info!

          1 Antwort Letzte Antwort
          0
          • F Offline
            F Offline
            Frank_y
            schrieb am zuletzt editiert von
            #5

            Ich habe ähnliche Probleme immer über die Bedingung 'Sichtbarkeit' der Widgets gelöst. Einfach zwei Widgets (z.B. eins in rot, eins in grün) genau übereinander anordnen und die Bedingung so setzen, dass nur eines sichtbar ist.
            Nicht die feine Art, aber funktioniert

            dietlmanD 1 Antwort Letzte Antwort
            0
            • F Frank_y

              Ich habe ähnliche Probleme immer über die Bedingung 'Sichtbarkeit' der Widgets gelöst. Einfach zwei Widgets (z.B. eins in rot, eins in grün) genau übereinander anordnen und die Bedingung so setzen, dass nur eines sichtbar ist.
              Nicht die feine Art, aber funktioniert

              dietlmanD Offline
              dietlmanD Offline
              dietlman
              schrieb am zuletzt editiert von
              #6

              @Frank_y das ist auch eine super Idee, welches widget hast du dafür verwendet?

              1 Antwort Letzte Antwort
              0
              • R Offline
                R Offline
                RappiRN
                Most Active
                schrieb am zuletzt editiert von
                #7

                Die Sichtbarkeit kannst du bei jedem Widget in Abhängigkeit eines Datenpunktes einstellen, ist glaub ich der zweite Punkt in den Widgeteinstellungen.

                Enrico

                1 Antwort Letzte Antwort
                0
                • F Offline
                  F Offline
                  Frank_y
                  schrieb am zuletzt editiert von
                  #8

                  6bc02c8d-3143-499c-b1d1-3dc081b148bd-image.png
                  Hier mal ein Beispiel für einen Button, den ich nur einblende, wenn der STATE==1 ist.
                  Bei STATE==0 blende ich einen anderen Button ein.

                  1 Antwort Letzte Antwort
                  0
                  • dietlmanD Offline
                    dietlmanD Offline
                    dietlman
                    schrieb am zuletzt editiert von
                    #9

                    vielen Dank für die Anleitung. Ich habe das soweit jetzt hinbekommen, allerdings sind meine Werte "Watt" und diese ändern sich auch von + auf - usw. Damit musste ich doch ein wenig herumspielen bis ich es dann so hatte wie ich es wollte.

                    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

                    769

                    Online

                    32.6k

                    Benutzer

                    82.1k

                    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