[FUIP] neue Icons einbinden am Beispiel Rauchmelder oder Brandmelder

[MarkusHiba]

Hallo,

ich habe leider kein Icon zum Brandmelder gefunden
z.B. so eins: https://www.flaticon.com/free-icons/smoke-detector
Wie könnte man so eins einbinden?

Grüße

MarkusHiba

[Thorsten Pferdekaemper]

Hi,
was ist mit oa-secur_smoke_detector, das ist eigentlich dafür da.
Was willst Du damit eigentlich machen? Soll es einfach nur auf der Oberfläche erscheinen, oder auch irgendwie aktiv sein?
Gruß,
   Thorsten

[MarkusHiba]

ok.
Hab viele mögliche Bezeichnungen ausprobiert aber leider kein Icon gefunden.
Ich werde mal den oa-secur_smoke_detector probieren.

Soll es einfach nur auf der Oberfläche erscheinen

Ja im Menüfeld

oder auch irgendwie aktiv sein

ja wenn der Melder auslöst soll er Blinken.

Damit steuere ich den Melder
https://forum.fhem.de/index.php/topic,86199.msg974592.html#msg974592

Gruß

MarkusHiba

[MarkusHiba]

oa-secur_smoke_detector
findet ich leider nicht
aber wie funktioniert das das man die icons von Openautomation nehmen kann die bei fhem mit dabei sind

[Thorsten Pferdekaemper]

Hi,
wie suchst Du denn die Icons? Du kannst alle nehmen, die Du über die Werthilfe eines icon-Felds finden kannst.
Gruß,
   Thorsten

[Thorsten Pferdekaemper]

Hi,
ich hab's nicht lassen können...
Also hier mal die meiner Meinung nach einfachere Lösung:

1. Die Bilddatei runterladen (als .svg oder .png, das dürfte egal sein) und in das Verzeichnis /opt/fhem/www/tablet/images speichern. Ich nehme im Weiteren an, dass die Datei smoke-detector.svg heißt.

2. Eine Datei mit der Endung .css und dem folgenden Inhalt anlegen:

Code Auswählen Erweitern


.icon-smoke-detector:before {
    content: url(/fhem/<fuip-name>/images/smoke-detector.svg);
}

Dabei <fuip-name> durch den Namen des eigenen FUIP-Device ersetzen.

3. Diese Datei ins Verzeichnis /opt/fhem/FHEM/lib/FUIP/config legen. Im Weiteren nehme ich an, dass diese Datei "myStyles.css" heißt.

4. Im FUIP-Device das Attribut userCss auf myStyles.css setzen. Sollte das nicht möglich sein, dann mal einen Browser-Refresh machen.

5. In FUIP ein HTML-View mit folgendem Inhalt anlegen:

Code Auswählen Erweitern


<div data-type="symbol"
class="big"
data-device="<device>"
data-get="smoke"
data-icons='["icon-smoke-detector","icon-smoke-detector fa-spin", "icon-smoke-detector fa-blink"]'
data-states='["normal","spin","blink"]'>
</div>

Dabei <device> durch ein FHEM-Device ersetzen, dass ein Reading "smoke" mit den drei möglichen Werten "normal","spin" und "blink" hat.

6. Mit dem oben genannten Reading herumspielen. Das Bild müsste jetzt angezeigt werden und auch rotieren bzw. blinken, wenn man das will.

(Bitte beim Ausprobieren selbst mitdenken. Bei mir hat das funktioniert, aber möglicherweise haben sich Fehler eingeschlichen.)

"icon-smoke-detector" kann man jetzt auch in den icon-Feldern von FUIP verwenden. Es erscheint nur nicht in der Werthilfe.

Gruß,
   Thorsten

[Thorsten Pferdekaemper]

Hi,
hier ist die zweite Version, die meiner Meinung nach etwas komplizierter ist, aber sozusagen "echte" FTUI-Icons macht, die man z.B. auch einfärben kann.

1. Man lädt die gewünschte Bilddatei herunter. Diesmal muss sie das Format .svg haben. Wir nehmen also an, sie heißt smoke-detector.svg.

2. Jetzt folgt man dieser Anleitung: https://wiki.fhem.de/wiki/FHEM_Tablet_UI_FAQ#Wie_kann_ich_eigene_Icons_verwenden.3F. Im Weiteren nehme ich an, dass man als Font-Name und Präfix jeweils "myicons" gewählt hat.

3. Von der erzeugten .zip-Datei brauchen wir nur die .woff-Datei. Sie müsste eigentlich im Folder fonts liegen und myicons.woff heißen. Diese Datei kommt in das Verzeichnis /opt/fhem/FHEM/lib/FUIP/config.

4. Jetzt machen wir uns eine Textdatei mit Endung .css, also z.B. myicons.css mit folgendem Inhalt:

Code Auswählen Erweitern


@font-face {
  font-family: 'myicons';
  src:
    url('/fhem/<fuip-name>/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-smoke-detector:before {
  content: "\e900";
}

Dabei auch wieder <fuip-name> durch den Namen des eigenen FUIP-Device ersetzen.
Die Datei kommt auch nach /opt/fhem/FHEM/lib/FUIP/config.

5. Jetzt im FUIP-Device das Attribut userCss auf myicons.css setzen.

6. Jetzt kann man das Icon (also "myicons-smoke-detector") in jedem icon-Feld verwenden. Es sollte auch die übliche Icon-Farbe bekommen und in der Größe passen.

7. Um das mit dem Blinken etc. hinzubekommen macht man eine HTML-View mit diesem Inhalt:

Code Auswählen Erweitern


<div data-type="symbol"
class="big"
data-device="<device>"
data-get="smoke"
data-icons='["myicons-smoke-detector","myicons-smoke-detector fa-spin", "myicons-smoke-detector fa-blink"]'
data-colors='["green","yellow","red"]'
data-states='["normal","spin","blink"]'>
</div>

<device> wieder entsprechend ersetzen.
Diesmal sogar in Farbe...

Gruß,
   Thorsten

[MarkusHiba]

Danke,

habs herausgefunden bei Tamplates, dort habe ich das menü, da habe ich das Icon "oa-secur_smoke_detector" nicht gefunden.

Edit: Nochmel das Menü gelöscht und alles neu angelegt schon geht es.

[Thorsten Pferdekaemper]

habs herausgefunden bei Tamplates, dort habe ich das menü, da habe ich das Icon "oa-secur_smoke_detector" nicht gefunden.

Kannst Du mir davon mal einen Screenshot geben, damit ich verstehe, was Du meinst? Wenn da irgendwo nicht alle Icons hochkommen, dann muss ich wohl nachbessern...

[MarkusHiba]

ok

ich habe das Menü ohne Icons erst gehabt in Templates nun wollte ich Icons hinzufügen.
Alles andere hat geklappt bloß beim Brandmelder nicht dan habe ich das Icon nicht gefunden.

Deswegen habe ich das Menü nochmal gelöscht und neu Angelegt und auch wieder in Templates hinzugefügt.
Nun geht es komischerweise.

[Rossi]

Hi,

ich beschäftige mich schon seit jahren mit FHEM, aber nun das erste mal mit deiner Tablet-Darstellung und Bediehung mittels FUIP.
Ich habe mir mehrere Optionen hier im Forum angesehen und FUIP hat mit für meinen Anwendungsfall spontan am Besten gefallen.
Großes Lob and den Enwickler.

Nun zu meiner Frage:
Ich habe von mir erstellte SVG Grafiken für die Darstellung von Raffstore ähnlich den Shutters erstellt und erfolgreich in FHEM Weboberfläche intergriert.
Nun wollte ich diese auch in FUIP nutzen und habe es wie in Beitrag #6 beschrieben umgesetzt.
Leider bekomme ich meine SVG-Bilder nicht in den Dropdowns zur Auswahl. Getestet habe ich in einer neuen Page bei einem neuen Button und als neuen Menüeintrag auf der "Home" Seite.

Kann mir bitte jemand auf die Sprünge helfen?

Hier noch ein list von der FUIP definition:

Code Auswählen Erweitern

Internals:
   FUUID      5ed16734-f33f-4ad6-4ef8-1f3845c4945dfe59
   NAME       ui
   NR         81
   STATE      ui
   TYPE       FUIP
   autosave   none
   editOnly   0
   colors:
   fhem:
     directory  ./www/tablet
     friendlyname ui
     infix      ui/
   pages:
   viewtemplates:
Attributes:
   baseHeight 108
   baseWidth  142
   layout     gridster
   locked     0
   room       Settings -> Interfaces
   styleSchema default
   userCss    myicons.css



Die Einstellung auf der icomoon Seite , die myicons.css und myicons.woff Datei habe ich angehängt.

[Thorsten Pferdekaemper]

Leider bekomme ich meine SVG-Bilder nicht in den Dropdowns zur Auswahl.

Meinst Du damit die Werthilfe für die Icon-Felder auf dem Konfigurationspopup? Wahrscheinlich funktioniert das tatsächlich nicht. Kannst Du den Namen des Icons (siehe wieder Beitrag 6) einfach so eintippen? Wird das Icon dann angezeigt?
Gruß,
   Thorsten

[Rossi]

Hi,

danke für dein Feedback.
Ja, im Fall, dass ich den Icon-Name direkt eingebe funktioniert es.

Habe es aber inzwischen durch dein "FUIP::View::Html" hinbekommen, dass bietet wohl mehr Möglichkeiten, obwohl ich mit HTML code nicht so firm bin.
Aber Google hilft meist weiter. 

Nochmals danke, ich melde mich wieder wenn ich auf mein nächstes Problem stoße.

PS.: Gibt es einen Link an dem die von den FHEM Usern selbst erstellte FUIP Templates gesammelt / zur Verfügung gestellt werden?

[Rewe2000]

Hallo Thorsten,

ich muss mich da nochmals anhängen.
Ich wollte mir einige Buttons neu in FUIP einbinden, da es diese bisher nicht gibt, ich bin genau nach deiner Anleitung wie unter: https://forum.fhem.de/index.php/topic,105917.msg998395.html#msg998395 beschrieben vorgegangen.
Egal was ich mache, ich bekomme das Attribut "userCss" einfach nicht angezeigt.

Auch ein Browser Refresh, Cache löschen etc. ändert daran nichts. Die beiden Dateien *.css und *.woff liegen im Verzeichnis "/opt/fhem/FHEM/lib/FUIP/config"

In der *.CSS Datei steht folgendes (mein FUIP-Device hat den Namen "ui"):

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";
}


Ein List meines FUIP Device hänge ich auch noch mit an:

Code Auswählen Erweitern

Internals:
   FUUID      5e00fb72-f33f-7df9-03f0-686a580a31937f0d
   NAME       ui
   NOTIFYDEV  global
   NR         227
   NTFY_ORDER 50-ui
   STATE      ui
   TYPE       FUIP
   autosave   none
   editOnly   0
   eventCount 154
   READINGS:
   colors:
   fhem:
     directory  ./www/tablet
     friendlyname ui
     infix      ui/
   hmccu:
   pages:
   viewtemplates:
Attributes:
   DbLogExclude .*
   baseHeight 125
   baseWidth  150
   gridlines  show
   group      Multimedia
   icon       rc_TV
   layout     gridster
   locked     0
   room       System
   snapTo     gridlines

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?
Habe aber schon einiges versucht, aber leider ohne Erfolg.

Gruß Reinhard

[Gisbert]

Hallo zusammen,

ich nutze ein vorhandenes icon:

Code Auswählen Erweitern

attr <device> icon secur_smoke_detector
Das funktioniert ohne weiteres Zutun.

Viele​ Grüße​ Gisbert​

[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