Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Jqui-mfd svg Farbe wechseln

NEWS

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

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.4k

Jqui-mfd svg Farbe wechseln

Scheduled Pinned Locked Moved Visualisierung
7 Posts 2 Posters 1.7k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • C Offline
    C Offline
    Communicate
    wrote on last edited by
    #1

    Hallo,

    ich habe folgendes widget:

    [{"tpl":"tplMfdWindowBool","data":{"oid":"hm-rpc.2.LEQ0175072.1.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,"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,"iconColor":"#2d47b4","invert_icon":false,"g_values":true,"closed_icon":"/icons-material-svg/alert/ic_error_48px.svg","opened_icon":"/vis.0/main/img/Household_window.svg","closed_iconColor":"#d03939","opened_iconColor":"#34d72d","closed_value":"0","opened_value":"false"},"style":{"left":"217px","top":"161px","width":"103px","height":"90px"},"widgetSet":"jqui-mfd"}]
    

    leider funktioniert das "einfärben" der svg Grafik nicht.

    Sieht jemand, was ich falsch mache?

    Grüße

    Dominic

    1 Reply Last reply
    0
    • C Offline
      C Offline
      Communicate
      wrote on last edited by
      #2

      Hallo zusammen,

      ich habe noch ein bisschen gespielt und bekomme es einfach nicht hin, dass eine Statusabhängige Farbänderung passiert.

      Hier habe ich einmal das Standard-Fenster jqui-mfd-Widget genommen

      [{"tpl":"tplMfdWindowBool","data":{"oid":"1","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","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,"closed_value":"0","opened_value":"1","closed_iconColor":"#f21c1c","opened_iconColor":"#46e24d","iconColor":"#fde549"},"style":{"left":"174px","top":"449px","width":"228px","height":"192px"},"widgetSet":"jqui-mfd"}]
      

      Egal was ich mache, das Fenstersymbol wird nicht grün.

      Kann mir jemand von Euch helfen?

      1 Reply Last reply
      0
      • C Offline
        C Offline
        Communicate
        wrote on last edited by
        #3

        Hallo nochmal,

        bei der Fehleranalyse bin ich auf die idee gekommen, dass es an meinen verkünpften "object-ids" liegen könnte.

        Das dort der Status anders ist (z.B. false und ich gabe 0 an).

        Kann ich das irgendwie testen?

        1 Reply Last reply
        0
        • P Offline
          P Offline
          pix
          wrote on last edited by
          #4

          Hallo,

          habe jetzt dein Widgetcode importiert und gestest: 261_bildschirmfoto_2017-09-23_um_10.56.42.jpg
          Du brauchst eigentlich nur im Admin-Reiter Objekte nachsehen, welche Werte das Objekt des Fensterkontaktes jeweils annimmt. Homematic RHS (Drehgriffsensoren) haben die Stati 0,1 und 2. TFK false (offen) und true (zu).

          Mich wundert nur die Farbgebung: Du setzt rot für zu und grün für offen ?

          Gruß

          Pix

          ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

          1 Reply Last reply
          0
          • C Offline
            C Offline
            Communicate
            wrote on last edited by
            #5

            Hallo pix,

            vielen Dan für Deine Antwort.

            Ich bekomme es aber trotzdem nicht hin:

            Hier mal ein Screenshot von meinem Object => das müsste eigentlich false sein:

            515_bildschirmfoto_2017-09-23_um_13.44.22.png

            Und so sieht es im VIS aus:

            ich hätte hier jetzt ein offens Fenster in grün erwartet:

            515_bildschirmfoto_2017-09-23_um_13.46.05.png

            Ich verstehe einfach nicht, was ich falsch machen…

            1 Reply Last reply
            0
            • C Offline
              C Offline
              Communicate
              wrote on last edited by
              #6

              Hallo,

              ich komme der Sache ein bisschen näher.

              Wenn ich für AUF und ZU spassehalber einmal einen Rolladenaktor nehme, funktioniert es grundsätzlich:
              515_bildschirmfoto_2017-09-23_um_14.45.05.png

              Wenn ich dann den Aktor austausche und das Fenster nehme, geht es auch.
              515_bildschirmfoto_2017-09-23_um_14.46.07.png

              Wenn ich jetzt aber ein eigenes Symbol / SVG auswähle, dann geht gar keine Farbgebung mehr:
              515_bildschirmfoto_2017-09-23_um_14.48.37.png

              1 Reply Last reply
              0
              • C Offline
                C Offline
                Communicate
                wrote on last edited by
                #7

                Hallo zusammen,

                ich habe mir den Quellcode einmal etwas genauer angesehen (auch wenn ich weder ein SVG-Experte noch ein Entwickler bin).

                Letztendlich muss es um folgende Zeilen gehen:

                if (imageColor) {
                            %>
                                ![](<%= image %>) vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
                              <% 
                            } else {
                            %>
                                ![](<%= image %>)
                            <% 
                            }
                
                            %>
                

                Die Variable imageColor wird korrekt gefüllt - das konnte ich debuggen.

                Was ich allerdings nicht verstehe ist die Anweisung, in der die SVG-Datei eingefärbt werden soll:

                          ![](<%= image %>) vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
                
                

                genauer gesagt der letzte Teil

                <%= (el) -> vis.binds.jqueryui.setSvgColor(el, imageColor) %>/>
                

                Hier verstehe ich nicht, was es mit vis.binds. … auf sich hat. Und dann die Frage, ob es die FUnktion setSvgColor überhaupt gibt und wo diese definiert ist. Was bedeutet eigentlich "el"?

                Und zu guter letzt:

                Kann ich hier etwas anderes als setSVGColor nutzen?

                M.E. würde ein einfaches````
                .setAttribute("fill", "#008000");

                
                Dafür bräuchte ich aber das SVG-Element im Zugriff, nur habe ich keine Ahnung wie ich da ran komme (hat bestimmt etwas it dem "el") zu tun…
                1 Reply Last reply
                0
                Reply
                • Reply as topic
                Log in to reply
                • Oldest to Newest
                • Newest to Oldest
                • Most Votes


                Support us

                ioBroker
                Community Adapters
                Donate

                746

                Online

                32.7k

                Users

                82.3k

                Topics

                1.3m

                Posts
                Community
                Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                ioBroker Community 2014-2025
                logo
                • Login

                • Don't have an account? Register

                • Login or register to search.
                • First post
                  Last post
                0
                • Home
                • Recent
                • Tags
                • Unread 0
                • Categories
                • Unreplied
                • Popular
                • GitHub
                • Docu
                • Hilfe