Autor Thema: Google Material Design Icons  (Gelesen 5399 mal)

Offline Christoph Morrison

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1767
Google Material Design Icons
« am: 31 Dezember 2020, 17:40:13 »
Hallo zusammen,

ich bin dabei mal meine FHEMWEB-Oberfläche zu modernisieren und wollte dazu die Google Material Design Icons einbinden - immerhin rund 1500 moderne Icons. Die Dateien sind unter der Apache License V2 veröffentlicht, können also sehr liberal verwendet werden (eigentlich ist nur der Weiterverkauf untersagt).

Es war ein bisschen XSLT nötig um fill ordentlich unterstützen zu können, aber ihr findet das Resultat unter FHEM::Icons::Material.
Gefällt mir Gefällt mir x 3 Liste anzeigen

Offline Wzut

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4533
Antw:Google Material Design Icons
« Antwort #1 am: 31 Dezember 2020, 18:23:42 »
Zwei Herzen schlagen in meiner Brust,
ersteinm finde ich es toll wenn sich jemand so eine Arbeit macht und die Sammlung kann sich echt sehen lassen :) :) :)
aber ich verstehe nicht warum man dieses externe github Geschüttel nutzen muß wenn man schon die svn Schreibrechte hat :( :( :(
Maintainer der Module: MAX, MPD, UbiquitiMP, UbiquitiOut, SIP, BEOK, readingsWatcher

Offline Christoph Morrison

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1767
Antw:Google Material Design Icons
« Antwort #2 am: 31 Dezember 2020, 18:42:23 »
Zwei Herzen schlagen in meiner Brust,
aber ich verstehe nicht warum man dieses externe github Geschüttel nutzen muß wenn man schon die svn Schreibrechte hat :( :( :(

Ich bin, wie ich schon oft geschrieben habe, kein Freund des Subversion-Repositories und diese Icons sind ein gutes Beispiel weshalb: Die Entwicklung/Pflege der Icons findet nunmal kollaborativ auf Github in Git statt und ich müsste dann einen Workflow bauen, der etwas von Git(hub) in das Subversion-Repository transportiert - weil genau niemand mehr da draußen Subversion für irgendwas benutzt und sowas wie pull requests, Forks, usw. in Subversion gar nicht möglich sind. So habe ich einen Fork des Originalprojekts gemacht und dann meine Sachen dazu geklebt, was ungefähr nur ein Fünftel der Zeit gekostet hätte, hätte ich noch Subversion da mit reingebracht.

Wir hatten die Diskussion aber sicher schon drölfzig mal und es gibt eben nicht mal einen (eigenen) Git-Server des Vereins, sondern Subversion von anno tobak. Jehova, aber man kann ja mal einen Blick rüber zu HASS werfen um zu schauen, was da möglich ist.

nb: Subversion war einer der Gründe, warum ich meine Module abgegeben und meine "privaten" Module nie veröffentlicht habe.
Gefällt mir Gefällt mir x 4 Liste anzeigen

Offline Christoph Morrison

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1767
Antw:Google Material Design Icons
« Antwort #3 am: 01 Januar 2021, 02:26:06 »
Noch ein Nachsatz, auch wenn's OT ist:
Ich möchte einen Issuetracker haben, in dem ich nachlesen kann ob jemand ein Problem schon mal hatte und Ideen abladen kann, die ich für die Weiterentwicklung habe. Das ist auch seit etwa immer Standard im IT-Geschäft.
Gefällt mir Gefällt mir x 2 Liste anzeigen

Offline ToKa

  • Sr. Member
  • ****
  • Beiträge: 679
Antw:Google Material Design Icons
« Antwort #4 am: 01 Januar 2021, 15:25:25 »
Hallo Christoph Morrison,

echt Klasse und Danke für die Aufbereitung und Bereitstellung der Icons. Ich bin auch ein Fan der modernen Material Design Icons und habe sie bislang immer von Hand einzeln in meine Installation kopiert.

Unter https://materialdesignicons.com/ gibt es noch wesentlich mehr davon, wobei auch die Google Icons dabei sind. Allerdings gibt es damit auch das Problem des "fill", was ich bislang nur von Hand lösen konnte. Verstehe ich Dich richtig, dass Du das automatisiert hast?

Viele Grüße und alles gute zum neuen Jahr!

Torsten
RaspberryPi3 mit RaZberry2
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2

Offline Christoph Morrison

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1767
Antw:Google Material Design Icons
« Antwort #5 am: 01 Januar 2021, 15:48:15 »
Hallo Torsten,

Unter https://materialdesignicons.com/ gibt es noch wesentlich mehr davon, wobei auch die Google Icons dabei sind. Allerdings gibt es damit auch das Problem des "fill", was ich bislang nur von Hand lösen konnte. Verstehe ich Dich richtig, dass Du das automatisiert hast?

Exakt. Ich transformiere die SVG mit XSLT dahin, dass an den nötigen Stellen (und an manchen, wo es nicht nötig wäre, aber wohl nicht stört) ein fill-Attribut hinzugefügt wird. Im Prinzip sollte das mit meinem aktuelle Code schon funktionieren, ich schaue mal, ob ich einen Fork davon mit der nötigen Infrastruktur hinbekomme.

Offline ToKa

  • Sr. Member
  • ****
  • Beiträge: 679
Antw:Google Material Design Icons
« Antwort #6 am: 01 Januar 2021, 16:06:38 »
Das wäre prima und würde mich sehr freuen!
RaspberryPi3 mit RaZberry2
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2

Offline FunkOdyssey

  • Hero Member
  • *****
  • Beiträge: 2208
Antw:Google Material Design Icons
« Antwort #7 am: 01 Januar 2021, 16:17:52 »
Ich habe das auch gestern direkt implementiert.
Man hat darin aber kein automatisches Icon-Set für die Standard-Icons wie z.B. on, off, etc.
Als ich damals openautomation gesetzt hatte, habe ich die üblichen FHEM-Glühbirnen direkt verabschiedet.

Das stelle ich mir mit dieser Variante hier schwieriger vor, da man dann die Kompatibilität zum Google-Git verliert, oder?

Ich überlege nun, ob ich wirklich komplett auf das Material-Design wechseln soll. Das wird viel Arbeit und ich müsste auch mein CSS überarbeiten, da die Icons vertikal anders ausgerichtet sind. Die Gesamtgröße ist ja relativ übersichtlich. Ich meine, dass ich gestern nur ca. 6 MB gesehen habe.

Danke für deine Arbeit.

Offline Christoph Morrison

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1767
Antw:Google Material Design Icons
« Antwort #8 am: 01 Januar 2021, 16:23:18 »
Das stelle ich mir mit dieser Variante hier schwieriger vor, da man dann die Kompatibilität zum Google-Git verliert, oder?

Die sind auch auf Git. Ich würde die direkt forken und dann so wie beim Google Material vorgehen. Im Prinzip kann man neue Icons aus dem Haupt-Repository direkt reinmergen und der Workflow baut dann neue Icons und die Update-Datei.
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline Christoph Morrison

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1767
Antw:Google Material Design Icons
« Antwort #9 am: 01 Januar 2021, 16:42:08 »
Ich habe die reinen Google Material Design Icons verschoben:
https://github.com/fhem/FHEM-Icons-Material-Google

Die neuen wird es hier geben:
https://github.com/fhem/FHEM-Icons-Material-Templarian
« Letzte Änderung: 01 Januar 2021, 16:43:39 von Christoph Morrison »
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline FunkOdyssey

  • Hero Member
  • *****
  • Beiträge: 2208
Antw:Google Material Design Icons
« Antwort #10 am: 01 Januar 2021, 17:05:38 »
Ich komme nicht mit. Wo ist denn der Unterschied zwischen den Sets?
Habe ich mich falsch ausgedrückt oder du das falsche Zitat gewählt?

Meine Frage bezog sich auf die automatisierte Nutzung der Icons für die Standard-Icons.
Also eine eigene iconalias.txt:
https://svn.fhem.de/trac/browser/trunk/fhem/www/images/fhemSVG/iconalias.txt
https://svn.fhem.de/trac/browser/trunk/fhem/www/images/openautomation/iconalias.txt

Dies hat den Vorteil, dass man nicht jedes DevStateIcon umschreiben muss.
« Letzte Änderung: 01 Januar 2021, 17:08:37 von FunkOdyssey »

Offline Christoph Morrison

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1767
Antw:Google Material Design Icons
« Antwort #11 am: 01 Januar 2021, 17:19:32 »
Ich komme nicht mit. Wo ist denn der Unterschied zwischen den Sets?
Habe ich mich falsch ausgedrückt oder du das falsche Zitat gewählt?

Nein, ich hab dich falsch verstanden. Vergiss mein Posting einfach ;-)

Meine Frage bezog sich auf die automatisierte Nutzung der Icons für die Standard-Icons.
Also eine eigene iconalias.txt:
https://svn.fhem.de/trac/browser/trunk/fhem/www/images/fhemSVG/iconalias.txt
https://svn.fhem.de/trac/browser/trunk/fhem/www/images/openautomation/iconalias.txt

Dies hat den Vorteil, dass man nicht jedes DevStateIcon umschreiben muss.

Wenn du eine vernünftige Liste machst, checke ich die gerne mit ein. Ich habe die iconalias bisher nie benutzt.

Offline FunkOdyssey

  • Hero Member
  • *****
  • Beiträge: 2208
Antw:Google Material Design Icons
« Antwort #12 am: 01 Januar 2021, 17:21:36 »
Das kann ich machen. Sobald das nutzbar ist, werde ich ein paar passende Icons heraussuchen.

Offline Christoph Morrison

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1767
Antw:Google Material Design Icons
« Antwort #13 am: 01 Januar 2021, 19:04:30 »
Schaut mal hier:
https://raw.githubusercontent.com/fhem/FHEM-Icons-Material-Templarian/development/controls_icons-material-templarian.txt

Sind allerdings nun rund 5200 Icons und dauert entsprechend länger. Als iconPath bitte material-templarian eintragen.

Offline ToKa

  • Sr. Member
  • ****
  • Beiträge: 679
Antw:Google Material Design Icons
« Antwort #14 am: 01 Januar 2021, 20:12:59 »
Wie muss ich denn das repository in fhem einbinden?
RaspberryPi3 mit RaZberry2
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2

 

decade-submarginal