[FTUI 2] - Weather_Widget für Wettericons

somansch · 15 August 2019, 17:52:12

Zitat von: yersinia am 15 August 2019, 17:11:55
Danke @somansch für die Erklärung.

Mir stellt sich nur die Frage, warum dann wenn ich die Klasse small (80% der Größe) verwende, die generierte Größe der Grafik dann ~59% (101.75x101.75) größer als die tatsächliche Grafikgröße ist. Ich würde dann eher 51.2x51.2 (als 80% von 64) erwarten.

So sieht der generierte HTML Code aus:
Code Auswählen Erweitern
<div data-type="weather" data-device="Wetter" data-get="weatherIcon" data-lang="de" data-imageset="amcharts" class="top-narrow-2x small weather" style="" data-ready=""> <div class="weather-icon" style="color: rgb(220, 220, 220);"> <img src="http://192.168.10.17:8085/fhem/images/default/weather/rainy-2.svg" title="t6" width="100%"> </div> </div>

Ärgerlich ist der 'verschwendete' Platz nach oben.

Anhängend ein Screenshot vom Firefox Inspektor mit den gemessenen Maßen.

OT: Btw, gibt es die Möglichkeit die amcharts analog zu den weathericons als eigene CSS Klasse anstelle eines <img> zu laden?

Wenn ich "small" verwende ist es 96.64 x 96.64. Das hängt sicherlich von mehreren Faktoren ab....

Die amCharts bestehen aus einzelnen SVG-Dateien und sind OpenSource. Um sie analog wie weathericons nutzen zu können, müsste jemand die SVGs zusammenführen "SVG-Sprite", siehe auch http://maddesigns.de/svg-sprites-icon-fonts-2309.html. Falls also jemand Lust hat, kann er gern die SVGs optimieren (weniger Platz um die Elemente) und dann in ein SVG-Sprite packen

Waldmensch · 15 August 2019, 18:51:19

Du kannst doch die class leer lassen und direkt ein style Attribut mit width und height benutzen, notfalls mit !important, um anderes zu überschreiben. Die Klassen sind doch nur zur Vereinfachung da.

Gesendet von iPhone mit Tapatalk

yersinia · 16 August 2019, 09:39:21

@somansch: ja, die 80% der small class beziehen sich auf die font-size. Ob die sich dann allerdings auch auf das <img>-Object vererben und vorallem auch auswirken weiss ich nicht (scheint jdfs nicht so).

Zitat von: somansch am 15 August 2019, 17:52:12
Die amCharts bestehen aus einzelnen SVG-Dateien und sind OpenSource. Um sie analog wie weathericons nutzen zu können, müsste jemand die SVGs zusammenführen "SVG-Sprite", siehe auch http://maddesigns.de/svg-sprites-icon-fonts-2309.html. Falls also jemand Lust hat, kann er gern die SVGs optimieren (weniger Platz um die Elemente) und dann in ein SVG-Sprite packen

Oha, das riecht nach viiiiiieeeel Arbeit. Danke für die OT Erklärung.

@waldmensch: ja, ich kann mit inline-CSS Arbeiten und da rumdoktern, aber irgendwie finde ich das unelegant. Aber über die gewählten Klassen passt es zumindest für mich.

D3ltorohd · 21 August 2019, 15:49:43

Ich muss hier auch noch mal etwas nachfragen. Hab noch mal ein anderes FTUI gewählt. Dort wollte ich nun das Wetter mit anlegen. Nur leider kommen da irgendwie andere Icons raus als angelegt.

Das habe ich in der index mit drin.

Zitat<link rel="stylesheet" href="lib/weather-icons-wind.min.css"/>

Das ist ein Icon :.

Code Auswählen

<body>
    <div class="page" id="content_home">
		<section>
			<div class="big">Wettervorhersage
			</div>
			<div style="display:inline-block;height:1px;width:80%;background-color:#0088CC;"></div>
			<table>
				<tr>
						<td>
						<div data-type="label" class="cell top-space narrow">morgens</div>
						<div data-type="label" data-device="DWD" data-get="fc0_1_time" class="cell top-space narrow"></div>
						<div data-type="weather" data-device="DWD" data-get="fc0_1_ww" data-imageset="amcharts" class="cell"></div>
						<div data-type="label" data-device="DWD" data-get="fc0_1_wwd" class="cell top-narrow"></div>
						<div data-type="label" data-device="DWD" data-get="fc0_1_TTT" data-unit="%B0C%0A" data-fix="0" class="cell bigger" data-limits='[-50,0,28]' data-colors='["#5858FA","white","red"]'></div>	
						</td>
						<td>
						<div data-type="label" class="cell top-space narrow">mittags</div>
						<div data-type="label" data-device="DWD" data-get="fc0_2_time" class="cell top-space narrow"></div>
						<div data-type="weather" data-device="DWD" data-get="fc0_2_ww" data-imageset="amcharts" class="cell"></div>
						<div data-type="label" data-device="DWD" data-get="fc0_2_wwd" class="cell top-narrow"></div>
						<div data-type="label" data-device="DWD" data-get="fc0_2_TTT" data-unit="%B0C%0A" data-fix="0" class="cell bigger" data-limits='[-50,0,28]' data-colors='["#5858FA","white","red"]'></div>
						</td>
						<td>
						<div data-type="label" class="cell top-space narrow">abends</div>
						<div data-type="label" data-device="DWD" data-get="fc0_3_time" class="cell top-space narrow"></div>
						<div data-type="weather" data-device="DWD" data-get="fc0_3_ww" data-imageset="amcharts" class="cell"></div>
						<div data-type="label" data-device="DWD" data-get="fc0_3_wwd" class="cell top-narrow"></div>
						<div data-type="label" data-device="DWD" data-get="fc0_3_TTT" data-unit="%B0C%0A" data-fix="0" class="cell bigger" data-limits='[-50,0,28]' data-colors='["#5858FA","white","red"]'></div>
						</td>
				</tr>
			</table>
		</section>

Ich nutze oder wollte die amcharts nutzen. Leider sieht das aber so aus..

Sollte doch eigentlich alles passen, oder ?

yersinia · 21 August 2019, 16:14:21

Den ersten Post bezüglich amcharts hast du durch?

Insbesondere:

Zitat von: somansch am 05 Februar 2019, 00:24:58
Die neuen animierten Icons von amCharts könnt ihr auf https://www.amcharts.com/free-animated-svg-weather-icons/ oder im Wiki-Beitrag anschauen: https://wiki.fhem.de/wiki/FTUI_Widget_Weather. Alle Icons werden per FHEM Update verteilt. Falls dies bei euch nicht funktioniert, könnt ihr einfach den Inhalt der "weather.zip" (im Anhang) in den Ordner "/opt/fhem/www/images/default/weather" kopieren. Im Anhang eine Übersicht über alle Icons ("weather_widget_overview.png" und "amCharts-overview_custom.gif").

Ich hatte auch Probleme die amcharts out-of-the-box ans Laufen zu bekommen, ich musste die weather.zip runterladen und kopieren, dann funktionierte es.

Gefühlt hat

Code Auswählen

<link rel="stylesheet" href="lib/weather-icons-wind.min.css" />
nichts mit den amcharts zu tun.

D3ltorohd · 21 August 2019, 16:56:45

Zitat von: yersinia am 21 August 2019, 16:14:21
Den ersten Post bezüglich amcharts hast du durch?

Insbesondere:
Ich hatte auch Probleme die amcharts out-of-the-box ans Laufen zu bekommen, ich musste die weather.zip runterladen und kopieren, dann funktionierte es.

Gefühlt hat
Code Auswählen Erweitern
<link rel="stylesheet" href="lib/weather-icons-wind.min.css" />
nichts mit den amcharts zu tun.

Sie liefen ja schon, bei meinem eigenen FTUI. Ich hab aber ne neue Index und neue Content Seiten, hier klappt es nun nicht mehr. Die Icons sollten da sein.
Eben noch mal geschaut die icons sind unter /opt/fhem/www/images/default/weather vorhanden.

yersinia · 22 August 2019, 08:53:55

Ja, der Code sieht mMn soweit gut aus.

Und bei deinem alten FTUI läuft es auch noch?

Liegt die neue index.html im gleichen Verzeichnis wie die alte? Wenn nicht, lohnt es sich vielleicht die META-Parameter mal anzuschauen; insbesondere fhemweb_url und debug.

D3ltorohd · 28 August 2019, 11:03:32

Zitat von: yersinia am 22 August 2019, 08:53:55
Ja, der Code sieht mMn soweit gut aus.

Und bei deinem alten FTUI läuft es auch noch?

Liegt die neue index.html im gleichen Verzeichnis wie die alte? Wenn nicht, lohnt es sich vielleicht die META-Parameter mal anzuschauen; insbesondere fhemweb_url und debug.

So sorry war im Urlaub, ja es liegt alles am selben Platz, an der Struktur hat sich nichts geändert, nur eine neue Index.html die alte ist umbenannt.

dora71 · 06 Dezember 2019, 18:39:59

Hallo zusammen,

ich hoffe, dass ich die Antwort nicht irgendwo in dem langen Thread hier überlesen habe.

Gibt es die Möglichkeit, die Größe der Warnungsausgabe (roter Kreis mit Zahl drin) zu ändern?

Die ist bei mir so klein, dass man sie gerne übersieht. Das rot ist zwar sichtbar, aber bei der Zahl wird es schon sehr schwer. Oder ist die statisch fest? Im Wiki finde ich nichts diesbezüglich.

Gruß Rainer

OdfFhem · 06 Dezember 2019, 18:58:38

@dora71

Kann zumindest über die css beeinflusst werden ... warn suchen ...

dora71 · 06 Dezember 2019, 20:30:53

@OdfFhem:

Danke schon mal soweit. Bin mir jetzt aber nicht genau sicher, wo Du meinst.
Ich denke, Du meinst die Datei fhem-tablet-ui.css oder?
Dort finde ich zumindest .weather #warn
Ist das die Stelle die Du meinst? Passt aber irgendwie nicht so ganz, weil bei mir die Warnungen rechts im Bild erscheinen, die CSS positioniert sie aber in der Mitte $:-\$

Deine Beispiel-Bilder finde ich schon mal super, der Code dazu würde mir aber auch helfen.
Bin nicht so tief im CSS-Code drin.

Danke schon mal.

Gruß Rainer

OdfFhem · 07 Dezember 2019, 08:19:42

@dora71

Für Testzwecke habe ich meine weather-Widgets mal um das data-warn-Attribut erweitert und gesehen, was vermutlich Dein (und jetzt auch mein) Problem mit der Darstellung ist. Die warn-Darstellung hängt unmittelbar von der übergeordneten weather-class ab. Ich verwende weather-Darstellungen mit den Klassen mini und small - führt dazu, dass eine Lupe für die sichere Erkennung der warn-Stufe notwendig wäre.

Ein manueller css-Eingriff würde zwar helfen, aber nicht in beiden Fällen ein zufriedenstellendes Ergebnis liefern:

Die weather-Klasse mini erfordert für eine gewohnte Darstellung die warn-Klasse bigger
Die weather-Klasse small erfordert für eine gewohnte Darstellung die warn-Klasse large

Daher scheint mir die Änderung von widget_weather.js die deutlich flexiblere Lösung zu sein und erfordert lediglich einen Austausch der Zeile #1788. Mit dieser Änderung kann man data-warn-class verwenden und steuert nun die warn-Darstellung pro weather-Widget:

Code Auswählen


Zeile #1788 austauschen
- class: 'digits' + digits
+ class: 'digits' + digits + ((elem.data('warn-class'))?' '+elem.data('warn-class'):'')

Desweiteren würde ich noch die Zeile #1785 ersetzen, da der derzeitige Inhalt keinerlei Bedeutung hat; der neue Inhalt aber die Verwendung von data-warn-icon erlaubt - s. https://wiki.fhem.de/wiki/FTUI_Widget_Symbol#Einstellung_f.C3.BCr_Warnung:

Code Auswählen


Zeile #1785 austauschen
- var faElem = elem.find('.famultibutton');
+ if (elem.isValidData('warn-icon')) { val = '<i class="fa ' + elem.data('warn-icon') + '"><i/>'; }

Beispiel dafür, dass die warn-Darstellung größer wird:

Code Auswählen


  data-warn-class="bigger"

Beispiel dafür, dass nicht der warn-Wert selbst, sondern ein Icon dargestellt wird:

Code Auswählen


  data-warn-icon="fa-exclamation"

Ob dieser Änderungsvorschlag breitere Zustimmung finden wird, kann ich nicht sagen ...

dora71 · 08 Dezember 2019, 09:29:42

@OdfFhem:

Vielen Dank für die Optimierung. Klappt hervorragend. Meine Zustimmung hast Du auf jeden Fall, ich hoffe, andere sehen es genauso, damit diese Änderungen in das Widget übernommen werden können.

Eins verstehe ich aber nicht so ganz. Du schreibst:

Zitat von: OdfFhem
Desweiteren würde ich noch die Zeile #1785 ersetzen, da der derzeitige Inhalt keinerlei Bedeutung hat

Ich dachte, dass die Zahl, die dort auftaucht, der Anzahl der Wetterwarnungen entspricht. Oder meintest Du damit etwas Anderes?

Gruß und schönen Sonntag.

Rainer

OdfFhem · 08 Dezember 2019, 10:51:14

@dora71

Deine Frage kann ich (noch) nicht so ganz verstehen, aber ich versuche mal eine Antwort zu geben ...

Ich meinte damit, dass man die derzeitige Zeile 1785 im widget_weather.js

Code Auswählen


var faElem = elem.find('.famultibutton');

durch die folgende Codezeile ersetzen könnte/sollte

Code Auswählen


if (elem.isValidData('warn-icon')) { val = '<i class="fa ' + elem.data('warn-icon') + '"><i/>'; }

Daraus ergeben sich 2 Vorteile:

faElem ist wohl durch Kopieren aus dem famultibutton-Modul entstanden, hat aber im weather-Modul keinerlei Bedeutung; daher unnötigen Ballast entsorgen.
data-warn-icon kann - wie gewohnt und falls gewünscht - verwendet werden (s.a. Wiki)

Diese Änderung hängt nicht direkt mit Deinem eigentlichen Erkennungsproblem zusammen, sollte aber die existierenden und hier noch fehlenden warn-Möglichkeiten zur Verfügung stellen. Standardmäßig werden via warn Zahlen dargestellt; alternativ könnte man aber auch statt einer Zahl ein Icon darstellen - z.B. wenn man nur wissen will, daß es Warnungen gibt und nicht wissen will wieviele vorhanden sind.

somansch · 08 Dezember 2019, 21:57:10

Zitat von: dora71 am 08 Dezember 2019, 09:29:42
@OdfFhem:

Vielen Dank für die Optimierung. Klappt hervorragend. Meine Zustimmung hast Du auf jeden Fall, ich hoffe, andere sehen es genauso, damit diese Änderungen in das Widget übernommen werden können.

Eins verstehe ich aber nicht so ganz. Du schreibst:

Ich dachte, dass die Zahl, die dort auftaucht, der Anzahl der Wetterwarnungen entspricht. Oder meintest Du damit etwas Anderes?

Gruß und schönen Sonntag.

Rainer

Ich könnte die Änderungen übernehmen. Kannst du bitte noch ein Code Beispiel posten? Dies könnte ich dann ins Wiki aufnehmen.

Viele Grüße
Andreas