FTUI3 Proplanta Wetter: Unterschied zwischen den Versionen

Aus FHEMWiki
(Die Seite wurde neu angelegt: „== Zielsetzung == Aufbau einer Wetterseite mit der Wetterkarte der Unwetterzentrale (D) inkl der Unwetterwarnungen und einer 7-Tage-Vorhersage mit den Daten v…“)
 
Keine Bearbeitungszusammenfassung
Zeile 78: Zeile 78:
Content-Datei für die Wetterwarnungen:
Content-Datei für die Wetterwarnungen:


<ftui-row [color]="Unwetterzentrale:WarnUWZLevel_Color | map('gelb:yellow, orange:orange, rot:red,
violett:violet')">


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


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


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


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


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


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


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


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


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


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


</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"> -->
class="bold" margin="-1"> -->


<ftui-label
<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">
 
[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-label>


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


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


</ftui-label>
</ftui-label>


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


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


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


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


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


Zeile 207: Zeile 144:


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


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


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


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


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


<ftui-row>
<ftui-row>


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


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


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


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


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


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


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


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


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


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


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


Zeile 341: Zeile 209:


</ftui-row>
</ftui-row>
 
</syntaxhighlight>
Ergebnis:

Version vom 1. Februar 2023, 20:46 Uhr

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: 

<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>

Content-Datei für die Wetterwarnungen: 


<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>
Abgerufen von „http://wiki.fhem.de/w/index.php?title=FTUI3_Proplanta_Wetter&oldid=38020“