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

Offline somansch

  • Full Member
  • ***
  • Beiträge: 306
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: 854
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
Ich weiß wie die Forumssuche funktioniert und ich kenne auch das Wiki und die commandref.

Offline yersinia

  • Full Member
  • ***
  • Beiträge: 264
    • 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 5.9 on RPi 3B with Raspian Stretch (perl 5.24.1) | FTUI
nanoCUL@a-culfw-> 2x868 (1x ser2net), 1x433 | ESPEasy
VCCU->7xHM-CC-RT-DN, 5xHM-LC-Bl1PBU-FM, 14xHM-SEC-SCo, 1xHM-PB-2-WM55, 1xHM-LC-Sw1PBU-FM, 1xHM-ES-PMSw1-Pl

Offline D3ltorohd

  • Full Member
  • ***
  • Beiträge: 155
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 ?

Offline yersinia

  • Full Member
  • ***
  • Beiträge: 264
    • 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 5.9 on RPi 3B with Raspian Stretch (perl 5.24.1) | FTUI
nanoCUL@a-culfw-> 2x868 (1x ser2net), 1x433 | ESPEasy
VCCU->7xHM-CC-RT-DN, 5xHM-LC-Bl1PBU-FM, 14xHM-SEC-SCo, 1xHM-PB-2-WM55, 1xHM-LC-Sw1PBU-FM, 1xHM-ES-PMSw1-Pl

Offline D3ltorohd

  • Full Member
  • ***
  • Beiträge: 155
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 »

Offline yersinia

  • Full Member
  • ***
  • Beiträge: 264
    • 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 5.9 on RPi 3B with Raspian Stretch (perl 5.24.1) | FTUI
nanoCUL@a-culfw-> 2x868 (1x ser2net), 1x433 | ESPEasy
VCCU->7xHM-CC-RT-DN, 5xHM-LC-Bl1PBU-FM, 14xHM-SEC-SCo, 1xHM-PB-2-WM55, 1xHM-LC-Sw1PBU-FM, 1xHM-ES-PMSw1-Pl

Offline D3ltorohd

  • Full Member
  • ***
  • Beiträge: 155
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.