Hallo,
ich habe leider kein Icon zum Brandmelder gefunden
z.B. so eins: https://www.flaticon.com/free-icons/smoke-detector (https://www.flaticon.com/free-icons/smoke-detector)
Wie könnte man so eins einbinden?
Grüße
MarkusHiba
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
ok.
Hab viele mögliche Bezeichnungen ausprobiert aber leider kein Icon gefunden.
Ich werde mal den oa-secur_smoke_detector probieren.
ZitatSoll es einfach nur auf der Oberfläche erscheinen
Ja im Menüfeld
Zitatoder 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 (https://forum.fhem.de/index.php/topic,86199.msg974592.html#msg974592)
Gruß
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
Hi,
wie suchst Du denn die Icons? Du kannst alle nehmen, die Du über die Werthilfe eines icon-Felds finden kannst.
Gruß,
Thorsten
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:
.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:
<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
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:
@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:
<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
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.
Zitat von: MarkusHiba am 01 Dezember 2019, 22:44:22
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...
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.
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:
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.
Zitat von: Rossi am 08 Juni 2020, 12:06:54
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
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?
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 (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"):
@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:
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
Hallo zusammen,
ich nutze ein vorhandenes icon:
attr <device> icon secur_smoke_detector
Das funktioniert ohne weiteres Zutun.
Viele Grüße Gisbert
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):
<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
Hi,
Zitat von: Rewe2000 am 21 August 2022, 19:22:35
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.
Zitat
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
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 (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:
@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
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
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:
@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
Zitat von: Rewe2000 am 23 August 2022, 11:56:46
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
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
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
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
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
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