[FUIP] neue Icons einbinden am Beispiel Rauchmelder oder Brandmelder

[Rewe2000]

Hallo Gisbert,

danke für den Tipp, ich denke es löst aber nicht mein Problem.

Ich will mir eine visuelle Trendanzeige in einem HTML-View, mit {symbol} bauen, welche in Abhängigkeit eines Trends (Analogwert -1 bis +1) verschiedene Icons darstellt und somit der Ternd "visualisiert" wird. Die Buttons sollten Pfeile darstellen, welche in Abhängigkeit des Analogwertes immer in eine andere Richtung zeigen. Leider gibt es keine passenden Icons in Fhem oder FUIP welche für meine Anforderung passen, deshalb wollte ich koplett neue Icons hinzufügen, welche ich dann für meine VISU verwenden kann.

Aktuell nehme ich für meine Darstellung die vorhandenen Icons "oa-control_centr_arrow_*" aus FUIP, diese sehen aber sehr grob und Fett aus, aber zumindest klappt damit die Visualisierung.

Anbei der vom mir verwendete HTML-View und die Icons, welche ich gerne hinzufügen würde (als Anlage):

Code Auswählen Erweitern

<div data-type="symbol"
   data-device="Json_Gasspeicher_DE"
   data-get="trend"
   data-states='["-100","-0.29","-0.05","0.06","0.30"]'
   data-icons='["oa-control_centr_arrow_down","oa-control_centr_arrow_down_right","oa-control_centr_arrow_right","oa-control_centr_arrow_up_right","oa-control_centr_arrow_up"]'
   data-colors='["red","red","white","green","green"]'
   class="bigger">
</div>

Ich hoffe damit wird etwas deutlicher was ich eigentlich benötige. Ich benötige kein Rauchmelder Icon, aber die Thematik des Beitrags hat mein Problem genau behandelt, deshalb habe ich mich hier auch angehängt.

Gruß Reinhard

[Thorsten Pferdekaemper]

Hi,

Egal was ich mache, ich bekomme das Attribut "userCss" einfach nicht angezeigt.
[...]
In der *.CSS Datei steht folgendes

hast Du die Dateiendung tatsächlich gross geschrieben? "CSS" und "css" sind zwei verschiedene Dinge.
Ansonsten müsstest Du auch noch FHEM durchstarten, sonst erscheint das userCss Attribut nicht.

Irgendwie stimmt mich aber die URL-Angabe in der *.CSS Datei nachdenklich, wenn ich hier wie von dir beschrieben den Namen meines FUIP Device einsetze, so gibt der Pfad für mich wenig Sinn, müsste denn der nicht genau auf die myicons.woff Datei zeigen?

Deshalb ja "/fhem/ui/fuip/config/myicons.woff". "/fhem/ui/fuip" ist sozusagen der externe Pfad zu "/opt/fhem/FHEM/lib/FUIP".

Gruß,
   Thorsten

[Rewe2000]

Hallo Thorsten,

genau das war der entscheidende Tipp mit dem "shutdown restart" von Fhem, dieses hatte noch gefehlt.
Die *.css Datei hatte gepasst, die Extension hatte ich schon klein geschrieben, nur im Beitrag waren die Buchstaben groß.
Nun ist das Attribut "userCss" in FUIP sichtbar und ich kann mein Stylesheet laden, die neuen Buttons tauchen jedoch nirgends auf.

Ich bin wie folgt vorgegangen, habe ich da noch einen Fehler in der Vorgehensweise?

• Die gewünschten Buttons über die App IcoMoon https://icomoon.io/app/#/select ausgewählt
• Nun den Button rechts unten "Generate Font" gedrückt, es werden nun die gewählten Symbole angezeigt (siehe Anhang Fonts.jpg)
• Nun über Preferences die Einstellungen gemäß Anhang Preferences.jpg gewählt und die ZIP-Datei heruntergeladen
• Die in der ZIP-Datei enthaltene *.woff Datei nach /opt/fhem/FHEM/lib/FUIP/config kopiert und die *.css Datei (myicons.css, Inhalt siehe unten) im Verzeichnis /opt/fhem/FHEM/lib/FUIP/config erzeugt. Weitere Dateien habe ich nicht nach Fhem oder FUIP kopiert!
• Nun in meinem FUIP-Device das Attribut "userCss" gesetzt und FHEM neu gestartet
• Ich würde nun eigentlich erwarten, dass die neuen Buttons unter FUIP erscheinen und über den Suchbegriff "myicons" zu finden und auszuwählen sind

Meine *.css Datei (myicons.css:

Code Auswählen Erweitern

@font-face {
  font-family: 'myicons';
  src:
    url('/fhem/ui/fuip/config/myicons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="myicons-"], [class*=" myicons-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'myicons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.myicons-arrow-up:before {
  content: "\ea32";
}
.myicons-arrow-up-right:before {
  content: "\ea33";
}
.myicons-arrow-right:before {
  content: "\ea34";
}
.myicons-arrow-down-right:before {
  content: "\ea35";
}
.myicons-arrow-down:before {
  content: "\ea36";
}


Leider ändert sich da bei mir überhaupt nichts, habe ich da noch etwas entscheidendes vergessen?
Nach FTUI muss ich ja keine weiteren Dateien mehr kopieren, so wie im WIKI beschrieben, da ich ja "nur" FUIP nutze, sehe ich das richtig?

Kann jemand von euch erkennen was ich hier falsch mache oder woran es bei mir noch klemmt.

Gruß Reinhard

[Thorsten Pferdekaemper]

Hi,
mit den eigenen Icons funktioniert die Werthilfe leider nicht. Du kannst aber den Namen in das "icon" Feld einfach eintippen. Versuch mal, dort myicons-arrow-up-right reinzuschreiben und sag' Bescheid, ob das klappt.
Gruß,
   Thorsten

[Rewe2000]

Hallo Thorsten,

ja das hat jetzt geklappt, meine Icons werden jetzt so angezeigt wie ich mir das vorgestellt habe.

Eines habe ich noch gemacht, ich habe den Wert unter "content:" in der css-Datei in den Bereich ab "e900" verschoben, ob dies auch etwas bewirkt hat, keine Ahnung.

Meine css-Datei sieht nun wie folgt aus:

Code Auswählen Erweitern

@font-face {
  font-family: 'myicons';
  src:
    url('/fhem/ui/fuip/config/myicons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="myicons-"], [class*=" myicons-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'myicons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.myicons-arrow-up:before {
  content: "\e900";
}
.myicons-arrow-up-right:before {
  content: "\e901";
}
.myicons-arrow-right:before {
  content: "\e902";
}
.myicons-arrow-down-right:before {
  content: "\e903";
}
.myicons-arrow-down:before {
  content: "\e904";
}


Vielen Dank für deine Hilfe, manches Mal scheitert es echt an Kleinigkeiten in Verbindung mit Unwissenheit.
Ich bin nach wie vor begeistert wie einfach sich selbst komplexe Visualisierungen mit FUIP anschaulich umsetzen lassen, abgesehen natürlich von den kleinen Problem mit den Icons .

Gruß Reinhard

[Thorsten Pferdekaemper]

Ich bin nach wie vor begeistert wie einfach sich selbst komplexe Visualisierungen mit FUIP anschaulich umsetzen lassen, abgesehen natürlich von den kleinen Problem mit den Icons .

Danke!

Ich habe jetzt die freien IcoMoon Icons mit in FUIP reingepackt. D.h. die können jetzt alle über die Werthilfe ausgewählt werden. Präfix ist "icomoon-".
Ich hoffe, dass das jetzt keine Probleme macht von wegen Download-Größe.
Gruß,
   Thorsten

[Rewe2000]

Hallo Thorsten,

danke für diese praktikable Lösung.

Ich werde die Umsetzung morgen mal testen, wenn es klappt kann ich mein css wieder entfernen.
Hat aber auch nicht geschadet kennenzulernen, eigene Icons in FUIP einzubinden, spätestens bei "exotischen" Icons werde ich dann den Weg wieder beschreiten.

Gruß Reinhard

[Docter]

Danke für diesen Thread...

Nach einigen Anfängerfehler habe ich erste eigene Icons hinbekommen.
Aber die FarbFunktion will einfach nicht funktionieren.

Was muss ich da beachten?

Vielen Dank

[Thorsten Pferdekaemper]

Hi,
was genau meinst Du mit FarbFunktion?
Am besten, Du beschreibst mal genauer, was Du versucht hast und was dabei genau herauskommen soll.
Gruß,
  Thorsten

[Docter]

nun... ich habe mittlerweile einige eigene Icons eingebunden.
Bei den Monochromen hätte ich erwartet, dass über die Funktion data-colors='["red","red","white","green","green"]' die Farben setzen kann.
Es ist aber immer schwarz (oder in der Farbe wie es das SVG übergibt) obwohl ich bewusst keinen Farbe im SVG definiert habe.

Ich kann mir natürlich helfen, in dem ich jedes Icon in jeder Farbe abspeichere, aber das ist iwie nicht praktikabel.

Danke
Gruß
Thomas

[Thorsten Pferdekaemper]

Hi,
wie hast Du die denn eingebunden?
Damit das mit den Farben funktioniert, müssen die Icons als Font eingebunden sein. Das ist auch hier im Thread beschrieben:
https://forum.fhem.de/index.php?topic=105917.msg998395#msg998395
Wenn die Icons als Grafik-Dateien eingebunden sind, dann klappt das nicht.
Gruß,
  Thorsten