Autor Thema: FTUI - neues Weather_Widget für Wettericons  (Gelesen 70264 mal)

Offline somansch

  • Full Member
  • ***
  • Beiträge: 313
Antw:FTUI - neues Weather_Widget für Wettericons
« Antwort #240 am: 15 August 2019, 17:52:12 »
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:
<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  ;)

Offline Waldmensch

  • Sr. Member
  • ****
  • Beiträge: 983
    • Github Repos
Antw:FTUI - neues Weather_Widget für Wettericons
« Antwort #241 am: 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

Offline yersinia

  • Full Member
  • ***
  • Beiträge: 360
    • Cyanide & Happiness
Antw:FTUI - neues Weather_Widget für Wettericons
« Antwort #242 am: 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).

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.
viele Grüße, yersinia
----
FHEM 6.0 on RPi 4B with Raspian Buster (perl 5.28.1) | FTUI
nanoCUL@a-culfw-> 2x868 (1x ser2net), 1x433 | MQTT | Tasmota | ESPEasy
VCCU->14xHM-SEC-SCo, 7xHM-CC-RT-DN, 5xHM-LC-Bl1PBU-FM, 3xHM-TC-IT-WM-W-EU, 1xHM-PB-2-WM55, 1xHM-LC-Sw1PBU-FM, 1xHM-ES-PMSw1-Pl

Offline D3ltorohd

  • Full Member
  • ***
  • Beiträge: 366
Antw:FTUI - neues Weather_Widget für Wettericons
« Antwort #243 am: 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 :.

<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 ?
Base : Intel NUC Debian 9, FHEM aktuell || Zigbee (Coordinator FW Z-Stack 1.2 default Koenkk) || MaxCUL (culfw V 1.67 nanoCUL868) || SIGNALduino 433MHz (V 3.3.2.1-rc8 ) || Shelly s1

Offline yersinia

  • Full Member
  • ***
  • Beiträge: 360
    • Cyanide & Happiness
Antw:FTUI - neues Weather_Widget für Wettericons
« Antwort #244 am: 21 August 2019, 16:14:21 »
Den ersten Post bezüglich amcharts hast du durch?

Insbesondere:
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
   <link rel="stylesheet" href="lib/weather-icons-wind.min.css" />nichts mit den amcharts zu tun.
viele Grüße, yersinia
----
FHEM 6.0 on RPi 4B with Raspian Buster (perl 5.28.1) | FTUI
nanoCUL@a-culfw-> 2x868 (1x ser2net), 1x433 | MQTT | Tasmota | ESPEasy
VCCU->14xHM-SEC-SCo, 7xHM-CC-RT-DN, 5xHM-LC-Bl1PBU-FM, 3xHM-TC-IT-WM-W-EU, 1xHM-PB-2-WM55, 1xHM-LC-Sw1PBU-FM, 1xHM-ES-PMSw1-Pl

Offline D3ltorohd

  • Full Member
  • ***
  • Beiträge: 366
Antw:FTUI - neues Weather_Widget für Wettericons
« Antwort #245 am: 21 August 2019, 16:56:45 »
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
   <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.
« Letzte Änderung: 21 August 2019, 16:59:18 von D3ltorohd »
Base : Intel NUC Debian 9, FHEM aktuell || Zigbee (Coordinator FW Z-Stack 1.2 default Koenkk) || MaxCUL (culfw V 1.67 nanoCUL868) || SIGNALduino 433MHz (V 3.3.2.1-rc8 ) || Shelly s1

Offline yersinia

  • Full Member
  • ***
  • Beiträge: 360
    • Cyanide & Happiness
Antw:FTUI - neues Weather_Widget für Wettericons
« Antwort #246 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.
viele Grüße, yersinia
----
FHEM 6.0 on RPi 4B with Raspian Buster (perl 5.28.1) | FTUI
nanoCUL@a-culfw-> 2x868 (1x ser2net), 1x433 | MQTT | Tasmota | ESPEasy
VCCU->14xHM-SEC-SCo, 7xHM-CC-RT-DN, 5xHM-LC-Bl1PBU-FM, 3xHM-TC-IT-WM-W-EU, 1xHM-PB-2-WM55, 1xHM-LC-Sw1PBU-FM, 1xHM-ES-PMSw1-Pl

Offline D3ltorohd

  • Full Member
  • ***
  • Beiträge: 366
Antw:FTUI - neues Weather_Widget für Wettericons
« Antwort #247 am: 28 August 2019, 11:03:32 »
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.
Base : Intel NUC Debian 9, FHEM aktuell || Zigbee (Coordinator FW Z-Stack 1.2 default Koenkk) || MaxCUL (culfw V 1.67 nanoCUL868) || SIGNALduino 433MHz (V 3.3.2.1-rc8 ) || Shelly s1

Offline dora71

  • Full Member
  • ***
  • Beiträge: 135
Antw:FTUI - neues Weather_Widget für Wettericons
« Antwort #248 am: 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

Offline OdfFhem

  • Sr. Member
  • ****
  • Beiträge: 565
Antw:FTUI - neues Weather_Widget für Wettericons
« Antwort #249 am: 06 Dezember 2019, 18:58:38 »
@dora71

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

Offline dora71

  • Full Member
  • ***
  • Beiträge: 135
Antw:FTUI - neues Weather_Widget für Wettericons
« Antwort #250 am: 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

Offline OdfFhem

  • Sr. Member
  • ****
  • Beiträge: 565
Antw:FTUI - neues Weather_Widget für Wettericons
« Antwort #251 am: 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:
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:
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:
  data-warn-class="bigger"

Beispiel dafür, dass nicht der warn-Wert selbst, sondern ein Icon dargestellt wird:
  data-warn-icon="fa-exclamation"


Ob dieser Änderungsvorschlag breitere Zustimmung finden wird, kann ich nicht sagen ...
Hilfreich Hilfreich x 1 Liste anzeigen

Offline dora71

  • Full Member
  • ***
  • Beiträge: 135
Antw:FTUI - neues Weather_Widget für Wettericons
« Antwort #252 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.  :D

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
« Letzte Änderung: 08 Dezember 2019, 09:38:12 von dora71 »

Offline OdfFhem

  • Sr. Member
  • ****
  • Beiträge: 565
Antw:FTUI - neues Weather_Widget für Wettericons
« Antwort #253 am: 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
var faElem = elem.find('.famultibutton');
durch die folgende Codezeile ersetzen könnte/sollte
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.

Offline somansch

  • Full Member
  • ***
  • Beiträge: 313
Antw:FTUI - neues Weather_Widget für Wettericons
« Antwort #254 am: 08 Dezember 2019, 21:57:10 »
@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.  :D

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