Loxone Visualisierung: Eigene Icons / Symbole erstellen

18.02.
2016

Da mich der Symboleditor in der Loxone Config genervt hat, habe ich mir mal angeschaut, wie man das zurechtfummeln könnte, eigene Vectorgrafiken (.SVG) in die Visualisierung zu bekommen. Mangels kĂŒnstlerischer FĂ€higkeiten habe ich mir vorerst damit beholfen, Grafiken bei Google zu suchen und mit einem Bitmap-Malprogramm zurecht zu schnippeln. Anschließend habe ich die Grafiken dann auf der Seite http://image.online-convert.com/convert-to-svg in eine SVG Datei umgewandelt. Leider sind die relativ groß – aber egal. Dann habe ich mir eine der Loxone-Standardgrafiken in Inkscape geöffnet und die umgewandelte SVG-Datei importiert. 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). Nun habe ich die Grafik unter dem Namen 00000000-0000-003b-2100000000000000.svg und 00000000-0000-003b-2100000000000000.png gespeichert. Den Namen fĂŒr die Datei habe ich der .loxone Datei entnommen indem ich sie mit einem Editor z.B. Notepad++ öffnete. Dazu habe ich einfach nach dem letzen Raum-Icon in der .loxone Datei gesucht und darunter 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="Testroom2" Ix="58"/>

Zuerst hatte ich versucht, ein neues leeres Raumsymbol „Testsymbol“ anzulegen aber dann bleibt das Symbol spĂ€ter in der Visu grau. Außerdem habe ich das Problem, wenn ich einen neuen Raum „Testraum“ angelege, dass die Loxone Config (momentan 7.3.2.17) gern dabei abschmiert.

Na jedenfalls die .loxone Datei fix gespeichert und wieder in die Loxone Config geladen. Und schon ist das neue Icon bei den RĂ€umen als Symbol verfĂŒgbar – leider nur als grĂŒnes Quadrat aber das stört mich nicht. Also fix einem Raum zugeordnet, damit was angezeigt werden kann. 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, in die images.zip des /web/ Ordners gepackt per FTP auf den Miniserver geladen und diesen durch Speichern in der Loxone Config neu gestartet.
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.

Fertig.

Tags:

Dein Kommentar