{"id":3635,"date":"2016-02-18T21:00:50","date_gmt":"2016-02-18T20:00:50","guid":{"rendered":"http:\/\/haus.woerstenfeld.de\/?p=3635"},"modified":"2016-02-18T21:17:11","modified_gmt":"2016-02-18T20:17:11","slug":"loxone-visualisierung-eigene-icons-symbole-erstellen","status":"publish","type":"post","link":"https:\/\/haus.woerstenfeld.de\/?p=3635","title":{"rendered":"Loxone Visualisierung: Eigene Icons \/ Symbole erstellen"},"content":{"rendered":"<p>Da mich der Symboleditor in der Loxone Config genervt hat, habe ich mir mal angeschaut, wie man das zurechtfummeln k\u00f6nnte, eigene Vectorgrafiken (.SVG) in die Visualisierung zu bekommen. Mangels k\u00fcnstlerischer F\u00e4higkeiten habe ich mir vorerst damit beholfen, Grafiken bei Google zu suchen und mit einem Bitmap-Malprogramm zurecht zu schnippeln. Anschlie\u00dfend habe ich die Grafiken dann auf der Seite <a href=\"http:\/\/image.online-convert.com\/convert-to-svg\" target=\"_blank\">http:\/\/image.online-convert.com\/convert-to-svg<\/a> in eine SVG Datei umgewandelt. Leider sind die relativ gro\u00df &#8211; aber egal. Dann habe ich mir eine der Loxone-Standardgrafiken in <a href=\"http:\/\/www.inkscape.org\" target=\"_blank\">Inkscape<\/a> ge\u00f6ffnet und die umgewandelte SVG-Datei importiert. Nachdem ich sie auf Gr\u00f6\u00dfe gezogen, die Original-Grafik gel\u00f6scht und die Gruppierung aufgehoben (Kontextmen\u00fc, rechte Maustaste) habe, musste ich noch etwas an der Farbzuordnung \u00e4ndern. Dazu die Grafik markieren und wieder das Kontextmen\u00fc mit der rechten Maustaste \u00f6ffnen und F\u00fcllung und Kontur w\u00e4hlen. Hier bei &#8222;F\u00fcllen&#8220; auf &#8222;Farbe ist undefiniert&#8220; 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\u00fcr die Datei habe ich der .loxone Datei entnommen indem ich sie mit einem Editor z.B. <a href=\"https:\/\/notepad-plus-plus.org\/\" target=\"_blank\">Notepad++<\/a> \u00f6ffnete. Dazu habe ich einfach nach dem letzen Raum-Icon in der .loxone Datei gesucht und darunter einen neuen Eintrag hinzugef\u00fcgt. Hierbei habe ich die 003b (3B=Hex59) und 58 durch die Addition von je einer 1 errechnet.<br \/>\nAus dem letzten Raum<code>&lt;C Type=\"IconPlace\" V=\"101\" U=\"00000000-0000-003a-2100000000000000\" Title=\"Testroom1\" Ix=\"57\"\/&gt;<\/code><br \/>\nwird<br \/>\n<code><em>&lt;C Type=\"IconPlace\" V=\"101\" U=\"00000000-0000-003b-2100000000000000\" Title=\"Testroom2\" Ix=\"58\"\/&gt;<\/em><\/code><\/p>\n<p><em>Zuerst hatte ich versucht, ein neues leeres Raumsymbol &#8222;Testsymbol&#8220; anzulegen aber dann bleibt das Symbol sp\u00e4ter in der Visu grau. Au\u00dferdem habe ich das Problem, wenn ich einen neuen Raum &#8222;Testraum&#8220; angelege, dass die Loxone Config (momentan 7.3.2.17) gern dabei abschmiert.<\/em><\/p>\n<p>Na jedenfalls die .loxone Datei fix gespeichert und wieder in die Loxone Config geladen. Und schon ist das neue Icon bei den R\u00e4umen als Symbol verf\u00fcgbar &#8211; leider nur als gr\u00fcnes Quadrat aber das st\u00f6rt 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\u00f6ffnet und den Anfang des SVG-Tags bis zur eigentlichen Grafik (path-Tag) durch den der Loxone Standarddatei ersetzt.<\/p>\n<p>In meinem Fall wurde also aus<br \/>\n<code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?&gt;<br \/>\n&lt;!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --&gt;<br \/>\n&lt;svg<br \/>\nxmlns:osb=\"http:\/\/www.openswatchbook.org\/uri\/2009\/osb\"<br \/>\nxmlns:dc=\"http:\/\/purl.org\/dc\/elements\/1.1\/\"<br \/>\nxmlns:cc=\"http:\/\/creativecommons.org\/ns#\"<br \/>\nxmlns:rdf=\"http:\/\/www.w3.org\/1999\/02\/22-rdf-syntax-ns#\"<br \/>\nxmlns:svg=\"http:\/\/www.w3.org\/2000\/svg\"<br \/>\nxmlns=\"http:\/\/www.w3.org\/2000\/svg\"<br \/>\nxmlns:sodipodi=\"http:\/\/sodipodi.sourceforge.net\/DTD\/sodipodi-0.dtd\"<br \/>\nxmlns:inkscape=\"http:\/\/www.inkscape.org\/namespaces\/inkscape\"<br \/>\nversion=\"1.1\"<br \/>\nid=\"Ebene_1\"<br \/>\nx=\"0px\"<br \/>\ny=\"0px\"<br \/>\nviewBox=\"0 0 32 32\"<br \/>\nstyle=\"enable-background:new 0 0 32 32;\"<br \/>\nxml:space=\"preserve\"<br \/>\ninkscape:version=\"0.91 r13725\"<br \/>\nsodipodi:docname=\"0b713e43-03a3-2a98-ffffeee000000000.svg\"&gt;&lt;metadata<br \/>\nid=\"metadata9\"&gt;&lt;rdf:RDF&gt;&lt;cc:Work<br \/>\nrdf:about=\"\"&gt;&lt;dc:format&gt;image\/svg+xml&lt;\/dc:format&gt;&lt;dc:type<br \/>\nrdf:resource=\"http:\/\/purl.org\/dc\/dcmitype\/StillImage\" \/&gt;&lt;dc:title&gt;&lt;\/dc:title&gt;&lt;\/cc:Work&gt;&lt;\/rdf:RDF&gt;&lt;\/metadata&gt;&lt;defs<br \/>\nid=\"defs7\"&gt;&lt;linearGradient<br \/>\nid=\"linearGradient4320\"<br \/>\nosb:paint=\"solid\"&gt;&lt;stop<br \/>\nstyle=\"stop-color:#000000;stop-opacity:1;\"<br \/>\noffset=\"0\"<br \/>\nid=\"stop4322\" \/&gt;&lt;\/linearGradient&gt;&lt;\/defs&gt;&lt;sodipodi:namedview<br \/>\npagecolor=\"#ffffff\"<br \/>\nbordercolor=\"#666666\"<br \/>\nborderopacity=\"1\"<br \/>\nobjecttolerance=\"10\"<br \/>\ngridtolerance=\"10\"<br \/>\nguidetolerance=\"10\"<br \/>\ninkscape:pageopacity=\"0\"<br \/>\ninkscape:pageshadow=\"2\"<br \/>\ninkscape:window-width=\"1920\"<br \/>\ninkscape:window-height=\"1017\"<br \/>\nid=\"namedview5\"<br \/>\nshowgrid=\"false\"<br \/>\ninkscape:zoom=\"14.75\"<br \/>\ninkscape:cx=\"39.208048\"<br \/>\ninkscape:cy=\"14.202398\"<br \/>\ninkscape:window-x=\"-8\"<br \/>\ninkscape:window-y=\"-8\"<br \/>\ninkscape:window-maximized=\"1\"<br \/>\ninkscape:current-layer=\"Ebene_1\" \/&gt;&lt;g<br \/>\nid=\"g4444\"<br \/>\ntransform=\"matrix(0.0574239,0,0,0.0574239,3.0575902,2.4510522)\"<br \/>\nstyle=\"fill:#dab41b;fill-opacity:1\"&gt;<\/code><br \/>\neinfach nur ein<br \/>\n<code>&lt;?xml version=\"1.0\" encoding=\"iso-8859-1\"?&gt;<br \/>\n&lt;!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --&gt;<br \/>\n&lt;!DOCTYPE svg PUBLIC \"-\/\/W3C\/\/DTD SVG 1.1\/\/EN\" \"http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd\"&gt;<br \/>\n&lt;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\"<br \/>\nviewBox=\"0 0 32 32\" style=\"enable-background:new 0 0 32 32;\" xml:space=\"preserve\"&gt;<\/code><br \/>\nAnschlie\u00dfend 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.<br \/>\nUnter Umst\u00e4nden muss man noch den Browser Cache l\u00f6schen oder die App (iOS) neu installieren, wenn man an einer vorhandenen Grafik etwas \u00e4ndert.<\/p>\n<p>Fertig.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Da mich der Symboleditor in der Loxone Config genervt hat, habe ich mir mal angeschaut, wie man das zurechtfummeln k\u00f6nnte, eigene Vectorgrafiken (.SVG) in die Visualisierung zu bekommen. Mangels k\u00fcnstlerischer F\u00e4higkeiten habe ich mir vorerst damit beholfen, Grafiken bei Google zu suchen und mit einem Bitmap-Malprogramm zurecht zu schnippeln. Anschlie\u00dfend habe ich die Grafiken dann [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[1],"tags":[119],"_links":{"self":[{"href":"https:\/\/haus.woerstenfeld.de\/index.php?rest_route=\/wp\/v2\/posts\/3635"}],"collection":[{"href":"https:\/\/haus.woerstenfeld.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/haus.woerstenfeld.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/haus.woerstenfeld.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/haus.woerstenfeld.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3635"}],"version-history":[{"count":9,"href":"https:\/\/haus.woerstenfeld.de\/index.php?rest_route=\/wp\/v2\/posts\/3635\/revisions"}],"predecessor-version":[{"id":3644,"href":"https:\/\/haus.woerstenfeld.de\/index.php?rest_route=\/wp\/v2\/posts\/3635\/revisions\/3644"}],"wp:attachment":[{"href":"https:\/\/haus.woerstenfeld.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/haus.woerstenfeld.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/haus.woerstenfeld.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}