FHEM Forum

FHEM => Frontends => Thema gestartet von: Christoph Morrison am 31 Dezember 2020, 17:40:13

Titel: Google Material Design Icons
Beitrag von: Christoph Morrison 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 (https://material.io/resources/icons/?style=baseline) 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 (https://github.com/christoph-morrison/FHEM-Icons-Material).
Titel: Antw:Google Material Design Icons
Beitrag von: Wzut 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 :( :( :(
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison 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.
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison 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.
Titel: Antw:Google Material Design Icons
Beitrag von: ToKa 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
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison 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.
Titel: Antw:Google Material Design Icons
Beitrag von: ToKa am 01 Januar 2021, 16:06:38
Das wäre prima und würde mich sehr freuen!
Titel: Antw:Google Material Design Icons
Beitrag von: FunkOdyssey 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.
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison 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 (https://github.com/Templarian/MaterialDesign). 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.
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison 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
Titel: Antw:Google Material Design Icons
Beitrag von: FunkOdyssey 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.
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison 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.
Titel: Antw:Google Material Design Icons
Beitrag von: FunkOdyssey am 01 Januar 2021, 17:21:36
Das kann ich machen. Sobald das nutzbar ist, werde ich ein paar passende Icons heraussuchen.
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison 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.
Titel: Antw:Google Material Design Icons
Beitrag von: ToKa am 01 Januar 2021, 20:12:59
Wie muss ich denn das repository in fhem einbinden?
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison am 01 Januar 2021, 20:21:23
update add https://raw.githubusercontent.com/fhem/FHEM-Icons-Material-Templarian/development/controls_icons-material-templarian.txt
update all https://raw.githubusercontent.com/fhem/FHEM-Icons-Material-Templarian/development/controls_icons-material-templarian.txt
Titel: Antw:Google Material Design Icons
Beitrag von: ToKa am 01 Januar 2021, 20:28:13
Danke

Beim Update kommt es zu folgender Fehlermeldung:

2021.01.01 20:26:12 1:  https://raw.githubusercontent.com/fhem/FHEM-Icons-Material-Templarian/development/www/images/material-templarian/material-templarian-apple-keyboard-command.svg: Select timeout/error:
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison am 01 Januar 2021, 20:36:11
2021.01.01 20:26:12 1:  https://raw.githubusercontent.com/fhem/FHEM-Icons-Material-Templarian/development/www/images/material-templarian/material-templarian-apple-keyboard-command.svg: Select timeout/error:

Naja, läuft in einen Timeout zwischen dir und Github. Da kann ich nicht viel tun. Du kannst die Files auch bei Github runterladen und dort hin entpacken.
https://github.com/fhem/FHEM-Icons-Material-Templarian/archive/master.zip

Du brauchst was in www/images/material-templarian liegt.
Titel: Antw:Google Material Design Icons
Beitrag von: ToKa am 01 Januar 2021, 20:38:05
Beim zweiten Update klappt es jetzt wohl.

Die Icons lassen sich nutzen und auch einfärben. Perfekt, vielen Dank!

Titel: Antw:Google Material Design Icons
Beitrag von: FunkOdyssey am 01 Januar 2021, 20:38:24
Das Update läuft. Trotz Background dauert das echt lange.  :D

Ich sehe aber ein Problem mit der iconalias.txt
Ich finde keine Treffer für die meisten Befehle. Keine Bulb-Toggle-Icons, keine Dim-Icons und auch keine on-for-Icons.

Ich probiere noch ein wenig aus.
Titel: Antw:Google Material Design Icons
Beitrag von: ToKa am 02 Januar 2021, 19:04:08
Hallo Christoph,

ich habe heute weiter mit den neuen Icons getestet und es sieht alles gut aus. Lediglich die lange Bezeichnung der Icons ist etwas nervig. Könnte man die Bezeichnung evtl. kürzen:

material-templarian-power --> mt-power

oder mdi-power für material design icons

Viele Grüße
Torsten
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison am 02 Januar 2021, 19:52:37
Ist auf jeden Fall mal überdenkenswert.

Ich denke mdt (material-design-templarian) und mdg (material-design-google) werden es wohl als prefixe werden.
Titel: Antw:Google Material Design Icons
Beitrag von: ToKa am 02 Januar 2021, 20:06:05
Dankeschön
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison am 03 Januar 2021, 21:14:28
https://raw.githubusercontent.com/fhem/FHEM-Icons-Material-Templarian/development/controls_icons-mdt.txt

iconPath dann auf mdt.
Titel: Antw:Google Material Design Icons
Beitrag von: ToKa am 03 Januar 2021, 22:14:48
Funktioniert auch mit mdt super, das Herunterladen ist etwas zäh...

Danke!
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison am 03 Januar 2021, 22:19:36
Funktioniert auch mit mdt super, das Herunterladen ist etwas zäh...

Dauerte bei mir etwa 30 Minuten. Sind halt nun auch über 5000 Icons ;-)
Titel: Antw:Google Material Design Icons
Beitrag von: ToKa am 04 Januar 2021, 15:52:56
Ich sehe aber ein Problem mit der iconalias.txt
Ich finde keine Treffer für die meisten Befehle. Keine Bulb-Toggle-Icons, keine Dim-Icons und auch keine on-for-Icons.

Ich probiere noch ein wenig aus.

Ich habe für mich jetzt mal die on und off Icons in einer iconalias.txt hinterlegt. Mir war das bislang nicht bekannt und ich habe immer mit devStateIcon gearbeitet.

Das funktioniert prima, bis auf farbliche Änderungen oder habe ich da etwas übersehen? Kann ich in der iconalias.txt auch eine Farbe mit "@" z.B. @red vor einstellen?

Viele Grüße
Torsten
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison am 04 Januar 2021, 15:55:49
Das funktioniert prima, bis auf farbliche Änderungen oder habe ich da etwas übersehen? Kann ich in der iconalias.txt auch eine Farbe mit "@" z.B. @red vor einstellen?

Das hatte ich bisher auch nie hinbekommen, weshalb ich keine iconalias.txt verwende.
Titel: Antw:Google Material Design Icons
Beitrag von: FunkOdyssey am 04 Januar 2021, 16:07:57
Es gibt dazu bereits einen Pull Request.
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison am 04 Januar 2021, 16:21:55
Es gibt dazu bereits einen Pull Request.

Wo denn? Gefunden. Aber das Problem mit den Farben gibt es nach wie vor, oder?
Titel: Antw:Google Material Design Icons
Beitrag von: FunkOdyssey am 04 Januar 2021, 16:47:50
Ich habe für mich jetzt mal die on und off Icons in einer iconalias.txt hinterlegt. Mir war das bislang nicht bekannt und ich habe immer mit devStateIcon gearbeitet.

Das funktioniert prima, bis auf farbliche Änderungen oder habe ich da etwas übersehen? Kann ich in der iconalias.txt auch eine Farbe mit "@" z.B. @red vor einstellen?


Mir nicht bekannt. Müsstest du mal ausprobieren. Die Antwort interessiert mich auch.
Ansonsten könnte man Rudi bitte, ob er so etwas implementiert.
Ich denke aber, dass die Farbgebung in einem Iconset keine gute Idee ist. Es ist für uns schon ganz praktisch, aber deine Farben müssen ja nicht zu meinen Farben passen.
Noch viel interessanter wäre es, wenn man in FHEM eine Abstraktionsebene hätte, in der man das zentral konfigurieren kann.  ;D

Mein aktueller Entwurf sieht wie folgt aus:

FS20.off   mdt-lightbulb-off-outline.svg
FS20.on    mdt-lightbulb.svg
off        mdt-lightbulb-off-outline.svg
on         mdt-lightbulb.svg
OFF        mdt-lightbulb-off-outline.svg
ON         mdt-lightbulb.svg
Aus        mdt-lightbulb-off-outline.svg
An         mdt-lightbulb.svg

toggle         mdt-power-cycle.svg
on-for-timer   mdt-progress-clock.svg
off-for-timer  mdt-progress-clock.svg
dimup          mdt-chevron-triple-up.svg
dimdown        mdt-chevron-triple-down.svg

set_on         mdt-power.svg
set_off        mdt-power-off.svg
set-on         mdt-power.svg
set-off        mdt-power-off.svg
set_ON         mdt-power.svg
set_OFF        mdt-power-off.svg
unreachable    mdt-alert-circle-outline.svg
undefined      mdt-help-circle-outline.svg

set_toggle        mdt-power-cycle.svg
set_on_for_timer  mdt-progress-clock.svg
set_off_for_timer mdt-progress-clock.svg
set_dimup         mdt-chevron-triple-up.svg
set_dimdown       mdt-chevron-triple-down.svg

Next       mdt-skip-next-circle-outline.svg
Prev       mdt-skip-previous-circle-outline.svg
Zoom-out   mdt-magnify-minus-outline.svg
Zoom-in    mdt-magnify-plus-outline.svg

back       mdt-account-arrow-left.svg

dim06%     mdt-brightness-1.svg
dim12%     mdt-brightness-1.svg
dim18%     mdt-brightness-1.svg
dim25%     mdt-brightness-2.svg
dim31%     mdt-brightness-2.svg
dim37%     mdt-brightness-3.svg
dim43%     mdt-brightness-3.svg
dim50%     mdt-brightness-4.svg
dim56%     mdt-brightness-4.svg
dim62%     mdt-brightness-4.svg
dim68%     mdt-brightness-5.svg
dim75%     mdt-brightness-5.svg
dim81%     mdt-brightness-6.svg
dim87%     mdt-brightness-6.svg
dim93%     mdt-brightness-7.svg
dim100%    mdt-brightness-7.svg

Die ersten Verbesserungsmöglichkeiten sind mir aber schon aufgefallen.
Titel: Antw:Google Material Design Icons
Beitrag von: rudolfkoenig am 04 Januar 2021, 16:58:51
Zitat
Noch viel interessanter wäre es, wenn man in FHEM eine Abstraktionsebene hätte, in der man das zentral konfigurieren kann.  ;D
Nennt sich StyleSheet.
Titel: Antw:Google Material Design Icons
Beitrag von: FunkOdyssey am 04 Januar 2021, 17:02:57
Nennt sich StyleSheet.

 ;D

Das ist schon klar. Aber das hilft uns doch nicht bei devStateIcons, oder?
Ist das aktuell nicht eine Art von Modifier, der den Statustext in SVGs umwandelt?

Nachtrag: Verlesen. Hmm, du meinst vermutlich nur die Farben, oder?
Titel: Antw:Google Material Design Icons
Beitrag von: ToKa am 04 Januar 2021, 17:05:13
Hallo zusammen,

die Vorschläge sind super - sehe schon, da mag jemand auch die outline Versionen :)

Lediglich bei diesen beiden, würde ich persölich eine andere Auswahl treffen:
Next       mdt-page-next-outline.svg
Prev       mdt-page-previous-outline.svg

@Rudi: Danke für den Hinweis - könntest Du den bitte noch etwas präzisieren z.B. wie man off immer in rot und on immer in grün erreicht?
Titel: Antw:Google Material Design Icons
Beitrag von: rudolfkoenig am 04 Januar 2021, 17:09:26
Zitat
Das ist schon klar. Aber das hilft uns doch nicht bei devStateIcons, oder?
Ist das aktuell nicht eine Art von Modifier, der den Statustext in SVGs umwandelt?
Verstehe beide Fragen nicht.

In defaultCommon.css steht:
svg:not([fill]):not(.jssvg) { fill:#278727; }
svg.on,svg.FS20_on { fill:orange!important; }

Die Farben sollten mAn nicht im Icon-Set sondern im Stylesheet definiert werden.
Titel: Antw:Google Material Design Icons
Beitrag von: ToKa am 04 Januar 2021, 17:13:25
Definitiv sind sie dort besser aufgehoben und damit auch für jeden individuell einstellbar. Habe es gefunden, damit z.B. geht es:

svg#mdi-lightbulb-off-outline {
    fill: red!important;
}
Titel: Antw:Google Material Design Icons
Beitrag von: FunkOdyssey am 04 Januar 2021, 17:24:09
Vielleicht noch als kleine Ergänzung, wenn du auch den Status per CSS bei gleichem SVG unterschiedlich anzeigen willst:

svg#mdi-lightbulb-off-outline.on
{
    fill: red!important;
}

svg#mdi-lightbulb-off-outline.off
{
    fill: grey!important;
}

Nicht immer stehen unterschiedliche IDs für gleichnamige SVGs zur Verfügung.
Titel: Antw:Google Material Design Icons
Beitrag von: FunkOdyssey am 05 Januar 2021, 17:41:36
Kann man eine Lösung finden, dass FHEM bei einem Update der controls_icons-mdt.txt (https://github.com/fhem/FHEM-Icons-Material-Templarian/tree/development) nicht immer wieder alle Icons herunterladen will? Die Dateien selbst haben sich doch gar nicht geändert, sondern nur das UPD-Datum im Controlfile.

Oder sind das nur vorübergehende Nebenwirkungen wegen den GitHub-Actions?
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison am 05 Januar 2021, 17:42:22
Mach mal ne Github-Issue dazu auf, bitte.
Titel: Antw:Google Material Design Icons
Beitrag von: ToKa am 06 Januar 2021, 14:06:16
Das ist wirklich nervig mit dem täglichen Update... dauert und müllt das Log zu.
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison am 15 Juni 2021, 10:12:08
Das ist wirklich nervig mit dem täglichen Update... dauert und müllt das Log zu.

Sollte sich nun erledigt haben, oder?
Titel: Antw:Google Material Design Icons
Beitrag von: ToKa am 15 Juni 2021, 21:42:55
Ja, alles prima jetzt.
Dankeschön
Titel: Antw:Google Material Design Icons
Beitrag von: enno am 20 September 2021, 21:17:26
Moin Christoph,

Ich habe die Icons eingebunden:
2021.09.20 20:45:47 1: Downloading https://raw.githubusercontent.com/fhem/FHEM-Icons-Material-Templarian/master/controls_icons-mdt.txt auf meinem Raspy klappt es ohne Probleme, auf dem NUC mit Ubuntu bricht das Update mit folgender Fehlermeldung ab: 2021.09.20 20:46:58 1: Got 1246 bytes for www/images/mdt/mdt-application-cog.svg, expected 1242
2021.09.20 20:46:58 1: aborting.

Woran könnte das liegen? Was müsste ich liefern, um den Fehler einzugrenzen?

Gruss
  Enno
Titel: Antw:Google Material Design Icons
Beitrag von: Christoph Morrison am 21 September 2021, 09:54:04
Kann es sein, dass du mit dem Raspberry aus dem development-Branch die Daten holst und nicht aus master?
Ist in beiden Branches falsch.

Der Fehler besteht tatsächlich, muss ich mal untersuchen warum die Sizes abweichen.
Titel: Antw:Google Material Design Icons
Beitrag von: enno am 11 Oktober 2021, 19:51:52
Moin Christoph,

https://raw.githubusercontent.com/fhem/FHEM-Icons-Material-Templarian/master/controls_icons-mdt.txt
habe ich jetzt auf meinen Rechnern zum Durchlaufen bekommen, indem ich in global ein paar Symbole ausgeschlossen (exclude_from_update) habe, die zu dem Fehler führten. So läuft es erst mal für mich....

mdt-application-cog.svg mdt-application-settings.svg mdt-application.svg mdt-battery-minus.svg mdt-battery-plus.svg mdt-bell-outline.svg mdt-boom-gate-up-outline.svg mdt-archive-refresh.svg mdt-boom-gate-up.svg mdt-cctv.svg mdt-chili-hot.svg mdt-chili-medium.svg mdt-blood-bag.svg mdt-chili-mild.svg mdt-chili-off.svg mdt-file-pdf-box.svg mdt-gate-arrow-right.svg mdt-human-greeting.svg
Gruss
  Enno