Google Material Design Icons

Begonnen von Christoph Morrison, 31 Dezember 2020, 17:40:13

Vorheriges Thema - Nächstes Thema

FunkOdyssey

Zitat von: ToKa am 04 Januar 2021, 15:52:56
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.

rudolfkoenig

ZitatNoch viel interessanter wäre es, wenn man in FHEM eine Abstraktionsebene hätte, in der man das zentral konfigurieren kann.  ;D
Nennt sich StyleSheet.

FunkOdyssey

#32
Zitat von: rudolfkoenig am 04 Januar 2021, 16:58:51
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?

ToKa

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?
RaspberryPi3 mit RaZberry2 und Conbee II
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Shelly2.5 Rollladenaktoren
Zipato Bulb 2, Osram und InnrLight

rudolfkoenig

ZitatDas 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.

ToKa

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;
}
RaspberryPi3 mit RaZberry2 und Conbee II
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Shelly2.5 Rollladenaktoren
Zipato Bulb 2, Osram und InnrLight

FunkOdyssey

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.

FunkOdyssey

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?

Christoph Morrison

Mach mal ne Github-Issue dazu auf, bitte.

ToKa

Das ist wirklich nervig mit dem täglichen Update... dauert und müllt das Log zu.
RaspberryPi3 mit RaZberry2 und Conbee II
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Shelly2.5 Rollladenaktoren
Zipato Bulb 2, Osram und InnrLight

Christoph Morrison

Zitat 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.

Sollte sich nun erledigt haben, oder?

ToKa

Ja, alles prima jetzt.
Dankeschön
RaspberryPi3 mit RaZberry2 und Conbee II
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Shelly2.5 Rollladenaktoren
Zipato Bulb 2, Osram und InnrLight

enno

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
Einfacher FHEM Anwender auf Intel®NUC

Christoph Morrison

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.

enno

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
Einfacher FHEM Anwender auf Intel®NUC