Icons aus "Fort-Awesome" funktionieren nicht

Michi240281 · 13 Mai 2016, 09:42:10

Hallo zusammen,

ich habe gestern mit dem Erstellen meiner ersten FTUI-Seite so richtig losgelegt und bin dabei über folgendes gestolpert:

Beim Verwenden z.B. des Icons "ftui-door" gibts keine Probleme. Dann wollte ich das Batterie-Icon "fa-battery-full" verwenden, jedoch wird nichts angezeigt! Habe dann mal ein paar andere probiert, aber keines funktioniert!

Was mache ich falsch? Oder muss ich die Icons vorher runterladen und irgendwo ablegen? Das stand so dann aber nicht m Fhemwiki. Wenn ja, wie lade ich sie runter und wo müssen sie hin?

Besten Dank und viele Grüße
Michael

roman1528 · 13 Mai 2016, 10:00:36

Hast du diese Zeile:

Code Auswählen

<link rel="stylesheet" href="lib/font-awesome.min.css" />
im <head>-Tag deiner index.html?

Nimm doch eine (oder mehrere) der Beispiel Dateien (html) die dabei sind zur Hand... Baue diese um oder vergleiche sie mit deinen Dateien^^

Michi240281 · 13 Mai 2016, 11:41:17

Zitat von: roman1528 am 13 Mai 2016, 10:00:36
Hast du diese Zeile:
Code Auswählen Erweitern
<link rel="stylesheet" href="lib/font-awesome.min.css" />
im <head>-Tag deiner index.html?

Nimm doch eine (oder mehrere) der Beispiel Dateien (html) die dabei sind zur Hand... Baue diese um oder vergleiche sie mit deinen Dateien^^

Das ist eine gute Frage, schaue ich später direkt nach! Ich habe auf der index.example.html aufgebaut und im header noch nicht wirklich viel angepasst, außer dem hier:

Code Auswählen

[/<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
   <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />code]

roman1528 · 13 Mai 2016, 12:22:18

Zitat von: Michi240281 am 13 Mai 2016, 11:41:17
Das ist eine gute Frage, schaue ich später direkt nach! Ich habe auf der index.example.html aufgebaut und im header noch nicht wirklich viel angepasst, außer dem hier:

Code Auswählen Erweitern
[/<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" /> <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />code]

dann sollte es eigentlich gehen^^

Michi240281 · 13 Mai 2016, 13:35:28

Ok! Tuts aber nicht! Oder muss ich die Icons erst noch alle ins FHEM-Verzeichnis laden? Habe mal irgendwo was von nem Update-Befehl speziell für die Icons gelesen. Aber das ist vllt schon veraltet!

FHEm2005 · 13 Mai 2016, 14:39:57

Bai Dir kann auch die Zeile

Zitat<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />

im <head>helfen.. Dazu gehört dann auch, dass der Pfad mit der Wirklichkeit überein stimmt. Also: KONTROLLIEREN und notfalls mal die Datei 'font-awesome.min.css' SUCHEN und den Pfad anpassen. Deshalb hat roman1528 auch Recht. Bei ihm sieht das Home-Verzeichnis anders aus als bei mir.

Das Leben einen FHEM'lers ist in vielen Fällen try-and-error. Die wirklichen Erfolgeserlebnisse kommen aus dieser Methode.

Gruß Eberhard

Michi240281 · 13 Mai 2016, 14:49:23

Besten Dank für Eure Antworten!

Werde das nachher checken und berichten!

Michi240281 · 13 Mai 2016, 16:07:51

So, also der Eintrag

Code Auswählen

<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />

ist in meiner html enthalten! Woran könnte es sonst noch liegen?

Die Datei "font-awesome.min.css" liegt im richtigen Ordner!

FHEm2005 · 13 Mai 2016, 18:59:23

Hallo Michael,

da ich Deinen FTUI-Code nicht kenne, hier ein Beispiel aus meiner Konfiguration:

Zitat<div style="width:171px;height:52px; text-align: left; margin-left: 25px;" >Heizung Wz1
         <div data-type="symbol"
            style="font-size:27px; position: relative; left: 11px;"
            data-device="Hzg_Wz1"
            data-get="batteryLevel"
            data-icons='["oa-measure_battery_100","oa-measure_battery_75","oa-measure_battery_50","oa-measure_battery_25","oa-measure_battery_0"]' data-get-on='["3\\.[0-9]","2\\.[789]","2\\.[456]","2\\.[123]","((2\\.0)|([01]\\.[0-9]))"]'
            data-on-colors='["#145084","#145084","#145084","#1ca6e5","#aa6900"]' class="inline" >
            </div>
      </div>

Für Dich ist da noch vie unbrauchbares Zeugs drin, aber die wesentlichen Dinge erkennst Du ja.

Gruß
Eberhard

Michi240281 · 13 Mai 2016, 19:38:36

Hallo Eberhard,

besten Dank für deinen Code! Ich habe jetzt mal an anderer Stelle nen Icon probiert und da gehts! Dass das Icon nicht angezeigt wird, liegt wohl an einer falschen Definition!

Schau mal hier:

Code Auswählen

	<div data-type="symbol" data-device="Garagentor"
		data-get="battery"
		data-states='["low","ok"]' 
		data-icons='["ftui-door blink","ftui-bell"]' 
		data-colors='["red","green"]'>
</div>

Siehst da nen Fehler?

EDIT: Habs hinbekommen!

ahstax · 11 Mai 2018, 15:07:57

Hallo,

Zitat von: Michi240281 am 13 Mai 2016, 19:38:36
EDIT: Habs hinbekommen!

darf ich fragen, was das Problem war? Ich stehe vor dem selben...

Grüße,
Andreas

niwa83 · 14 Mai 2018, 18:51:26

Stehe vor dem selben Problem.

Code Auswählen


  <div data-type="symbol"
            data-device="MuellterminDummy"
            data-get="BrauneTonne"
            data-icons='["fa-trash warn fa-spin","fa-trash warn"]'
            data-on-colors='["saddlebrown","saddlebrown"]'
            data-get-on='["0","2"]'
            data-background-icon="fa-square"
            class="big">

dt2510 · 15 Mai 2018, 10:08:13

ich glaube die Option heißt nur "spin" nicht "fa-spin"

niwa83 · 15 Mai 2018, 10:17:58

Zitat von: dt2510 am 15 Mai 2018, 10:08:13
ich glaube die Option heißt nur "spin" nicht "fa-spin"

Das werde ich mal probieren und berichten

niwa83 · 15 Mai 2018, 16:28:09

Zitat von: niwa83 am 15 Mai 2018, 10:17:58
Das werde ich mal probieren und berichten

Problem ist immer noch da. Sprich kein Symbol vorhanden

Ulm32b · 15 Mai 2018, 17:22:04

Zitat von: niwa83 am 14 Mai 2018, 18:51:26
Code Auswählen Erweitern
... data-on-colors='["saddlebrown","saddlebrown"]' ...

data-on-colors gibt es nicht (mehr). Meine Empfehlung: Im Wiki unter Symbol nachlesen und in kleinen Schritten auf Deine Umgebung umstricken.

niwa83 · 15 Mai 2018, 17:43:07

Zitat von: Ulm32b am 15 Mai 2018, 17:22:04
data-on-colors gibt es nicht (mehr). Meine Empfehlung: Im Wiki unter Symbol nachlesen und in kleinen Schritten auf Deine Umgebung umstricken.

Wo kann ich das nachlesen.

Laut Wiki gibt es die Sachen sehr wohl.

Ulm32b · 15 Mai 2018, 19:16:07

Zitat von: niwa83 am 15 Mai 2018, 17:43:07
Wo kann ich das nachlesen.

Laut Wiki gibt es die Sachen sehr wohl.

Wo bitte steht im Wiki data-on-colors? Ich sehe dort data-on-color und data-colors.

Mein Beitrag war nur die Kurzform von https://forum.fhem.de/index.php/topic,86003.0.html. Da kann man nachlesen.

niwa83 · 15 Mai 2018, 22:38:27

Zitat von: niwa83 am 15 Mai 2018, 17:43:07
Wo kann ich das nachlesen.

Laut Wiki gibt es die Sachen sehr wohl.

Diese Aussage ist vollkommen richtig