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

[MDietrich]

Moin,
hier mal wieder ein neues Beispiel: Segmented Button für FTUI 3

Ich habe mir das gebaut, das ich weder mit SegmentedButton noch mit Checkbox meine Idee umsetzen konnte. Das liegt sicher auch an mangelndem Verständnis, was man damit alles machen kann.
Im Moment werden nur die states der Dummies gesetzt, es erfolt noch keine Aktion. Ich möchte dies für die Auswahl von Szenen für die HUE-Bridge verwenden.
Evtl. kann die Lösung ja jemand gebrauchen und motiviert/inspiriert zu anderen Lösungen => dann bitte auch hier teilen!!!

Code Auswählen Erweitern

<!DOCTYPE html>
<html>

<head>
  <!--
    /* FHEM tablet ui - FTUI */
    /**
    * UI builder framework for FHEM
    *
    * Version: 3.0.0
    *
    * Copyright (c) 2015-2021 Mario Stephan <mstephan@shared-files.de>
    * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
    * https://github.com/knowthelist/ftui
    */
    -->
<!--
/* Radio-Button for FTUI 3 by Matthias
/* 2025-01-08
/* Prerequisites:
/* - 4 dummies need to be defined in FHEM, named d_radioButton01 to d_radioButton04
/* - the icons 'radio_button_checked' and 'radio_button_unchecked' need to be available in the standard icon folder -->
  <script src="ftui.js"></script>

  <link href="ftui.css" rel="stylesheet">
  <link href="themes/ftui-theme.css" rel="stylesheet">
  <link href="favicon.ico" rel="icon" type="image/x-icon" />

  <!-- avoid 300ms delay on click-->
  <meta name="viewport" content="width=device-width">

  <meta name="mobile-web-app-capable" content="yes">
  <meta name="toast_position" content="bottomLeft">


  <!-- verbose level 0-4 -->
  <meta name="debug" content="0">
  <title>FTUI Radio-Button</title>
</head>

<body>
<ftui-grid base-width="90" base-height="72">
<ftui-grid-tile row="1" col="1" height="5" width="3">
<ftui-grid-header>FTUI-intern</ftui-grid-header>
<ftui-row>
<ftui-button id="rButton1" states="on,off" fill="none" size="large"
[value]="d_radioButton01"
[color]="d_radioButton01 | map('on:success, off:light')"
(value)="set d_radioButton01 on; set d_radioButton02 off; set d_radioButton03 off; set d_radioButton04: off">
<ftui-icon type= "svg" size= "3" [name]="d_radioButton01 | map('on:radio_button_checked, off:radio_button_unchecked')"></ftui-icon>Text für Button 1
</ftui-button>
</ftui-row>
<ftui-row>
<ftui-button id="rButton2" states="on,off" fill="none" size="large"
[value]="d_radioButton02"
[color]="d_radioButton02 | map('on:success, off:light')"
(value)="set d_radioButton01 off; set d_radioButton02 on; set d_radioButton03 off; set d_radioButton04 off">
<ftui-icon type= "svg" size= "3"               
[name]="d_radioButton02 | map('on:radio_button_checked, off:radio_button_unchecked')"></ftui-icon>Text für Button 2
</ftui-button>
</ftui-row>
<ftui-row>
<ftui-button id="rButton3" states="on,off" fill="none" size="large"
[value]="d_radioButton03"
[color]="d_radioButton03 | map('on:success, off:light')"
(value)="set d_radioButton01 off; set d_radioButton02 off; set d_radioButton03 on; set d_radioButton04 off">
<ftui-icon type= "svg" size= "3" [name]="d_radioButton03 | map('on:radio_button_checked, off:radio_button_unchecked')"></ftui-icon>Text für Button 3
</ftui-button>
</ftui-row>
<ftui-row>
<ftui-button id="rButton4" states="on,off" fill="none" size="large"
[value]="d_radioButton04"
[color]="d_radioButton04 | map('on:success, off:light')"
(value)="set d_radioButton01 off; set d_radioButton02 off; set d_radioButton03 off; set d_radioButton04 on">
<ftui-icon type= "svg" size= "3" [name]="d_radioButton04 | map('on:radio_button_checked, off:radio_button_unchecked')"></ftui-icon>Text für Button 3
</ftui-button>
</ftui-row>
</ftui-grid-tile>
</ftui-grid>
</body>
<html>

Viel Spaß damit,
Matthias

[Prof. Dr. Peter Henning]

Ich habe eine Anregung für die Weiterentwicklung.

Es wäre sehr nützlich, wenn ein FTUI3-Element eine beliebige JavaScript-Funktion aufrufen könnte. Es würde reichen, dies als zusätzliche Pipeline-Funktion zu implementieren, die als Argument den Funktionsnamen bekommt und dann den Pipeline-Wert an diese weiterreicht.

Für FTUI2 gibt es dazu das Widget "executor" - bei FTUI3 fehlt bisher eine solche Möglichkeit.

LG

pah

[yersinia]

Es wäre sehr nützlich, wenn ein FTUI3-Element eine beliebige JavaScript-Funktion aufrufen könnte. Es würde reichen, dies als zusätzliche Pipeline-Funktion zu implementieren, die als Argument den Funktionsnamen bekommt und dann den Pipeline-Wert an diese weiterreicht.

Ohne den Anwendungsfall zu kennen, könnten eventuell schon die bereits verfügbaren Events (wie zB onclick) oder gar die FTUI3-spezifische Übergabe via pipes helfen? (Die Pipe-Funktionen sind ja auch alle JavaScript)

Code Auswählen Erweitern

<ftui-icon path="../irgendwo"
  [name]="DEVICE:READING | getIcon()">
</ftui-icon>beliebiges eigenes JS zur Übergabe an die Funktion:

Code Auswählen Erweitern

const getIcon = () => input => myfunction(input);

[Prof. Dr. Peter Henning]

Ah, sieh an!

Das funktioniert in der Tat - war aber nirgendwo dokumentiert. Das hat sich soeben geändert - und darin ist auch das konkrete Anwendungsbeispiel aufgeführt.

https://wiki.fhem.de/wiki/FTUI3_Inhalte_in_JavaScript_verwenden

LG

pah

[yersinia]

Das funktioniert in der Tat - war aber nirgendwo dokumentiert.

Für den Laien könnte dies zu schwierig werden; der Interessierte hätte die Idee aus der pipe-Funktion-Definition in der ftui.binding.js abgeleitet.

Das hat sich soeben geändert - und darin ist auch das konkrete Anwendungsbeispiel aufgeführt.

https://wiki.fhem.de/wiki/FTUI3_Inhalte_in_JavaScript_verwenden

Topp!

In diesem konkreten Anwendungsfall könnte man auch die SVG direkt manipulieren ohne über eine JS-Funktion gehen zu müssen. Dafür wird die SVG als plain-HTML eingebunden und mit dem Attribut ftui-binding an FTUI3 gebunden; ungefähr so (ungetestet):

Code Auswählen Erweitern

     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 405 150" width="400px"
          height="150px">
           <path ftui-binding id="pf_sp"
               [transform]="PowerFlow:power_battery | fix(2) | step('-1000: ``, 0:`translate(135,0) scale(-1,1)`, 0.01:``')"
               [style]="PowerFlow:power_battery | fix(2) | step('-1000: `fill:url(#g_h_r);stroke:#0000f8;stroke-width:1`, 0:`fill:url(#b_t);stroke:#0000f8;stroke-width:1`, 0.01:`fill:url(#r_h_l);stroke:#0000f8;stroke-width:1`')"
               d="M 0,15 h 120 v -10 l 15 15 l -15 15 v -10 h -120 Z"/>
       </svg>Mit steigender Komplexität ist eine eigene Funktion oder eine FHEM-seitige Vorbelegung mMn vorzuziehen - die Client-seitige, Event-basierte Berechnungen können FTUI3 seiten deutlich langsamer werden lassen.

Ich weiss gar nicht, ob nach step noch eine pipe-Funktion gehen würde, das wäre interessant zu sehen - aber warum sollte es nicht funktionieren?

Code Auswählen Erweitern

     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 405 150" width="400px"
          height="150px">
           <path ftui-binding id="pf_sp"
               [transform]="PowerFlow:power_battery | fix(2) | step('-1000: ``, 0:`translate(135,0) scale(-1,1)`, 0.01:``')"
               [style]="PowerFlow:power_battery | fix(2) | step('-1000: `url(#g_h_r)`, 0:`url(#b_t)`, 0.01:`url(#r_h_l)`') | prepend('fill:') | append(';stroke:#0000f8;stroke-width:1')"
               d="M 0,15 h 120 v -10 l 15 15 l -15 15 v -10 h -120 Z"/>
       </svg>Anstelle von style könnte man auch class nehmen und dort variieren...

[Prof. Dr. Peter Henning]

Das mit der direkten Beeinflussung habe ich wieder verworfen, weil dann nicht verschiedene Elemente mit einem Funktionsaufruf gesteuert werden können. Außerdem ist der Steuercode dann über diverse Elemente verteilt, und somit extrem unübersichtlich (bis unwartbar).

Übrigens, der

Interessierte

bevorzugt eindeutige Dokumentationen, statt im fast nicht kommentierten Code anderer herumzuwühlen.

LG

pah

[Jojo11]

Ich hatte letztens den Bedarf, die Vorhersage von SolarForecast in FTUI3 anzuzeigen, ohne über log-Files zu gehen. Dazu habe ich mir eine sub zusammengestrickt, die über logproxy die Daten ausgibt. Vielleicht nicht sehr anspruchsvoll, aber es erfüllt seinen Zweck. Evtl. kann es ja jemand gebrauchen:

Code Auswählen Erweitern

sub myPVplot2($) {
    my ($dataset) = @_;
    my $value=0;
    my @timestamps;               # Array für die Zeitstempel
    my @values;                   # Array für die Werte aus den Dummies
    my ($sec, $min, $hour, $monthday, $month, $year, $weekday, $yearday, $isdst) = localtime(time);
    $year += 1900;
    $month += 1;
    my $hh=0;

    for my $stunde (6 .. 20) {
     my $timestamp = sprintf("%04d-%02d-%02d_%02d:30:00", $year, $month, $monthday, $stunde-1);
     push @timestamps, $timestamp;
     $hh=sprintf("%02d", $stunde);
     if ($dataset == 0){
      $value=ReadingsVal('PVforecast','Today_Hour'.$hh.'_PVforecast',0);
     } elsif ($dataset == 1){
      $value=ReadingsVal('PVforecast','Today_Hour'.$hh.'_PVreal',0);
     } elsif ($dataset == 2){
      $value=ReadingsVal('PVforecast','Tomorrow_Hour'.$hh.'_PVforecast',0);
     } else {
      $value=0;
     }
     ($value) = split(' ', $value, 2);
     push @values, $value;
    }

    my $logproxyData = join("\n", map { "$timestamps[$_] $values[$_]" } 0 .. 15);
    return $logproxyData;
}

":30:" und "$stunde-1" verschieben die Balken etwas, um die Lesbarkeit zu verbessern.
Je nach Übergabewert (0, 1 oder 2) gibt die Funktion die heutige Vorhersage, die heutigen realen Erträge oder die morgige Vorhersage zurück.

Der Chart ist dann in etwa so:

Code Auswählen Erweitern

<ftui-chart id="chart03" y-min="0" x-min="6" x-max="21" unit="day" height="400px" style="background-color:none;">
    <ftui-chart-data fill type="bar" background-color="rgba(255, 186, 8 ,0.5)" color="rgba(250, 163, 7,1)" stack="stack1" log="lgprxy" spec="Func:myPVplot2(0)" [update]="PVStats:button_pvforecasttmrrw" [hidden]="PVStats:button_pvforecasttmrrw | map('off:true,on:false')"></ftui-chart-data>
    <ftui-chart-data fill type="bar" background-color="rgba(0,119,182,0.2)" color="rgba(0,119,182,1)" stack="stack2" log="lgprxy" spec="Func:myPVplot2(1)" [update]="PVStats:button_pvforecasttmrrw" [hidden]="PVStats:button_pvforecasttmrrw | map('off:true,on:false')"></ftui-chart-data>
    <ftui-chart-data fill type="bar" background-color="rgba(255, 186, 8 ,0.5)" color="rgba(250, 163, 7,1)" stack="stack1" log="lgprxy" spec="Func:myPVplot2(2)" [update]="PVStats:button_pvforecasttmrrw" [hidden]="PVStats:button_pvforecasttmrrw | map('off:false,on:true')"></ftui-chart-data>
</ftui-chart>

Ein lgprxy-Device muss existieren. Über einen Segment-Button blende ich die nicht benötigten Daten aus.

schöne Grüße
Jojo

[satprofi]

Hallo.
Wie schaffe ich so eine Oberfläche? In den examples finde ich nichts.
Lg

[setstate]

Mit einem ftui-grid und vielen ftui-grid-tiles ...
Dann Eigenschaften setzen: color="orange" (blue, red), size="9", usw.

Die Tiles mit ftui-row und ftui-label füllen.

Das Zusammenpuzzeln macht doch gerade Spaß. Du willst doch hier nichts fertiges vorgesetzt bekommen

Hier mal zwei Kacheln mit statischen Werten als kleine Starthilfe.

Code Auswählen Erweitern

  <!DOCTYPE html>
  <html>

  <head>
    <base href="../" />
    <script src="ftui.js"></script>
    <link href="ftui.css" rel="stylesheet">
    <link href="themes/ftui-theme.css" rel="stylesheet">
    <link href="favicon.ico" rel="icon" type="image/x-icon" />

    <title>FTUI Grid Test</title>
  </head>

  <body>

    <ftui-grid base-width="70" base-height="70" margin="1" shape="round">
      <ftui-grid-tile row="1" col="1" height="4" width="4" color="green">
        <ftui-row>
          <ftui-label text="Battery SOC" size="4"></ftui-label>
          <ftui-icon name="battery-2" size="4"></ftui-icon>
        </ftui-row>
        <ftui-row>
          <ftui-label text="67" size="9" bold>
            <span slot="unit" class="size--2">%</span>
          </ftui-label>
        </ftui-row>
        <ftui-row>
          <ftui-cell width="80%">
            <ftui-row align-items="stretch">
              <ftui-label text="Charging:" size="1" color="black"></ftui-label>
              <ftui-label text="5,123" size="1" color="black" bold unit="KW"></ftui-label>
            </ftui-row>
            <ftui-row align-items="stretch">
              <ftui-label text="Battery capacity:" size="1" color="black"></ftui-label>
              <ftui-label text="30" size="1" color="black" bold unit="kWh"></ftui-label>
            </ftui-row>
            <ftui-row align-items="stretch">
              <ftui-label text="Fully charged in:" size="1" color="black"></ftui-label>
              <ftui-label text="01:10" size="1" color="black" bold unit="min"></ftui-label>
            </ftui-row>
          </ftui-cell>
        </ftui-row>
      </ftui-grid-tile>

      <ftui-grid-tile row="1" col="5" height="2" width="4" color="orange">
        <ftui-row>
          <ftui-label text="House Load" size="4"></ftui-label>
          <ftui-icon name="fort-awesome" size="4"></ftui-icon>
        </ftui-row>
        <ftui-row>
          <ftui-label text="2,123" size="8" bold>
            <span slot="unit" class="size--2">kW</span>
          </ftui-label>
        </ftui-row>
      </ftui-grid-tile> 
    </ftui-grid>

  </body>

  </html>

 

[Prof. Dr. Peter Henning]

Für Freunde bunter Menüs: Vor etlichen Jahren habe ich mir mal als StarTrek-Fan so etwas gebaut. Viel JavaScript und SVG. Du darfst diesen Dateianhang nicht ansehen.
Vielleicht hat ja jemand Lust, das als Umgebung für FTUI3 zu verwenden.

LG

pah

[satprofi]

Mit einem ftui-grid und vielen ftui-grid-tiles ...
Dann Eigenschaften setzen: color="orange" (blue, red), size="9", usw.

Die Tiles mit ftui-row und ftui-label füllen.

Das Zusammenpuzzeln macht doch gerade Spaß. Du willst doch hier nichts fertiges vorgesetzt bekommen
 

Danke. Aber wo bekomme ich die Icons her? Einfach Name schreiben?

[setstate]

Die FTUI Icon kann man sich in der Demo Page ansehen: ./icons/demo.html

z.B.:http://fhem:8083/fhem/ftui/icons/demo.html

[satprofi]

@setstate
Danke für deinen Anstoss. Anbei mein Ergebnis. Was ich aber nicht schaffe, das ich ein Grid als Button zusaätzlich verwenden kann. Button einfügen klappt, aber wenn ich auf go-e charger Feld tippe sollte ein popup aufgehen wo ich den Ladestrom z.b. einstellen könnte.
Hast du tipp für mich?

[setstate]

Na das sieht doch schon mal richtig gut aus !

Popup bei Tile-Click:

Code Auswählen Erweitern

<ftui-grid-tile @click="popcharger.open()" ...


 <ftui-popup id="popcharger" ....


[satprofi]

Hmmm, da muss bei mir der Wurm drin sein. Genauso hatte ich es schon, aber er macht mir ein Pop-up nicht auf. Habe von den Akku Units Pop-up verlinkt. OK, Fehlersuche starten.

[Edit]
Gefunden, Pop-up muss immer anschließend folgen.
Lg

[setstate]

...
[Edit]
Gefunden, Pop-up muss immer anschließend folgen.
Lg

Eigentlich nicht, müsste gehen, egal wo das <ftui-popup> in Document liegt. Hauptsache die ID wird gefunden.

[satprofi]

Passt, ja. Mein Fehler.

Anbei mein fast fertiges Projekt. Alle Kacheln mit Untermenüs, zu detailierten Informationen.

[Kai-Alfonso]

Passt, ja. Mein Fehler.

Anbei mein fast fertiges Projekt. Alle Kacheln mit Untermenüs, zu detailierten Informationen.

Sehr nice - könntest Du das ggf zur Verfügung stellen?

[satprofi]

Hallo.
Bitte sehr. Im Anhang die Index.html. Gewünschte Kacheln anpassen.
Sicher noch verbesserungswürdig, aber es fällt immer was zusätzliches dazu ein. Vielleicht klappt auch in einem Pop-up ein weiteres Pop-up zu öffnen

[Kai-Alfonso]

Hallo.
Bitte sehr. Im Anhang die Index.html. Gewünschte Kacheln anpassen.
Sicher noch verbesserungswürdig, aber es fällt immer was zusätzliches dazu ein. Vielleicht klappt auch in einem Pop-up ein weiteres Pop-up zu öffnen

Super. Vielen Dank für die Arbeit und Bereitstellen

[satprofi]

Hallo.
Bitte sehr. Im Anhang die Index.html. Gewünschte Kacheln anpassen.
Sicher noch verbesserungswürdig, aber es fällt immer was zusätzliches dazu ein. Vielleicht klappt auch in einem Pop-up ein weiteres Pop-up zu öffnen

Super. Vielen Dank für die Arbeit und Bereitstellen

Dank geht auch an @setstate , für den Input !

[Kai-Alfonso]

Ich hab aktuell noch eine Frage dazu. Ich habe diese "Kacheln" von Satprofi und finde sie echt nett. Allerdings will ich neben den statischen Kacheln auch "wechselnde" Kacheln mit dem Rotor Widget realisieren. Dort ist aber das Layout verschoben und die Farbe des Hintergrunds ist nicht auf die ganze Kachel erstreckt. (Screenshot rechte Kachel).

Wie bekomme ich das denn hin, das die Inhalte gleich formatiert sind?

Code Auswählen Erweitern

      <ftui-grid-tile height="2" width="2" color="white">
        <ftui-row>
          <ftui-label text="Battery SOC" size="3"></ftui-label>
          <ftui-icon name="battery-0" size="3"
            [name]="Ecoflow_Cloud_Statistic_All:data.quota.JTS1_EMS_CHANGE_REPORT.bpSoc | step(' 0:battery-0, 25:battery-1, 50:battery-2, 75: battery-3, 90:battery')"
            [color]="Ecoflow_Cloud_Statistic_All:data.quota.JTS1_EMS_CHANGE_REPORT.bpSoc | step('50:green, 25:orange, 0:danger')"></ftui-icon>
        </ftui-row>
        <ftui-row>
          <ftui-label [text]="Ecoflow_Cloud_Statistic_All:data.quota.JTS1_EMS_CHANGE_REPORT.bpSoc" size="8" bold>
            <span slot="unit" class="size--1">%</span>
          </ftui-label>
        </ftui-row>
        <ftui-row>
          <ftui-cell width="80%">
            <ftui-row align-items="stretch">
              <ftui-label text="Ladestrom:" size="1" color="black"></ftui-label>
              <ftui-label
                [text]="Ecoflow_Cloud_Statistic_All:data.quota.JTS1_EMS_HEARTBEAT.emsBpPower | divide(1000) | round(2)"
                size="1" color="black" bold unit="kW"></ftui-label>
            </ftui-row>
            <ftui-row align-items="stretch">
              <ftui-label text="Status:" size="1" color="black"></ftui-label>
              <ftui-label
                [text]="Ecoflow_Cloud_Statistic_All:data.quota.JTS1_EMS_HEARTBEAT.emsBpPower | step(' -100000:Entladen,0:Idle, 1:Laden')"
                size="1" color="black" bold></ftui-label>
            </ftui-row>
            <ftui-row align-items="stretch">
              <ftui-label text="Capacity:" size="1" color="black"></ftui-label>
              <ftui-label [text]="Ecoflow_Cloud_Statistic_All:data.quota.JTS1_EMS_HEARTBEAT.bpRemainWatth" size="1"
                color="black" bold unit="kWh"></ftui-label>
            </ftui-row>

          </ftui-cell>
        </ftui-row>
      </ftui-grid-tile>

      <ftui-grid-tile height="2" width="2">
        <ftui-rotor animation="fade" interval="10">
          <ftui-grid-tile color="red">
            <ftui-row>
              <ftui-label text="Netzbezug" size="3"></ftui-label>
              <ftui-icon name="plug" size="2"></ftui-icon>
            </ftui-row>
            <ftui-row>
              <ftui-label [text]="Ecoflow_Cloud_Statistic_All:Grid_Aktuell | divide(1000) | round(2)" size="8" bold>
                <span slot="unit" class="size--1">kW</span>
              </ftui-label>
            </ftui-row>
            <ftui-row>
              <ftui-cell width="100%">
                <ftui-row align-items="stretch">
                  <ftui-label text="Heute:" size="1" color="black"></ftui-label>
                  <ftui-label [text]="Ecoflow_Cloud_Statistic_All:Grid_Import | round(0)" size="1" color="black" bold
                    unit="kWh"></ftui-label>
                </ftui-row>
                <ftui-row align-items="stretch">
                  <ftui-label text="Monat:" size="1" color="black"></ftui-label>
                  <ftui-label [text]="StromVerbrauchsZaehler:Stromzaehler_total_consumption_EnergyMonth | round(0) "
                    size="1" color="black" bold unit="kWh"></ftui-label>
                </ftui-row>
              </ftui-cell>
          </ftui-grid-tile>
        </ftui-rotor>
      </ftui-grid-tile>
Du darfst diesen Dateianhang nicht ansehen.

[Dracolein]

Hallo.
Bitte sehr. Im Anhang die Index.html. Gewünschte Kacheln anpassen.
Sicher noch verbesserungswürdig, aber es fällt immer was zusätzliches dazu ein. Vielleicht klappt auch in einem Pop-up ein weiteres Pop-up zu öffnen

Tolles Design, ich überlege grade wirklich, Dein Konzept als Grundlage für eine völlig neue Designidee meines komplexen FTUI3 Layouts zu nutzen.
Konzeptfrage: Dient Dein Design lediglich der Information (=Darstellung) oder kannst Du auf eine Kachel beispielsweise drauftippen und erhälst auch Zugriff auf Einstellmöglichkeiten o.ä.? 

Ich überlege grade, schlichte Kacheln analog zu Dir zu bauen, jeweils Überschrift + Icon, darunter 1 wesentliches Reading und bis zu 3 kleine Zusatzinformationen. Bei Bedarf ist die Kachel klickbar, öffnet ein Popup-Menü und gibt mir Zugriff auf weitere Informationen & Optionen.

Ich habe ein 15" Touchscreen, der ist randvoll mit Readings und Schaltern, verfügt über eine Statusleiste und eine Menüleiste.... aber irgendwie nach vielen Jahren "langweilig" geworden"

[satprofi]

Hallo. Freut mich das es gefällt.
Und ja, ich kann auf Kacheln tippen und sehe dann neue Fenster. Auch mit Rollups wo ich z.b. meine Wallbox manuell starte oder die Stromkosten Abrufe, etc.
Habe auch extra Fenster nur für Aktoren zu schalten, oder Strompreis.
LG

Hier mein Hauptfenster , samt script