FTUI version 3

[iron.eagle]

Oder schon in Fhem lösen...

Ja, mit Dummys und Notifys habe ich schon damit angefangen. Es ist halt mehr, es in FHEM zu lösen, als einfach zwei oder mehr Werte in der Weboberfläche auszulesen und diese zu addieren, subtrahieren, ... . An anderer Stelle bräuchte ich die Werte auch nicht.

Torsten

[mr_petz]

Mal schnell gemacht. Funktioniert nur mit Numbers:

Code Auswählen Erweitern


<ftui-label [text]="
   Dev:read1 | t=>{this.read=t, this.read2?this.t=Number(this.read)+Number(this.read2):this.t=this.read} | ()=>this.text=this.t;
   Dev:read2 | t2=>{this.read2=t2, this.read?this.t2=Number(this.read)+Number(this.read2):this.t2=this.read2} | ()=>this.text=this.t2"
   >
</ftui-label>

Meintest du so in der Richtung??
Dev:read1 und Dev:read2 durch deine ersetzen...
Zusätzliche Pipes wie round() mussen hinten dran.

LG

Edit: Beispiel formatiert und die etwas andere Stringverkettung mal als Beispiel hinzugefügt wers braucht...

Code Auswählen Erweitern


<ftui-label [text]="
   Dev:read1 | t1=>{this.read1=t1, this.t1=this.read1+(this.read2?this.read2:'')+(this.read3?this.read3:'')} | ()=>this.text=this.t1;
   Dev:read2 | t2=>{this.read2=t2, this.t2=(this.read1?this.read1:'')+this.read2+(this.read3?this.read3:'')} | ()=>this.text=this.t2;
   Dev:read3 | t3=>{this.read3=t3, this.t3=(this.read1?this.read1:'')+(this.read2?this.read2:'')+this.read3} | ()=>this.text=this.t3"
   >
</ftui-label>

Hier werden nur entweder read1,read2,read3 einzeln oder alle strings verkettet in der definierten Reihenfolge und in einer Reihe ohne Leerstellen angezeigt wenn verfügbar. Bleiben aber dann erhalten wenn das Reading nicht geleert wird bzw. geleert ist.

[iron.eagle]

Hi mr_petz,

das sieht schonmal sehr gut aus. Mal sehen, wie es morgen aussieht, wenn die Sonne wieder scheint. Ich brauche es zur Anzeige des Eigenverbrauchs, usw. bei der PV-Anlage.
Danke.

----------------
Addition und Subtraktion funktionieren am Tag übrigens super mit den Werten der PV-Anlage.

Torsten

[mr_petz]

Hey Torsten,
zur Darstellung einer PV könntest du auch das nehmen:
https://forum.fhem.de/index.php/topic,119440.msg1231548.html#msg1231548

LG

[wg25]

Kannst du uns noch sagen für welche Version du dich entschieden bzw. beide getestet hast?

Code Auswählen Erweitern


<ftui-button (value)="CallList" states="removeItem 1" @click='sendFhem(`{my $number=ReadingsVal("CallList","1-number",""); fhem("telelock $number")};`)'>sendFehm</ftui-button>

oder:

Code Auswählen Erweitern


<ftui-button @click='sendFhem(`{my $number=ReadingsVal("CallList","1-number",""); fhem("telelock $number")}; set CallList removeItem 1`)'>sendFehm</ftui-button>


Ist für mich und andere Hilfreich zu erfahren ob beides geht bzw. gehen würde...

Bei mir sieht es jetzt so aus:

Code Auswählen Erweitern

<ftui-button (value)="CallList" states="removeItem 1" @click='sendFhem(`{my $number=ReadingsVal("CallList","1-number","");; fhem("telelock $number")}`)'>sendFhem</ftui-button>

Hinter der Variablen-Zuweisung zwei ;; und hinter dem fhem-Aufruf kein ;. Ob es 100% so richtig ist von der Syntax... who knows? Aber es läuft!

Danke nochmal!

Gruß

[fremitus]

Hallo zusammen,

die meisten Dinge konnte ich selber fixen, an diesem Punkt hier komme ich nicht weiter. Auch die Beispielseite https://knowthelist.github.io/ftui/www/ftui/examples/colorpicker.html hilft leider nicht. Ich möchte ein "wheel" und ein "Slider" untereinander setzen. Bei den Beispielen wäre es das Beispiel "Hue-Device". Hier mein Code:

Code Auswählen Erweitern

<ftui-colorpicker layout="wheel,valueSlider"
[hex]="MQTT2_myMQTT2:hex"
(hex)="replace('#','') | MQTT2_myMQTT2:hex"
[brightness]="MQTT2_myMQTT2:bri | divide(2.55) | toInt()"
(brightness)="multiply(2.55) | toInt() | MQTT2_myMQTT2:bri">
</ftui-colorpicker>

Leider wird sowohl bei dem "wheel" als auch bei dem "Slider" immer nur ein "set MQTT2_myMQTT2 xxxxxx (natürlich mit validen Werten) bri" ausgeführt, die wheel Funktion, die eigentlich mit hex belegt ist, funktioniert leider nicht. Auch bei den Beispielen übrigens nicht. Ich bin davon ausgegangen, dass Wheel und Slider getrennte Set Befehle ausführen können. Was mache ich falsch, habt ihr Ideen?

Gruss Peer

[bismosa]

Hallo!

Ich möchte externen Inhalt (Heizölpreis) mit einbinden. Ist ein iframe in Kombination mit ein bisschen Script hier das richtige?
Es wird dann ja auch neu geladen, wenn man die Seite nicht anschaut...
So habe ich es bisher (alle 6h reload)

Code Auswählen Erweitern


<ftui-column>
          <iframe id="reloadHeizoel" src="https://www.fastenergy.de/webmaster/heizoelpreis.php?type=2&amp;plz=12345" style="overflow:hidden; border:0; width:100%; height:100%;"></iframe>
</ftui-column>


Code Auswählen Erweitern


<script>
window.setInterval("reloadHeizoel();", 21600000);
    function reloadHeizoel() {
        document.getElementById("reloadHeizoel").src = document.getElementById("reloadHeizoel").src;
    }
</script>


Gruß
Bismosa

[mr_petz]

Hi Peer,
in dieser Konstellation kann man bei genau 0,51,102,153,204 und 255 (254) brightness den hex einstellen:

Code Auswählen Erweitern


<ftui-colorpicker layout="wheel,valueSlider"
[hex]="MQTT2_myMQTT2:hex"
[brightness]="MQTT2_myMQTT2:bri | divide(2.55) | round(0)"
(hex)="replace('#','') | MQTT2_myMQTT2:hex"
(brightness)="multiply(2.55) | toInt() | MQTT2_myMQTT2:bri">
</ftui-colorpicker>

Wird an den Berechnungen liegen? Warum das so ist k.A.
LG

[mr_petz]

@bismosa
Ist zwar nicht die Antwort auf deine Frage,
aber hier ein Anreiz die Preise in ein ftui-label zu packen (finde ich besser als iframe):

Code Auswählen Erweitern


<ftui-button class="size-1" @click="javascript:fetchOel()">fetch</ftui-button>
<script>
async function fetchOel() {     
  try {
    let response = await fetch('https://www.fastenergy.de/webmaster/heizoelpreis.php?type=2&plz=01109');
    const res = await response.text();
    document.getElementById('standard').textContent = res.replace(/.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*<td>Heizöl Standard\:<\/td>\n.*<td align\=\"right\">(.*)&nbsp;&euro;<\/td>\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*\n.*/g,'Heizöl Standard: $1 €');
  } catch (err) {
    console.log('Fetch error:' + err);
  }
}
</script>
<ftui-label id="standard"></ftui-label>

Hier wird der 'Heizöl Standard' ins ftui-label gepackt...
Wenn du dich besser als ich in Regex (replace) auskennst, kannst du dir das zu Nutze machen....
@OdfFhem kann das gut

LG mr_petz

[OdfFhem]

@mr_petz, @bismosa

Bei mir läuft der fetch auf den "geliebten" CORS-Fehler, daher konnte ich nur über einen Umweg "testen".

(vorläufiges) Testergebnis ... vielleicht funktioniert es auch im "echten" Leben:

Code Auswählen Erweitern


          document.getElementById('standard').textContent = res.replace(/.*Standard:.*>(\d*,+\d*)&nbsp;&euro;<.*Premium:.*/s,'Heizöl Standard: $1 €');

Ist - wie immer - nur eine temporäre Lösung, wenn die Antwortseite öfter umgebaut wird ...

[mr_petz]

Ist schon interessant warum bei dir der Cors-Fehler kommt.
Bei mir ohne Umwege.
Danke fürs zeigen des replace().
Wusste das du es besser kannst als ich.
@bismosa
Wenn du die Grafik auch brauchst, das ist eine globale und kannst sie dir in ein ftui-image einbinden ..
LG

[bismosa]

Hallo!

Die Preise lasse ich mir schon länger über FHEM anzeigen per HTTPMOD:

Code Auswählen Erweitern


defmod heizoel24 HTTPMOD https://www.heizoel24.de/DailyPriceXml.ashx?zipcode=%%PLZ%%&litre=%%MENGE%%&unloadingpoints=%%ENTLADESTELLEN%%&oilgrade=standard 300
attr heizoel24 userattr replacement03Value:1,2,3,4,5,6,7,8,9,10
attr heizoel24 enableControlSet 1
attr heizoel24 model fuel_oil_check_heizoel24_v2
attr heizoel24 reading010Name Heizoelpreis
attr heizoel24 reading010OExpr $val =~ s/,/\./;; $val;;
attr heizoel24 reading010Regex ([\d\,]+)<\/price
attr heizoel24 replacement01Mode text
attr heizoel24 replacement01Regex %%PLZ%%
attr heizoel24 replacement01Value 12345
attr heizoel24 replacement02Mode text
attr heizoel24 replacement02Regex %%MENGE%%
attr heizoel24 replacement02Value 1500
attr heizoel24 replacement03Mode text
attr heizoel24 replacement03Regex %%ENTLADESTELLEN%%
attr heizoel24 replacement03Value 1
attr heizoel24 room HTTPMOD
attr heizoel24 stateFormat { my $price = 0.0;;\
$price = (AttrNum($name,"replacement02Value",0)*ReadingsNum($name,"Heizoelpreis",0))/100;;\
my $lastCheck = ReadingsTimestamp($name,"Heizoelpreis","");;\
my $ret = "<div style=\"text-align: left;;;;\">".$lastCheck.":";;\
my $link = "https://www.heizoel24.de/heizoel/angebotsliste?";;\
$link .= "zipCode=".AttrVal($name,"replacement01Value","");;\
$link .= "&amount=".AttrVal($name,"replacement02Value","");;\
$link .= "&stations=".AttrVal($name,"replacement03Value","");;\
$link .= "&product=1";;\
$ret .= "&nbsp;;<a href=\"".$link."\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"font-weight:bold;;;;\">";;\
$ret .= ReadingsVal($name,"Heizoelpreis","-");;\
$ret .= "&euro;;</a>/100l";;\
$ret .= "&nbsp;;(".AttrVal($name,"replacement02Value","0")."l = ";;\
$ret .= sprintf("%.2f",$price);;\
$ret .= "&euro;;)</div>";;\
return $ret;;\
}
attr heizoel24 timeout 10
attr heizoel24 webCmd reread

und/oder

Code Auswählen Erweitern


defmod Heizoel_esyoil HTTPMOD https://www.check24.de/heizoel/?c24_calculate=calculate&zipcode=%%PLZ%%&amount=%%MENGE%%&up=%%ENTLADESTELLEN%%&prod=%%OILGRADE%%&payment_type=%%PAYMENT%%&%%ANHANGER%%&%%SCHLAUCHLAENGE%%&%%EXPRESS%% 3600
attr Heizoel_esyoil userattr replacement03Value:1,2,3,4,5,6,7,8,9,10 replacement04Value:hose=,hose=hose_l,hose=hose_xl replacement05Value:short_vehicle=,short_vehicle=short_vehicle replacement06Value:8,4 replacement07Value:1,2,3,4,6 replacement08Value:express=,express=1
attr Heizoel_esyoil enableControlSet 1
attr Heizoel_esyoil reading010Name Heizoelpreis
attr Heizoel_esyoil reading010OExpr $val =~ s/,/\./;; $val;;
attr Heizoel_esyoil reading010Regex ([\d\,]+)\&nbsp\;;\&euro\;;
attr Heizoel_esyoil replacement01Mode text
attr Heizoel_esyoil replacement01Regex %%PLZ%%
attr Heizoel_esyoil replacement01Value 12345
attr Heizoel_esyoil replacement02Mode text
attr Heizoel_esyoil replacement02Regex %%MENGE%%
attr Heizoel_esyoil replacement02Value 1500
attr Heizoel_esyoil replacement03Mode text
attr Heizoel_esyoil replacement03Regex %%ENTLADESTELLEN%%
attr Heizoel_esyoil replacement03Value 1
attr Heizoel_esyoil replacement04Mode text
attr Heizoel_esyoil replacement04Regex %%SCHLAUCHLAENGE%%
attr Heizoel_esyoil replacement04Value hose=
attr Heizoel_esyoil replacement05Mode text
attr Heizoel_esyoil replacement05Regex %%ANHAENGER%%
attr Heizoel_esyoil replacement05Value short_vehicle=
attr Heizoel_esyoil replacement06Mode text
attr Heizoel_esyoil replacement06Regex %%OILGRADE%%
attr Heizoel_esyoil replacement06Value 8
attr Heizoel_esyoil replacement07Mode text
attr Heizoel_esyoil replacement07Regex %%PAYMENT%%
attr Heizoel_esyoil replacement07Value 2
attr Heizoel_esyoil replacement08Mode text
attr Heizoel_esyoil replacement08Regex %%EXPRESS%%
attr Heizoel_esyoil replacement08Value express=
attr Heizoel_esyoil room HTTPMOD
attr Heizoel_esyoil stateFormat { my $price = 0.0;;\
$price = (AttrNum($name,"replacement02Value",0)*ReadingsNum($name,"Heizoelpreis",0))/100;;\
#my $lastCheck = POSIX::strftime("%d.%m. %H:%M",localtime(time_str2num(ReadingsTimestamp($name,"Heizoelpreis","2000-01-01 00:00:00"))));;\
#my $lastCheck = FmtDateTime(InternalVal($name,".LastUpdate",0));;\
my $lastCheck = ReadingsTimestamp($name,"Heizoelpreis","");;\
my $ret = "<div style=\"text-align: left;;\">".$lastCheck.":";;\
my $link = "https://www.check24.de/heizoel/?c24_calculate=calculate";;\
$link .= "&zipcode=".AttrVal($name,"replacement01Value","");;\
$link .= "&amount=".AttrVal($name,"replacement02Value","");;\
$link .= "&up=".AttrVal($name,"replacement03Value","");;\
$link .= "&".AttrVal($name,"replacement04Value","");; #hose length\
$link .= "&".AttrVal($name,"replacement05Value","");; #short vehicle\
$link .= "&prod=".AttrVal($name,"replacement06Value","");; # product 8 = normal schwefelarm 4 = premium schwefelarm\
$link .= "&payment_type=".AttrVal($name,"replacement07Value","");; # 1 = Barzahlung, 2 = EC-Karte, 3 = Vorkasse, 4 = Lastschrift, 5 = Wärmekonto, 6 = Rechnung, 10 = Ratenkauf\
$link .= "&".AttrVal($name,"replacement08Value","");; #express;;\
$ret .= "&nbsp;;<a href=\"".$link."\" rel=\"noopener noreferrer\" target=\"_blank\" style=\"font-weight:bold;;\">";;\
$ret .= ReadingsVal($name,"Heizoelpreis","-");;\
$ret .= "&euro;;</a>/100l";;\
$ret .= "&nbsp;;(".AttrVal($name,"replacement02Value","0")."l = ";;\
$ret .= sprintf("%.2f",$price);;\
$ret .= "&euro;;)</div>";;\
return $ret;;\
}
attr Heizoel_esyoil timeout 10
attr Heizoel_esyoil webCmd reread

Ich glaube das hatte ich so ähnlich mal hier im Forum gefunden...
Ist zwar wesentlich aufwändiger als die kurze Lösung hier, so kann ich aber in FHEM die Preise selbst protokollieren und meine eigenen Statistiken damit befüllen.

@bismosa
Wenn du die Grafik auch brauchst, das ist eine globale und kannst sie dir in ein ftui-image einbinden ..
LG

Das geht aber nur mit der Grafik...oder? Irgendwie hatte ich das nicht hinbekommen. Ich mag aber die komplette Anzeige wie sie ist. Finde ich sehr übersichtlich. Genauere Statistiken schaue ich eh woanders oder in FHEM.

Btw:
Ist es eigentlich möglich die SVG-Plots (da habe ich bisher schon viele und auch teilweise sehr aufwändige in FHEM) direkt in FTUI 3 anzuzeigen/einzubinden?

Danke!

Gruß
Bismosa

[mr_petz]

Hallo!

Die Preise lasse ich mir schon länger über FHEM anzeigen per HTTPMOD:
...

Warum dann der iframe?

Das geht aber nur mit der Grafik...oder? Irgendwie hatte ich das nicht hinbekommen. Ich mag aber die komplette Anzeige wie sie ist. Finde ich sehr übersichtlich. Genauere Statistiken schaue ich eh woanders oder in FHEM.
...

Nur Grafik.

Code Auswählen Erweitern

<ftui-image src="https://www.fastenergy.de/GLOBAL_PICS/chart_small_de.png"></ftui-image>

LG

[mr_petz]

...
Bei mir läuft der fetch auf den "geliebten" CORS-Fehler, daher konnte ich nur über einen Umweg "testen".
...

Ich verstehe das nicht . Unter Chrome Version 107.0.5304.107 (Offizieller Build) (64-Bit) (letzte Version) geht es ohne Umwege, unter FF und Edge kommt bei mir auch der CORS-Fehler???

LG

Edit: ok ich hatte unter Chrome das gemacht: --disable-web-security

[ToM_ToM]

Hallo Zusammen,

ich hätte mal eine Frage zu den Pipes.
Wenn ich statt eines Readings, ein Attribut auslese und die Pipes verwende, erhalte ich statt des dort Datums im Attribut, immer das aktuelle Datum von heute.

Fhem-Definition

Code Auswählen Erweitern

define LoremIpsum dummy
attr LoremIpsum firstPayDate 2021-05-06

Code Auswählen Erweitern

FTUI3-Code

Code Auswählen Erweitern

<ftui-label [text]="LoremIpsum:firstPayDate | toDate() | format('DD.MM.YYYY')" class="size-2"></ftui-label>

Hat jemand eine Idee?

Beste Grüße