Eigene SVG Symbole in Loxone Config v13 integrieren

Owned by Jan Wachsmuth
Last updated: 04.06 2024
7 min read

Vor Version 13 waren SVG Symbole fest in Loxone Config integriert und auf dem MS im Verzeichnis /web entweder als eigene .svg Datei oder gebündelt über die images.zip Datei hinterlegt. Mit einer manuellen Anpassung der Konfiguration (der .loxone Datei) via Editor konnten eigene Symbole hinzugefügt werden. Leider waren die eigenen Symbole in Loxone Config nicht zu sehen, sondern nur in der App bzw. im Webinterface.

Ab Version 13 (getestet mit v14.5.12.7) hat Loxone die Integration von Symbolen im SVG Format komplett überarbeitet. Eine direkte Integration von Symbolen im SVG Format ist weiterhin über die GUI von Loxone Config nicht möglich, aber eigene Symbole können weiterhin hinzugefügt werden. Die hinzugefügten Symbole sind dann sowohl in der App und im Webinterface, als auch in Loxone Config sichtbar. Die Anleitung basiert auf den Infos aus dem Loxforum, siehe https://www.loxforum.com/forum/projektforen/loxberry/plugins/307337-loxberry-plugin-icon-watchdog?p=364496#post364496 (Dank an die User nufke, arohwer und ChrisPeh!) und sind hier zusammengefasst:

  1. Symbole im SVG Format erstellen

  2. Symbole zur Datei IconLibrary.zip im Verzeichnis "C:\ProgramData\Loxone\Loxone Config <aktuelle Version>" hinzufügen und die in der ZIP-Datei enthaltene Beschreibungsdatei IconLibrary_DEU.xml anpassen

  3. Die Datei IconLibrary.zip auf den MS in das Verzeichnis /sys kopieren

  4. MS neu starten

Die einzelnen Schritte werden nachfolgend näher erläutert:

1. Symbole im SVG Format erstellen

Die folgenden Hinweise sollten bei der Erstellung von Symbolen berücksichtigt werden:

  • Für die Bearbeitung der SVGs empfehle ich das Programm Inkscape. Die eigenen Symbole sollten im Format "normales SVG" statt "inkscape SVG" gespeichert werden. Damit sind weniger spezifische Ergänzungen in der Datei vorhanden.

  • Ich hatte Probleme mit der Anzeige, wenn die Elemente "rect", "ellipse" in der SVG Datei vorhanden waren. 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.

  • Die SVG Datei kann man anschließend mit einem Editor wie Notepad überprüfen und ggf. manuell anpassen. Header-Infos können gekürzt oder gelöscht werden. Dafür können die in der IconLibrary.zip enthaltenen Symbole mit den eigenen Symbolen verglichen werden. Es empfieht sich auch, die eigenen Symbole zu Testzwecken mit einem Webbrowser zu öffnen.

  • In früheren Versionen hatten Raum- und Kategoriesymbole keine Farbe, aber Statussymbole benötigten die (grüne) Farbe. In der aktuellen Version haben die vorhandenen Symbole keine Farbe. Die Farbe wird wohl (noch zu testen!) anhand der Objektfarbe des jeweiligen Objektes gesetzt. Man kann die Farbe in Inkscape setzen, aber auch das Attribut "Style=" in der Datei mit einem Editor suchen und entsprechen anpassen. In Inkscape wird dazu die Grafik markiert, das Kontextmenü mit der rechten Maustaste geöffnet, um die Füllung und Kontur auszuwählen. Hierbei „Füllen“ auf „Farbe ist undefiniert“ einstellen (das Fragezeichen).

  • Die Größe der früheren mitgelieferten Symbole betrug 32x32, die Größe der neuen Symbole beträgt 24x24. Wahrscheinlich ist die Größe egal, da die Koordinaten mit etlichen Nachkommastellen angegeben werden.

  • 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.

2. Symbole zur Datei IconLibrary.zip hinzufügen und Beschreibungsdatei anpassen

Die Datei befindet sich im Verzeichnis "C:\ProgramData\Loxone\Loxone Config <aktuelle Version>", wobei der Platzhalter durch die jeweilige aktuelle Version ersetzt werden muss, also z.B. C:\ProgramData\Loxone\Loxone Config 14.5.12.7

Am einfachsten wird die ZIP-Datei in ein gleichnamiges Unterverzeichnis ausgepackt. Anschließend werden die eigenen Symbole hinzugefügt, indem sie in das Unterverzeichnis IconsFilled kopiert werden. Der Dateiname der Symbole sollte hierbei sprechend sein und nicht die UID, wie in früheren Versionen. Ich habe allen Namen ein “x-” vorangestellt, um eine Überschneidung mit vorhandenen, aber auch zukünftigen Namen von Loxone zu vermeiden.

In der ZIP-Datei sind Beschreibungsdateien für die jeweiligen Sprachen enthalten, die von Loxone unterstützt werden. Für deutsch ist dies die Datei IconLibrary_DEU.xml . Die Beschreibungsdatei(en) aller genutzten Landessprachen müssen anpasst werden (ich habe nur die Datei mit “DEU” angepasst, verwende aber nur deutsch in der Config und App). Das Format der XML-Datei besteht aus einer Liste von <Icon> Elementen mit den Attributen uuid, Id, Tags, line und filled:

<?xml version="1.0" encoding="utf-8"?> <Icons> <Icon uuid="00000001-00FF-0000-0000000000000000" Id="8-ball.svg" Tags="pool,snooker,sport,billard,poolbillard" line="true" filled="true" /> <Icon uuid="00000002-00FF-0000-0000000000000000" Id="aal-alarm-2.svg" Tags="alarm,notfall,sos,aal,hilfe" line="true" filled="true" /> <Icon uuid="00000003-00FF-0000-0000000000000000" Id="aal-alarm.svg" Tags="alarm,notfall,sos,aal,hilfe" line="true" filled="true" /> ... </Icons>

Da die uuid’s der von Loxone mitgelieferten Symbole im ersten Block ab 00000001 (hexadezimal) nach oben gezählt werden, empfiehlt es sich mit einer anderen (hohen) Nummer als Prefix zu beginnen, damit die eigenen uuid’s bei zukünftigen Upgrades von den mitgelieferten Symbolen unterschieden werden und keine Konflikte in einer vorhandenen Config erzeugen können. Ich habe daher eigene uuid’s ab 10000001 zugewiesen.

<?xml version="1.0" encoding="utf-8"?> <Icons> <Icon uuid="00000001-00FF-0000-0000000000000000" Id="8-ball.svg" Tags="pool,snooker,sport,billard,poolbillard" line="true" filled="true" /> ... <Icon uuid="10000001-00FF-0000-0000000000000000" Id="x-pir-green.svg" Tags="pir,bwm,pm,präsenz,melder" line="true" filled="true" /> <Icon uuid="10000002-00FF-0000-0000000000000000" Id="x-pir-red.svg" Tags="pir,bwm,pm,präsenz,melder" line="true" filled="true" /> <Icon uuid="10000003-00FF-0000-0000000000000000" Id="x-valve-closed.svg" Tags="stellantrieb,klima,heizen,ventil" line="true" filled="true" /> <Icon uuid="10000004-00FF-0000-0000000000000000" Id="x-valve-open.svg" Tags="stellantrieb,klima,heizen,ventil" line="true" filled="true" /> <Icon uuid="10000005-00FF-0000-0000000000000000" Id="x-potted-plant.svg" Tags="pflanze,topf" line="true" filled="true" /> <Icon uuid="10000006-00FF-0000-0000000000000000" Id="x-guest-room.svg" Tags="gästezimmer,zimmer,raum" line="true" filled="true" /> <Icon uuid="10000007-00FF-0000-0000000000000000" Id="x-main-door.svg" Tags="zutritt,tür,eingang,windfang" line="true" filled="true" /> <Icon uuid="10000008-00FF-0000-0000000000000000" Id="x-plug-schuko-eu.svg" Tags="elektro,netzwerk,stecker,strom,eurostecker" line="true" filled="true" /> <Icon uuid="10000009-00FF-0000-0000000000000000" Id="x-storage-room.svg" Tags="abstellraum,store,rumpelkammer,kammer,abstellen" line="true" filled="true" /> <Icon uuid="1000000A-00FF-0000-0000000000000000" Id="x-hallway.svg" Tags="flur,treppenhaus" line="true" filled="true" /> <Icon uuid="1000000B-00FF-0000-0000000000000000" Id="x-vaccuum-cleaner.svg" Tags="reinigen,putzen,reiniger,haus,staubsauger,saugen" line="true" filled="true" /> <Icon uuid="1000000C-00FF-0000-0000000000000000" Id="x-mower.svg" Tags="mähroboter,roboter,rasen,mähen" line="true" filled="true" /> <Icon uuid="10000011-00FF-0000-0000000000000000" Id="x-geothermal-heat-pump.svg" Tags="wärmepumpe,erdwärmepumpe,sole,heizung" line="true" filled="true" /> <Icon uuid="10000012-00FF-0000-0000000000000000" Id="x-electric-car-charge-error.svg" Tags="auto,e-auto,elektrisch,wallbox,ladestation" line="true" filled="true" /> <Icon uuid="10000013-00FF-0000-0000000000000000" Id="x-electric-car-charge-key.svg" Tags="auto,e-auto,elektrisch,wallbox,ladestation" line="true" filled="true" /> <Icon uuid="10000014-00FF-0000-0000000000000000" Id="x-electric-car-charge-paused.svg" Tags="auto,e-auto,elektrisch,wallbox,ladestation" line="true" filled="true" /> <Icon uuid="10000015-00FF-0000-0000000000000000" Id="x-electric-car-charged.svg" Tags="auto,e-auto,elektrisch,wallbox,ladestation" line="true" filled="true" /> <Icon uuid="10000016-00FF-0000-0000000000000000" Id="x-electric-car-charging.svg" Tags="auto,e-auto,elektrisch,wallbox,ladestation" line="true" filled="true" /> <Icon uuid="10000017-00FF-0000-0000000000000000" Id="x-electric-car-disconnected.svg" Tags="auto,e-auto,elektrisch,wallbox,ladestation" line="true" filled="true" /> <Icon uuid="10000018-00FF-0000-0000000000000000" Id="x-pressure-sensor.svg" Tags="druck,sensor,leitung" line="true" filled="true" /> <Icon uuid="10000019-00FF-0000-0000000000000000" Id="x-flow-sensor.svg" Tags="durchfluss,sensor,leitung" line="true" filled="true" /> <Icon uuid="1000001A-00FF-0000-0000000000000000" Id="x-gauge.svg" Tags="druck,durchfluss,wasser,sensor" line="true" filled="true" /> <Icon uuid="1000001B-00FF-0000-0000000000000000" Id="x-sensors.svg" Tags="Sensoren" line="true" filled="true" /> <Icon uuid="1000001C-00FF-0000-0000000000000000" Id="x-geothermal-heat-pump2.svg" Tags="wärmepumpe,erdwärmepumpe,sole,heizung" line="true" filled="true" /> </Icons>

Das Attribut Id= zeigt auf den Dateinamen der SVG Datei und mit Tags= kann man Suchbegriffe hinzufügen. Die Attribute line= und filled= müssen noch näher untersucht werden (Infos können hier gerne direkt ergänzt werden - ein Wiki lebt vom Mitmachen!). Möglicherweise bezieht sich das Attribut “filled” auf das Unterverzeichnis IconsFilled, allerdings gibt es kein Unterverzeichnis outlined oder filled, wie bei den Symbolen für den Loxone Touch Pure Flex.

Am Ende müssen alle Dateien wieder in der ZIP-Datei zusammengefasst und komprimiert werden.

Hinweis: Mit der integrierten ZIP-Funktion von Windows wurden keine Symbole in der App angezeigt. Vielleicht hatte ich auch einen Fehler gemacht, aber bei einem 2. Versuch. mit 7-Zip hat es geklappt.

Alternative Bearbeitung: hier noch eine Ergänzung zum Bearbeiten der ZIP-Datei von Romildo aus dem Loxforum für Windows-User. Hierbei wird die ZIP-Datei nicht komplett neu erstellt, sondern nur die geänderten IconLibrary_*.xml ersetzt und die Symbole hinzugefügt:

  1. Windows + E -> Explorer öffnen

  2. C:\ProgramData\Loxone\Loxone Config 15.0.5.11\IconLibrary.zip -> in obere Eingabezeile einfügen und mit Enter bestätigen

  3. Windows + E -> zusätzliches Explorerfenster öffnen

  4. in ein anderes Verzeichnis Eurer Wahl wechseln

  5. IconLibrary_DEU.xml in dieses Verzeichnis kopieren und bearbeiten

  6. IconLibrary_DEU.xml durch bearbeitetes IconLibrary_DEU.xml ersetzen

  7. Dateien für die Symbole der ZIP-Datei hinzufügen.

Anmerkung: es gibt in der ZIP-Datei eine Datei version, die eine Datumsangabe (20231030) enthält. Vielleicht kann/sollte man die Datei anpassen, um Änderungen zu kennzeichnen?

3. Die Datei IconLibrary.zip auf den MS in das Verzeichnis /sys kopieren

Die Datei kann z.B. mit dem Tool FileZilla (kostenlos) per FTP auf den MiniServer in das Verzeichnis /sys kopiert werden. Anschließend können die neuen Symbole in Loxone Config ausgewählt und in die eigenen Konfiguration integriert werden. Nach dem Hochladen der Config in den MS sind die Symbole in der App und dem Webinterface sichtbar.

4. Miniserver neu starten

Damit die Änderungen wirksam werden, muss der Miniserver neu gestartet werden. Dies ist z.B. über einen Webbrowser nach Anmeldung über die folgende URL möglich: http://<ip-adresse-ms>/dev/sys/reboot

Beispielausgaben

Nachfolgend sind einige Screenshots aus Loxone Config und der App dargestellt, um das Ergebnis zu veranschaulichen:

LoxoneConfig-Symbole.png

 

LoxoneConfig-Abstellraum.png

 

Die Symbole werden neben den mitgelieferten Symbolen in Loxone Config angezeigt

Die Symbole können in Loxone Config für Räume, Kategorien oder als Status verwendet werden.

Darstellung des neu hinzugefügten Symbols für einen Abstellraum.

Mittlerweile nutze ich die hier vorgestellte Möglichkeit öfter und habe etliche Symbole hinzugefügt, die Ihr in der Sammlung finden könnt:

Updates von Loxone Config

Hierzu habe ich bisher keine eigenen Erfahrungen sammeln können, aber ich denke, dass man direkt nach einem Upgrade von Loxone Config, die Schritte 2. und 3. wiederholen muss.

Troubleshooting

  • Änderungen an Symbolen sind etwas problematisch, da die App die vom MS heruntergeladenen Symbole zwischengespeichert werden. Entweder werden die Symbole in der XML Datei gelöscht, so wie es ChrisPeh im Loxforum vorgeschlagen hat, der MS neu gestartet und anschließend erneut hinzugefügt oder man könnte eine neue uuid erzeugen. Bei einer neuen uuid müssten den entsprechenden Objekten das “neue” Symbol zugewiesen werden. Evtl. reicht es aus, die App zu löschen und wieder neu auf dem Smartphone oder Tablet zu installieren.