Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Alternative Widgets für jqui-mfd-custom10

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Alternative Widgets für jqui-mfd-custom10

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

      @nik82 sagte in Alternative Widgets für jqui-mfd-custom10:

      kein Widget was die Funktion von dem "jqui-mfd-custom10" hat

      Was genau fehlt Dir denn?
      Im Zweifelsfall kann man alles per CSS so designen wie man's möchte.

      nik82 1 Reply Last reply Reply Quote 0
      • nik82
        nik82 Most Active @Codierknecht last edited by

        @codierknecht
        Ich teste seit gestern rum wie ein verrückter, ich habe folgende crazy Fehler:
        Es liegt nicht am Widget, sondern an dem SVG Icon:

        Sobald ich im custom10 Widget dieses SVG Icon reinmache...
        6e21c144-6a91-422c-9b43-4fef366d0ac9-image.png

        ... zerhaut es mir die Formatierung aller Icons auf der VIS Seite und alle Icons sind schwarz:

        59d9d302-7325-4467-ab8e-61345ce579b0-image.png

        Hier der Code des SVG-Icons:


        <?xml version="1.0" encoding="iso-8859-1"?>
        <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
        <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="361px"
        height="361px" viewBox="0 0 361 361" style="enable-background:new 0 0 361 361;" xml:space="preserve">
        <g id="measure_x5F_photovoltaic_x5F_inst">
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M107.643,172.392c-12.008,11.611-24.015,23.222-36.023,34.833
        c2.042,1.188,4.085,2.377,6.127,3.566c4.086-16.196,8.173-32.392,12.259-48.587c-1.795,0.73-3.59,1.46-5.385,2.191
        c7.921,4.585,15.842,9.17,23.764,13.755c4.1,2.373,7.79-3.964,3.7-6.331c-7.921-4.585-15.842-9.17-23.764-13.755
        c-2.016-1.167-4.802-0.121-5.385,2.191c-4.086,16.196-8.173,32.392-12.259,48.587c-0.9,3.569,3.467,6.139,6.127,3.566
        c12.008-11.61,24.015-23.222,36.023-34.832C116.231,174.285,111.041,169.105,107.643,172.392z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M168.469,286.943c-0.094-31.259-0.189-62.518-0.283-93.776c-2.508,1.439-5.016,2.878-7.523,4.317
        c38.969,29.556,77.939,59.11,116.909,88.666c2.246,1.703,4.492,3.407,6.738,5.11c0.841-3.105,1.683-6.212,2.523-9.317
        c-41.121,0-82.242,0-123.364,0c-6.449,0-6.449,10,0,10c41.122,0,82.243,0,123.364,0c5.402,0,6.252-6.489,2.523-9.317
        c-38.97-29.556-77.939-59.11-116.909-88.666c-2.246-1.703-4.492-3.407-6.738-5.11c-3.125-2.37-7.534,0.867-7.523,4.317
        c0.094,31.259,0.189,62.518,0.283,93.776C158.489,293.391,168.489,293.393,168.469,286.943z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M186.102,198.53c27.914,21.531,55.828,43.063,83.742,64.594c5.106,3.938,10.076-4.756,5.047-8.635
        c-27.914-21.531-55.828-43.063-83.742-64.594C186.042,185.957,181.072,194.651,186.102,198.53L186.102,198.53z"/>
        </g>
        </g>
        <path style="fill:none;stroke:#FFFFFF;stroke-width:10;stroke-miterlimit:10;" d="M269.763,123.484
        c0,2.466-1.999,4.466-4.466,4.466h-25.682c-2.467,0-4.467-2-4.467-4.466V97.802c0-2.467,2-4.466,4.467-4.466h25.682
        c2.467,0,4.466,2,4.466,4.466V123.484z"/>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M210.597,78.328c2.644,2.644,5.288,5.289,7.933,7.933c1.926,1.926,5.145,1.926,7.07,0
        c1.927-1.926,1.927-5.145,0-7.071c-2.644-2.644-5.288-5.289-7.933-7.933c-1.926-1.926-5.145-1.926-7.07,0
        C208.67,73.183,208.67,76.401,210.597,78.328L210.597,78.328z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M176.358,115.369c12.271,0,24.542,0,36.812,0c6.448,0,6.448-10,0-10c-12.271,0-24.541,0-36.812,0
        C169.909,105.369,169.909,115.369,176.358,115.369L176.358,115.369z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M290.743,143.233c-2.187-2.187-4.373-4.373-6.561-6.56c-1.926-1.926-5.145-1.926-7.07,0
        c-1.927,1.926-1.927,5.145,0,7.071c2.187,2.187,4.373,4.373,6.561,6.56c1.926,1.926,5.145,1.926,7.07,0
        C292.67,148.378,292.67,145.159,290.743,143.233L290.743,143.233z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M256.906,185.917c0-12.271,0-24.542,0-36.813c0-6.449-10-6.449-10,0c0,12.271,0,24.542,0,36.813
        C246.906,192.365,256.906,192.365,256.906,185.917L256.906,185.917z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M200.668,169.776c8.678-8.677,17.354-17.354,26.031-26.031c4.564-4.564-2.507-11.635-7.07-7.071
        c-8.678,8.677-17.354,17.354-26.031,26.031C189.033,167.269,196.104,174.34,200.668,169.776L200.668,169.776z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M109.334,74.042c-9.947,17.159-19.893,34.318-29.84,51.477c-4.855,8.376,8.136,15.875,12.99,7.5
        c9.947-17.159,19.893-34.318,29.84-51.477C127.18,73.166,114.188,65.667,109.334,74.042L109.334,74.042z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M84.009,136.503c10.483,1.972,20.966,3.944,31.449,5.916c9.458,1.779,13.464-12.682,3.961-14.47
        c-10.483-1.972-20.966-3.944-31.449-5.916C78.512,120.254,74.505,134.716,84.009,136.503L84.009,136.503z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M110.943,131.434c-9.947,17.159-19.893,34.317-29.84,51.476c-4.855,8.376,8.136,15.875,12.99,7.5
        c9.947-17.159,19.893-34.317,29.84-51.476C128.789,130.558,115.797,123.059,110.943,131.434L110.943,131.434z"/>
        </g>
        </g>
        </g>
        <g id="Ebene_1">
        </g>
        </svg>

        Wenn ich aber das Icon editiere und nur den oberen Text rausmache, so das das Icon so aussieht...
        587c96f9-d933-445c-b652-b954ff0252cd-image.png

        ... dann sind meine Icons auf der ganzen Seite wieder normal:

        2f5c13fd-629d-4858-8917-bbca5ec1b6e5-image.png

        Hier der abgeänderte Code des SVG:


        <?xml version="1.0" encoding="iso-8859-1"?>
        <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
        <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="361px"
        height="361px" viewBox="0 0 361 361" style="enable-background:new 0 0 361 361;" xml:space="preserve">
        <g id="measure_x5F_photovoltaic_x5F_inst">
        <path style="fill:none;stroke:#FFFFFF;stroke-width:10;stroke-miterlimit:10;" d="M269.763,123.484
        c0,2.466-1.999,4.466-4.466,4.466h-25.682c-2.467,0-4.467-2-4.467-4.466V97.802c0-2.467,2-4.466,4.467-4.466h25.682
        c2.467,0,4.466,2,4.466,4.466V123.484z"/>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M210.597,78.328c2.644,2.644,5.288,5.289,7.933,7.933c1.926,1.926,5.145,1.926,7.07,0
        c1.927-1.926,1.927-5.145,0-7.071c-2.644-2.644-5.288-5.289-7.933-7.933c-1.926-1.926-5.145-1.926-7.07,0
        C208.67,73.183,208.67,76.401,210.597,78.328L210.597,78.328z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M176.358,115.369c12.271,0,24.542,0,36.812,0c6.448,0,6.448-10,0-10c-12.271,0-24.541,0-36.812,0
        C169.909,105.369,169.909,115.369,176.358,115.369L176.358,115.369z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M290.743,143.233c-2.187-2.187-4.373-4.373-6.561-6.56c-1.926-1.926-5.145-1.926-7.07,0
        c-1.927,1.926-1.927,5.145,0,7.071c2.187,2.187,4.373,4.373,6.561,6.56c1.926,1.926,5.145,1.926,7.07,0
        C292.67,148.378,292.67,145.159,290.743,143.233L290.743,143.233z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M256.906,185.917c0-12.271,0-24.542,0-36.813c0-6.449-10-6.449-10,0c0,12.271,0,24.542,0,36.813
        C246.906,192.365,256.906,192.365,256.906,185.917L256.906,185.917z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M200.668,169.776c8.678-8.677,17.354-17.354,26.031-26.031c4.564-4.564-2.507-11.635-7.07-7.071
        c-8.678,8.677-17.354,17.354-26.031,26.031C189.033,167.269,196.104,174.34,200.668,169.776L200.668,169.776z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M109.334,74.042c-9.947,17.159-19.893,34.318-29.84,51.477c-4.855,8.376,8.136,15.875,12.99,7.5
        c9.947-17.159,19.893-34.318,29.84-51.477C127.18,73.166,114.188,65.667,109.334,74.042L109.334,74.042z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M84.009,136.503c10.483,1.972,20.966,3.944,31.449,5.916c9.458,1.779,13.464-12.682,3.961-14.47
        c-10.483-1.972-20.966-3.944-31.449-5.916C78.512,120.254,74.505,134.716,84.009,136.503L84.009,136.503z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M110.943,131.434c-9.947,17.159-19.893,34.317-29.84,51.476c-4.855,8.376,8.136,15.875,12.99,7.5
        c9.947-17.159,19.893-34.317,29.84-51.476C128.789,130.558,115.797,123.059,110.943,131.434L110.943,131.434z"/>
        </g>
        </g>
        <g>
        <g>
        <path style="fill:#FFFFFF;" d="M107.643,172.392c-12.008,11.611-24.015,23.222-36.023,34.833
        c2.042,1.188,4.085,2.377,6.127,3.566c4.086-16.196,8.173-32.392,12.259-48.587c-1.795,0.73-3.59,1.46-5.385,2.191
        c7.921,4.585,15.842,9.17,23.764,13.755c4.1,2.373,7.79-3.964,3.7-6.331c-7.921-4.585-15.842-9.17-23.764-13.755
        c-2.016-1.167-4.802-0.121-5.385,2.191c-4.086,16.196-8.173,32.392-12.259,48.587c-0.9,3.569,3.467,6.139,6.127,3.566
        c12.008-11.61,24.015-23.222,36.023-34.832C116.231,174.285,111.041,169.105,107.643,172.392z"/>
        </g>
        </g>
        </g>
        <g id="Ebene_1">
        </g>
        </svg>

        Das ist doch crazy oder? Anscheinend haben einige Icons einfach eine komische formatierung.

        Weiß jemand zufällig noch andere SVG Icons die mit dem custom10 Widget funktionieren?
        Im Internet finde ich nichts, ausser Bezahlseiten.

        sigi234 Codierknecht 2 Replies Last reply Reply Quote 0
        • sigi234
          sigi234 Forum Testing Most Active @nik82 last edited by

          @nik82
          Inventwo Icons gehen nicht?

          1 Reply Last reply Reply Quote 1
          • nik82
            nik82 Most Active last edited by

            @sigi234
            Gerade probiert, aber die Inventwo Icons färben sich nicht mit dem Custom10 Widget.
            Ist auch klar, weil das sind nur PNGs, keine SVG.

            1 Reply Last reply Reply Quote 0
            • Codierknecht
              Codierknecht Developer Most Active @nik82 last edited by

              @nik82
              Was willst Du denn darstellen?
              Nur das Icon aufgrund des Wertes einfärben?

              Hast Du mal ein "jqui-mfd - valve" probiert?

              nik82 1 Reply Last reply Reply Quote 0
              • nik82
                nik82 Most Active @Codierknecht last edited by

                @codierknecht
                Ganz genau, ich will eigentlich nur das Icon mit den Werten einfärben,
                "jqui-mfd - valve" geht schon, aber hier kann ich ja nicht das Symbol ändern oder bin ich blind?

                Codierknecht 1 Reply Last reply Reply Quote 0
                • Codierknecht
                  Codierknecht Developer Most Active @nik82 last edited by Codierknecht

                  @nik82 sagte in Alternative Widgets für jqui-mfd-custom10:

                  aber hier kann ich ja nicht das Symbol ändern oder bin ich blind?

                  Stimmt natürlich. Daran hatte ich nicht gedacht.
                  Funktioniert das denn mit dem Einfärben damit?

                  Edit
                  Funktioniert hier einwandfrei:
                  4c6e752f-1e39-4421-a645-830ad670dbde-grafik.png

                  nik82 1 Reply Last reply Reply Quote 0
                  • nik82
                    nik82 Most Active @Codierknecht last edited by

                    @codierknecht
                    Das einfärben funktioniert, aber nochmal, dass ist nicht mein Problem, mein Problem ist, dass es mir meine Icons zerhaut bei bestimmten SVG Bilder, also die SVG funktionieren alle, aber bei manchen werden meine anderen Icons einfach schwarz und bei manchen eben nicht.
                    Sie Post: https://forum.iobroker.net/post/1255103

                    Codierknecht 1 Reply Last reply Reply Quote 0
                    • Codierknecht
                      Codierknecht Developer Most Active @nik82 last edited by

                      @nik82 sagte in Alternative Widgets für jqui-mfd-custom10:

                      bei manchen werden meine anderen Icons einfach schwarz

                      Was sind das für "andere"?

                      nik82 1 Reply Last reply Reply Quote 0
                      • nik82
                        nik82 Most Active @Codierknecht last edited by

                        @codierknecht
                        HQ-Widgets, aber auch jqui-Container, also alle die eigentlich so einen schwarz/weißen Farbverlauf haben.
                        Aber das wiederrum auch nur an meinem Tablet, am PC funktioniert die Seite auch mit dem custom10 widget und dem icon.
                        Komplett crazy Fehler.

                        Samson71 Codierknecht 2 Replies Last reply Reply Quote 0
                        • Samson71
                          Samson71 Global Moderator @nik82 last edited by

                          @nik82 sagte in Alternative Widgets für jqui-mfd-custom10:

                          Aber das wiederrum auch nur an meinem Tablet, am PC funktioniert die Seite auch mit dem custom10 widget und dem icon.
                          Komplett crazy Fehler.

                          Da klingt weniger nach crazy als nach einem Problem/einer Macke von Android bzw. dem damit verwendeten Browser. Ich hatte vor x Jahren mal ein ähnliches Phänomen mit einem älteren Tablet, wo Farben/Darstellungen vom PC teils abwichen. Lag damals an einem (uralten) Android bzw. der dagehörigen Webview-Version.

                          nik82 1 Reply Last reply Reply Quote 0
                          • Codierknecht
                            Codierknecht Developer Most Active @nik82 last edited by

                            @nik82 sagte in Alternative Widgets für jqui-mfd-custom10:

                            nur an meinem Tablet, am PC funktioniert die Seite

                            Dann bin ich hier raus, da ich das nicht nachvollziehen kann.

                            1 Reply Last reply Reply Quote 0
                            • nik82
                              nik82 Most Active @Samson71 last edited by

                              @samson71
                              Da geb ich dir absolut Recht und ist ja eigentlich schon belegt das es so ist.
                              Leider ist es bei allen Browsern am Tablet der Fall.
                              Was ich halt crazy finde das es bei manchen Icons funktioniert und bei manchen nicht.
                              Aber dann werd ich einfach jetzt ein paar Icons durchprobieren.

                              Hat jemand noch eine andere Quelle an SVG Icons die mit dem Custom 10 funktionieren?

                              Hätte sogar den Illustrator hier, aber egal wie ich die SVG exportiere, die Färben sich einfach nicht mit dem Custom10.

                              1 Reply Last reply Reply Quote 0
                              • sigi234
                                sigi234 Forum Testing Most Active @nik82 last edited by sigi234

                                @nik82
                                Mal den Energiefluss Adapter erweitert angesehen?

                                nik82 1 Reply Last reply Reply Quote 1
                                • nik82
                                  nik82 Most Active @sigi234 last edited by

                                  @sigi234
                                  Hey Sigi, danke dir, der schaut echt nice aus, werde ich gleich mal anschauen 👍

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

                                  Support us

                                  ioBroker
                                  Community Adapters
                                  Donate

                                  828
                                  Online

                                  31.7k
                                  Users

                                  79.7k
                                  Topics

                                  1.3m
                                  Posts

                                  4
                                  16
                                  445
                                  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