[FTUI 2] - Weather_Widget für Wettericons

[somansch]

Ich steh auf dem Schlauch.
Gestern habe ich die amcharts-Icons nicht groß bekommen,
heute mit der neuen JS bekomme ich sie nicht klein

Code Auswählen Erweitern

<div class="small" data-device="WetterdatenDarkSky" data-get="fc1_iconAPI" data-type="weather" data-imageset="amcharts"></div>

Hast du mal "tiny" oder "mini" ausprobiert?

[remo]

Man, das ging ja schnell.

Selbes Resultat - bleibt "riesig"

Code Auswählen Erweitern

<!-- aktuelles Wetter-Icon -->
        <table width="100%" border="1"> 
            <tr>
                <td style="text-align:center;vertical-align:center">
                   
                    <div class="tiny" 
                    data-device="WetterdatenDarkSky" data-get="fc1_iconAPI" data-type="weather" data-imageset="amcharts"></div>
                                               
                </td>   
            </tr>
        </table>

[remo]

Eigenartiges Verhalten,
das Icon wird NICHT INNERHALB des divs eingefügt...
Siehe Screenshot 1.

bei Meteocons klappt es...
siehe Screenshot 2

[somansch]

Eigenartiges Verhalten,
das Icon wird NICHT INNERHALB des divs eingefügt...
Siehe Screenshot 1.

bei Meteocons klappt es...
siehe Screenshot 2

Kannst du mal "kleinklima" ausprobieren? Hintegrund ist das "kleinklima" und "amcharts" per img-Tag eingebunden sind. Sich also identisch verhalten sollten.

Ich nutze das Flex Design von FTUI...

[remo]

Bei kleinklima genau dasselbe...

Hintegrund ist das "kleinklima" und "amcharts" per img-Tag eingebunden sind.
Ich nutze das Flex Design von FTUI...

Was bedeutet das genau?

Edit:
mit FlexBox stimmt die Positionierung, aber die Größe des Icons lässt sich noch immer nicht ändern...

[somansch]

Bei kleinklima genau dasselbe...

Was bedeutet das genau?

Edit:
mit FlexBox stimmt die Positionierung, aber die Größe des Icons lässt sich noch immer nicht ändern...

Bist du sicher, dass du v2.2 der js aktiv hast?

[remo]

Ich habe sie aus deinem ersten Post heruntergeladen.

Vielleicht kannst du mir mal einen Schnipsel von dir posten?!

Code Auswählen Erweitern


/* v2 updated by "somansch" (Andreas) */
/* v2.1 added amCharts animated icons by "somansch" (Andreas) */
/* v2.2 fixed amCharts sizing by "somansch" (Andreas) */

[Knallkopp_02]

Ich habe mich mal mit der Neuen Version 2.2 beschäftigt, und mal auf die Schnelle versucht das mit Tag und Nacht umzusetzen, was mir aber nicht gelungen ist.

Warum hast du data-device-typ herausgenommen? Hat es einen bestimmten Grund? Weil darüber hatte ich bei mir die Tag/Nacht Funktion definiert.

BTW im Code ist aber noch ein Stück der data-device-typ irgendwie im Inhalt hat.

Gruß

[somansch]

Hi somansch,

sieht gut aus.

OT: Eine Frage frage zum Layout. Was bedeuten die Pfeile bei der gefühlten Temp ? Und wie machst du das? UN wie hast du die deutschen Wochentage hinbekommen.

Hallo Otto,
das sind die Statistiken, also Verlauf der letzten Stunden. Hier für die Statistik für die Readings des Device definieren, siehe http://192.168.5.11:8083/fhem/docs/commandref_DE.html#statistics. Danach kannst du die Werte wie in diesem Beispiel nutzen:

Code Auswählen Erweitern

<div data-type="klimatrend" data-device="DarkSky" data-get="statTemperatureTendency" data-refperiod="1" class="inline bigger top-space readonly" data-stagnating-color="rgb(223,210,202)" data-rising-color="rgb(225,112,0)" data-highmark-rising-color="rgb(225,112,0)" data-falling-color="rgb(0,161,222)" data-highmark-falling-color="rgb(0,161,222)"></div>
<div data-type="klimatrend" data-device="DarkSky" data-get="statTemperatureTendency" data-refperiod="2" class="inline bigger top-space readonly" data-stagnating-color="rgb(223,210,202)" data-rising-color="rgb(225,112,0)" data-highmark-rising-color="rgb(225,112,0)" data-falling-color="rgb(0,161,222)" data-highmark-falling-color="rgb(0,161,222)"></div>
<div data-type="klimatrend" data-device="DarkSky" data-get="statTemperatureTendency" data-refperiod="3" class="inline bigger top-space readonly" data-stagnating-color="rgb(223,210,202)" data-rising-color="rgb(225,112,0)" data-highmark-rising-color="rgb(225,112,0)" data-falling-color="rgb(0,161,222)" data-highmark-falling-color="rgb(0,161,222)"></div>


Die Wochentagsabkürzung bekommst du durch Formatierung mit data-substitution, z.B.:

Code Auswählen Erweitern

<div data-type="label" data-device="Wetter_Pro" data-get="fc0_date" data-post-text=" - Proplanta" data-substitution="toDate().ee()" class="top-narrow-2x"></div>

Viele Grüße
Andreas

[somansch]

Bei kleinklima genau dasselbe...

Was bedeutet das genau?

Edit:
mit FlexBox stimmt die Positionierung, aber die Größe des Icons lässt sich noch immer nicht ändern...

Heißt das, dass bei kleinklima auch die Position nicht funktioniert?

PS: Diesbezüglich wurde nichts geändert....

Poste mal deinen kompletten Code zum Nachstellen.

ich habe mal eine Beispielseite mit Gridster zum Testen verwendet. Die Größe und Position ist einwandfrei. Im Anhang Zeile 87-90 siehst du die Definition.

Haben andere User Feedback zu dem Verhalten in Bezug auf Größe und Position?

[somansch]

Ich habe mich mal mit der Neuen Version 2.2 beschäftigt, und mal auf die Schnelle versucht das mit Tag und Nacht umzusetzen, was mir aber nicht gelungen ist.

Warum hast du data-device-typ herausgenommen? Hat es einen bestimmten Grund? Weil darüber hatte ich bei mir die Tag/Nacht Funktion definiert.

BTW im Code ist aber noch ein Stück der data-device-typ irgendwie im Inhalt hat.

Gruß

Hallo Knallkopp,
der device-type wurde für YahooCode und WindDirection genutzt, ist jedoch jetzt obsolet. Der einzige Zweck für das Erkennen des Device-Types ist nur noch ProPlanta, um aus der gelieferten URL den Namen des gifs herauszufiltern.

Ich habe mir deine Umsetzung mit Tag/Nacht für DWD angeschaut. Dies ist jetzt so nicht mehr machbar, da du ja einfach an den kleinklima Bildnamen "_night" dranhängst. Dies ist nur bedingt für kleinklima nutzbar und nicht für die anderen Iconsets.

Das Weather_Widget sollte in Zukunft ausschliesslich zum Mappen von eindeutigen Wetterzuständen (ohne aufwändige Übersetzung) in einzelne Icons verwendet werden. Alle anderen Sachen, wie z.B. eine Tag/Nacht Unterscheidung muss als Reading (Wetterzustand) bereits vorliegen. Da dies bei DWD nicht der Fall ist, bleibt nur noch einmal beim "DWD" Maintainer dieses zusätzliche Reading anzufordern. Alternativ mit einem UserReading oder Notify die Readings selbst zu erzeugen wäre auch ein Weg. Folgender Ansatz geht in die richtige Richtung: https://forum.fhem.de/index.php/topic,83097.msg902457.html#msg902457

Ziel muss es sein, ein zusätzliches Reading für "63" mit der Unterscheidung Tag/Nacht, also "63d"/"63n" in Abhängigkeit von fcx_time zu erzeugen. Danach brauchen wir nur die Mappings für sämtliche Icon-Sets aufzunehmen....

Jedoch bin ich auch kein Entwickler 

Viele Grüße
Andreas

[Knallkopp_02]

Ich bin auch kein Programmierer, sehe sie Sache immer. Von der User Seite.

Rollen wir die Sache mal von hinten auf. Wenn ich dich richtig verstehe werden nach wie vor Grafiken gebraucht, die für Tag und Nacht vorhanden sind. Da gibt es meiner Meinung nach schon ein ,,Problem". Für leicht bewölkt, heiter etc kann ich das nachvollziehen, aber für starken Schneefall, komplett bewölkt oder Gewitter sehe ich nur einen Zustand. Das sehe ich keinen Tag/Nacht Zustand.

Den Gedanken alles mit Nummern zumachen teile ich voll und ganz, ob die Grafik nun sunny, sunny_night oder 0d, 0n heist ist egal, vereinfacht aber die Language Hürde.

Wie stellst du dir jetzt die Umsetzung von den neuen Readings vor? Also soll der User bei einer Wettervorhersage von 7 Tagen und und 8 Werten pro Tag (3 Stunden Auflösung) 56 userreadings anlegen, die dann den Status Tag oder Nacht ermitteln mit der entsprechenden Zahl davor? Bin in Fhem noch nicht so fit, ob das auch einfacher geht. Das wäre aber für den User viel zu kompliziert. Das muss alles nur mit der Installation von Fhem und FTUI und einer Beispielconfig funktionieren, ohne weiteres Zutun.

manche User sind schon überfordert, wenn sie Grafiken umbenennen sollen.

BTW, man sollte evtl noch für die, die sich ein eigenes Iconset nehmen wollen, eine Option anbieten, oder generell nur eine für Grafiken, die dann ausgetauscht werden können. Also Kleinklima, amcharts und X in eins. so würde es auch einfacher.

Ich schaue mir das am WE auch mal an, ob mir irgendwas einfällt, wie man das alles in der js realisieren kann, ohne etwas anderes anzupacken.

Gruß

[remo]

Im Anhang meine HTML.
Sowie das Resultat auf dem Tablet.

[somansch]

Rollen wir die Sache mal von hinten auf. Wenn ich dich richtig verstehe werden nach wie vor Grafiken gebraucht, die für Tag und Nacht vorhanden sind. Da gibt es meiner Meinung nach schon ein ,,Problem". Für leicht bewölkt, heiter etc kann ich das nachvollziehen, aber für starken Schneefall, komplett bewölkt oder Gewitter sehe ich nur einen Zustand. Das sehe ich keinen Tag/Nacht Zustand.

Die Icons sind im Moment nicht das Problem. Klar gibt es Unterschiede in der Vielfalt der Icons, jedoch sind durch die Mappings auch die Zustände für die Nacht abgedeckt. Am Beispiel "Stark bewölkt, Regen oder Gewitter", da braucht man kein Symbol mit Mond  .

Den Gedanken alles mit Nummern zumachen teile ich voll und ganz, ob die Grafik nun sunny, sunny_night oder 0d, 0n heist ist egal, vereinfacht aber die Language Hürde.

Wie stellst du dir jetzt die Umsetzung von den neuen Readings vor? Also soll der User bei einer Wettervorhersage von 7 Tagen und und 8 Werten pro Tag (3 Stunden Auflösung) 56 userreadings anlegen, die dann den Status Tag oder Nacht ermitteln mit der entsprechenden Zahl davor? Bin in Fhem noch nicht so fit, ob das auch einfacher geht. Das wäre aber für den User viel zu kompliziert. Das muss alles nur mit der Installation von Fhem und FTUI und einer Beispielconfig funktionieren, ohne weiteres Zutun.

Um nochmal klarzustellen, das Tag/Nacht Problem existiert ausschliesslich bei "DWD". "DarkSky", "OpenWeather" und "Proplanta" liefern diese Werte mehr oder weniger bereits. Ich gebe dir Recht, dass zusätzliche UserReadings oder ein Notify Aufwand für den User bedeuten, daher sehe ich hier den Wetter-Modul Maintainer "in der Pflicht" oder alternativ eine einfach umzusetzende Lösung außerhalb des Weather_Widget.

BTW, man sollte evtl noch für die, die sich ein eigenes Iconset nehmen wollen, eine Option anbieten, oder generell nur eine für Grafiken, die dann ausgetauscht werden können. Also Kleinklima, amcharts und X in eins. so würde es auch einfacher.

Falls ein User heute andere Grafiken nutzen möchte, geht das ja bereits. Einfach die Kleinklima png durch andere pngs mit gleichem Namen austauschen. Was man natürlich noch reinnehmen könnte, wäre data-imageset="user". Die Mappings sind vorgegeben mit Zahlen von 1d-100d und 1n-100n. Somit muss der User seine Icons selbst zu den Nummern (Wetterzuständen für Tag und Nacht) umbenennen bzw. kopieren. Ich bezweifle jedoch, dass das ein User machen möchte  .

Ich schaue mir das am WE auch mal an, ob mir irgendwas einfällt, wie man das alles in der js realisieren kann, ohne etwas anderes anzupacken.

Sehr gern.

Viele Grüße
Andreas

[somansch]

Im Anhang meine HTML.
Sowie das Resultat auf dem Tablet.

hallo remo,

ich habe mir deinen Code mal angeschaut. Du arbeitest ausschliesslich mit "table", "tr" und "td" und vielen festen Angaben mit "style". Dies widerspricht der Idee des FTUI. Bitte verwende die Klassen für Tabellen, Reihen und Zellen (sheet, row, cell) und die entsprechenden Klassen für deren Positionierung und Größen. Damit funktioniert auch die Größendefinition der Wetter-Icons. Ich schlage dir vor, mit einem Beispiel aus der Community zu starten https://forum.fhem.de/index.php/topic,37378.0.html, damit kommst du schneller ans Ziel  .

Viele Grüße
Andreas