Zum Ende der Metadaten springen
Zum Anfang der Metadaten

Dies ist eine Anleitung, wie man sich eigene Vektorgrafiken (Scalable Vector Graphics, kurz SVG) in die Loxone-Visualisierung einbinden kann.

Schritt-für-Schritt-Anleitung

Da der Symboleditor der Loxone Config (Stand: 7.3.2.17) keine Vektorgrafiken unterstützt sondern alles in total hässliche Pixelgrafiken verwandelt, habe ich nach einer Lösung gesucht, wie man das trotzdem zurechtfummeln könnte, eigene Vectorgrafiken (.SVG) in die Visualisierung zu bekommen.

  1. Mangels künstlerischer Fähigkeiten habe ich mir vorerst damit beholfen, Grafiken bei Google zu suchen und mit einem Bitmap-Malprogramm zurechtzuschnippeln.
  2. Anschließend habe ich die Grafiken dann auf der Seite http://image.online-convert.com/convert-to-svg in eine SVG Datei umgewandelt. Die sind zwar relativ groß – aber wenn man nicht gut zeichnen kann... 
  3. Dann habe ich mir eine der Loxone-Standardgrafiken in Inkscape geöffnet und die umgewandelte SVG-Datei importiert.
  4. Nachdem ich sie auf Größe gezogen, die Original-Grafik gelöscht und die Gruppierung aufgehoben (Kontextmenü, rechte Maustaste) habe, musste ich noch etwas an der Farbzuordnung ändern. Dazu die Grafik markieren und wieder das Kontextmenü mit der rechten Maustaste öffnen und Füllung und Kontur wählen. Hier bei „Füllen“ auf „Farbe ist undefiniert“ gehen (das Fragezeichen). 
  5. Nun habe ich die Grafik unter dem Namen 00000000-0000-003b-2100000000000000.svg und 00000000-0000-003b-2100000000000000.png gespeichert. (Siehe auch 6.)
  6. Den Namen für die Datei habe ich der .loxone Datei entnommen indem ich sie mit einem Editor z.B. Notepad++ öffnete und einfach nach dem letzen Raum-Icon in der .loxone Datei suchte. Darunter habe ich einen neuen Eintrag hinzugefügt. Hierbei habe ich die 003b (3B=Hex59) und 58 durch die Addition von je einer 1 errechnet.
    Aus dem letzten Raum <C Type="IconPlace" V="101" U="00000000-0000-003a-2100000000000000" Title="Testroom1" Ix="57"/>
    wird <C Type="IconPlace" V="101" U="00000000-0000-003b-2100000000000000" Title="Testroom1" Ix="58"/>
  7. Die .loxone-Datei speichern und wieder in die Loxone Config laden. Nun ist das neue Icon bei den Räumen als Symbol verfügbar – leider nur als leeres grünes Quadrat - aber das stört nicht. 
  8. Nun das Symbol fix einem Raum zugeordnet, damit etwas angezeigt werden kann. 
  9. Nach dem Speichern der SVG-Datei habe ich diese ebenfalls im Editor geöffnet und den Anfang des SVG-Tags bis zur eigentlichen Grafik (path-Tag) durch den der Loxone Standarddatei ersetzt. In meinem Fall wurde also aus
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Ebene_1"
x="0px"
y="0px"
viewBox="0 0 32 32"
style="enable-background:new 0 0 32 32;"
xml:space="preserve"
inkscape:version="0.91 r13725"
sodipodi:docname="0b713e43-03a3-2a98-ffffeee000000000.svg"><metadata
id="metadata9"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs7"><linearGradient
id="linearGradient4320"
osb:paint="solid"><stop
style="stop-color:#000000;stop-opacity:1;"
offset="0"
id="stop4322" /></linearGradient></defs><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1017"
id="namedview5"
showgrid="false"
inkscape:zoom="14.75"
inkscape:cx="39.208048"
inkscape:cy="14.202398"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="Ebene_1" /><g
id="g4444"
transform="matrix(0.0574239,0,0,0.0574239,3.0575902,2.4510522)"
style="fill:#dab41b;fill-opacity:1">

einfach nur ein

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.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" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">

Anschließend habe ich die SVG-Datei gespeichert, die images.zip aus dem /web/ Ordner des Miniservers herunter geladen, die SVG und PNG Datei mit in die images.zip gepackt und diese per FTP wieder auf den Miniserver hochgeladen.

Zum Schluß den Miniserver durch Speichern in der Loxone Config neu starten.

 

Unter Umständen muss man noch den Browser Cache löschen oder die App (iOS) neu installieren, wenn man an einer vorhandenen Grafik etwas ändert.

Außerdem ist nach einem Miniserver-Update die images.zip erneut auf den Miniserver zu kopieren.

Sven Thierfelder hat auch nochmal darauf hingewiesen, dass nach der Anpassung der images.zip und der Übertragung auf den MiniServer der MiniServer neu gestartet werden muss.

Es hat sich auch gezeigt, dass es nötig sein kann, die Verbindung zum MiniServer aus der App zu löschen und die App richtig neu zu starten um dann nach erneuter Verbindung mit dem MiniServer die Symbole sehen zu können.

Ergänzungen zur Schritt-für-Schritt Anleitung

Für Loxone Config 8 (getestet mit v8.1.11.11) funktioniert die o.a. Anleitung noch wie beschrieben. Hier noch ein paar Ergänzungen und Empfehlungen:

  • Für Raum-, Kategorie- und Statussymbole getestet: Es ist deutlich einfacher, die eigenen Symbole direkt in den Ordner /web auf den Miniserver zu kopieren und nicht in die Datei images.zip zu integrieren. Man spart sich die Arbeit die Datei herunterzuladen, die Symbole mit dem passenden Zip-Programm hinzuzufügen und wieder hochzuladen. Die App muss weder neu installiert werden noch der MiniServer neu gestartet zu werden.
  • Nach Updates müssen lediglich die Symbole noch einmal auf den Miniserver kopiert werden (getestet bei Update von v8.1.11.11 auf v8.3.3.21).
  • Die Symbole werden im Browser und evtl. auch in der App zwischengespeichert und leider nicht bei Änderungen der Datei auf dem Server wieder neu geladen, so wie es üblicherweise bei Webservern der Fall ist. Wenn Symbole modifiziert werden, dann kann man die Symbole mit einem anderen Dateinamen (z.B. Hochzählen) hinzufügen, um dieses Problem zu umgehen. Alternativ kann wie o.a. der Cache im Browser gelöscht und evtl. die App neu installiert werden.
  • Ich bin für ein Raumsymbol mit der Nummer "0100" angefangen statt die "nächste freie" Nummer also z.B. 00000000-0000-003b-2100000000000000.svg zu verwenden. Das erste eigene Raumsymbol hat dann den Namen 00000000-0000-0100-2100000000000000.svg. Die kursiv dargestellte Nummer wird einfach hochgezählt und ist zumindest bei Symbolen von Loxone hexadezimal angegeben. Damit möchte ich Probleme beim Update vermeiden, wenn Loxone z.B. ein paar weitere Raumsymbole ergänzen sollte und diese fortlaufend nummeriert. Eine Garantie, dass es mit dieser Nummer keine Probleme gibt, ist dies natürlich nicht. 
  • Für die Bearbeitung der SVGs empfehle ich auch das o.a. Programm Inkscape. Ich habe die eigenen Symbole im Format "normales SVG" statt "inkscape SVG" gespeichert. Damit sind weniger spezifische Ergänzungen in der Datei vorhanden.
  • Ich hatte Probleme, wenn die Elemente "rect", "ellipse" in der SVG Datei vorhanden waren. Diese wurden bei mir nicht angezeigt. In Inkscape kann man alle Elemente in den Typ "path" umwandeln (Objekt auswählen, Menü "Pfad", "Objekt in Pfad umwandeln"), um Probleme zu vermeiden. Außerdem sollten Gruppierungen (Element <g>) vermieden werden. Nachfolgend sind ein paar Beispiele für SVGs, die sowohl mit der App (getestet mit iPhone) und Webbrowser funktionieren.
  • Wichtig: Raum- und Kategoriesymbole sollten keine Farbe haben, aber Statussymbole benötigen die (grüne) Farbe. Man kann die Farbe in Inkscape setzen (siehe Hinweise ganz oben), aber auch das Attribut "Style=" in der Datei mit einem Editor suchen und entsprechen anpassen.
  • Tip für Troubleshooting: die eigene SVG Datei direkt (lokal) mit unterschiedlichen Browsern öffnen, bevor diese auf den Miniserver hochgeladen werden oder falls diese in der App oder über die Visu im Webbrowser in nicht richtig funktionieren.
  • Mit dem Programm Filezilla lassen sich die erstellten SVGs einfach per FTP auf den MiniServer in den Ordner /web kopieren. 
  • Anmerkung zu Schritt 6: Die neuen Symbole werden z.B. als 
    <C Type="IconPlace" V="112" U="00000000-0000-0103-2100000000000000" Title="Abstellraum" WF="16384" Ix="55"/>
    in der .loxone Config Datei direkt hinter den anderen Zeilen des gleichen Typs, also z.B. Type="IconPlace" ergänzt. Die Nummernfolge hinter U= gibt den Dateinamen an, Title= ist der angezeigte Name und Ix= die interne Indexnummer. Ohne die Indexnumer, auch wenn diese eine nicht in LoxConfig vorhandene Nr. angibt, wurde bei mir nur das Default-Icon angezeigt. Neben dem Typ IconPlace für Raumsymbole gibt es noch die Typen IconCat für ein Kategoriesymbol und IconState für ein Statussymbol. Wichtig ist die korrekte Angabe der spitzen Klammern für Anfang und Ende (wie bei XML). Nach dem Laden der veränderten .loxone Datei in LoxConfig kann man die Symbole für Räume und Kategorien in eigenen Räumen bzw. Kategorien verwenden. Die Statussymbole werden direkt bei den entsprechenden Parametern der Bausteine ausgewählt. 
  • Leider sind alle Symbole in LoxConfig unsichtbar. Anscheinend verwendet LoxConfig nicht die SVGs für die Anzeige, sondern Objekte, die in der .exe Datei enthalten sind und auf die mit Ix= verwiesen wird. Auch mit Hilfe von Visual Studio habe ich es nicht geschafft, die Symbole irgendwie zu ergänzen. Eine Fehlermeldung oder ein merkwürdiges Verhalten habe ich in LoxConfig bei den fehlenden Symbolen nicht feststellen können. Wichtig ist eine gute Benennung, da man das Symbol dort nicht sieht.
  • Nachdem die neue Loxone Config Datei in den Miniserver gespeichert wurde (nach Schritt 7. und 8.) sind die neuen Symbole sofort im Browser und in der App sichtbar.
  • Noch ein Tip: Bevor man die neuen Symbole mit der App verwendet, sollte man die über einen Webbrowser testen. Falls eine Nachbearbeitung notwendig ist, dann kann der Cache des Browsers relativ einfach gelöscht werden (in Safari auch selektiv für eine einzelne IP-Adresse möglich) und die App braucht nicht gelöscht und wieder neu installiert werden. 

Vorhandene Symbole in Loxone Config v8.1.11.11:

Kategoriesymbole:

00000000-0000-0001-2000000000000000.svg
bis
00000000-0000-0031-2000000000000000.svg

Raumsymbole:

00000000-0000-0001-2100000000000000.svg
bis
00000000-0000-0034-2100000000000000.svg

Statussymbole:

00000000-0000-0001-2200000000000000.svg
bis
00000000-0000-0019-2200000000000000.svg

Die kursiv dargestellte Nummer zählt die Symbole und wird hexadezimal angegeben. Alle Symbole gibt es auch mit dem gleichen Namen und .png Endung. Bin mir nicht sicher, wofür die tatsächlich verwendet werden. Evtl. als Template, sofern man ein vorhandenes Symbol bearbeiten möchte. Da die Symbole nach Bearbeitung im Loxone Symboleditor nur noch als PNG verarbeitet und in der Visu grau und nicht mehr grün dargestellt werden, macht das für eigene SVG Symbole wenig Sinn. Man kann daher wahrscheinlich auf die zusätzlichen PNG Dateien für eigene Symbole verzichten. 

PNG Dateien:

Größe 32x32 Pixel, Format RGB

Die Bilder haben einen transparentem Hintergrund, der über die Farbe RGB 214, 214, 214 definiert ist.

Eigene Symbole

Hier sind ein paar Beispiele für Symbole zu finden, die selbst erstellt wurden. Gerne können weitere Symbole hinzugefügt werden!

Ansichten der App und im Webbrowser

                      

Verwandte Artikel

10 Kommentare

  1. Ich habe für mich ein Icon für die Bewegungsmelder gebastelt.

    Mit auffallender Animation. Falls es jemand brauchen kann...

    Das Video Bewegung.mkv zeigt, wie es aussieht.

    Hier der Code des Icons/Symbols.

    Bewegungs-Icon mit Animation
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!-- Generator: Adobe Illustrator 18.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" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 32 32" xml:space="preserve">
       <svg width="320" height="320" viewBox="0 0 320 320">
        <path
            fill="#83b817" stroke="#83b817"
          d="m 26.483852,3.0765935 c -1.704725,3.39e-5 -3.08667,1.4971404 -3.086704,3.3439266 -3e-5,1.8468324 1.381934,3.3440182 3.086704,3.344052 1.704819,4.22e-5 3.086858,-1.4971635 3.086828,-3.344052 -3.4e-5,-1.8468358 -1.382055,-3.3439646 -3.086828,-3.3439266 z M 19.767709,4.3692613 C 19.572896,4.3487953 19.224587,4.2509879 19.030968,4.2395029 17.407976,4.1432482 15.8233,4.3345979 14.215835,4.333127 11.036334,4.4110101 3.6834651,8.8759618 6.9784458,10.706442 8.7485671,10.70256 9.9323625,9.4872974 11.445672,8.745536 12.609943,8.1643733 15.051951,6.9922113 15.463503,8.9669248 14.269511,11.446994 10.695307,12.853634 9.7905655,15.842827 9.0601798,17.51512 10.876616,19.46929 8.8200817,21.003365 7.7736146,21.334764 5.9583947,21.356404 4.0323155,21.233726 2.4041283,21.130023 1.125026,21.64759 1.0878643,22.854586 c 0.075653,3.296694 8.5601732,2.27681 10.2121787,0.988732 1.873002,-1.486736 1.091475,-2.17742 1.423136,-3.620422 0.404403,-2.273515 3.13878,-0.363621 3.986518,0.603693 1.38987,0.950638 2.278241,2.973942 1.868103,4.849358 -0.209456,1.412662 0.109249,3.411097 1.773855,3.724511 1.499714,0.127541 1.589662,-1.650885 1.845528,-2.791882 0.202945,-1.807742 0.263148,-3.744653 0.02923,-5.599143 -0.725542,-1.804451 -1.910823,-2.397091 -3.341805,-3.233669 -1.666986,-0.725334 -1.728243,-3.217444 -0.220388,-4.14607 1.819507,-1.333601 2.637774,1.33746 4.197388,2.201394 1.956626,0.734358 3.235342,1.05406 4.924491,1.413993 1.37068,0.328265 3.260072,-0.750239 2.795886,-2.312405 -0.628798,-1.575902 -2.561655,-1.496155 -3.956021,-1.817558 -2.12737,-0.06983 -2.60781,-2.760816 -3.598406,-4.322758 -1.170395,-1.4660895 0.666206,-2.6973527 -3.259835,-4.4230987 z">
            <animate
                attributeType="XML"
                attributeName="fill"
                values="#FFFF00;#FF0000;#FFFF00"
                dur="0.5s"
                repeatCount="indefinite"/>
            </path>
     </svg>
  2. Peter Rupp sagt:

    Hallo, hat es jemand geschafft, SVG auch in der aktuellen Release 8 einzubinden?

    Ich habe das oben beschriebene Verfahren verwendet und auch einfach nur eines der existierenden (mit gleichem Namen) SVGs modifiziert. Ergebnis: Default Icon für alles. Scheint als ob eine modifizierte images.zip Datei nicht korrekt verarbeitet werden kann. Mir wäre sehr an einem Workarround gelegen, denn wir brauchen angepasste Symbole.

    Der Loxone Support ist mit der Anfrage überfordert und kann keine Details nennen - nur es geht nicht. (traurig)

    Danke! Gruß Peter 

    1. Probleme am besten im Forum klären (Lächeln)

      Btw hat ich auch ohne Änderung manchmal keine richtigen Icons nach Versionsupdates. D.h. versuch mal im Browser Cache zu leeren oder im Appclient App neu zu installieren oder etwas zu warten, dann geht es vielleicht. (benutze aber selber keine eigenen SVGs)

      Ansonsten ist es auf jeden fall kein Vorgehen, was vom Support unterstützt wird, d.h. müsstest die Hilfe im Forum suchen.

  3. Peter Rupp sagt:

    Hab das gerade nochmal probiert - bei mir nimmt er das default Icon. Was könnte bei der .zip Datei oder dem SVG faul sein? Browser Cache etc. werden geleert und der Miniserver nimmt auch meine .zip Datei. Er zeigt nur die SVGS nicht an. Weder wenn ich neue hinzufüge, noch wenn ich eines der Loxone Kunstwerke austausche... Könnte mir bitte mal jemand eine solche modifizierte .zip dabei hochladen, damit ich den Fehler eingrenzen kann? oder eines der SVGs? Vielen Dank!

  4. Peter Rupp sagt:

    ... Die Loxone eigenen Icons sind teilweise schon recht "schiach" wie der Österreicher sagt. Wer will schon eine "Kloschüssel", die das mit viel Liebe zum Detail gestaltete Gäste WC symbolisiert. Oder dieses schwarze Irgendwas, das eine Küche darstellen soll. Da sollte man mal zum Mitbewerber Gira die G1 Symbolik anschauen - eine Augenweide (Lächeln)  Hat auch ein Designer gemacht...

  5. Ich hänge mich hier mal rein.

    Ich benutze schon SVG's seit die neue App rausgekommen ist und noch niemand sonst wusste dass da jetzt SVG's im Einsatz sind.

    Wenn es nur um Statusicons geht, braucht man den Umweg über die images.zip nicht gehen. Neues Icon erstellen, PNG und SVG anlegen. Das PNG im Iconeditor reinladen und speichern. Das neue Icon im Statusbaustein o.ä. Verwenden und Config im MiniServer speichern. In der Projektdatei die ID des neuen Icon ausfindig machen, das SVG entsprechend benennen und per FTP ins /web/ des MiniServer hochladen. Schon ist es verfügbar. Bei Räumen habe ich es noch nicht versucht, doch bei den Kategorien funktioniert es nicht so einfach. Hier werden zwar Benutzerdefinierte Icons unterstützt, doch SVG verweigert er wenn es kein Systemicon ist, was sich in der Images.zip befindet. So benutze ich ein Icon welches ich nicht benutze, suche mir dessen ID aus der Config und benenne meine SVG entsprechend, ersetze dann die vorhandene SVG mit meiner und lade die images.zip wieder hoch. Durch die ersetzte Zip, muss meistens der MiniServer aus der App gelöscht, die App neu gestartet und der MiniServer wieder verbunden werden. Dadurch wird die Images.zip ganz offensichtlich erst neu geladen. Danach werden mir die Icons korrekt angezeigt.

     

    Gruß Sven

  6. Peter Rupp sagt:

    ... Danke für den ausführlich Bericht! Genau das (ein File in der Images.zip austauschen) habe ich auch versucht - aber bekomme eben ein Default Icon angezeigt. Die App und das Web-Interface scheinen die Datei anzuziehen, denn wenn ich die original Datei wieder herstelle, geht alles wieder. (halt mit den Loxone Icons) Ich vermute irgend etwas stimmt mit meiner images.zip nicht, oder das Format der SVG Datei ist irgendwie anders (habe extra den Header aus einer der Standard Icons übernommen). Welchen ZIP Kompressor verwendet ihr? Mit welchem Tool bearbeitet ihr die SVG? ich fall langsam vom Glauben ab. Ich verwende zip - r -X auf dem Mac und Illustrator für die SVGs. Das muss doch irgendwie machbar sein... Könnte mir bitte jemand eine modifizierte images.zip schicken?

  7. Wenn Du nicht weißt ob Dein zip und/oder die SVG dran Schuld ist, dann nimm doch wie gesagt, diese SVG erst einmal als userdefined Statusicon. Dieses brauchst Du nur in die ID umzubenennen und direkt ins Webverzeichnis legen. Die muss nicht in die ZIP. Geht dann die SVG liegt's am ZIP geht's nicht, ist es die SVG. Wenn Du aber die SVG im Browser anzeigen kannst, denke ich nicht, dass es an der SVG liegt. Wenn die Header o.ä. falsch sind, könnte mE nach nur die Farbe dann nicht richtig gesetzt werden.

    Gruß Sven

  8. Also bei mir funktioniert das alles noch.

  9. Gerade hatte ich auch Probleme mein eigenes SVG aus der images.zip anzuzeigen und habe festgestellt, dass der MiniServer nach Austausch der images.zig einen Neustart benötigt.

    Also:

    • images.zip anpassen und auf den MiniServer übertragen
    • MiniServer neustarten
    • Verbindung zum MiniServer aus der App löschen
    • App richtig neu starten
    • MiniServer neu verbinden ...