Neue SVGs hinzufügen

[Hochpass]

Die Resonanz bei der Frage zu den UF-Icons war jetzt nicht sonderlich hoch, daher probier ich jetzt mal von Hand.

Ich habe gerade versucht zwei Icons hinzuzufügen. und diese jeweils in die Ordner /ws und /sw kopiert. Beim SVG im sw Ordner habe ich die Farben in der Datei von Hand von FFFFFF auf 000000 gesetzt.

Kann es sein dass die Farben meiner Icons nicht gesetzt werden da diese 24 Bit sind und nicht 12 Bit wie bei den Icons der Smartvisu?
Wenn man die Farben setzen kann warum braucht die Smartvisu eigentlich noch zwei Ordner mit den gleichen Icons aber unterschiedlichen default Farben?

Grüße Hochpass

[smai]

Die sw werden nur im Design ice mit weissem Hintergrund gebraucht.
Dies weil die Icons in der Design-Standardfarbe nicht in den HTML-Code inline eingebunden werden und sich damit die Farbe nicht per CSS festlegen lässt.
Das stammt von vor meiner Zeit und gefällt mir übrigens auch nicht, deshalb werde ich es wohl in einem kommenden Release ändern.

Die Bittiefe spielt keine Rolle, sondern auf welchem Element im SVG die Farben definiert sind.
In base.js Zeilen 422-424 werden die Farben im SVG mit folgendem Code entfernt:

svg.find('[fill!="none"]').removeAttr('fill');
svg.find('g').children().removeAttr('stroke');
svg.children().removeAttr('stroke');

Die Stroke-Attribute werden also nur auf direkten Kindelementen jedes <g> sowie <svg> entfernt. Keine Ahnung, was der Grund dafür war und weshalb nicht jedes stroke entfernt wird. Aber ich gehe mal davon aus, dass der Originalauthor einen Grund dafür hatte.

[Hochpass]

     {{ basic.symbol('eg.kueche.rolladen_terasse.hindernis',  'eg.kueche.rolladen_terasse.hindernis' ,'','fts_shutter_jam.svg','','','#0b0')}}
     {{ basic.symbol('eg.kueche.rolladen_terasse.hindernis1', 'eg.kueche.rolladen_terasse.hindernis' ,'','message_error.svg',  '','','#0b0')}}

Hmm dann scheint was nicht zu funktionieren oder svgs sind nicht gleich svgs

fts_shutter_jam ist ein UF icon und von mir hinzugefügt, message_error ist schon bei der smrtvisu dabei.

Der shutter ist weiß und der message error ist grün.

[Hochpass]

                        
<span data-role="controlgroup" data-type="horizontal">            
       {{ basic.dual('eg.kueche.rolladen_terasse.innentemperatursperre', 'eg.kueche.rolladen_terasse.innentemperatursperre',  'message_error.svg', 'message_ok.svg',   '0', '1', 'mini') }}
       {{ basic.dual('aussen.wetterstation.helligkeit_sued_schwellwert3', 'aussen.wetterstation.helligkeit_sued_schwellwert', 'weather_sun.svg', 'weather_cloudy.svg', '1', '0', 'mini') }}
       {{ basic.symbol('eg.kueche.rolladen_terasse.hindernis',  'eg.kueche.rolladen_terasse.hindernis' ,'','fts_shutter_jam.svg','','','#0b0')}}
       {{ basic.symbol('eg.kueche.rolladen_terasse.blockiert', 'eg.kueche.rolladen_terasse.blockiert' ,'','fts_shutter_attention.svg','','','#0b0')}}
</span>

Unbenannt.PNG

Auch das gruppieren funktioniert mit den "neuen" SVGs nicht.

P.S. Bitte nicht als Meckern verstehen. Ich spiele gerade nur ein Bischen.

[smai]

Du gruppierst basic.dual mit basic.symbol. Meines Wissens lassen sich nur Knöpfe wie basic.dual und basic.button gruppieren aber keine reinen Icons wie basic.symbol oder basic.switch.

Kannst du fts_shutter_jam.svg mal anhängen, damit ich mir das anschauen kann?

[Hochpass]

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.3, 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="fts_x5F_shutter_x5F_jam">
    <g>
        <g>
            <path style="fill:#FFFFFF;" d="M174.945,194.178c3.935,0,7.87,0,11.805,0c6.448,0,6.448-10,0-10c-3.935,0-7.87,0-11.805,0
                C168.497,184.178,168.497,194.178,174.945,194.178L174.945,194.178z"/>
        </g>
    </g>

        <line style="fill:none;stroke:#FFFFFF;stroke-width:10;stroke-miterlimit:10;" x1="180.719" y1="123.645" x2="180.719" y2="252.064"/>
    <g>
        <path style="fill:none;stroke:#FFFFFF;stroke-width:10;stroke-miterlimit:10;" d="M279.5,248.734c0,3.645-2.955,6.6-6.6,6.6H88.1
            c-3.646,0-6.6-2.955-6.6-6.6V129.934c0-3.645,2.955-6.6,6.6-6.6h184.8c3.645,0,6.6,2.956,6.6,6.6V248.734z"/>
        <path style="fill:#FFFFFF;stroke:#FFFFFF;stroke-width:10;stroke-miterlimit:10;" d="M286.666,124.713
            c0,0.509-3.164,0.922-7.066,0.922H81.733c-3.903,0-7.066-0.414-7.066-0.922V108.12c0-0.509,3.164-0.922,7.066-0.922H279.6
            c3.902,0,7.066,0.414,7.066,0.922V124.713z"/>
    </g>
    <g>
        <g>
            <path style="fill:#FFFFFF;" d="M75,143.333c48.659,0,97.318,0.001,145.976,0.002c21.953,0,43.905,0,65.857,0.001
                c6.448,0,6.448-10,0-10c-48.659,0-97.317-0.001-145.977-0.002c-21.952,0-43.905,0-65.857-0.001
                C68.551,133.333,68.551,143.333,75,143.333L75,143.333z"/>
        </g>
    </g>
    <g>
        <g>
            <path style="fill:#FFFFFF;" d="M75,156.333c48.659-0.688,97.318-1.377,145.976-2.065c21.953-0.311,43.905-0.621,65.857-0.932
                c6.443-0.091,6.452-10.091,0-10c-48.659,0.688-97.317,1.377-145.977,2.065c-21.952,0.311-43.905,0.621-65.857,0.932
                C68.557,146.424,68.548,156.424,75,156.333L75,156.333z"/>
        </g>
    </g>
    <g>
        <g>
            <path style="fill:#FFFFFF;" d="M75,169.333c48.659-1.377,97.318-2.755,145.976-4.133c21.953-0.621,43.905-1.243,65.857-1.864
                c6.435-0.182,6.452-10.183,0-10c-48.659,1.377-97.317,2.755-145.977,4.133c-21.952,0.621-43.905,1.243-65.857,1.864
                C68.565,159.515,68.547,169.515,75,169.333L75,169.333z"/>
        </g>
    </g>
    <g>
        <g>
            <path style="fill:#FFFFFF;" d="M75,183.332c48.464-2.744,96.927-5.489,145.391-8.234c22.147-1.254,44.295-2.508,66.442-3.763
                c6.41-0.363,6.445-10.365,0-10c-48.464,2.745-96.928,5.489-145.391,8.234c-22.147,1.254-44.295,2.508-66.442,3.763
                C68.589,173.696,68.554,183.697,75,183.332L75,183.332z"/>
        </g>
    </g>
    <g>
        <g>
            <path style="fill:#FFFFFF;" d="M75.077,198.178c48.27-4.557,96.539-9.113,144.808-13.67c22.342-2.108,44.684-4.218,67.025-6.327
                c6.362-0.601,6.421-10.606,0-10c-48.27,4.557-96.539,9.113-144.808,13.669c-22.342,2.109-44.684,4.218-67.025,6.327
                C68.714,188.778,68.656,198.784,75.077,198.178L75.077,198.178z"/>
        </g>
    </g>
    <g>
        <g>
            <path style="fill:#FFFFFF;" d="M202.564,245.262c11.272-19.523,22.544-39.048,33.816-58.572c-2.878,0-5.757,0-8.635,0
                c11.272,19.524,22.545,39.049,33.817,58.572c1.439-2.508,2.878-5.016,4.317-7.523c-22.545,0-45.089,0-67.634,0
                c-6.448,0-6.448,10,0,10c22.545,0,45.089,0,67.634,0c3.806,0,6.211-4.243,4.317-7.523
                c-11.272-19.524-22.545-39.049-33.817-58.572c-1.873-3.244-6.762-3.244-8.635,0c-11.272,19.523-22.544,39.048-33.816,58.572
                C190.699,245.81,199.342,250.843,202.564,245.262z"/>
        </g>
    </g>
    <g>
        <path style="fill:#FFFFFF;" d="M235.932,229.29c0,1.187-0.384,2.101-1.15,2.747c-0.768,0.646-1.637,0.971-2.606,0.971
            s-1.838-0.325-2.605-0.971c-0.767-0.646-1.151-1.561-1.151-2.747c0-1.185,0.385-2.101,1.151-2.747
            c0.768-0.646,1.636-0.969,2.605-0.969s1.839,0.323,2.606,0.969C235.548,227.189,235.932,228.105,235.932,229.29z M235.407,211.717
            c0,2.183-0.081,4.217-0.243,6.102c-0.161,1.885-0.377,3.797-0.646,5.735h-4.605c-0.27-1.938-0.491-3.851-0.666-5.735
            c-0.176-1.885-0.263-3.919-0.263-6.102v-7.23h6.423V211.717z"/>
    </g>
</g>
<g id="Ebene_1">
</g>
</svg>

https://github.com/OpenAutomationProject/knx-uf-iconset

[Hochpass]

Meines Wissens lassen sich nur Knöpfe wie basic.dual und basic.button gruppieren

Du hast Recht. Steht auch so in der Anleitung. Sorry. Da habe ich eine falsche Annahme getroffen.