[erledigt] Weather Widget Zeilenabstände

[der Bernhard]

Hallo zusammen,

ich wage mich gerade an eine FTUI Umsetzung und habe Probleme bei den Zeilenabständen des Weather Widgets - diese sind schlicht zu groß. Hat irgendwer eine Ahnung wo und wie ich die verkleinern kann.

Ich habe eine fixe Seitengröße und fixe Kachelgrößen definiert und irgendwie muss ich den Text innerhalb der Kacheln abbilden...

Danke mal im voraus.
Bernhard

Code Auswählen Erweitern


    <div class="gridster" style="width:1280px; height:800px; background-color:#404040;">
    <meta name="gridster_cols" content="16">
    <meta name="gridster_rows" content="10">
    <meta name="gridster_base_width" content="80">
    <meta name="gridster_base_height" content="80">
    <meta name="gridster_min_width" content="80">
    <meta name="gridster_min_height" content="80">
    <meta name="widget_margin" content="0">
        <ul>
            <li data-row="1" data-col="1" data-sizey="2" data-sizex="4">
                <div class="sheet">
                    <div class="left-narrow inline">
                        <div class="cell">
                            <div data-type="flipclock" data-showseconds="false" data-clock-flip-bg="#4a4a4a" data-clock-flip-font-color="#dedbdb" class="clock clock-07"></div>
                            <div data-type="label" data-device="datum_dummy" data-get="state" style="margin-bottom:5px" class="cell large"></div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="1" data-col="7" data-sizey="2" data-sizex="2">
                <div class="weather">
                        <div style="margin-bottom:5px" class="cell">Heute</div>
                        <div data-type="weather" data-device="MeinWetter" data-get="fc1_icon" data-imageset="kleinklima" class="cell small"></div>
                        <div data-type="label" data-device="MeinWetter" data-get="fc1_condition" class="cell"></div>
                        <div data-type="label" data-device="MeinWetter" data-get="fc1_low_c" data-pre-text="min. " data-unit="%B0C%0A" class="cell inline"></div>
                        <div data-type="label" data-device="MeinWetter" data-get="fc1_high_c" data-pre-text="max. " data-unit="%B0C%0A" class="cell inline"></div>
                </div>
            </li>

[der Bernhard]

Habs schon hinbekommen...

Code Auswählen Erweitern


    <div class="gridster" style="width:1280px; height:800px; background-color:#404040;">
    <meta name="gridster_cols" content="16">
    <meta name="gridster_rows" content="10">
    <meta name="gridster_base_width" content="80">
    <meta name="gridster_base_height" content="80">
    <meta name="gridster_min_width" content="80">
    <meta name="gridster_min_height" content="80">
    <meta name="widget_margin" content="0">
        <ul>
            <li data-row="1" data-col="7" data-sizey="2" data-sizex="2">
                <div class="cell">Heute</div>
                <div data-type="weather" data-device="MeinWetter" data-get="fc1_icon" data-imageset="kleinklima" class="small top-align"></div>
                <div data-type="label" data-device="MeinWetter" data-get="fc1_condition" class="top-align"></div>
                <div data-type="label" data-device="MeinWetter" data-get="fc1_low_c" data-pre-text="min. " data-unit="%B0C%0A" class="inline top-align"></div>
                <div data-type="label" data-device="MeinWetter" data-get="fc1_high_c" data-pre-text="max. " data-unit="%B0C%0A" class="inline top-align"></div>
            </li>
            <li data-row="1" data-col="9" data-sizey="2" data-sizex="2">
                <div class="cell">Morgen</div>
                <div data-type="weather" data-device="MeinWetter" data-get="fc2_icon" data-imageset="kleinklima" class="small top-align"></div>
                <div data-type="label" data-device="MeinWetter" data-get="fc2_condition" class="top-align"></div>
                <div data-type="label" data-device="MeinWetter" data-get="fc2_low_c" data-pre-text="min. " data-unit="%B0C%0A" class="inline top-align"></div>
                <div data-type="label" data-device="MeinWetter" data-get="fc2_high_c" data-pre-text="max. " data-unit="%B0C%0A" class="inline top-align"></div>
            </li>
            <li data-row="1" data-col="11" data-sizey="2" data-sizex="2">
                <div data-type="label" data-device="MeinWetter" data-get="fc3_day_of_week" class="cell"></div>
                <div data-type="weather" data-device="MeinWetter" data-get="fc3_icon" data-imageset="kleinklima" class="small top-align"></div>
                <div data-type="label" data-device="MeinWetter" data-get="fc3_condition" class="top-align"></div>
                <div data-type="label" data-device="MeinWetter" data-get="fc3_low_c" data-pre-text="min. " data-unit="%B0C%0A" class="inline top-align"></div>
                <div data-type="label" data-device="MeinWetter" data-get="fc3_high_c" data-pre-text="max. " data-unit="%B0C%0A" class="inline top-align"></div>
            </li>
            <li data-row="1" data-col="13" data-sizey="2" data-sizex="2">
                <div data-type="label" data-device="MeinWetter" data-get="fc4_day_of_week" class="cell"></div>
                <div data-type="weather" data-device="MeinWetter" data-get="fc4_icon" data-imageset="kleinklima" class="small top-align"></div>
                <div data-type="label" data-device="MeinWetter" data-get="fc4_condition" class="top-align"></div>
                <div data-type="label" data-device="MeinWetter" data-get="fc4_low_c" data-pre-text="min. " data-unit="%B0C%0A" class="inline top-align"></div>
                <div data-type="label" data-device="MeinWetter" data-get="fc4_high_c" data-pre-text="max. " data-unit="%B0C%0A" class="inline top-align"></div>
            </li>
            <li data-row="1" data-col="15" data-sizey="2" data-sizex="2">
                <div data-type="label" data-device="MeinWetter" data-get="fc5_day_of_week" class="cell"></div>
                <div data-type="weather" data-device="MeinWetter" data-get="fc5_icon" data-imageset="kleinklima" class="small top-align"></div>
                <div data-type="label" data-device="MeinWetter" data-get="fc5_condition" class="top-align"></div>
                <div data-type="label" data-device="MeinWetter" data-get="fc5_low_c" data-pre-text="min. " data-unit="%B0C%0A" class="inline top-align"></div>
                <div data-type="label" data-device="MeinWetter" data-get="fc5_high_c" data-pre-text="max. " data-unit="%B0C%0A" class="inline top-align"></div>
            </li>

[curt]

@der Bernhard

Habs schon hinbekommen...

Der Mensch (insbesondere ich) ist an-und-für-sich ja faul.
Es ist sehr anstrengend und demotivierend, viele Zeilen zu vergleichen.

Magst Du uns bitte sagen, an welcher Stellschraube Du geschraubst hast?

[der Bernhard]

Aso ja...

ich hab jetzt bei jedem betroffenen div ein top-align hinzugefügt und überall die obere div class=weather entfernt. Hatte das copy pasted und irgendwie kam mir diese doppelte Verschachtelung komisch vor...

Den Code hab ich nur reingehängt falls jemand mal was ähnliches sucht - geht mir ja auch öfters so.

[curt]

Den Code hab ich nur reingehängt falls jemand mal was ähnliches sucht - geht mir ja auch öfters so.

Und das war ja auch sehr schön/freundlich: An fehlenden Beispielen krankt es hier (aus meiner bescheidenen Sicht) oft: Da fragt jemand was, bekommt einen Hinweis, antwortet "geht" - und wenn man später den Thread liest, kommt man ins Grübeln: Was hat er denn nun gemacht?

Danke auch für Deine Erläuterung.

Ich kann nicht erkennen, welches Wettermodul Du nutzt. Falls das DWD sein sollte: Da sind wir grad hier dabei: https://forum.fhem.de/index.php?topic=86847.new;topicseen#new - aber wir sind noch sehr am Anfang.

[der Bernhard]

hallo curt,

verwende das standard ftui weather widget mit yahooweather. Ich musste nur die widget_weather.js anpassen weil die icon-bezeichnungen mittlerweile ein bisschen anders sind. Ich hoffe falls das widget mal ein update bekommt, dass das nicht überschrieben bzw. gleich korrigiert wird...

Das DWD Modul schaut gut aus, nur leider für meine Zwecke zu viel Information

[curt]

verwende das standard ftui weather widget mit yahooweather. Ich musste nur die widget_weather.js anpassen weil die icon-bezeichnungen mittlerweile ein bisschen anders sind. Ich hoffe falls das widget mal ein update bekommt, dass das nicht überschrieben bzw. gleich korrigiert wird...

Es WIRD überschrieben werden. - Wenn Du meinst, dass das allgemeingültig sinnvoll ist, solltest Du die Änderungen bei @setstate einreichen, er pflegt das dann in den Update-Teil ein. Aber Achtung: Anderen Nutzern in gleicher Konstellation (falls es welche gibt) sollten da nicht unabsichtlich die Füße weggeschossen werden. - Ich verstand Dich allerdings so, dass die bisherige Version an diesen Punkten eh nicht mehr funktionierte? Also: Nachricht an @setstate .

Das DWD Modul schaut gut aus, nur leider für meine Zwecke zu viel Information

Vermittels des FTUI-widget_weather.js scheint das außer @somansch niemand zu nutzen. Von ihm ist auch der einzige bekannte Designvorschlag. Dieser ist mir persönlich zu überladen, da bin ich dran, siehe https://forum.fhem.de/index.php/topic,86847.15.html