Integration der "neuen" Icons vom knx-uf-iconset

[daviid]

Wie siehts eig aus, inzwischen gibts ja über 200 Icons, allerdings 480*480 groß und "nur" in weiß.

Ich würde gerne mal wieder den aktuellen Stand des Icon-Sets in die richtige Größe bringen und auch zumindest noch Orange als Farbe hinzufügen, da es inzwischen doch verdammt viele icons gibt die ich gern verwenden will und ich eh grad am Visu bauen bin, bzw. umstellen auf Metal.

Wenn mir jemand erklärt wie man das macht kann ich das auch gern einmal Monatlich oder so machen.

Wer hat dass denn letztes mal gemacht?


Gruß
David

[netsrac]

Nunja, am "schönsten" wäre es, wenn man hier mal ein kleines Script schreibt, was das dann auf Knopfdruck macht: Also am besten per SVN die aktuellen Icons auschecken, resizen und die entsprechende JavaScript Datei bauen.

Alles Andere ist wohl unsinniges gefummel :-)

Just my 2 cents...

Netsrac

[oli_777]

Hallo,
ich hatte mal vor einiger Zeit ein Script zum Export aus Illustrator als SVG an mfd geschickt, um alle Icos als SVG zu bekommen.

 
var doc = app.activeDocument;
var start = true;
var preffix = "Icon_";
var suffix = "";
var noname = "0";
if (documents.length > 0){
if (doc.saved==false) {
alert('Dokument muss gespeichert sein vor Ausführun des Skripts!!!','saveLayersToSVG',true);
start = false;
}
if (start){
//Dateipfad über Dialogbox abfragen
var destFolder = null;
destFolder = Folder.selectDialog( 'Ordner für SVG-Dateien auswählen.', '~' );
// Speicheroptionen festlegen
var options
options = this.getOptions();
 
fullDocName = doc.fullName; 
for (j=0; j<doc.layers.length; j++){ 
if ((doc.layers[j].printable == true)&&(doc.layers[j].locked == false)) {
doc.layers[j].locked = true;
nameLayer = doc.layers[j].name;
for (i=0; i<doc.layers.length; i++){ 
if (doc.layers[i].locked == false){
doc.layers[i].visible = true;
doc.layers[i].remove();
i = i-1;
} 
}
for (i=0; i<doc.layers.length; i++){
doc.layers[i].locked = false;
doc.layers[i].visible = true;
}
var param = doc.name.split('.'); 
realDocName = param[0]; 
if (nameLayer == noname) docName = preffix+realDocName+suffix;
else docName = preffix+realDocName+'_'+nameLayer+suffix; 
var saveName = new File ( destFolder + "/" + docName );
doc.exportFile(saveName, ExportType.SVG, options)
doc.close(SaveOptions.DONOTSAVECHANGES);
doc = null;
app.open (fullDocName);
doc = app.activeDocument;
}
} 
alert( 'Dokumente als SVG gespeichert' );}
}
function getOptions()
{
var options = new ExportOptionsSVG();
 
options.EmbedRasterImages = false;
options.EmbedAllFonts = false;
options.sVGTextOnPath = true;
options.FontSubsetting = SVGFontSubsetting.GLYPHSUSED;
options.DTD = SVGDTDVersion.SVGTINY1_1;
options.PreserveEditability = false;
 
 
return options;
}

Vielleicht kommt ja bald was als SVG....


Gruß
Oli

[Chris M.]

Wer hat dass denn letztes mal gemacht?

Hm, ich glaube das war ich. Ich weiß aber nicht mehr wie genau...

Dieses Script hatte ich aber verwendet um aus einer großen Sammel-SVG die einzelnen Dateien zu erzeugen:

#!/usr/bin/python

## -----------------------------------------------------
## spliticons.py
## -----------------------------------------------------
## Copyright (c) 2011, Christian Mayer, All rights reserved.
##
## This program is free software; you can redistribute it and/or modify it under the terms
## of the GNU General Public License as published by the Free Software Foundation; either
## version 3 of the License, or (at your option) any later version.
##
## This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
## without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
## See the GNU General Public License for more details.
##
## You should have received a copy of the GNU General Public License along with this program;
## if not, see <http://www.gnu.de/documents/gpl-3.0.de.html>.


from optparse import OptionParser
import xml.etree.ElementTree as ET # requires Python 2.5
import os

version = '0.1'

def main():
    usage = "usage: %prog [options] iconset.svg"
    parser = OptionParser(usage=usage, version=("%prog " + version))
    parser.add_option("-v", "--verbose",
                     action="store_true", dest="verbose", default=True,
              help="Show more information")
    (options, args) = parser.parse_args()
    if len(args) != 1:
        parser.error("incorrect number of arguments")
    iconset = args[0]
    outdir = iconset.replace( '.svg', '' ) # FIXME should be parameter!
    
    # get the SVG content
    tree = ET.parse( iconset )
    ET.register_namespace( 'svg', 'http://www.w3.org/2000/svg' )
    ET.register_namespace( 'xlink', 'http://www.w3.org/1999/xlink' )
    #ET.dump( tree )
    
    # create the output directoy
    if not os.path.exists( outdir ):
      os.makedirs( outdir )

    # Figure out the different backgrounds and overlays
    backgrounds = []
    overlays    = []
    for i in tree.iterfind( '*' ): # only top level
      if 'id' in i.attrib:
        if i.attrib['id'].startswith( 'Background' ):
          backgrounds.append( i.attrib['id'] )
        elif i.tag.endswith( 'g' ):
          overlays.append( i.attrib['id'] )
    
    # create output
    for background in backgrounds:
      backgroundElement = tree.find( '*[@id="%s"]' % background )
      
      for overlay in overlays:
        overlayElement = tree.find( '*[@id="%s"]' % overlay )
        root = ET.Element( 'svg' )
        root.attrib = tree.getroot().attrib
        root.append( backgroundElement )
        root[0].set( 'display', 'inline' )
        root.append( overlayElement )
        root[1].set( 'display', 'inline' )
        outtree = ET.ElementTree( root )
        outFile = '%s/%s_%s.svg' % (outdir, background, overlay)
        outtree.write( outFile, encoding='UTF-8', xml_declaration=True )


if __name__ == "__main__":
    main()

[daviid]

OK, aktuell scheinen hier drin ALLE derzeit vorhandenen Icons zu liegen, allerdings als PNG.

Vlt. kann mfd ja mal wieder alle als einzelne SVGs zur verfügung stellen, die müsste man doch theoretisch Alle relativ leicht einfärben und auf die gewünschte Größe bringen können und das auch noch automatisch, oder?

[Chris M.]

@daviid, leicht OT:
Bei Deinem Commit 1201 hast Du die orangenen Icons mit neuem Namen eingebaut - IMHO so "dirty", dass man da nicht von Fix sprechen sollte...

Es gibt ja extra die Falvours für (z.B.) die Farbe.

=> Wenn sollten die mal befüllt werden (vgl. 'audio_audio')

Und dann das <icon> Element um ein Flavour-Attribut, so dass man das lokal überschreiben kann. (Da hatten wir, glaub ich, im Forum schon mal drüber gesprochen)

[MicHau]

Es gibt ja extra die Falvours für (z.B.) die Farbe.

Das Problem dabei ist aber, dass Flavours nicht direkt angesprochen werden können, d.h. man kann in der Config ja nur pro Page ein Flavour einsetzen. Wenn ich aber unterschiedliche Farben haben will, muss ich die Icons über etwas anderes als die Flavours ansprechen, oder?

Wie wäre es denn, den Type dazu zu verwenden? Man könnte ja die Types "white" und "orange" einfügen und default auf "white" setzen.

[daviid]

War wirklich sehr sehr dirty
Aber dass, das keine Lösung für die Ewigkeit ist war mir natürlich durchaus bewusst.
Da sich aber gerade rel. viel bei den Icons getan hat wollte ich das einfach schnell ins SVN schieben damit dass nicht bei jedem Update zu nem Konflikt führt ...

Zum Flavour, wenn ich folgendes mach tut sich einfach nichts, das Flavour bezieht sich doch meines Wissens nur auf ganze Seiten oder?
Also für das "einfärben" einzelne Icons zu Statusanzeige etc. eig nicht zu gebrauchen oder?

<icon name="audio_audio" flavour="sodium" />

Wie denn dann?

[Chris M.]

Wie wäre es denn, den Type dazu zu verwenden? Man könnte ja die Types "white" und "orange" einfügen und default auf "white" setzen.

Wieso unbedingt ein neuen Namen wenn's dafür schon einen gibt? Das Icon ist genau das gleiche, es kommt nur in einer leicht anderen Geschmacksrichtung, ergo: flavour

Zum Flavour, wenn ich folgendes mach tut sich einfach nichts, das Flavour bezieht sich doch meines Wissens nur auf ganze Seiten oder?

Noch: ja

Also für das "einfärben" einzelne Icons zu Statusanzeige etc. eig nicht zu gebrauchen oder?

<icon name="audio_audio" flavour="sodium" />

Wie denn dann?

Genau das wäre mein Vorschlag.

Der muss nur noch implementiert werden - und bis dahin die als Quick&Dirty anders einzubinden lehne ich ab, denn nichts hält sich länger als ein Provisorium. Also lieber gleich richtig!

[Bodo]

Hoi

Ist denn längerfritig vorgesehen die Icons als SVG's einzubinden und dann alle Farben zu ermöglichen?

[Chris M.]

Klar.

Der Endanwender muss das aber nicht zwingend mitbekommen

[makki]

Nunja, am "schönsten" wäre es, wenn man hier mal ein kleines Script schreibt, was das dann auf Knopfdruck macht: Also am besten per SVN die aktuellen Icons auschecken, resizen und die entsprechende JavaScript Datei bauen.

Alles Andere ist wohl unsinniges gefummel :-)

Das ist wohl absolut wahr, händisches downsizen, umformatieren oder einfärben ist totaler Krampf
(kann man vielleicht machen, als Dienst am Anwender aber ansich unnötig, der schönere "Dienst" wäre IMHO SVG->any ) bzw. das SVG gleich richtig verwenden (das muss man nicht einfärben, das macht es selbst )
Chris script, ein kleiner helfer mit imagemagick (hatte ich auch schonmal, sogar unter Windows..), fertig..

Makki

[netsrac]

Okay, ich habe mal ein kleines Shell Script geschrieben, was die aktuellen icons aus dem SVN zieht und mit Imagemagick entsprechend resized und einfärbt.

Habe so bei mir folgende Verzeichnisse mit den entsprechenden Farben erstellt:

drwxr-xr-x  2 oscar users 12288 2012-12-14 16:46 128x128_blue/
drwxr-xr-x  2 oscar users 12288 2012-12-14 16:40 128x128_green/
drwxr-xr-x  2 oscar users 12288 2012-12-14 16:49 128x128_orange/
drwxr-xr-x  2 oscar users 12288 2012-12-14 16:47 128x128_purple/
drwxr-xr-x  2 oscar users 12288 2012-12-14 16:28 128x128_red/
drwxr-xr-x  2 oscar users 12288 2012-12-14 16:54 128x128_white/

Bin hier erstmal absichtlich von "or" auf "orange" und "ws" auf "white" gegangen, um keine Konflikte mit den existierenden Icons zu haben. Außerdem finde ich es so etwas übersichtlicher...

Das script selbst habe ich ins SVN gespielt (visu/icons/knx-uf-iconset/update-icons). Stellt sich die Frage, ob die die von mir so erstellten Icons-Sets auch hochladen soll solange wir noch keine SVGs haben, oder ob das jedem selbst überlassen ist.

Jetzt bräuchten wir noch Chris's Script um die entsprechnede JavaScript-Datei mit den Referenzen auf die Icons zu erstellen...aber vielleicht setze ich mich da auch noch die Tage ran.


Zum Script selbst:

Einfach mit (cd visu/icon/knx-uf-iconset/ ins verzeichnis gehen und das Script mittels ./update-icons aufrufen).

Es lädt die aktuellen icons herunter ins Verzeichnis "raw_480x480" und erstellt dann die oben gezeigten Verzeichnisse. Somit lassen sich sehr leicht auch andere Farben einbauen.

Existieren Icons schon, so werden sie nicht überschrieben. Gibt man jedoch "-f" (für force) als Parameter mit an, so werden die Icons neu erstellt, auch wenn sie schon existieren.


Gruß, Netsrac

[netsrac]

Dazu gibt's im SVN noch ein PHP-Script:

/visu/icon/knx-uf-iconset/showicons.php

Mit dem man sich alle Icons in dem Verzeichnis anzeigen. Momentan gewinnt es noch keinen Design-Preis, aber es hilft, sich einen überblick über alle Icons und Farben zu schaffen.

Version 2.0 wird das ganze dann hübscher in einer Tabelle darstellen...

Gruß, Netsrac

[kleinklausi]

Danke!

Hast Du Dir zufällig auch Gedanken gemacht, wie die Icons in design_setup.js des jeweiligen Designs kommen?

Gruß Moritz