Hallo,
ich würde gerne die Icons von https://github.com/erikflowers/weather-icons (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:
<link rel="stylesheet" href="/fhem/tablet/custom/weather-icons-master/css/weather-icons.css" />
Präfix von weather-icons ist "wi-".
Mit
<i class="wi wi-raindrop"></i>
funktioniert auch das einbinden/anzeigen der Icons in Tablet Ui.
Mit
<div class="inline small" data-type="symbol" data-icon="wi-raindrop"></div>
oder
<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.
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:
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 ;-)
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.
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.
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.
Ach ja, die Weather-Icons sind in der Formatierung/Positionierung etwas "frickelig".
Wenn Du da auf einen Ansatz kommst, lass es mich bitte wissen.
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:
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.
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.
bin gerade dabei. in der 2.6.1 ist es dann dabei.
Hier mal als Idee eine Alternative zum Wind Direction Widget mit diesen Icons:
<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>
Genau die Idee hatte ich auch. Könnte man in ein Widget pressen.
Die Präzision bei der Angabe der Windgeschwindigkeit ist atemberaubend. ;D 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).
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.
<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>
Nichts für ungut. Aber das geht bei mir nicht durch den WAF-Filter. :D
Und wenn die eigene Wetterstation Beaufort nicht liefert hier noch eine Funktion für die 99_myUtils.pm:
###############################
### 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:
beaufort {kmh2bft(ReadingsVal("au_Wetterstation", "windSpeed", "0")*3.6)}
Zitat von: Ulm32b am 11 Februar 2017, 21:19:21
Nichts für ungut. Aber das geht bei mir nicht durch den WAF-Filter. :D
Ich kann halt mit dem allem Wind Widget wenig anfangen, da muss man schon nach rangehen um zu sehen woher der Wind kommt. Das war zwar nett programmiert aber optisch nicht meins.
die weathericons sind nun mit dabei. Sie werden eingebunden, wenn der entsprechende Prefix benutzt wird 'wi-'
Ausserdem können sie direkt über den YahooCode im Weather-Widget angesprochen werden
<div class="hbox items-space-around">
<div data-type="weather" data-device="yhWeather" data-get="fc2_code" data-device-type="YahooCode" data-imageset="weathericons" class="big"></div>
<div data-type="label" data-device="yhWeather" data-get="fc2_code"></div>
</div>
Andere Codes aus den verschiedenen Modules , die bestimmte Wetter-APIs benutzen, könnte ich auch noch direkt verlinken, wenn mir jemand erklären kann, wie die Readings dafür aussehen
https://erikflowers.github.io/weather-icons/api-list.html
update:
WindDirection ist jetzt auch direkt mit im Weather-Widget dabei
<div class="vbox">
<div data-type="weather" data-device="AgroWeather" data-get="windDir" data-device-type="WindDirection" data-imageset="weathericons" class="bigger"></div>
<div data-type="label" data-device="AgroWeather" data-get="windDir" data-post-text="°" class="big"></div>
</div>
Ich hab gerade meine sheet/row/cols auf das "neue" Weather-Widget mit den weathericons angepasst. Augenscheinlich sind jedoch die einzelnen WindDirection-Icons unterschiedlich formatiert. Ich bekomme die einfach nicht vernünftig untereinander in der Tabelle (siehe Bild).
Eigentlich dachte ich, der Code sollte passen, da die reinen Werte als label wunderbar zentriert untereinander stehen...
<div class="sheet left-align">
<div class="row">
<div data-type="label" data-device="Krailling" data-get="forecast_simpleforecast_forecastday_02_date_weekday" class="calendar col-25"></div>
<div data-type="weather" data-device="Krailling" data-get="forecast_simpleforecast_forecastday_02_icon" data-imageset="weathericons"
data-warn="forecast_simpleforecast_forecastday_02_snow_allday_cm" data-warn-on="^([1-9].*)" data-warn-off="0" data-on-color="#FFFFFF" class="wi we_icon col-10 right-align compressed"></div>
<div data-type="label" data-device="Krailling" data-get="forecast_simpleforecast_forecastday_02_high_celsius" class="calendar col-10 center-align"></div>
<div data-type="label" data-device="Krailling" data-get="forecast_simpleforecast_forecastday_02_low_celsius" class="calendar col-10 center-align"></div>
<div data-type="weather" data-device="Krailling" data-device-type="WindDirection" data-get="forecast_simpleforecast_forecastday_02_avewind_degrees" data-imageset="weathericons" class="small col-10 center-align"></div>
<div class="col-1-6 right-align">
<div data-type="label" data-device="Krailling" data-get="forecast_simpleforecast_forecastday_02_avewind_kph" class="inline calendar right-narrow-0"></div>
<div data-type="label" class="inline we-unit">km/h</div></div>
<div class="col-1-7 right-align nowrap">
<div data-type="label" data-device="Krailling" data-get="forecast_simpleforecast_forecastday_02_pop" class="inline calendar"></div>
<div data-type="label" class="inline we-unit left-narrow-5">%</div></div>
</div>
<div class="row rank2">
<div data-type="label" data-device="Krailling" data-get="forecast_simpleforecast_forecastday_03_date_weekday" class="calendar col-25"></div>
<div data-type="weather" data-device="Krailling" data-get="forecast_simpleforecast_forecastday_03_icon" data-imageset="weathericons"
data-warn="forecast_simpleforecast_forecastday_03_snow_allday_cm" data-warn-on="^([1-9].*)"
data-warn-off="0" data-on-color="#FFFFFF" class="wi we_icon col-10 right-align compressed"></div>
<div data-type="label" data-device="Krailling" data-get="forecast_simpleforecast_forecastday_03_high_celsius" class="calendar col-10 center-align"></div>
<div data-type="label" data-device="Krailling" data-get="forecast_simpleforecast_forecastday_03_low_celsius" class="calendar col-10 center-align"></div>
<div data-type="weather" data-device="Krailling" data-device-type="WindDirection" data-get="forecast_simpleforecast_forecastday_03_avewind_degrees" data-imageset="weathericons" class="small col-10 center-align"></div>
<div class="col-1-6 right-align">
<div data-type="label" data-device="Krailling" data-get="forecast_simpleforecast_forecastday_03_avewind_kph" class="inline calendar right-narrow-0"></div>
<div data-type="label" class="inline we-unit">km/h</div></div>
<div class="col-1-7 right-align nowrap">
<div data-type="label" data-device="Krailling" data-get="forecast_simpleforecast_forecastday_03_pop" class="inline calendar"></div>
<div data-type="label" class="inline we-unit left-narrow-5">%</div></div>
</div>
@setstate
Hmm, kann es sein, dass Du für WindDirection gar nicht die vorgegebenen Icons (wi-towards-nne, wi-towards-n, etc.) verwendest, sondern das "Standard-Icon" einfach um den angegebenen Wert in Grad drehst? Das würde zumindest das "Exzentrische" erklären. Die Icon-Ersteller legen nämlich anscheinend wenig Wert auf zentrierte Icons...
Das kann nicht sein, soviel Arbeit würde ich mir nicht machen ;D
Ich würde sheet > row > cell probieren.
Außerdem habe ich col-10 nicht definiert. Hast du bei dir? Wenn nicht, hättest du auch "untertasse" benutzen können, wäre die gleiche Wirkung. 8)
Ja, die Klassen existieren alle. Logo ;-)
Ich dachte eigentlich, dass es sogar einfacher wäre, einfach den Grad-Wert eines Readings aus dem Device auszulesen und das "Nord-Icon" einfach um den angegebenen Wert zu drehen, anstatt einzelne Bereiche (N-NNW-NW-etc.) zu definieren... Aber ich bin ja kein Programmierer, sondern nur Hausmeister.
Draufgekommen bin ich nur, weil ich mir auf alle col's einen Hintergrund gelegt habe, um eventuelle falsche Spaltenbreiten besser erkennen zu können. Rausgekommen ist dann das (man beachte die Hintergründe bei den Windrosen):
Das sieht aber mal krass aus und sehr aufschlussreich.
Da muss der Autor des Fonts das so im CSS definiert haben.
Muss ich mal eben reinschauen.
Ja, so einfach machen diese Designer sich das
.wi-wind.towards-20-deg {
transform: rotate(20deg);
}
Super. Wenn man dann als Designer zudem noch keinen Wert darauf legt, dass das Icon an sich zentriert ist, dann kommt so eine Kacke raus...
Dabei ist der guteste erikflowers kein Einzeltäter. Auch die fa-Icons zeigen dieses Phänomen. Ist mir aufgefallen, als ich bei ein paar Icons eine fa-spin-Class hinzugefügt habe...
Muss ich mir etwas anderes einfallen lassen...
Ähh, weil ich Dich grad dranhabe:
im widget-weather.js definierst Du die einzelnen Mappings für die weather-icons ganz oben in der Yahoo-Definition, oder? Meinst Du man kann da ein für alle Mal auch Readings wie z.B. partlycloudy (gibt vielleicht auch noch andere ohne blanks) definieren? Ich muss nämlich nach jedem Update das Widget wieder manuell ändern damit die Icons angezeigt werden.
Ich würde natürlich sämtliche möglichen Ausgaben für (das von mir verwendte) Wunderground als Mapping zusammenstellen. Nur in's git müsstest Du das setzen...
Man muss dem Icon dann eine feste Weite und Höhe geben, dann sollte es funzen
Das Mapping müsst ihr mir bitte mundgerecht für Copy und Paste geben.
Bissi off-topic:
@setstate
Was hältst Du von der Idee eine Klasse mit in's fhem-tablet-ui.css aufzunehmen, die das Debugging mit den col-Breiten zu erleichtern? Man könnte doch definieren, dass bei
<meta name="debug" content="<0"> <!-- verbose level 1-6 = output to console;0 = not output -->
eine Klasse in etwa wie die Folgende greift:
div[class*="col"] {
background: red;
background: -webkit-linear-gradient(red, yellow);
background: -o-linear-gradient(red, yellow);
background: -moz-linear-gradient(red, yellow);
background: linear-gradient(red, yellow);
}
Dann würde man gleich sehen, ob die Spaltenbreiten für den gewünschten Content breit genug sind, oder?
OK, kein Problem! Naja, doch ein kleines Problem.
Auf der wi-Webpage sind ja nur Keys angegeben, z.B. f00d für wi-day-sunny. Wie setz ich die Codes richtig für das Mapping um?
Ein
'sunny': '\f00d',
wird's ja nicht tun, oder?
Entweder hast Du die WunderGround-Mappings schon dazugefügt, oder die waren in der weather-icons.min.css schon drin...
Ich hab daraufhin einfach in widget_weather.js folgende Zeilen hinzugefügt:
case "WunderGround":
elem.addClass('wi wi-wu-' + val);
ftui.log(3, 'weather: set weathericons WunderGround: wi-wu-' + val);
break;
Mit einem data-device-type="WunderGround" innerhalb des Widgets werden die Icons dann auch wunderbar angezeigt.
Ähnlich wie oben könnte man auch die Mondphasen hinzufügen.
case "Moon":
elem.addClass('wi wi-moon-' + val);
ftui.log(3, 'weather: set weathericons WunderGroundMoon: wi-moon-' + val);
break;
Hier mal das Mapping:
.wi-moon-0:before{content:"\f095"}
.wi-moon-1:before{content:"\f096"}
.wi-moon-2:before{content:"\f097"}
.wi-moon-3:before{content:"\f098"}
.wi-moon-4:before{content:"\f099"}
.wi-moon-5:before{content:"\f09a"}
.wi-moon-6:before{content:"\f09b"}
.wi-moon-7:before{content:"\f09c"}
.wi-moon-8:before{content:"\f09d"}
.wi-moon-9:before{content:"\f09e"}
.wi-moon-10:before{content:"\f09f"}
.wi-moon-11:before{content:"\f0a0"}
.wi-moon-12:before{content:"\f0a1"}
.wi-moon-13:before{content:"\f0a2"}
.wi-moon-14:before{content:"\f0a3"}
.wi-moon-15:before{content:"\f0a4"}
.wi-moon-16:before{content:"\f0a5"}
.wi-moon-17:before{content:"\f0a6"}
.wi-moon-18:before{content:"\f0a7"}
.wi-moon-19:before{content:"\f0a8"}
.wi-moon-20:before{content:"\f0a9"}
.wi-moon-21:before{content:"\f0aa"}
.wi-moon-22:before{content:"\f0ab"}
.wi-moon-23:before{content:"\f0ac"}
.wi-moon-24:before{content:"\f0ad"}
.wi-moon-25:before{content:"\f0ae"}
.wi-moon-26:before{content:"\f0af"}
.wi-moon-27:before{content:"\f0b0"}
Eingebunden würde das Ganze dann mit einer Syntax a lá:
<div data-type="weather" data-device="Astro" data-get="moon_phase_ageOfMoon" data-device-type="Moon" data-imageset="weathericons" class="bigger inline"></div>
Eventuell kann man das auch "schlichter" halten, um auch andere Schnittstellen, deren Mondphasen mit einer Tages-Angabe versehen sind zu nutzen. Kann ich aber mangels Vergleich nicht sagen, welche das wären...
Kurze Frage - für netatmo gibt's noch kein mapping, oder?
Was müsste dazu alles geliefert werden - ich hatte schon mal angefangen das weather_widget durch den Wolf zu drehen, aber Euer "zentraler" Ansatz gefällt mir da besser.
Ich hab von Netatmo nicht den geringsten Schimmer (is doch so einen ihh, pfui, Cloudlösung, oder?)...
Wenn Du aber eine Liste mit den möglichen Readings für Wetter, Wind, etc. um die Ecke kommen kannst, dann sollte das Mapping relativ einfach zu erstellen sein. In wie weit das aber Bestand hat, kann ich nicht sagen, da ich von setstate noch nichts gehört habe, ob er überhaupt am Weather-Widget noch groß schrauben möchte, oder mein Vorschlag das alles über das Symbol-Widget zu machen überhaupt in seinem Sinne ist...
FTB wäre das Mapping jedoch ein sicherlich funktionierender Work-Around.
Ich hab auch Mal ein Mapping für Proplanta erstellt.
Da jedoch das Weather-Widget die jeweiligen Zustände aus dem vom PP-Modul übermittelten Reading zur Icon-URL "extrahiert", übersteigt die Einbindung in den Widget-Code meine Fähigkeiten.
* Proplanta
.wi-pp-t1:before(content:"\f00d")
.wi-pp-t2:before(content:"\f002")
.wi-pp-t3:before(content:"\f002")
.wi-pp-t4:before(content:"\f041")
.wi-pp-t5:before(content:"\f013")
.wi-pp-t6:before(content:"\f019")
.wi-pp-t7:before(content:"\f01a")
.wi-pp-t8:before(content:"\f01e")
.wi-pp-t9:before(content:"\f01b")
.wi-pp-t10:before(content:"\f006")
.wi-pp-t11:before(content:"\f01b")
.wi-pp-t12:before(content:"\f0b6")
.wi-pp-t13:before(content:"\f0b6")
.wi-pp-t14:before(content:"\f019")
.wi-pp-n1:before(content:"\f02e")
.wi-pp-n2:before(content:"\f083")
.wi-pp-n3:before(content:"\f081")
.wi-pp-n4:before(content:"\f086")
.wi-pp-n5:before(content:"\f07e")
.wi-pp-n6:before(content:"\f026")
.wi-pp-n7:before(content:"\f037")
.wi-pp-n8:before(content:"\f01d")
.wi-pp-n9:before(content:"\f0b3")
.wi-pp-n10:before(content:"\f0b4")
.wi-pp-n11:before(content:"\f02a")
.wi-pp-n12:before(content:"\f04a")
.wi-pp-n13:before(content:"\f04a")
.wi-pp-n14:before(content:"\f036")
ZitatWindDirection ist jetzt auch direkt mit im Weather-Widget dabei
<div class="vbox">
<div data-type="weather" data-device="AgroWeather" data-get="windDir" data-device-type="WindDirection" data-imageset="weathericons" class="bigger"></div>
<div data-type="label" data-device="AgroWeather" data-get="windDir" data-post-text="°" class="big"></div>
</div>
Könnte es sein, dass die Windrichtung um genau 180 Grad "falsch" angezeigt wird? Die von den Wetterdiensten gelieferte Gradzahl ist - wie meterologisch üblich - die Richtung, aus der der Wind kommt. Das von weather generierte Symbol zeigt hingegen in diese Richtung. Anders ausgedrückt: Das Symbol sagt: "Ich zeige Dir, woher der Wind kommt." Ist natürlich Definitionssache. Ich selbst würde gerne invertieren, sodass der Pfeil den Windvektor zeigt. Daraus folgt die Frage: Wie drehe ich mit möglichst wenig Code
data-get="windDir" um 180 Grad?
Ich habe mir die Sache noch einmal genau angesehen und komme zu einem eindeutigen Ergebnis:
Bei den Weather-Icons gibt es für die Windrichtung zwei Varianten:
- towards-x-deg und
- from-x-deg
Die von den Wetterdiensten gelieferten Daten gehören eindeutig in die Kategorie "from-x-deg", kennzeichnen also die Himmelsrichtung, aus welcher der Wind kommt. So halten es auch die Wetterfrösche, wenn sie z.B. sagen: "Der Wind kommt aus Nordwest."
In
widget_weather.js sollten demgemäß die Zeilen 681 bis 684
case "WindDirection":
icon.addClass('wi wi-wind towards-' + val + '-deg');
ftui.log(3, 'weather: set weathericons WindDirection: wi wi-wind towards-' + val + '-deg');
break;ersetzt werden durch
case "WindDirection":
icon.addClass('wi wi-wind from-' + val + '-deg');
ftui.log(3, 'weather: set weathericons WindDirection: wi wi-wind from-' + val + '-deg');
break;Wer es lieber etwas komplizierter mag (so wie ich, bevor ich auf die Icon-Variante "from" aufmerksam wurde), kann
towards-' + val + '-deg'auch ersetzen durch
towards-' + ((Number(val)+180)%360).toString() + '-deg'Im Ergebnis wird in beiden Fällen durch das Symbol dann der zutreffende Windvektor ausgegeben.
@setstate: Kann dies in das nächste Update einfließen?
Danke für den Tipp. Ich habe es in from-x-deg geändert
Hallo,
danke für die Änderung.
Ich schaffe es aber leider nicht, die Farbe des Windanzeigers zu ändern, trotz data-color bleibt er weiss:
<div data-type="weather"
data-device="GTEG_SENW"
data-get="windDirectionCur"
data-device-type="WindDirection"
data-imageset="weathericons"
data-color="#aa6900"
class="tall">
</div>
Kann das so überhaupt gehen oder habe ich einen Gedankenfehler?
Andreas
Weather hat kein data-color Attribute. Musst du über class machen.
Danke für die schnelle Antwort.
Funktioniert leider nicht:
<div data-type="weather"
data-device="GTEG_SENW"
data-get="windDirectionCur"
data-device-type="WindDirection"
data-imageset="weathericons"
class="tall orange">
</div>
Ein Test mit
class="tall bg-orange"
bringt jedoch einen orangen Hintergrund.
Kann mir nicht erklären, warum das einfache "orange" dann nicht funktioniert.
Oder tut es bei Dir?
Für jeglichen Hinweis dankbar,
Andreas
Da lag ich falsch, das ging so nicht.
Habe aber jetzt date-color beim Weather-Widget ergänzt.
statisch
<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" data-color="yellow" class="big"></div>
dynamisch aus einem Reading
<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" data-color="ftuitest:color" class="big"></div>
Supi, vielen herzlichen Dank, klappt hervorragend.
:)
Andreas
Sauber.
Die Neuerungen sind jetzt auch im Wiki dokumentiert.