[FTUI3] Beispiele, Anregungen und Spielereien

[MDietrich]

Hallo,
ich starte einmal dieses Thema um Lösungen eine Darstellungsmöglichkeit zu ermöglichen. Vielleicht schafft es der eine oder andere Beitrag in das WIKI aufgenommen zu werden.
M.E. dient das Thema nicht dazu Lösungen oder Ideen anderer zu bewerten, sondern zu schauen, was man machen kann und ob etwas dabei ist, was man gebrauchen kann.
Wenn es Ideen und Ansätze gibt, wie man etwas leichter, besser oder schneller machen kann, dann her damit.

Ich hoffe auf rege Beteiligung,
Matthias

[MDietrich]

Hallo,
hier mein erstes Beispiel.
Da ich gerne auf dem Wasser (Ostsee) unterwegs bin, spielt natürlich das Wetter und insbesondere der Wind eine wichtige Rolle.
Für meine Übersichtsseite habe ich mir daher ein Grid-Tile gebaut, um auch einen Blick Windrichtung und Windstärke zu sehen.

Da auf den Wetterseiten (ich nutze gerne Proplanta) die Windgeschwindigkeit im km/h angeben, habe ich eine Möglichkeit integriert auf andere Einheiten umzurechnen und gleich noch eine verbale Beschreibung ergänzt. Die Farbe des Windrichtungspfeils ändert sich in Abhängigkeit von der Windstärke.

Voraussetzungen:
- ein Proplanata Device oder eine andere Quelle die Windrichtung und -geschwindigkeit liefert muss installiert sein. Dies heißt bei mir AgroWeather, der Name müsste also ggfs. angepasst werden.
- die beiden untenstehenden subs müssen in die 99_myUtils.pm
- Dummy mit dem Namen d_Wind muss definiert sein:

Code Auswählen Erweitern

defmod d_WIND dummy
attr d_WIND room Dummy
attr d_WIND userReadings speed {WindSpeedConv(ReadingsVal("AgroWeather", "wind",0), ReadingsVal("d_WIND", "state", ""))},\
description {WindDescription(ReadingsVal("AgroWeather", "wind",0))}

setstate d_WIND kts
setstate d_WIND 2024-02-04 17:19:27 description starker Wind
setstate d_WIND 2024-02-04 17:19:27 speed 84
setstate d_WIND 2024-02-04 17:19:27 state kts



in der 99_myUtils.pm muss am Anfang stehen:

Code Auswählen Erweitern

use Math::Round qw/round/;
## falls Math:Round nicht gefunden wird, fehlt die Perl Bibliothek und kann mit
## 'sudo apt-get install libmath-round-perl' installiert werden.

dann die beiden subs:

Code Auswählen Erweitern

##################################################
### Function to convert windspeed from km/h
##################################################
# input windspeed in km/h
# input unit for conversion (km/h, kts, bft)
sub WindSpeedConv($$) {
my ($windspeed, $unit) = @_;
my $conversion;
if ($unit eq "kmPROh") {$conversion  = Math::Round::nearest('0.1',$windspeed * 1);}
elsif ($unit eq "kts") {$conversion = Math::Round::nearest('0.1',$windspeed * 1.94384);}
elsif ($unit eq "mPROs") {$conversion = Math::Round::nearest('0.1',$windspeed / 3.6);}
elsif ($unit eq "bft") {
if ($windspeed < 1) {$conversion ="0";}
elsif ($windspeed < 5) {$conversion ="1";}
elsif ($windspeed < 11) {$conversion ="2";}
elsif ($windspeed < 19) {$conversion ="3";}
elsif ($windspeed < 28) {$conversion ="4";}
elsif ($windspeed < 38) {$conversion ="5";}
elsif ($windspeed < 49) {$conversion ="6";}
elsif ($windspeed < 61) {$conversion ="7";}
elsif ($windspeed < 74) {$conversion ="8";}
elsif ($windspeed < 88) {$conversion ="9";}
elsif ($windspeed < 102) {$conversion ="10";}
elsif ($windspeed < 117) {$conversion ="11";}
else {$conversion="12"}
}
else {$conversion  = "ERROR";}
return $conversion;
}

Code Auswählen Erweitern

##################################################
### Function to convert windspeed to description
### using the Beaufort scale
##################################################
# input windspeed in km/h

sub WindDescription($) {
my ($windspeed) = @_;
my $description;
if ($windspeed <   1) {$description = "Windstille";}
elsif ($windspeed <   6) {$description = "leiser Zug"}
elsif ($windspeed <  12) {$description = "leichte Brise";}
elsif ($windspeed <  20) {$description = "schwacher Wind";}
elsif ($windspeed <  29) {$description = "mäßiger Wind";}
elsif ($windspeed <  39) {$description = "frischer Wind";}
elsif ($windspeed <  50) {$description = "starker Wind";}
elsif ($windspeed <  62) {$description = "steifer Wind";}
elsif ($windspeed <  75) {$description = "stürmischer Wind";}
elsif ($windspeed <  89) {$description = "Sturm";}
elsif ($windspeed < 103) {$description = "schwerer Sturm"}
elsif ($windspeed < 118) {$description = "Orkanartiger Sturm";}
else {$description  = "Orkan";}
return $description;
}

und zum Schluss das 'Grid-Tile':

Code Auswählen Erweitern

<ftui-grid-tile row="4.5" col="3" height="2" width="2" shape="round" align-items="center"> <!-- Winddaten -->
<ftui-row height="50%">
<ftui-column>
<ftui-image
src="icons/ftui-circle-thin.svg" width = "100%" height="150%" top="-12.5%" left="0%" color="success">
<ftui-icon-twd [value]="AgroWeather:windDir"
[color]="AgroWeather:wind | step('6:success, 11:warning, 14:danger')"
class="size-2" margin="0.2" top="5%" left="-5%">
</ftui-icon-twd>
</ftui-image>
</ftui-column>
<ftui-column>
<ftui-button states="mPROs, kts, kmPROh, bft"
[value]="d_WIND | replace('state ','')"
(value)="d_WIND">
<ftui-icon name="chevron-right" size="0.8"></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column width="70%">
<ftui-label
[text]="d_WIND:speed | append(' ')" [unit]="d_WIND:STATE | replace('mPROs','m/s') | replace('kmPROh','km/h')"
size="3">
</ftui-label>
</ftui-column>
<ftui-column>
<ftui-label
[text]="AgroWeather:windDir" unit=" °"
size="3">
</ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-label [text]="d_WIND:description" size="2">
</ftui-label>
</ftui-row>
</ftui-grid-tile>

Viel Spaß,
Matthias

[juemuc]

Hallo Matthias,

die Idee ist gut. Alternativ könnte man auch hier FTUI3 Best Practices weitere Beispiele dokumentieren.

Viele Grüße
Jürgen

[MDietrich]

Hallo Jürgen,
ich denke ein Beispiel hier zu zeigen ist evtl. einfacher. Wenn so etwas ein Beispiel ist, dass es wert ist ins WIKI zu kommen, denn helfe ich dabei gerne.
Mal sehen, wieviel Resonanz das Ganze hat.

Gruß,
Matthias

[juemuc]

Ich bin auch gespannt. Ich zeige einfach Mal meine Übersichtsseite. Wer mehr Infos haben möchte, bitte melden.

Viele Grüße
Jürgen

[MDietrich]

Moin aus dem Norden,
hier noch ein Beispiel zum Thema Wetter.
Da ich ein Fan vom "Multi-Funktions-Tiles" bin, habe ich noch eines gebaut.

• die Farbe ist abhängig davon, ob Wetterwarnungen vorliegen
• ab einer momentanen Regenwahrscheinlichkeit > 40% geht der Schirm auf
• die Farbe des Regenschirms wird abhängig von der Temperatur geändert
• wenn Wetterwarnungen vorliegen, wird ein Badge eingeblendet, welches die Anzahl der Warnungen zeigt
• bei einem Klick auf das Tile wird ein Pop-Up mit den Unwetterwarnungen gezeigt

Gruß,
Matthias

[andreas_r]

Ich bin auch gespannt. Ich zeige einfach Mal meine Übersichtsseite. Wer mehr Infos haben möchte, bitte melden.

Viele Grüße
Jürgen

Hallo Jürgen,
mich würde in der Tat interessieren, was die beiden Hilfe-Buttons machen.

VG, Andreas

[juemuc]

Hallo Andreas,

hier setze ich "nur" einen Dummy auf "on". Dieser wird dann getriggert und es wird eine Telefonnummer angerufen. Das Einschalten kann auch über Alexa erfolgen.

Viele Grüße
Jürgen

[MDietrich]

Und noch ein Wetterbeispiel, basierend auf "ftui-weather".
Darstellung rollierend für den Tag.

Gruß,
Matthias

[Guybrush]

Und noch ein Wetterbeispiel, basierend auf "ftui-weather".
Darstellung rollierend für den Tag.

Gruß,
Matthias

code? 

[MDietrich]

Hallo hier der "Code" für das Tageswetter-Beispiel.
Voraussetzungen:

• ein ProPlanta-Device muss exisitieren, im Beispiel heißt dieses AgroWeather
• sollte diese Device einen anderen Namen haben, muss dieser in dem DOIF mit der Variablen "$weather_device" und im HTML-Code angepasst werden
• wenn das Icon-Set "kleinklimaFHEM" nicht existiert, muss der Code angepasst werden.
  
• weitere Anforderungen sind im Kopf des Content-Files beschrieben

[li]der Name () des Content-Files ("2024/content24_Weather1Day.html") muss im HTML-Code des PopUps angepasst werden
[/li][/list]

Der RAW-Code des DOIFs:

Code Auswählen Erweitern

defmod di_Weather24h DOIF init\
{\
use strict;;\
use warnings;;\
use POSIX qw(strftime);;\
my $fc_day=0;;\
my $recenttime="";;\
my @option=("00","03","06","09","12","15","18","21","0");;\
my $result;;\
my $zaehler="";;\
my $i;;\
my $weather_device="AgroWeather";;\
my $weather_reading="";;\
my $weather_result="";;\
my $temp_reading="";;\
my $temp_result="";;\
my $chOfRain_reading="";;\
my $chOfRain_result="";;\
my $rain_reading="";;\
my $rain_result="";;\
my $wind_reading="";;\
my $wind_result="";;\
my $windDir_reading="";;\
my $windDir_result="";;\
if ([00:00-21:00,+03:00]){\
$recenttime=strftime("%H",localtime);;\
$zaehler=(($recenttime - $recenttime % 3) / 3);;\
for ($i=0;; $i<9;; $i++){\
$weather_reading=("fc".$fc_day."_weather".$option[$zaehler]);;\
$temp_reading=("fc".$fc_day."_temp".$option[$zaehler]);;\
$chOfRain_reading=("fc".$fc_day."_chOfRain".$option[$zaehler]);;\
$rain_reading=("fc".$fc_day."_rain".$option[$zaehler]);;\
$wind_reading=("fc".$fc_day."_wind".$option[$zaehler]);;\
$windDir_reading=("fc".$fc_day."_windDir".$option[$zaehler]);;\
$weather_result= ReadingsVal($weather_device,$weather_reading,"");;\
$temp_result= ReadingsVal($weather_device,$temp_reading,"");;\
$chOfRain_result= ReadingsVal($weather_device,$chOfRain_reading,"");;\
$rain_result= ReadingsVal($weather_device,$rain_reading,"");;\
$wind_result= ReadingsVal($weather_device,$wind_reading,"");;\
$windDir_result= ReadingsVal($weather_device,$windDir_reading,"");;\
$result="Wetter: ".$weather_result;;\
$result=$result." Temp: ".$temp_result;;\
$result=$result." ChOfRain: ".$chOfRain_result;;\
$result=$result." Regen: ".$rain_result;;\
$result=$result." Wind: ".$wind_result;;\
$result=$result." W-Richtung: ".$windDir_result;;\
$result=$result." Tag: ".$fc_day;;\
set_Reading("RESULT".$i,$option[$zaehler]." - ".$result,1);;\
$zaehler += 1;;\
if ($zaehler > 7){$zaehler=0}\
if ($zaehler==0){\
$fc_day=1;;\
}\
}\
}\
}\
##
attr di_Weather24h addStateEvent 1
attr di_Weather24h room 02 Programm -> 01 DOIF,04 Wetter

setstate di_Weather24h initialized
setstate di_Weather24h 2024-02-06 06:00:00 RESULT0 06 - Wetter: Regen Temp: 8 ChOfRain: 80 Regen: 0.4 Wind: 43.2 W-Richtung: 246 Tag: 0
setstate di_Weather24h 2024-02-06 06:00:00 RESULT1 09 - Wetter: bedeckt Temp: 8 ChOfRain: 20 Regen: 0 Wind: 43.2 W-Richtung: 244 Tag: 0
setstate di_Weather24h 2024-02-06 06:00:00 RESULT2 12 - Wetter: Regen Temp: 9 ChOfRain: 80 Regen: 0.4 Wind: 46.8 W-Richtung: 247 Tag: 0
setstate di_Weather24h 2024-02-06 06:00:00 RESULT3 15 - Wetter: Regen Temp: 9 ChOfRain: 80 Regen: 1.4 Wind: 46.8 W-Richtung: 251 Tag: 0
setstate di_Weather24h 2024-02-06 06:00:00 RESULT4 18 - Wetter: Regen Temp: 8 ChOfRain: 80 Regen: 3.8 Wind: 46.8 W-Richtung: 249 Tag: 0
setstate di_Weather24h 2024-02-06 06:00:00 RESULT5 21 - Wetter: Regen Temp: 5 ChOfRain: 80 Regen: 2.9 Wind: 43.2 W-Richtung: 267 Tag: 0
setstate di_Weather24h 2024-02-06 06:00:00 RESULT6 00 - Wetter: bedeckt Temp: 5 ChOfRain: 20 Regen: 0 Wind: 46.8 W-Richtung: 277 Tag: 1
setstate di_Weather24h 2024-02-06 06:00:00 RESULT7 03 - Wetter: bedeckt Temp: 3 ChOfRain: 20 Regen: 0 Wind: 43.2 W-Richtung: 289 Tag: 1
setstate di_Weather24h 2024-02-06 06:00:00 RESULT8 06 - Wetter: bedeckt Temp: 3 ChOfRain: 20 Regen: 0 Wind: 36 W-Richtung: 301 Tag: 1
setstate di_Weather24h 2024-02-06 06:00:00 block_init executed
setstate di_Weather24h 2024-02-04 18:12:49 mode enabled
setstate di_Weather24h 2024-02-04 18:12:49 state initialized
setstate di_Weather24h 2024-02-05 21:00:00 timer_01_c01 06.02.2024 00:00:00
setstate di_Weather24h 2024-02-05 21:00:00 timer_02_c01 06.02.2024 21:00:00
setstate di_Weather24h 2024-02-06 06:00:00 timer_03_c01 06.02.2024 09:00:00

Die Anzeige als PopUp beim Klicken auf ein Grid-Tile:

Code Auswählen Erweitern

<!-- aktuelles Wettericon -->
<ftui-grid-tile row="4" col="5" height="2" width="2" shape="round"
@click="WeatherOfTheDayPop.open()" style="border:5px solid grey">
<ftui-row height="70%">
<!-- 2022-02-14 Anpassung der ICON-Darstellung, siehe Forenbeitrag: -->
<!-- https://forum.fhem.de/index.php/topic,115259.msg1208182.html#msg1208182 -->
<ftui-weather
size="6"
top="-5%"
provider="proplantaICON"
icon-set="kleinklimaFHEM"
path="../images/default/weather/"
[condition]="AgroWeather:weatherIcon |
replace('https://www.proplanta.de/wetterdaten/images/symbole/','') |
replace('.gif','')">
</ftui-weather>
</ftui-row>
<ftui-row>
<ftui-label [text]="di_Weather24h:RESULT0 | part(4)" size="2" scroll text-align="center"></ftui-label>
</ftui-row>
</ftui-grid-tile>

Code des PopUps:

Code Auswählen Erweitern

<ftui-popup id="WeatherOfTheDayPop" timeout="10" height="auto" width="auto">
<ftui-label color="danger" slot="X" @click="WeatherOfTheDayPop.close()">close</ftui-label>
<ftui-grid-tile row="4" col="3" height="9" width="9.5" shape="round" padding="1">
<ftui-content file="2024/content24_Weather1Day.html"></ftui-content>
</ftui-grid-tile>
</ftui-popup>
Content-File ist angehängt.

Viel Spaß,
Matthias 

[grossmaggul]

Hier mal meine selbstgebastelte "Windrose"

Du darfst diesen Dateianhang nicht ansehen.

Code dazu:

Code Auswählen Erweitern

<ftui-grid-tile row="3" col="2" height="2" width="2" shape="round" class="semitransparent">
            <ftui-row margin="1">
                <ftui-column align-items="top">
                    <ftui-row>
                        <ftui-label color="blue" text="N"></ftui-label>
                    </ftui-row>
                    <ftui-row width="35%">
                        <ftui-label text="W"></ftui-label>
                        <ftui-knob [value]="proplanta:windDir" min="0" max="360" width="110" height="80"  start-angle="-90" end-angle="270" stroke-width="4" offset-y="0" has-needle has-scale readonly>
                        </ftui-knob>
                        <ftui-label text="O"></ftui-label>
                    </ftui-row>
                    <ftui-row>
                        <ftui-label text="S"></ftui-label>
                    </ftui-row>
                </ftui-column>
            </ftui-row>
        </ftui-grid-tile>

[MDietrich]

Hier mal meine selbstgebastelte "Windrose"

Geniale Idee, ich wäre nicht darauf gekommen ein 'ftui-knob' zu verwenden.
Bau ich gleich ein 

Matthias

[MDietrich]

Hallo, hier noch einmal ein schon etwas älteres Beispiel.

Du darfst diesen Dateianhang nicht ansehen.Du darfst diesen Dateianhang nicht ansehen.

Mehr Info unter:
  https://forum.fhem.de/index.php?topic=123084.msg1196501#msg1196501


Gruß,
Matthias

[BigGB]

Und hier seht ihr meine Übersichtsseite. Wer mehr Infos benötigt, bitte melden.
VG Gerald.