Quelltext der Seite FTUI3 Proplanta Wetter

== Zielsetzung ==

Aufbau einer Wetterseite mit der Wetterkarte der Unwetterzentrale (D) inkl der Unwetterwarnungen und einer 7-Tage-Vorhersage mit den Daten von Proplanta.

== Voraussetzungen ==

- Fhem mit installiertem FTUI3 (https://wiki.fhem.de/wiki/FHEM_Tablet_UI_v3)
- Fhem-Device für die Unwetterzentrale (https://fhem.de/commandref_DE.html#UWZ)
- Fhem-Device für Proplanta (https://fhem.de/commandref_DE.html#PROPLANTA)

== Umsetzung ==

Definition der Hauptseite mit Aufrufen von Content-Dateien für die Warnmeldung und die Wettervorhersagen:

<syntaxhighlight lang="html">
<ftui-grid base-width="78" base-height="70" margin="3">
<ftui-grid-tile row="1" col="1" height="10" width="9">
<header>Unwetterzentrale</header>
<ftui-image heigth="120%" width="120%" left="-55px" src="https://www.unwetterzentrale.de/images/map/bayern_index.png"
</ftui-image>

</ftui-grid-tile>
<ftui-grid-tile row="1" col="10" height="5" width="8">
<header>Unwetterwarnungen</header>
<ftui-swiper id="Warnung_SW" dots style="font-size:1.5em" @click="Warnung_SW.next()" [hidden]="Unwetterzentrale:WarnCount | map('0:true, .*:false')">
<ftui-content id="Warn_0" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_0">

</ftui-content>
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('2|3|4|5:false, .*:true')" id="Warn_1" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_1">
</ftui-content>

<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('3|4|5:false, .*:true')" id="Warn_2" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_2">
</ftui-content>

<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('4|5:false, .*:true')" id="Warn_3" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_3">
</ftui-content>

<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('5:false, .*:true')" id="Warn_4" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_4">
</ftui-content>

</ftui-swiper>
<ftui-label color="green" size="4" [hidden]="Unwetterzentrale:WarnCount | map('0:false, .*:true')" text="Aktuell keine Warnmeldungen">
</ftui-label>

</ftui-grid-tile><ftui-grid-tile row="6" col="10" height="5" width="8">

<header>7-Tage Vorhersage</header>
<ftui-swiper id="Vorhersage_SW" dots style="font-size:1.5em" @click="Vorhersage_SW.next()">

<ftui-content id="VHS_0" file="./content/Wetter_Vorhersage.html" VHS_NR="fc0">
</ftui-content>

<ftui-content id="VHS_1" file="./content/Wetter_Vorhersage.html" VHS_NR="fc1">
</ftui-content>

<ftui-content id="VHS_2" file="./content/Wetter_Vorhersage.html" VHS_NR="fc2">
</ftui-content>

<ftui-content id="VHS_3" file="./content/Wetter_Vorhersage.html" VHS_NR="fc3">
</ftui-content>

<ftui-content id="VHS_4" file="./content/Wetter_Vorhersage.html" VHS_NR="fc4">
</ftui-content>

<ftui-content id="VHS_5" file="./content/Wetter_Vorhersage.html" VHS_NR="fc5">
</ftui-content>

<ftui-content id="VHS_6" file="./content/Wetter_Vorhersage.html" VHS_NR="fc6">
</ftui-content>

</ftui-swiper>
</ftui-grid-tile>

</ftui-grid>

</syntaxhighlight>

Content-Datei für die Wetterwarnungen:


<syntaxhighlight lang="html">
<ftui-row [color]="Unwetterzentrale:WarnUWZLevel_Color | map('gelb:yellow, orange:orange, rot:red, violett:violet')">
<ftui-column width="15%">
<ftui-image [src]="Unwetterzentrale:{{Warn_NR}}_IconURL" nocache margin="1" left="10px"></ftui-image>
</ftui-column>

<ftui-column height="82%" margin="1">
<ftui-label padding="1" scroll text-align="left" size="3" [text]="Unwetterzentrale:{{Warn_NR}}_LongText">
</ftui-label>

</ftui-column>
</ftui-row><span> <ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="Gültig vom "> 
</ftui-label> 

<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_Start_Date"> 
</ftui-label> 

<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_Start_Time"> 
</ftui-label> 

<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="Uhr"> 
</ftui-label> 

<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="bis zum"> 
</ftui-label> 

<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_End_Date"> 
</ftui-label> 

<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_End_Time"> 
</ftui-label> 

<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="Uhr"> 

</ftui-label> </span>Content-Datei für die Wettervorhersage (7-Tage):<!-- [text]="WetterProplanta:{{VHS_NR}}_date | toDate() | format('eeee - DD.MM.YYYY')" color="white" 
class="bold" margin="-1"> -->

<ftui-label [text]="WetterProplanta:{{VHS_NR}}_date | toDate() | t=>(t.toLocaleDateString()===(new Date()).toLocaleDateString())?'Heute':ftuiHelper.dateFormat(t,'eeee - DD.MM.YYYY')" color="white" class="bold" margin="-1">
</ftui-label>

<ftui-row height="50%">
<ftui-column>

<ftui-label text="morgens" size="2">

</ftui-label>

<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" [condition]="WetterProplanta:{{VHS_NR}}_weatherMorningIcon">
</ftui-weather>

<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp06 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_temp06" unit="°C">
</ftui-label>

<ftui-label margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_weatherMorning">
</ftui-label>

<ftui-row> <ftui-label text-align="left" left="55px" style="position:relative;" text="Max:">
</ftui-label>

<ftui-label text-align="right" left="-55px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_tempMax" unit="°C">
</ftui-label>

</ftui-row>

<ftui-row>
<ftui-label text-align="left" left="55px" style="position:relative;" text="Min:">
</ftui-label>
<ftui-label text-align="right" left="-55px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_tempMin" unit="°C">
</ftui-label>
</ftui-row>
</ftui-column>

<ftui-column>
<ftui-label text="Mittags" size="2">
</ftui-label>

<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" [condition]="WetterProplanta:{{VHS_NR}}_weatherDayIcon">
</ftui-weather>

<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp12 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_temp12" unit="°C">
</ftui-label>

<ftui-label margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_weatherDay">
</ftui-label>

<ftui-row>

<ftui-label text-align="left" left="45px" style="position:relative;" text="Regen:">
</ftui-label>

<ftui-label text-align="right" left="-40px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_chOfRainDay" unit="%">
</ftui-label>
</ftui-row>

<ftui-row>
<ftui-label text-align="left" left="45px" style="position:relative;" text="Sonne:">
</ftui-label>

<ftui-label text-align="right" left="-40px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_sun" unit="%">
</ftui-label>
</ftui-row>
</ftui-column>

<ftui-column>
<ftui-label text="Abends" size="2">
</ftui-label>

<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" [condition]="WetterProplanta:{{VHS_NR}}_weatherEveningIcon">
</ftui-weather>

<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp18 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_temp18" unit="°C">
</ftui-label>

<ftui-label margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_weatherEvening">
</ftui-label>
<ftui-row>

<ftui-label left="20px" style="position:relative;" text="UV:">
</ftui-label>

<ftui-label [color]="WetterProplanta:{{VHS_NR}}_uv | step('0:green, 3:yellow, 6:orange, 8:red, 11:violet')" left="-20px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_uv">
</ftui-label>
</ftui-row>

<ftui-label [text]="">
</ftui-label>

</ftui-column>

</ftui-row>
</syntaxhighlight>