weitere Icon-Bibliotheken einbinden (http://weathericons.io)

harald654 · 05 Februar 2017, 22:11:04

Hallo,
ich würde gerne die Icons von https://github.com/erikflowers/weather-icons einbinden.
Ich bin wie im Tablet UI/FAQ-Wiki vorgegangen und hab die Dateien in einem neuen Ordner (custom) unter /opt/fhem/www/tablet gespeichert, in der weather-icons.ccs Datei die Zeile "line-height: 1;" entfernt und in der index.html von Tablet ui die .ccs Datei verlinkt:

Code Auswählen

<link rel="stylesheet" href="/fhem/tablet/custom/weather-icons-master/css/weather-icons.css" />

Präfix von weather-icons ist "wi-".

Mit

Code Auswählen

<i class="wi wi-raindrop"></i>
funktioniert auch das einbinden/anzeigen der Icons in Tablet Ui.

Mit

Code Auswählen

<div class="inline small" data-type="symbol" data-icon="wi-raindrop"></div>
oder

Code Auswählen

<div class="inline small" data-type="symbol" data-icon="wi wi-raindrop"></div>
jedoch, wird mir kurz das richtige Icon angezeigt, nach dem vollständigen laden der Seite aber nur noch ein Pfeil nach unten (siehe Bild).
Weiß jemadn was ich beim einbinden der Icons vergessen haben könnte?

PS: ich habe bei einigen gesehen das diese für Wetter/Temperatur Icons mit dem Präfix "oa-" verwenden welche bei Tablet Ui wohl schon integriert sind (z.B. "oa-weather_sunrise"), gibt es vieleicht eine Übericht welche Icons es mit dem präfix "oa-" gibt und wie diese ausehen?

Gruß,
H.

tomster · 05 Februar 2017, 22:26:54

Servus!

Ich hatte genau das gleiche Phänomen bei den WeatherIcons. Irgendwie wollte bei mir das entsprechende css innerhalb der Widgets nicht zur Verfügung stehen. Ich hab dann folgendes in der js/fhem-tablet-ui.js ergänzt (Die Stelle findest Du, weil dort auch die anderen Icons eingetragen sind. Einfach ein bissl scrollen oder nach initHeaderLinks: suchen:

Code Auswählen


 if ($('[class*=wi-]').length > 0 && !$('link[href="lib/weather-icons.css"]').length)
     $('head').append('<link rel="stylesheet" href="lib/weather-icons.css" type="text/css" />');

Damit wird dieses Iconset auch "on-demand" geladen. Ist alles Quick'n'Dirty, aber funzt. Bis zum nächsten Update

tomster · 05 Februar 2017, 22:37:18

Ach ja, die Openautomation Icons findest Du in FHEM, wenn Du innerhalb eines definierten Devices ganz runter scrollst und dann auf "Select Icon" clickst. Da sind dann zwar nicht ausschließlich die OA-Icons angezeigt, aber eben u.a. auch. Ansonsten auf https://github.com/mhop/fhem-mirror/tree/master/fhem/www/images/openautomation
Musst halt durchclicken.

harald654 · 05 Februar 2017, 22:47:27

Hallo tomster,

Vielen Dank für die schnelle Antwort auf meine Fragen.
Dein Hack funktioniert, super

PS: Spricht eigentlich was dagen die Icons mit "<i class="wi wi-raindrop"></i>" einzbinden (wenn man diese nur als Symbol auserhab eines Widget benötigt)?

Gruß,
H.

tomster · 05 Februar 2017, 22:52:00

Gern geschehen.

Zitat von: harald654 am 05 Februar 2017, 22:47:27
PS: Spricht eigentlich was dagen die Icons mit "<i class="wi wi-raindrop"></i>" einzbinden (wenn man diese nur als Symbol auserhab eines Widget benötigt)?

Aus meiner Sicht spricht Nichts dagegen. Ich kenn aber nicht alle css-styles im Sheet auswendig. Alternativ kannst Du aber auch gern "<div class="wi wi-raindrop bigger compressed"></div>" verwenden. Damit stehen Dir dann sicher (fast?) alle FTUI-Styles zur Verfügung.

tomster · 05 Februar 2017, 23:06:59

Ach ja, die Weather-Icons sind in der Formatierung/Positionierung etwas "frickelig".
Wenn Du da auf einen Ansatz kommst, lass es mich bitte wissen.

setstate · 06 Februar 2017, 06:49:52

Zitat von: tomster am 05 Februar 2017, 22:26:54
Servus!

Ich hatte genau das gleiche Phänomen bei den WeatherIcons. Irgendwie wollte bei mir das entsprechende css innerhalb der Widgets nicht zur Verfügung stehen. Ich hab dann folgendes in der js/fhem-tablet-ui.js ergänzt (Die Stelle findest Du, weil dort auch die anderen Icons eingetragen sind. Einfach ein bissl scrollen oder nach initHeaderLinks: suchen:
Code Auswählen Erweitern
if ($('[class*=wi-]').length > 0 && !$('link[href="lib/weather-icons.css"]').length) $('head').append('<link rel="stylesheet" href="lib/weather-icons.css" type="text/css" />');

Damit wird dieses Iconset auch "on-demand" geladen. Ist alles Quick'n'Dirty, aber funzt. Bis zum nächsten Update

Ich werde das mit übernehmen, die WeatherIcons sind eh noch auf meiner ToDo Liste.

sinus61 · 11 Februar 2017, 18:15:05

Zitat von: tomster am 05 Februar 2017, 23:06:59
Ach ja, die Weather-Icons sind in der Formatierung/Positionierung etwas "frickelig".

Hab die Icons jetzt auch mal eingebunden, sieht eigentlich alles gut aus, die verhalten sich hier nicht anders als z.b. die fa Icons.
Wäre natürlich gut wenn die in Zukunft regulär bei Updates mit eingebunden werden.

setstate · 11 Februar 2017, 18:19:17

bin gerade dabei. in der 2.6.1 ist es dann dabei.

sinus61 · 11 Februar 2017, 18:51:47

Hier mal als Idee eine Alternative zum Wind Direction Widget mit diesen Icons:

Code Auswählen


<div class="vbox"> 
<div data-type="symbol" data-device="au_Wetterstation" data-get="windDirectionDegree" data-color="gray" data-states='["0","23","45","68","90","113","135","158","180","203","225","248","270","293","313","336"]' data-icons='["wi wi-wind towards-0-deg","wi wi-wind towards-23-deg","wi wi-wind towards-45-deg","wi wi-wind towards-68-deg","wi wi-wind towards-90-deg","wi wi-wind towards-113-deg","wi wi-wind towards-135-deg","wi wi-wind towards-158-deg","wi wi-wind towards-180-deg","wi wi-wind towards-203-deg","wi wi-wind towards-225-deg","wi wi-wind towards-248-deg","wi wi-wind towards-270-deg","wi wi-wind towards-293-deg","wi wi-wind towards-313-deg","wi wi-wind towards-336-deg"]'  class="compressed top-narrow tall"></div>
<div data-type="label" data-device="au_Wetterstation" data-get="windSpeed2" data-unit="km/h%0A" data-limits='[-73,0.1,20]' data-colors='["gray","#AA6900","#FF0000"]' class="bigger"></div>
</div>

setstate · 11 Februar 2017, 19:10:00

Genau die Idee hatte ich auch. Könnte man in ein Widget pressen.

Ulm32b · 11 Februar 2017, 19:20:54

Die Präzision bei der Angabe der Windgeschwindigkeit ist atemberaubend.

Bei der Windrichtung ist das Widget wind_direction hingegen m.E. klar überlegen.

Kann ich den Erfinder animieren, eine Dokumentation für die Rubrik "Speziallösungen FTUI" zu schreiben? Aus Wind_direction kann man dann hierauf verlinken (und umgekehrt).

sinus61 · 11 Februar 2017, 21:11:29

Hier noch eine Alternative mit den Icons für den Beaufort Wert. Wenn setstate diese Icons ins Update eingebaut hat kann man das so übernehmen, nur Device und Reading Namen müssen angepasst werden. Das Icon für den Beaufort Wert ändert auch seine Farbe.

Code Auswählen


<div class="vbox"> 
<div data-type="symbol" data-device="au_Wetterstation" data-get="windDirectionDegree" data-color="gray" data-states='["0","23","45","68","90","113","135","158","180","203","225","248","270","293","313","336"]' data-icons='["wi wi-wind towards-0-deg","wi wi-wind towards-23-deg","wi wi-wind towards-45-deg","wi wi-wind towards-68-deg","wi wi-wind towards-90-deg","wi wi-wind towards-113-deg","wi wi-wind towards-135-deg","wi wi-wind towards-158-deg","wi wi-wind towards-180-deg","wi wi-wind towards-203-deg","wi wi-wind towards-225-deg","wi wi-wind towards-248-deg","wi wi-wind towards-270-deg","wi wi-wind towards-293-deg","wi wi-wind towards-313-deg","wi wi-wind towards-336-deg"]'  class="compressed top-narrow tall"></div>
<div data-type="symbol" data-device="au_Wetterstation" data-get="beaufort" data-states='["0","1","2","3","4","5","6","7","8","9","10","11","12"]' data-icons='["wi wi-wind-beaufort-0","wi wi-wind-beaufort-1","wi wi-wind-beaufort-2","wi wi-wind-beaufort-3","wi wi-wind-beaufort-4","wi wi-wind-beaufort-5","wi wi-wind-beaufort-6","wi wi-wind-beaufort-7","wi wi-wind-beaufort-8","wi wi-wind-beaufort-9","wi wi-wind-beaufort-10","wi wi-wind-beaufort-11","wi wi-wind-beaufort-12"]'  data-colors='["gray","#AA6900","#AA6900","#AA6900","#AA6900","tomato","tomato","tomato","tomato","tomato","tomato"]' class="compressed top-narrow big"></div>
</div>

Ulm32b · 11 Februar 2017, 21:19:21

Nichts für ungut. Aber das geht bei mir nicht durch den WAF-Filter.

sinus61 · 11 Februar 2017, 21:21:44

Und wenn die eigene Wetterstation Beaufort nicht liefert hier noch eine Funktion für die 99_myUtils.pm:

Code Auswählen


###############################
###   kmh in Bft
###############################

sub 
kmh2bft
{
 my $kmh = $_[0];
 my $bft = 0;
    if ($kmh > 1 ) {$bft = 1};
    if ($kmh > 6 ) {$bft = 2};
    if ($kmh > 12 ) {$bft = 3};
    if ($kmh > 20 ) {$bft = 4};
    if ($kmh > 29 ) {$bft = 5};
    if ($kmh > 39 ) {$bft = 6};
    if ($kmh > 50 ) {$bft = 7};
    if ($kmh > 62 ) {$bft = 8};
    if ($kmh > 75 ) {$bft = 9};
    if ($kmh > 89 ) {$bft = 10};
    if ($kmh > 103 ) {$bft = 11};
    if ($kmh > 118) {$bft = 12};
return( $bft);
} # end sub kmh2bft

und ein Userreading für den m/s Wert:

Code Auswählen

beaufort {kmh2bft(ReadingsVal("au_Wetterstation", "windSpeed", "0")*3.6)}