[FTUI3] Beispiele, Anregungen und Spielereien

MDietrich · 11 Februar 2024, 16:58:50

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 · 11 Februar 2024, 20:01:04

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 · 11 Februar 2024, 20:14:44

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

Code Auswählen

<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

<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 · 14 Februar 2024, 20:15:12

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

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 · 15 Februar 2024, 17:18:17

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

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

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 · 24 Februar 2024, 18:30:23

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

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

$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

<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 · 24 Februar 2024, 18:38:48

Zitat von: Mucki am 24 Februar 2024, 18:30:23und 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 · 24 Februar 2024, 18:54:07

Hier mal meine Squeezeboxplayersteuerung

Du darfst diesen Dateianhang nicht ansehen.

Oben Links werden die Playlisten aufgerufen, rechts die Internetradios.

Aufruf:

Code Auswählen

  <!-- 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 · 26 Februar 2024, 18:15:45

Zitat von: Mucki am 24 Februar 2024, 18:30:23Tageswetter - 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

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 · 27 Februar 2024, 22:10:17

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

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

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

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

ZitatWas 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

 <!-- 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).