[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​