[tablet-UI] Frostwarnung

[derNeue]

wirklich super, habe es mir auch jetzt so gemacht....
aber wie bekomme ich das ganze etwas kleiner....möchte es auf der Index Seite meines Tablet nutzen....im moment brauche ich eine komplette Seite auf meinem Tablet....

vielen dank

[Ulm32b]

In der Tat: Die Wetterseite ist alles andere als platzoptimiert. Sie ist bei mir auch nicht die Startseite. Wie wäre es mit folgendem: Auf der Startseite gibt es eine detailliertere Auskunft zu heute und morgen. Nur das obere Feld mit Datum, Uhrzeit und aktueller Temperatur bleibt immer stehen; der Rest wird via Pagebutton umgeschaltet, z.B. auf die 5-Tageübersicht. Auf der Startseite bleibt dann noch Platz für anderes.

Weil Proplanta den Sonnenauf- und Untergang nicht liefert, habe ich dies über das Device Sun gelöst.

Code Auswählen Erweitern

<li data-row="1" data-col="2" data-sizex="4" data-sizey="1">
<div data-type="label" class="cell bigger" style="color:GoldenRod">ABC-stra&szlig;e xyz
</div>

<div class="inline">
<div style="color:GoldenRod" data-type="clock" data-format="j.n.Y" class="big inline"></div>

<div style="color:GoldenRod" data-type="clock" data-format="H:i" class="left-space-2x inline bigger"></div>

<div data-type="label" data-device="WetterProplanta" data-get="temperature" data-unit="%B0C%0A" data-fix="0" class="inline bigger left-space-3x" data-limits='[-50,0]' data-colors='["#5858FA","GoldenRod"]'>
</div></div>


</li>
<li data-row="2" data-col="2" data-sizex="4" data-sizey="4">
<div class="col-1-3">
<div data-type="label" class="cell top-space narrow">morgens</div>
</div>

<div class="col-1-3">
<div data-type="label" class="cell top-space narrow">mittags</div>
</div>

<div class="col-1-3">
<div data-type="label" class="cell top-space narrow">abends</div>
</div>


<div class="col-1-3">
<div data-type="weather" data-device="WetterProplanta" data-get="fc0_weatherMorningIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_weatherMorning" class="cell top-narrow"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_temp06" data-unit="%B0C%0A" class="cell big" data-limits='[-50,1]' data-colors='["#5858FA","white"]'></div>
</div>


<div class="col-1-3">
<div data-type="weather" data-device="WetterProplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_weatherDay" class="cell top-narrow"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_temp12" data-unit="%B0C%0A" class="cell big" data-limits='[-50,1]' data-colors='["#5858FA","white"]'></div>
</div>


<div class="col-1-3">
<div data-type="weather" data-device="WetterProplanta" data-get="fc0_weatherEveningIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_weatherEvening" class="cell top-narrow"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_temp18" data-unit="%B0C%0A" class="cell big" data-limits='[-50,1]' data-colors='["#5858FA","white"]'></div>
</div>

<!--
<div class="col-1-3">
<div data-type="label" class="cell darker top-space">nachts</div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc0_weatherNightIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_weatherNight" class="cell top-narrow"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_temp0" data-unit="%B0C%0A" class="cell big"></div>
</div>
-->

<div data-type="label" class="cell top-space-3x big darker">Morgen
</div>

<div class="col-1-3 top-narrow">
<div data-type="label" class="cell top-space darker">morgens</div></div>

<div class="col-1-3 top-narrow">
<div data-type="label" class="cell top-space darker">mittags</div></div>

<div class="col-1-3 top-narrow">
<div data-type="label" class="cell top-space darker">abends</div></div>


<div class="col-1-3 top-narrow">
<div data-type="weather" data-device="WetterProplanta" data-get="fc1_weatherMorningIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_weatherMorning" class="cell top-narrow darker"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_temp06" data-unit="%B0C%0A" class="cell big" data-limits='[-50,1]' data-colors='["#5858FA","grey"]'></div>
</div>

<div class="col-1-3 top-narrow">
<div data-type="weather" data-device="WetterProplanta" data-get="fc1_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_weatherDay" class="cell top-narrow darker"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_temp12" data-unit="%B0C%0A" class="cell big" data-limits='[-50,1]' data-colors='["#5858FA","grey"]'></div>
</div>

<div class="col-1-3 top-narrow">
<div data-type="weather" data-device="WetterProplanta" data-get="fc1_weatherEveningIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_weatherEvening" class="cell top-narrow darker"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_temp18" data-unit="%B0C%0A" class="cell big" data-limits='[-50,1]' data-colors='["#5858FA","grey"]'></div>
</div>
</li>

<li data-row="3" data-col="1" data-sizex="4" data-sizey="1">
<div class="container inline">
<div class="top-space-2x" data-type="wind_direction"
    data-device="WetterProplanta"
    data-direction="windDir"
    data-speed="wind"
    data-calm="-"
    data-size="50"
    data-tickstep="45"
    data-angleoffset="0"></div>
<div data-type="label" data-device="WetterProplanta" data-get="wind" data-unit="km/h" data-fix="0" class="large"></div>
</div>

<div class="container inline left-space">
<div class="top-space-2x large" data-type="label"
    data-device="WetterProplanta"
    data-get="pressure"
    data-unit="hPa"
data-fix="0"></div>
<div class="top-space" data-type="label">Luftdruck</div>
</div>

<div class="container inline left-space">
<div class="top-space-2x large" data-type="label"
    data-device="WetterProplanta"
    data-get="humidity"
    data-unit="%"
data-fix="0"></div>
<div class="top-space" data-type="label">Feuchte</div>
</div>

<div class="container inline left-space">
<div class="top-space-2x large" data-type="label"
    data-device="WetterProplanta"
    data-get="visibility"
    data-unit="km"
data-fix="0"></div>
<div class="top-space" data-type="label">Sicht</div>
</div>

<div class="container inline left-space">
<div data-type="symbol" data-icon="J" class="cell weather medium"></div>
<div data-type="label" data-device="Sun" data-get="Sonnenaufgang" data-part=".*(\d\d:\d\d):\d\d.*"  class="cell large narrow"></div>
<div data-type="label" data-device="Sun" data-get="Sonnenuntergang" data-part=".*(\d\d:\d\d):\d\d.*"  class="cell large"></div>
</div>

<div class="container inline">
<div data-type="label" data-icon="K" class="cell weather medium"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_moonRise" class="cell large narrow"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_moonSet" class="cell large"></div>
</div>

</li>


[derNeue]

Hallo Ulm32b, das sieht echt super aus.....ich schaue es mir heute Abend einmal an.....
melde mich dann zurück....erst einmal Danke

Code Auswählen Erweitern

<div class="container inline left-space">
<div data-type="symbol" data-icon="J" class="cell weather medium"></div>
<div data-type="label" data-device="Sun" data-get="Sonnenaufgang" data-part=".*(\d\d:\d\d):\d\d.*"  class="cell large narrow"></div>
<div data-type="label" data-device="Sun" data-get="Sonnenuntergang" data-part=".*(\d\d:\d\d):\d\d.*"  class="cell large"></div>
</div>


Wo finde ich das device SUN ?

[jnewton957]

In der Tat: Die Wetterseite ist alles andere als platzoptimiert. Sie ist bei mir auch nicht die Startseite. Wie wäre es mit folgendem: Auf der Startseite gibt es eine detailliertere Auskunft zu heute und morgen. Nur das obere Feld mit Datum, Uhrzeit und aktueller Temperatur bleibt immer stehen; der Rest wird via Pagebutton umgeschaltet, z.B. auf die 5-Tageübersicht. Auf der Startseite bleibt dann noch Platz für anderes.

Ich habe das bei mir so auf dem Handy so gelöst:
- Übersichtseite Wetter mit 7 Tages vorschau als slider
Über ein pagebutton(oben rechts die 2) kommt man auf die Wettervorhersage

Grüße
Jörg

[bjoernbo]

Das Widgte "weather" wurde meines wissen durch nesges seiner Zeit erstellt. Wenn nesges nicht mitliest, vielleicht habt ihr einen Tipp.
Mir werden die Wettericons nicht angezeigt!
Im Widget weather.js ist hierzu ein Pfad hinterlegt. Aber wie ich es auch anpasse, ich erhalte nicht das gewünschte Ergebnis.

meine index.html liegt im Verzeichnis
/opt/fhem/www/tablet/index.html

die Wettericons liegen im Verzeichnis
/opt/fhem/www/images/default/weater

in der wather.js wird in der  Zeile 376 nach dem Pfad gefragt.

Code Auswählen Erweitern


var fhem_path = $("meta[name='fhemweb_url']").attr("content") || "/fhem/";
   fhem_path = fhem_path.replace(/\/$/, '');
        var image_path = $("meta[name='weather_image_path']").attr("content") || '/images/default/weather/';
        elem.data('image-path', elem.data('image-path') || image_path);
      if(!elem.data('image-path').match(/\/$/)) {
       elem.data('image-path', elem.data('image-path')+'/');


[jnewton957]

meine index.html liegt im Verzeichnis
/opt/fhem/www/tablet/index.html

die Wettericons liegen im Verzeichnis
/opt/fhem/www/images/default/weater

Hallo Björn,

das habe ich bei mir auch so und es klappt mit weather.js im Standard.

Hast du in der fhem.cfg auch den Pfad für den Zugriff auf tabletUI eingetragen. Ist bei mir 8085 und eben ja nicht wie bei FHEMWEB 8083:

define WEBtablet FHEMWEB 8085 global
attr WEB iconPath fhemSVG:openautomation:default:icons_small:weather ?

Grüße

Jörg

[bjoernbo]

In meinem FTUI funktioniert alles! Da muss ich nichts an den Ports umstellen!  aber die 8085 war eingetragen.

Ich muss sicherlich nur die richtigen Pfade im widget anpassen, damit das widget den Pfad richtig auflösen kann und dann auf die .png's zugreifen kann.

[Ulm32b]

Wo finde ich das device SUN ?

Das habe ich seinerzeit abgekupfert und jetzt die Quelle wiedergefunden:
https://maker-tutorials.com/uhrzeit-des-sonnenaufgang-sonnenuntergang-in-fhem-anzeigen/

Damit erhält man zuverlässig den Sonnenauf- und Untergang des heutigen Tages, abhängig vom Standort. In der Quelle ist beschrieben, dass man zwischen den Varianten real (wahrscheinlich default), civil, nautic, astronomic unterscheiden kann.

Bei mir hat die Integration auf Anhieb funktioniert.

[derNeue]

Danke für die Info....
habe jetzt deinen code einmal eingetragen....

[Ulm32b]

o.k.
Der Code definierte nur einen Teil der Gridsterelemente. Auch ist nicht klar, ob die
Grundeinstellungen übereinstimmen. Versuche es mal hiermit (Getestet mit einem 10'-Tablet):

Im Header:

Code Auswählen Erweitern

...
  <meta name="widget_base_width" content="120">
    <meta name="widget_base_height" content="126">
    <meta name="widget_min_cols" content="13">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="widget_margin" content="4">
...

Im Body:

Code Auswählen Erweitern

<body>
    <div class="gridster">
        <ul>
<li data-row="1" data-col="1" data-sizex="3" data-sizey="1">

</li>


<li data-row="1" data-col="4" data-sizex="4" data-sizey="1">
<div data-type="label" class="cell bigger" style="color:GoldenRod">ABCstra&szlig;e xyz
</div>

<div class="inline">
<div style="color:GoldenRod" data-type="clock" data-format="j.n.Y" class="big inline"></div>
<div style="color:GoldenRod" data-type="clock" data-format="H:i" class="left-space-2x inline bigger"></div>
<div data-type="label" data-device="WetterProplanta" data-get="temperature" data-unit="%B0C%0A" data-fix="0" class="inline bigger left-space-3x" data-limits='[-50,0]' data-colors='["#5858FA","GoldenRod"]'>
</div></div>

</li>


<li data-row="1" data-col="8" data-sizex="3" data-sizey="1">

</li>


<li data-row="2" data-col="1" data-sizex="3" data-sizey="5">

</li>


<li data-row="2" data-col="4" data-sizex="4" data-sizey="4">

<div class="col-1-3">
<div data-type="label" class="cell top-space narrow">morgens</div>
</div>

<div class="col-1-3">
<div data-type="label" class="cell top-space narrow">mittags</div>
</div>

<div class="col-1-3">
<div data-type="label" class="cell top-space narrow">abends</div>
</div>


<div class="col-1-3">

<div data-type="weather" data-device="WetterProplanta" data-get="fc0_weatherMorningIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_weatherMorning" class="cell top-narrow"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_temp06" data-unit="%B0C%0A" class="cell big" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
</div>


<div class="col-1-3">

<div data-type="weather" data-device="WetterProplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_weatherDay" class="cell top-narrow"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_temp12" data-unit="%B0C%0A" class="cell big" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
</div>


<div class="col-1-3">

<div data-type="weather" data-device="WetterProplanta" data-get="fc0_weatherEveningIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_weatherEvening" class="cell top-narrow"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_temp18" data-unit="%B0C%0A" class="cell big" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
</div>


<div data-type="label" class="cell top-space-3x big darker">Morgen</div>

<div class="col-1-3 top-narrow">
<div data-type="label" class="cell top-space darker">morgens</div></div>

<div class="col-1-3 top-narrow">
<div data-type="label" class="cell top-space darker">mittags</div></div>

<div class="col-1-3 top-narrow">
<div data-type="label" class="cell top-space darker">abends</div></div>


<div class="col-1-3 top-narrow">
<div data-type="weather" data-device="WetterProplanta" data-get="fc1_weatherMorningIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_weatherMorning" class="cell top-narrow darker"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_temp06" data-unit="%B0C%0A" class="cell big" data-limits='[-50,0]' data-colors='["#5858FA","grey"]'></div>
</div>

<div class="col-1-3 top-narrow">
<div data-type="weather" data-device="WetterProplanta" data-get="fc1_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_weatherDay" class="cell top-narrow darker"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_temp12" data-unit="%B0C%0A" class="cell big" data-limits='[-50,0]' data-colors='["#5858FA","grey"]'></div>
</div>

<div class="col-1-3 top-narrow">
<div data-type="weather" data-device="WetterProplanta" data-get="fc1_weatherEveningIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_weatherEvening" class="cell top-narrow darker"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_temp18" data-unit="%B0C%0A" class="cell big" data-limits='[-50,0]' data-colors='["#5858FA","grey"]'></div>
</div>
</li>


<li data-row="2" data-col="8" data-sizex="3" data-sizey="5">

</li>


<li data-row="6" data-col="4" data-sizex="4" data-sizey="1">

<div class="container inline">
<div class="top-space-2x" data-type="wind_direction"
    data-device="WetterProplanta"
    data-direction="windDir"
    data-speed="wind"
    data-calm="-"
    data-size="50"
    data-tickstep="45"
    data-angleoffset="0"></div>
<div data-type="label" data-device="WetterProplanta" data-get="wind" data-unit="km/h" data-fix="0" class="large"></div>
</div>

<div class="container inline left-space">
<div class="top-space-2x large" data-type="label"
    data-device="WetterProplanta"
    data-get="pressure"
    data-unit="hPa"
data-fix="0"></div>
<div class="top-space" data-type="label">Luftdruck</div>
</div>

<div class="container inline left-space">
<div class="top-space-2x large" data-type="label"
    data-device="WetterProplanta"
    data-get="humidity"
    data-unit="%"
data-fix="0"></div>
<div class="top-space" data-type="label">Feuchte</div>
</div>

<div class="container inline left-space">
<div class="top-space-2x large" data-type="label"
    data-device="WetterProplanta"
    data-get="visibility"
    data-unit="km"
data-fix="0"></div>
<div class="top-space" data-type="label">Sicht</div>
</div>

<div class="container inline left-space">
<div data-type="symbol" data-icon="J" class="cell weather medium"></div>
<div data-type="label" data-device="Sun" data-get="Sonnenaufgang" data-part=".*(\d\d:\d\d):\d\d.*"  class="cell large narrow"></div>
<div data-type="label" data-device="Sun" data-get="Sonnenuntergang" data-part=".*(\d\d:\d\d):\d\d.*"  class="cell large"></div>
</div>

<div class="container inline">
<div data-type="label" data-icon="K" class="cell weather medium"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_moonRise" class="cell large narrow"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_moonSet" class="cell large"></div>
</div>

</li>

        </ul>
    </div>
</body>


[derNeue]

Hallo, ich habe noch ein kleines Problem....warum kann ich aber nicht richtig deuten....
hier der code

Code Auswählen Erweitern

<div class="container inline left-space">
<div data-type="symbol" data-icon="J" class="cell weather medium"></div>
<div data-type="label" data-device="Sun" data-get="Sonnenaufgang" data-part=".*(\d\d:\d\d):\d\d.*"  class="cell large narrow"></div>
<div data-type="label" data-device="Sun" data-get="Sonnenuntergang" data-part=".*(\d\d:\d\d):\d\d.*"  class="cell large"></div>
</div>

warum wird das data-device nicht ausgelesen....meine Fhem Config unten in den Bildern....

Danke für die Hilfe.....

[sinus61]

Das device heißt Sonnenaufgang bzw. Sonnenuntergang, bei get kommt dann state rein.

[derNeue]

super danke, und jetzt muss ich noch 24 Stunden abziehen oder ?

[noxx]

Hier kommt nun der vollständige Code für die Wetteraussichten.
In FHEM muss hierzu das Device Proplanta (bei mir heißt es "WetterProplanta") angelegt werden. Der Wochentag stammt jetzt (auf Hinweis von Setstate) auch aus Proplanta, sodass andere Devices nicht mehr benötigt werden. Bei Bedarf kann der Zeithorizont natürlich verkürzt oder erweitert werden.

In den vorliegenden Beispieldaten tritt der Fall ein, das bei aktivierter Frostwarnung eine Minimaltemperatur > 0 ausgewiesen wird. Darin sehe ich keinen Widerspruch; in meinem Auto zirpt die Frostwarnung schon bei 4°C.

Code Auswählen Erweitern

<div class="container inline top-space-2x">
<div class="small" data-type="symbol" data-device="WetterProplanta" data-get="fc0_frost" data-get-on="1" data-get-off="!on" data-icon="fa-snowflake-o" data-on-color="#5858FA" data-hide="0"></div>
<div data-type="label" class="cell large narrow" data-limits-get="WetterProplanta:fc0_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'>Heute</div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc0_weatherDay" data-imageset="kleinklima" class="cell" style="font-size:400%"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_weatherDay" class="cell top-narrow"></div>
<div class="doublebox-v inline top-space right-narrow">
<div data-type="label" data-device="WetterProplanta" data-get="fc0_tempMax" data-unit="%B0C%0A" class="cell large inline wider" data-limits='[-50,1]' data-colors='["#5858FA","white"]' ></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_chOfRainDay" data-unit="%" class="cell large inline top-space-2x right-narrow"></div>
</div>
<div class="doublebox-v inline top-space compressed">
<div class="cell big inline narrow" data-type="symbol" data-icon="fa-thermometer-3"><data-off-color="#999"></div>
<div class="cell big inline narrow" data-type="symbol" data-icon="fa-umbrella"><data-off-color="#999"></div>
</div>
<div class="doublebox-v inline top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc0_tempMin" data-unit="%B0C%0A" class="cell large inline wider left-align" data-limits='[-50,1]' data-colors='["#5858FA","white"]' ></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_rain" data-unit="mm" data-fix="0" class="cell large inline top-space-2x left-align"></div>
</div>
</div>

<div class="container inline top-space-2x">
<div class="small" data-type="symbol" data-device="WetterProplanta" data-get="fc1_frost" data-get-on="1" data-get-off="!on" data-icon="fa-snowflake-o" data-on-color="#5858FA" data-hide="0"></div>
<div data-type="label" class="cell large narrow" data-device="WetterProplanta" data-get="fc1_date" data-substitution="toDate().ee()"  data-limits-get="fc1_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc1_weatherDay" data-imageset="kleinklima" class="cell" style="font-size:400%"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_weatherDay" class="cell top-narrow"></div>
<div class="doublebox-v inline top-space right-narrow">
<div data-type="label" data-device="WetterProplanta" data-get="fc1_tempMax" data-unit="%B0C%0A" class="cell large inline wider" data-limits='[-50,1]' data-colors='["#5858FA","white"]' ></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_chOfRainDay" data-unit="%" class="cell large inline top-space-2x right-narrow"></div>
</div>
<div class="doublebox-v inline top-space compressed">
<div class="cell big inline narrow" data-type="symbol" data-icon="fa-thermometer-3"><data-off-color="#999"></div>
<div class="cell big inline narrow" data-type="symbol" data-icon="fa-umbrella"><data-off-color="#999"></div>
</div>
<div class="doublebox-v inline top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc1_tempMin" data-unit="%B0C%0A" class="cell large inline wider left-align" data-limits='[-50,1]' data-colors='["#5858FA","white"]' ></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc1_rain" data-unit="mm" data-fix="0" class="cell large inline top-space-2x left-align"></div>
</div>
</div>

<div class="container inline top-space-2x">
<div class="small" data-type="symbol" data-device="WetterProplanta" data-get="fc2_frost" data-get-on="1" data-get-off="!on" data-icon="fa-snowflake-o" data-on-color="#5858FA" data-hide="0"></div>
<div data-type="label" class="cell large narrow" data-device="WetterProplanta" data-get="fc2_date" data-substitution="toDate().ee()"  data-limits-get="fc2_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc2_weatherDay" data-imageset="kleinklima" class="cell" style="font-size:400%"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc2_weatherDay" class="cell top-narrow"></div>
<div class="doublebox-v inline top-space right-narrow">
<div data-type="label" data-device="WetterProplanta" data-get="fc2_tempMax" data-unit="%B0C%0A" class="cell large inline wider" data-limits='[-50,1]' data-colors='["#5858FA","white"]' ></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc2_chOfRainDay" data-unit="%" class="cell large inline top-space-2x right-narrow"></div>
</div>
<div class="doublebox-v inline top-space compressed">
<div class="cell big inline narrow" data-type="symbol" data-icon="fa-thermometer-3"><data-off-color="#999"></div>
<div class="cell big inline narrow" data-type="symbol" data-icon="fa-umbrella"><data-off-color="#999"></div>
</div>
<div class="doublebox-v inline top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc2_tempMin" data-unit="%B0C%0A" class="cell large inline wider left-align" data-limits='[-50,1]' data-colors='["#5858FA","white"]' ></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc2_rain" data-unit="mm" data-fix="0" class="cell large inline top-space-2x left-align"></div>
</div>
</div>

<div class="container inline top-space-2x">
<div class="small" data-type="symbol" data-device="WetterProplanta" data-get="fc3_frost" data-get-on="1" data-get-off="!on" data-icon="fa-snowflake-o" data-on-color="#5858FA" data-hide="0"></div>
<div data-type="label" class="cell large narrow" data-device="WetterProplanta" data-get="fc3_date" data-substitution="toDate().ee()"  data-limits-get="fc3_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc3_weatherDay" data-imageset="kleinklima" class="cell" style="font-size:400%"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc3_weatherDay" class="cell top-narrow"></div>
<div class="doublebox-v inline top-space right-narrow">
<div data-type="label" data-device="WetterProplanta" data-get="fc3_tempMax" data-unit="%B0C%0A" class="cell large inline wider" data-limits='[-50,1]' data-colors='["#5858FA","white"]' ></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc3_chOfRainDay" data-unit="%" class="cell large inline top-space-2x right-narrow"></div>
</div>
<div class="doublebox-v inline top-space compressed">
<div class="cell big inline narrow" data-type="symbol" data-icon="fa-thermometer-3"><data-off-color="#999"></div>
<div class="cell big inline narrow" data-type="symbol" data-icon="fa-umbrella"><data-off-color="#999"></div>
</div>
<div class="doublebox-v inline top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc3_tempMin" data-unit="%B0C%0A" class="cell large inline wider left-align" data-limits='[-50,1]' data-colors='["#5858FA","white"]' ></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc3_rain" data-unit="mm" data-fix="0" class="cell large inline top-space-2x left-align"></div>
</div>
</div>

<div class="container inline top-space-2x">
<div class="small" data-type="symbol" data-device="WetterProplanta" data-get="fc4_frost" data-get-on="1" data-get-off="!on" data-icon="fa-snowflake-o" data-on-color="#5858FA" data-hide="0"></div>
<div data-type="label" class="cell large narrow" data-device="WetterProplanta" data-get="fc4_date" data-substitution="toDate().ee()"  data-limits-get="fc4_frost" data-limits='[0,1]' data-colors='["white","#5858FA"]'></div>
<div data-type="weather" data-device="WetterProplanta" data-get="fc4_weatherDay" data-imageset="kleinklima" class="cell" style="font-size:400%"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc4_weatherDay" class="cell top-narrow"></div>
<div class="doublebox-v inline top-space right-narrow">
<div data-type="label" data-device="WetterProplanta" data-get="fc4_tempMax" data-unit="%B0C%0A" class="cell large inline wider" data-limits='[-50,1]' data-colors='["#5858FA","white"]' ></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc4_chOfRainDay" data-unit="%" class="cell large inline top-space-2x right-narrow"></div>
</div>
<div class="doublebox-v inline top-space compressed">
<div class="cell big inline narrow" data-type="symbol" data-icon="fa-thermometer-3"><data-off-color="#999"></div>
<div class="cell big inline narrow" data-type="symbol" data-icon="fa-umbrella"><data-off-color="#999"></div>
</div>
<div class="doublebox-v inline top-space">
<div data-type="label" data-device="WetterProplanta" data-get="fc4_tempMin" data-unit="%B0C%0A" class="cell large inline wider left-align" data-limits='[-50,1]' data-colors='["#5858FA","white"]' ></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc4_rain" data-unit="mm" data-fix="0" class="cell large inline top-space-2x left-align"></div>
</div>
</div>

Hallo
versuche gerade was schickes zu finden und teste diesen Code.

Wie bekomme ich einen Zeilenumbruch in die Wetterbeschreibung? Ist der Text zu lang, wird das Icon grösser gezogen

Noch ne Frage, wie positioniere ich die Texte und kl. Icons (unten), damits keine Überschneidung gibt?

[setstate]

off Topic Hinweis:

Code Auswählen Erweitern

<data-off-color="#999">

ist Quatsch und passt da nicht rein.
Wenn man einen Editor benutzt, der auch Syntax-Check macht (z.B. Brackets), sieht man sofort ...