Icons

[docb]

@Masterchief Rudolf:
Wäre es denn möglich, fhem beizubringen
style="fill:#000000;stroke:none">
auch auszutauschen. Also nicht nur fill="#000000" sondern auch fill:#000000?
Es ist nämlich extrem anstrengend, die ganzen Dinger vernünftig manuell auszutauschen (Inkscape nimmt standardmäßig Variante 1) und sehr fehlerträchtig. Das kostet mich immer doppelt so viel Zeit wie die Erstellung des Icons...
Viele Grüße
doc

[rudolfkoenig]

Habs eingebaut: wars einfach und ich will keinen behindern.

Allerdings finde ich, dass Du beim Kommentar "Es ist nämlich extrem anstrengend, die ganzen Dinger vernünftig manuell auszutauschen" den <Ironisch gemeint> Tag vergessen hast.

[docb]

Hellas!
@Rudi: vielen Dank!!!
@künftige Icon-Bastler: ich habe ja in diesem Thread schon mal ein paar Tipps für Inkscape gepostet, jetzt noch mehr: fhem ist ziemlich empfindlich bei svgs - ob es sie anzeigt oder nicht. Also auch wenn eure svgs im Browser angezeigt werden, kann es trotzdem sein, dass fhem gar nichts anzeigt. Ich habe eine Zeile identifiziert, die auf keinen Fall im svg fehlen darf - hier der Anfang eines typischen mit Inkscape erstellten Icons.
 (...) ersetzt einige Zeilen, die für diese Erklärung nicht wichtig sind.

Code Auswählen Erweitern


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
...
   version="1.0"
   width="585"
   height="585"
   viewBox="0 0 585 585"
   id="svg2421"
   sodipodi:docname="usb-stick.svg">



Und die wichtige Zeile ist die mit viewBox - wenn die nicht drin ist, zeigt fhem gar nix an. Es hat mich zwei Abende gekostet das rauszufinden, v.a. weil die icons ohne fhem im Browser normal angezeigt werden. Wer also etwas basteln mag, kann sich die Zeit sparen - so gehts ;-)

@all: anbei noch ein paar neue Icons - auf Wunsch von Uli wieder einzeln

viele Grüße
Doc

[Puschel74]

Hallo,

@Doc

ich habe ja in diesem Thread schon mal ein paar Tipps für Inkscape gepostet, jetzt noch mehr:

Das würde ja direkt nach einem Wiki-Artikel brüllen ;-)
So gehen die Infos nicht unter/verloren und jeder könnte sich im Wiki in einem Artikel die Infos holen.

Grüße

P.S.: Danke für die geniale Arbeit

[docb]

Hallo,
gute Idee mit der Wiki. Werde mich am Montag dran machen. Nachdem ich das jetzt selber raushabe, läufts wie am Fließband. Statt umgerechnet ca. 3 Stunden pro Icon sinds jetzt nur noch 15 Minuten ;-)
Anbei noch der HM-Lan Adapter frisch aus Inkscape...
Viele Grüße
doc

[mathyou]

Hallo,
nach dem Andre mich bat, stelle ich die kleine Step by Step Anleitung zum einbinden der neuen Web Icon`s hier ein, damit alle etwas davon haben...

Da viele Hinweise und Infos oft für Fachprofies sind, hier für alle anderen.

Um die neuen Web Icon`s in den FHEM Webserver zu intekrieren muß man folgenden Befehl ausführen:
 
 attr WEB iconPath default:openautomation

Dieser Befehl muß in die Befehlszeile im Webbrowser des FHEM Webservers hinein kopiert oder geschrieben werden und den man dann mit der Taste Enter Senden/Ausführen muß.
Danach ist noch das Neustarten des FHEM Servers notwendig, z.B. mit dem Befehl: shutdown restart (auch in die Befehlszeile im Webbrowser des FHEM Webservers hinein kopieren) und dann auch wieder Enter drücken, erst danach erscheinen dann die supper schönen und zahlreichen Icons unter der Symbolauswahl, bei denen man dann sogar noch die Farbe ändern kann... !

Man kann den Webserver auch Stromlos machen (z.B. bei der Fritz Box) um den Neustart zu erzwingen, jedoch dauert das halt sehr lange...

Um nun den Icons andere Farbtöne zu verleihen, z.B. bei den Symbolen für on / off, usw. muß man nur hinter dem Befehl folgendes Anhängen:

 @red  (für rot)  oder  @green  (für grün)... natürlich alle Farbnamen in English !

Um die Befehle: @red  ect. nun nutzen zu können, müßt Ihr im FHEM Web-Server auf den Menü Punkt: Edit file  links ausen klicken, dann wählt, klickt Ihr auf der folgenden Seite dann ganz oben den Eintrag: fhem.cfg aus die sich dann öffnenede Liste blättert Ihr durch bis zu Euerem Befehlssatz in dem Ihr das Icon neu ausgewählt habt und nun die Farbe ändern möchtet...

Aber Vorsicht !!! In dieser Liste darf nichts anderes geändert werden, auch Leerzeichen-Abstände können zu Fehlern führen, gebt also acht was Ihr ändert !!!

Ein Eintrag der geändert wird könnte dann z.B. so lauten / aussehen:

define Dachfenster_Rollo_vom_4.OG_u._Dach FS20 11121112 1112
attr Dachfenster_Rollo_vom_4.OG_u._Dach devStateIcon .*on:black_Steckdose.on .*off:black_Steckdose.off
attr Dachfenster_Rollo_vom_4.OG_u._Dach icon fts_window_roof_shutter@black
attr Dachfenster_Rollo_vom_4.OG_u._Dach room 4.OG_u._Dach

hier wurde nur das Icon geändert und in schwarz (black) umgefärbt... Das Schalt Icon für on und off ist die Steckdose in grau und grün die ja jeder schon kennt.

oder so:

define PIRA_Bew.Melder_1_1 FS20 11121112 1113
attr PIRA_Bew.Melder_1_1 devStateIcon .*on:message_presence@red .*off:message_presence@green
attr PIRA_Bew.Melder_1_1 icon message_presence@black
attr PIRA_Bew.Melder_1_1 room Bew.Melder
define FileLog_PIRA_Bew.Melder_1_1 FileLog ./log/PIRA_Bew.Melder_1_1-%Y.log PIRA_Bew.Melder_1_1
attr FileLog_PIRA_Bew.Melder_1_1 logtype text
attr FileLog_PIRA_Bew.Melder_1_1 room Bew.Melder

hier wurde das Icon in das neue Symbol für Bewegungsmelder geändert und in schwarz (black) umgefärbt und zusätzlich sind hier die Schalt-Icons auch in das neue Symbol für Bewegungsmelder geändert aber für "on" also Bewegung das Symbol dann in rot (red) und für Stille/keine Bewegung in grün (green) ....

Sind die Einträge angepasst müßt Ihr auch abspeichern, oben den Button: save fhem.cfg  drücken... ganz wichtig, sonst sind alle Änderungen nach dem nächsten Neustart des fhem Servers alle Änderungen wieder weg/verloren !!!

Hier noch der Link zu den Farben, der hier schon mal angezeigt wurde:
http://www.december.com/html/spec/colorsvghex.html

Ich hoffe daß diese Step by Step Anleitung einigen hilft, die Icons erfolgreich mit ein zu binden.
mfg. mathyou.

[docb]

Hallo. Was hälst du davon wenn ich deinen Beitrag hier mit ein paar kleinen Änderungen in die wiki einstelle?
Viele grüße
Doc

[mathyou]

Hallo Doc

ja, natürlich, mach das gerne und sende dann den Link zum Wiki, daß das alle finden oder ich setze den Link dann noch in meinen Beitrag...
lg. mathyou.

[rudolfkoenig]

> attr WEB iconPath default:openautomation

Falls man es so setzt, dann sind die Bilder aus fhemSVG (die von docb) nicht dabei.
Am besten nicht sezten, dann ist das default <style>:fhemSVG:openautomation:default

openautomation enthaelt nur die Bilder von mfd, der diese zuerst im KNX-Forum gepostet hat. openautomation hat sie uebernommen, die Bezeichnung des Verzeichnisses in FHEM ist leider deswegen irrefuehrend (bleibt aber erstmal so).


> Danach ist noch das Neustarten des FHEM Servers notwendig

Die vorherige Anweisung wirkt auch ohne Neustart, bzw. bei Neustart nur mit einem vorherigen save.


> auf den Menü Punkt: Edit file links ausen klicken...

Das Editieren der fhem.cfg (mit automatisch ausgeloesten Einlesen per rereadcfg) hat zu viele Nebeneffekte und ich rate davon ab. Ohne Nebeneffekte und mit weniger Vertipper verbunden ist folgendes: im FHEMWEB auf Detail-Ansicht des Geraetes gehen, danach in der attr Zeile per dropdown devStateIcon oder icon auswaehlen, das @red hinten anhaengen, und auf attr klicken.

icon bzw. devStateIcon kann man in dieser Detail-Ansicht auch einfach aus der Liste der icons auswaehlen (bzw. erweitern), beim direkten editieren der fhem.cfg sieht man ja nicht, welche Bilder zur Verfuegung stehen.

Falls das Ergebnis passt, dann auf save config klicken. save beim direkten editieren der fhem.cfg ueberfluessig.

Btw. statt Farb-Namen kann man auch die 6-stellige Hex-Darstellung waehlen, also z.Bsp @278727 fuer das im default Style verwendete Gruen.

[docb]

Hallo,
anbei drei Icons, die es eigentlich schon gibt.
Einmal die Tür offen und zu - allerdings spiegelverkehrt und außerdem ohne den Querstrich unten bei der geöffneten Variante. Mich hat es gestört, dass Fenster und Türen anderes herum öffnen, deswegen habe ich es vereinheitlicht ;-)
Und noch ein Fenster anbei, dass jetzt geöffnet auch keinen Querstrich mehr unten hat.
@Uli - keine Ahnung ob du die Originale austauschen willst oder meine zusätzlich einfügen willst - ich habe meine Dateien jedenfalls leicht anders benannt als die Originale.
Viele Grüße
Doc

[docb]

So Freunde,
ich hab mich mal an die Wiki gemacht. Wobei ich "meinen" Teil mit den svgs schon soweit fertig habe.
Beim ersten Teil - Icons anwenden bin ich mir nicht ganz schlüssig, weil ich einen anderen Weg gehe wie ihr (Mathyou, Rudolf). Ich selbst kopiere einfach meine SVGs in www/images/openautomation rein und schon erscheinen sie ;-)  außerdem editiere ich meine fhem.cfg bzw. die vielen include-Dateien manuell um Icons zu verändern und gehe dann in Fhemweb auf Edit files -> fhem.cfg und drücke auf save - dann lädt er quasi meine manuell veränderten includes neu und alles läuft. Das ist aber wohl eher der exzentrische Weg ;-) Daher jetzt noch eine Frage, damit ich die wiki ergänzen kann:
- wenn man ein icon / devStateIcon über FHEMWEB verändert hat, was muss ich jetzt drücken, damit es übernommen wird? Save Config? Würde mir das eigentlich auch in meine externen conf-files reinschreiben?

Sorry dass ich so blöd nachfragen muss - aber wie gesagt - ich gehe schon immer einen anderen Weg, würde aber gerne den Standardweg in der Wiki beschreiben...
Viele Grüße
Doc

[mathyou]

Hallo Doc
So wie Herr Koenig das beschrieben hat, wird der Raum in dem das geänderte State Icon ist dann nach der Änderung grünlich unterlegt, so lange bis man oben links Außen im Menü den Save Config Button drückt !
Danach ist es bei mir gespeichert und das grünlich unterlegte im geänderten Raum verschwindet...
lg. mathyou.

[rudolfkoenig]

> Ich selbst kopiere einfach meine SVGs in www/images/openautomation rein und schon erscheinen sie ;-)

Klar, aber "normale" Anwender werden/sollen diese nicht selbst kopieren. Die Dateien landen (wenn Ulli sie eincheckt) nach einem update in fhem/www/icons/fhemSVG, was neuerdings auch ohne zutun des Benutzers (siehe iconPath) von FHEMWEB verwendet wird.


> außerdem editiere ich meine fhem.cfg bzw. die vielen include-Dateien manuell um Icons zu verändern und gehe dann in Fhemweb auf Edit files -> fhem.cfg und drücke auf save - dann lädt er quasi meine manuell veränderten includes neu und alles läuft.

Das geht einfacher mit rereadcfg. save+rereadcfg funktioniert zwar, hat aber folgendes Problem:  FHEM speichert dabei zuerst alle Geraete und deren Stati in fhem.cfg/fhem.state, loescht alle(!) internen Datenstrukturen (was auch die Verbindung zum USB-Stick/LAN-Gateway/etc unterbricht), und liest fhem.cfg & Co. wie beim Start wieder ein, was wiederum das Initialisieren aller Geraete bedeutet. In der Zwischenzeit koennen Nachrichten verloren gehen, weiterhin speichern manche Module nicht alles (z.Bsp. ein watchdog ist wieder im initialisiert-Zustand, und nicht mehr im getriggerten, usw.), das Initialisieren dauert bei manchen Modulen (z.Bsp. KM271) lange, usw.

Das Aendern der Attribute direkt in FHEMWEB (oder per attr Befehl), wie ich es vorher beschrien habe, gefolgt von einem "Save config" (oder save Befehl) ist von den erwaehnten Problemen verschont und ist auf schwacher Hardware wie ein Fritzbox merklich schneller. Ausserdem werden Vertipper vermieden, und der Benutzer sieht wg. dem dropdown alle Moeglichkeiten. Der Sprung zum passenden Abschnitt in commandref.cfg ist auch direkt greifbar.

Ich pflege fhem.cfg nur noch in Notfall direkt, also nie :) Kommentare kann man mit dem comment Attribut auch hinterlassen, und die Geraete mit room/group gruppieren/sortieren. Suchen (auch nach Geraeten mit bestimmten TYPE/DEF oder Attributen) kann man mit list. Definition zu aendern ist in FHEMWEB auch einfacher, weil man ;; und \ vergessen kann.

Mag sein, das dies alles sich einem Anfaenger nicht direkt erschliesst, aber dazu ist ja Doku, Forum und fhemwiki da.


> - wenn man ein icon / devStateIcon über FHEMWEB verändert hat, was muss ich jetzt drücken, damit es übernommen wird?

Nichts, es ist alles sofort wirksam.
Save config dann, falls die Aenderung "persistiert" werden soll, weil es einem gefaellt.


> Save Config? Würde mir das eigentlich auch in meine externen conf-files reinschreiben?

FHEM versucht beim save sein bestes, alles (auch Kommentare) da zu speichern, wo es gefunden hat, also auch in Dateien, die per include eingelesen wurden. Ist aber nicht perfekt, weil alles in internen Datenstrukturen gehalten wird, diese modifiziert werden, und dann (nach Tagen und vielen neuen Geraeten/Attributen/Events) wieder alles gespeichert wird.
Ausnahmen: neue Geraete werden am Ende der fhem.cfg gespeichert, und ein Geraet wird immer zusammen mit seinem Attributen gespeichert.

[docb]

Hallo,
vielen Dank für die Hinweise, ich habe die Wiki soweit ergänzt (http://www.fhemwiki.de/wiki/Icons). Außerdem werde ich jetzt auch mal versuchen auf die Konfiguration über fhemweb umzusteigen ;-)
Viele Grüße
Doc
PS: Bei der Türe rechtsrum ist mir ein kleiner Fehler unterlaufen - das alte SVG übernimmt die Farbe nicht. Anbei die Korrektur.

[mathyou]

Hallo Doc
Kannst Du uns mal die gesamte Liste / Daten anhängen/zeigen für die svg`s und wo wir die hinein kopieren müssen daß die dann alle erscheinen...
vielen Dank, mathyou.