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

[MDietrich]

Moin,
hier ein Chart der Benzinpreise mit FTUI3 .
Mit den Pfeilen kann man zoomen, verschieben oder die Skalierungsgrenzen ändern.
Du darfst diesen Dateianhang nicht ansehen.
Bei Fragen bitte melden.

Matthias

[BigGB]

Hallo Matthias
kannst Du mal bitte die Definition für FHEM und die Einbindung in FTUI3 zeigen?
Nach dem Wiki erhalte ich nur eine Sägezahnkurve.
Danke VG Gerald.

[MDietrich]

Hallo Gerald,
um ein gestuftes Diagramm zu bekommen, gibt es das Attribut 'stepped' for ftui-chart-data, hier mein Beispiel:

Code Auswählen Erweitern

<ftui-chart-data label="Shell" color="orange" log="mySQLdb"
    spec="Tankstellen:00_Diesel_SHELL"
    y-axis-id="y"
    point-radius="0"
    stepped
    [update]="Tankstellen:00_Diesel_SHELL:time">
</ftui-chart-data>

Die Skalierung mache ich, indem ich für die Paramater y-min und y-max aus einem Dummy, der d_FuelScale heißt hole:

Code Auswählen Erweitern

<ftui-chart [title]="Tankstellen:00_Diesel_SHELL:time | toDate() | format ('hh:mm')
    | prepend ('Kraftstoffpreise Stand: ')" unit="24h" y-label="" y-unit="€"
      [y-min]="d_FuelScale:min" [y-max]="d_FuelScale:max">
</ftui-chart>

für Zoom, Verschieben und Skalierung habe ich ein DOIF, das auf die Buttons über den Dummy reagiert.
Schicke ich gerne, wenn du Interesse hast.

Gruß,
Matthias

[BigGB]

Hallo Matthias,
das Attribut 'stepped' habe ich ergänzt. Danke für den Tip.
Nur leider gibt es da Ausreiser nach unten. Meine Definition in Fhem sieht so aus.
Hast Du eine andere Defintion?

Code Auswählen Erweitern

define TankstelleAral HTTPMOD http://www.clever-tanken.de/tankstelle_details/xxxxx 1800
attr TankstelleAral userattr reading04Name reading04Regex
attr TankstelleAral enableControlSet 1
attr TankstelleAral group Benzinpreis
attr TankstelleAral icon gasoline
attr TankstelleAral model clever_tanken_single_station
attr TankstelleAral reading01Name Diesel
attr TankstelleAral reading01Regex <div class=\"price-type-name\">Diesel</div>[\S\s\r\n]*?<span id=\"current-price-\d+\">(\d.\d{2}</span>[\S\s\r\n]*?<sup id=\"suffix-price-\d\">[\d]+)</sup>
attr TankstelleAral reading02Name SuperE10
attr TankstelleAral reading02Regex <div class=\"price-type-name\">Super E10</div>[\S\s\r\n]*?<span id=\"current-price-\d+\">(\d.\d{2}</span>[\S\s\r\n]*?<sup id=\"suffix-price-\d\">[\d]+)</sup>
attr TankstelleAral reading03Name SuperE5
attr TankstelleAral reading03Regex <div class=\"price-type-name\">Super E5</div>[\S\s\r\n]*?<span id="current-price-\d+">(\d.\d{2}</span>[\S\s\r\n]*?<sup id=\"suffix-price-\d\">[\d]+)</sup>
attr TankstelleAral reading04Name aktZeit
attr TankstelleAral reading04Regex Letzte MTS-K Preisänderung: ((31|30|[012]\d|\d)\.(0\d|1[012]|\d)\.(\d{1,6}) ([01]?\d|2[0-3]):([0-5]?\d))
attr TankstelleAral reading07Name street
attr TankstelleAral reading07Regex "streetAddress">(.*)<
attr TankstelleAral reading08Name zip
attr TankstelleAral reading08Regex "http://schema.org/postalCode">(.*)<
attr TankstelleAral reading09Name city
attr TankstelleAral reading09Regex "http://schema.org/addressCountry">(.*)<
attr TankstelleAral readingOExpr $val =~ s/<[\d\D]+>//;;;;$val
attr TankstelleAral room Spritpreise
attr TankstelleAral stateFormat E5: SuperE5 € / E10: SuperE10 € / D: Diesel €
attr TankstelleAral timeout 10
attr TankstelleAral verbose 2

Viele Grüße Gerald.

[MDietrich]

Hallo Gerald,
hast du schon in das Logfile ob da Unsinn drin steht?

Ich frage gleichzeitig mehrere Tankstellen im Umkreis ab (nur Diesel und E10):

Code Auswählen Erweitern

defmod Tankstellen JsonMod https://creativecommons.tankerkoenig.de/json/list.php?lat=53.995454&lng=11.434776&rad=15&sort=dist&type=all&apikey=xxxxxx
attr Tankstellen interval */10 * * * *
attr Tankstellen readingList ##multi(jsonPath('$.stations[*]'), \
multi(jsonPath('$.stations[*]'), \
concat(sprintf('%02d',count()),'_Diesel_',property('brand')),concat(property('diesel'),' €'));;\
multi(jsonPath('$.stations[*]'), \
concat(sprintf('%02d',count()),'_SuperE10_',property('brand')),concat(property('e10'),' €'));;
attr Tankstellen room 98 Tanken
attr Tankstellen update-on-start 1



Für eine einzelne Tankstelle benutze ich:

Code Auswählen Erweitern

defmod TS.SHELL.REDENTIN HTTPMOD https://creativecommons.tankerkoenig.de/json/prices.php?ids=["5b84422c-dacd-4a23-85fe-0bb98dd445b4"]&apikey=xxxxxx 1800
attr TS.SHELL.REDENTIN userattr event-min-interval event-on-change-reading icon stateFormat timeout
attr TS.SHELL.REDENTIN event-on-change-reading .*
attr TS.SHELL.REDENTIN group Spritpreise
attr TS.SHELL.REDENTIN icon car
attr TS.SHELL.REDENTIN reading1Name Diesel
attr TS.SHELL.REDENTIN reading1Regex diesel":([\d\.]+)
attr TS.SHELL.REDENTIN reading2Name Super_E10
attr TS.SHELL.REDENTIN reading2Regex e10":([\d\.]+)
attr TS.SHELL.REDENTIN reading3Name Super_E5
attr TS.SHELL.REDENTIN reading3Regex e5":([\d\.]+)
attr TS.SHELL.REDENTIN requestHeader Content-Type: application/json
attr TS.SHELL.REDENTIN room 98 Tanken
attr TS.SHELL.REDENTIN stateFormat {sprintf("Diesel %.3f €\n SuperE10 %.3f €\n SuperE5 %.3f €", ReadingsVal($name,"Diesel",0), ReadingsVal($name,"Super_E10",0), ReadingsVal($name,"Super_E5",0))}
attr TS.SHELL.REDENTIN timeout 5

setstate TS.SHELL.REDENTIN Diesel 1.709 €\
 SuperE10 1.739 €\
 SuperE5 1.799 €
setstate TS.SHELL.REDENTIN 2024-02-15 17:01:19 Diesel 1.709
setstate TS.SHELL.REDENTIN 2024-02-15 17:01:19 Super_E10 1.739
setstate TS.SHELL.REDENTIN 2024-02-15 17:01:19 Super_E5 1.799

Für die Ablage und Auswertung benutze eine mariaDB.

Gruß,
Matthias

[Mucki]

Tageswetter  - Leerzeichen im Vorhersagewert: "stark bewölkt"

Hallo Matthias,

Dein Tageswetter gefällt mir, danke fürs Teilen.

Es funktioniert bei mir jedoch nicht, wenn im Vorhersagewert ein Leerzeichen enthalten ist, wie z.B. in "stark bewölkt". Dann wird als Vorhersagewert "stark" angezeigt  und das Icon fehlt auch.

Code Auswählen Erweitern

setstate di_Weather24h 2024-02-24 16:50:06 RESULT0 15 - Wetter: stark bewölkt Temp: 5 ChOfRain: 15 Regen: 0 Wind: 18 W-Richtung: 203 Tag: 0
Mein Lösungsvorschlag ist, im DOIF mögliche Leerzeichen durch "_" erstezen, dann funktioniert part(4).

Dazu im DOIF die mittlere Zeile ergänzen:

Code Auswählen Erweitern

$weather_result= ReadingsVal($weather_device,$weather_reading,"");
$weather_result=~ s/ /_/g;
$temp_result= ReadingsVal($weather_device,$temp_reading,"");
und im content-File nach der Aufspaltung das "_" wieder durch Leerzeichen ersetzen. Das muss an zwei Stellen gemacht werden:

Code Auswählen Erweitern

<ftui-row>
   <ftui-weather size="5" [condition]="di_Weather24h:RESULT0 | part(4) | replace('_',' ')" icon-set="kleinklimaFHEM">
   </ftui-weather>
</ftui-row>
<ftui-row height="12.5%">
   <ftui-label size="3" [text]="di_Weather24h:RESULT0 | part(4) | replace('_',' ')"></ftui-label>
</ftui-row>
Ich wollte eine ähnliche Anzeige mit einem swiper realisieren, scheitere aber bislang an der Formatierung im swiper.

Viele Grüße in den Norden

[Mucki]

und im content-File nach der Aufspaltung das "_" wieder durch Leerzeichen ersetzen. Das muss an zwei Stellen gemacht werden:

an zwei Stellen in jeder Spalte....

[grossmaggul]

Hier mal meine Squeezeboxplayersteuerung

Du darfst diesen Dateianhang nicht ansehen.

Oben Links werden die Playlisten aufgerufen, rechts die Internetradios.

Aufruf:

Code Auswählen Erweitern

  <!-- Squeezeboxplayer -->
        <ftui-grid-tile row="1" col="2" height="6" width="4" shape="round" class="semitransparent">
            <header class="semitransparent">Squeezebox Wohnzimmer</header>
            <ftui-content file="content/squeeze_player.html"
                          player="wz.krachnase_air"
                          syncplayer="bz.yamaha_air"
                          wz.icon="scene_cinema">
            </ftui-content>
         
        </ftui-grid-tile>
Das contentfile hängt dran.

[MDietrich]

Tageswetter  - Leerzeichen im Vorhersagewert: "stark bewölkt"


Es funktioniert bei mir jedoch nicht, wenn im Vorhersagewert ein Leerzeichen enthalten ist, wie z.B. in "stark bewölkt". Dann wird als Vorhersagewert "stark" angezeigt  und das Icon fehlt auch.

Hallo, ja das war mir dann auch aufgefallen. Dir von dir vorgeschlagene "einfache" Lösung ist eleganter als was ich gemacht habe, werde habe das entsprechend ändern geändert.
Was für Probleme sind das mit dem Slider?

Gruß,
Matthias

Mofifiziertes DOIF (Content-File ist angehängt):

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,"");;\
$weather_result=~ s/ /_/g;;\
$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-27 07:05:06 RESULT0 06 - Wetter: Nebel Temp: 3 ChOfRain: 30 Regen: 0 Wind: 14.4 W-Richtung: 26 Tag: 0
setstate di_Weather24h 2024-02-27 07:05:06 RESULT1 09 - Wetter: stark_bewölkt Temp: 5 ChOfRain: 15 Regen: 0 Wind: 14.4 W-Richtung: 29 Tag: 0
setstate di_Weather24h 2024-02-27 07:05:06 RESULT2 12 - Wetter: wolkig Temp: 6 ChOfRain: 10 Regen: 0 Wind: 14.4 W-Richtung: 9 Tag: 0
setstate di_Weather24h 2024-02-27 07:05:06 RESULT3 15 - Wetter: heiter Temp: 5 ChOfRain: 5 Regen: 0 Wind: 10.8 W-Richtung: 23 Tag: 0
setstate di_Weather24h 2024-02-27 07:05:06 RESULT4 18 - Wetter: Nebel Temp: 3 ChOfRain: 30 Regen: 0 Wind: 10.8 W-Richtung: 21 Tag: 0
setstate di_Weather24h 2024-02-27 07:05:06 RESULT5 21 - Wetter: heiter Temp: 3 ChOfRain: 5 Regen: 0 Wind: 3.6 W-Richtung: 73 Tag: 0
setstate di_Weather24h 2024-02-27 07:05:06 RESULT6 00 - Wetter: heiter Temp: 2 ChOfRain: 5 Regen: 0 Wind: 7.2 W-Richtung: 218 Tag: 1
setstate di_Weather24h 2024-02-27 07:05:06 RESULT7 03 - Wetter: bedeckt Temp: 2 ChOfRain: 20 Regen: 0 Wind: 14.4 W-Richtung: 243 Tag: 1
setstate di_Weather24h 2024-02-27 07:05:06 RESULT8 06 - Wetter: wolkig Temp: 1 ChOfRain: 10 Regen: 0 Wind: 14.4 W-Richtung: 239 Tag: 1
setstate di_Weather24h 2024-02-27 07:05:06 block_init executed
setstate di_Weather24h 2024-02-27 07:05:06 mode enabled
setstate di_Weather24h 2024-02-27 07:05:06 state initialized
setstate di_Weather24h 2024-02-27 07:05:06 timer_01_c01 28.02.2024 00:00:00
setstate di_Weather24h 2024-02-27 07:05:06 timer_02_c01 27.02.2024 21:00:00
setstate di_Weather24h 2024-02-27 07:05:06 timer_03_c01 27.02.2024 10:05:06


[Mucki]

Hallo Matthias,

hier noch ein Ergänzungsvorschlag, der dafür sorgt, dass die Anzeige auch dann geändert wird, wenn von Proplanta neue Daten geholt werden. Das sind nur zwei Schritte.

1. Im Proplanta-Modul (das heißt bei mir Wetter) habe ich ein userReadings ergänzt. Dieses setzt im DOIF das Reading update = 1.

Code Auswählen Erweitern

attr Wetter userReadings update_di_weter24h {fhem("setreading di_wetter24h update 1");}
2. im DOIF die if-Bedingung so erweitern, dass neue Werte geholt werden.

Code Auswählen Erweitern

my $windDir_result="";
    if ([00:00-21:00,+03:00] or [$SELF:update]==1){
       fhem("setreading $SELF update 0");
       $recenttime=strftime("%H",localtime); 
Bei jedem Proplanta-Update werden auch die Readings im DOIF neu geschrieben und damit dann im ftui.
Ein Update kann auch ausgelöst werden durch

Code Auswählen Erweitern

setreading di_wetter24h update 1
Ich habe noch ein paar andere Änderungen vorgenommen.

Was für Probleme sind das mit dem Slider?

Die Swiper-Lösung verfolge ich gar nicht mehr, weil mir Dein Vorschlag noch besser gefällt.
Ich habe es nicht hinbekommen, Spaltenbreiten und Zeilenhöhen im Swiper so einzustellen, wie in der Darstellung ohne swiper. Vielleicht war die Abgrenzung der einzelnen Spalten durch <div> nicht richtig.

Code Auswählen Erweitern

<!-- Wetter ohne swiper -->
    <ftui-grid-tile row="5" col="8" height="3" width="7" @click="popup_wetter7d.open()" shape="round">
          <ftui-row>
         <ftui-content file="content/content_wetter_hh.html" Std="00" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="03" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="06" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="09" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="12" Tag="fc0"></ftui-content>
        </ftui-row>
    </ftui-grid>

    <!-- Wetter mit swiper -->
    <ftui-grid-tile row="9" col="8" height="3" width="7" @click="popup_wetter7d.open()" shape="round">

        <ftui-swiper id="Wetter1" [value]="Wetter:ftui_spalte" scrollbar>
       
        <div id="Spalte0"><ftui-row style="height:auto;">
         <ftui-content file="content/content_wetter_hh.html" Std="00" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="03" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="06" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="09" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="12" Tag="fc0"></ftui-content>
        </ftui-row></div>
       
        <div id="Spalte1">
        <ftui-row height="auto">
         <ftui-content file="content/content_wetter_hh.html" Std="03" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="06" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="09" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="12" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="15" Tag="fc0"></ftui-content>
        </ftui-row>
        </div>
           
        <!-- <div id="Spalte2"> -->
        <ftui-row id="Spalte2">
         <ftui-content file="content/content_wetter_hh.html" Std="06" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="09" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="12" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="15" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="18" Tag="fc0"></ftui-content>
        </ftui-row>
        <!-- </div> -->
       
        <ftui-row id="Spalte3" height="auto"><div>
         <ftui-content file="content/content_wetter_hh.html" Std="09" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="12" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="15" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="18" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="21" Tag="fc0"></ftui-content>
        </div></ftui-row>

        <span id="Spalte4"><ftui-row>
         <ftui-content file="content/content_wetter_hh.html" Std="12" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="15" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="18" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="21" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="00" Tag="fc1"></ftui-content>
        </ftui-row></span>
            
        <div id="Spalte5"><ftui-row>
         <ftui-content file="content/content_wetter_hh.html" Std="15" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="18" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="21" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="00" Tag="fc1"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="03" Tag="fc1"></ftui-content>
        </ftui-row></div>           

        <ftui-cell id="Spalte6">
        <ftui-row>
       
         <ftui-content file="content/content_wetter_hh.html" Std="18" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="21" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="00" Tag="fc1"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="03" Tag="fc1"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="06" Tag="fc1"></ftui-content>
        </ftui-row>   
        </ftui-cell>
       
        <div id="Spalte7"><ftui-row>
         <ftui-content file="content/content_wetter_hh.html" Std="21" Tag="fc0"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="00" Tag="fc1"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="03" Tag="fc1"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="06" Tag="fc1"></ftui-content>
         <ftui-content file="content/content_wetter_hh.html" Std="09" Tag="fc1"></ftui-content>
        </ftui-row></div>   
   
        </ftui-swiper>

        <ftui-label size="1" [text]="Wetter:fc0_uv | step ('0:``, 3:`UV `')" [unit]="Wetter:fc0_uv | map ('0:``, 1:``,2:``')" [color]="Wetter:fc0_uv | step ('3:yellow, 6:orange, 8:red, 11:violet')" [hidden]="Wetter:fc0_uv | step('0:1, 3:0')"></ftui-label>   
      
    </ftui-grid-tile>

Ich hänge mal Screenshots und meine Definitionsdateien dran. (Das obere ist mit Swiper, das untere ohne).