FTUI version 3

[ms_steini]

Hallo zusammen,

ich mache gerade meine ersten Gehversuche mit der Version 3.

Ich versuche die beiden Temperaturwerte "tempMin" und "tempMax" rechts neben dem Wettersymbol zu platzieren und habe da so einige Schwierigkeiten.
Mit <DIV> und/oder <Table>  und style-> margin/padding/position etc. bekomme ich das schon hin, bin mir aber nicht sicher ob das der richtige weg ist.

so habe ich es jetzt im Moment:

Code Auswählen Erweitern


<ftui-grid-tile row="1" col="7" height="3" width="14" shape="round">
   <ftui-row>
      <ftui-column>
    <ftui-label size="3">Heute</ftui-label>
            <ftui-weather size="5" icon-set="kleinklima" provider="proplanta" [condition]="myProPlantaWetter:fc0_weatherDay"></ftui-weather>
    <ftui-label color="blue" size="3" [text]="myProPlantaWetter:fc0_tempMin" unit="°C"></ftui-label>
            <ftui-label color="red" size="3" [text]="myProPlantaWetter:fc0_tempMax" unit="°C"></ftui-label>
      </ftui-column>
   </ftui-row>
</ftui-grid-tile>


Wenn ich eine individuelle Positionierung haben möchte, komme ich dann um <DIV> und Konsorten nicht herum ?

[mr_petz]

Hi ms_steini:

Code Auswählen Erweitern


<ftui-cell width="75%">
<ftui-label size="3">Heute</ftui-label>
   <ftui-row>
     <ftui-weather size="5" icon-set="kleinklima" provider="proplanta" [condition]="myProPlantaWetter:fc0_weatherDay"></ftui-weather>
     <ftui-label color="blue" size="3" [text]="myProPlantaWetter:fc0_tempMin" unit="°C"></ftui-label>
     <ftui-label color="red" size="3" [text]="myProPlantaWetter:fc0_tempMax" unit="°C"></ftui-label>
   </ftui-row>
</ftui-cell>

ftui-cell könnte man auch weglassen...
ftui-row=Zeile
ftui-column=Spalte

LG mr_petz

[ms_steini]

besten Dank....

so ist es für mich fein...

Code Auswählen Erweitern

<ftui-cell>
<ftui-label size="2" text="Heute"></ftui-label>
<ftui-row>
<ftui-column>
<ftui-weather size="4" icon-set="kleinklima" provider="proplanta" [condition]="myProPlantaWetter:fc0_weatherDay"></ftui-weather>
</ftui-column>
<ftui-column>
<ftui-label color="blue" size="2" [text]="myProPlantaWetter:fc0_tempMin" unit="°C"></ftui-label>
<ftui-label color="red" size="2" [text]="myProPlantaWetter:fc0_tempMax" unit="°C"></ftui-label>
</ftui-column>
</ftui-row>
</ftui-cell>

[ms_steini]

gleich noch einen hinterher....

wie bekomme ich denn den Monat mit 3 Buchstaben hin ?? also Jan Feb Mär usw.

beim Tag geht das ja mit dem "eeee" = "Donnerstag" "eee" = "Don" "ee" = "Do".... aber wie bei Monat ?

Code Auswählen Erweitern


<ftui-clock format="DD. MMMM YYYY" size="3" color="white"></ftui-clock>


müsste das aus Platzgründen so haben

[mr_petz]

Das geht standardmäßig in ftui-clock nicht. Es sei denn du kannst die Zeit und/oder das Datum auch aus fhem holen?
setstate müsste für ftui-clock in der ftui.helper.js noch eine Funktion dafür erweitern Bsp.:

Code Auswählen Erweitern


const MMM = (lang === 'de') ? months_de[month].substring(0, 3) : months[month].substring(0, 3);
ret = ret.replace('MMM', MMM);


LG mr_petz

[ms_steini]

Guten Morgen allerseits,

ich bin etwas unzufrieden mit dem Aufbau der HTML Seite(n) und hätte da mal ein paar Grundlegende Fragen.
Sorry wenn das evtl. in den 174 Beiträgen oder anders wo schon erwähnt wurde, ich habe nicht alles hier gelesen.

Ich habe mit FTUI3 jetzt ein bisschen Proplanta Wetter, ein Menu, 3 Fenster, 3 Rolladen, ein bisschen Kleinkram und 5 Popups
und bin jetzt bei gut 1000 Zeilen [FTUI (HTML)-Code].

Ich könnte mir gut vorstellen das wenn ich alle meine Komponenten mit FTUI3 berücksichtige, komme ich bestimmt weit über 10.000 Zeilen FTUI (HTML)-Code.
Und das macht es (für mich zumindest) sehr unübersichtlich und macht mich unzufrieden.


Alleine meine (Fenster,Rolladen,ASC-Steuerung Kombination) sind schon 100 Zeilen (Buttons, Icons und Popup)  und ich habe knapp 30 Fenster und 21 Rolladen.
Dazu kommen noch die ganzen Lampen,Lichter,Sensoren,Dimmer,Gartenbewässerung,Kameras und was weiß ich noch alles.......

Gibt es evtl. eine Möglichkeit wie z.B. eine "function()" wie bei PHP um den Aufbau der (Fenster,Rolladen,ASC-Steuerung Kombination) nur EINMAL zu schreiben
und bei Verwendung der function popup-target="....popup_ROLLO(EG.Rollo.Buero.Fenster)...." werden die Devices übergeben.

Beispiel für ein POPUP:

Code Auswählen Erweitern


<ftui-icon size="7" popup-target="....popup_ROLLO(EG.Rollo.Buero.Fenster)...."  <<< *****************************************
[name]="EG.Rollo.Buero.Fenster:pct | map('0:f_rollo_0,´[1-9]´:f_rollo_1,´1[0-9]´:f_rollo_10,´2[0-9].*´:f_rollo_20,´3[0-9].*´:f_rollo_30,´4[0-9].*´:f_rollo_40,´5[0-9].*´:f_rollo_50,´6[0-9].*´:f_rollo_60,´7[0-9].*´:f_rollo_70,´8[0-9].*´:f_rollo_80,´9[0-9].*´:f_rollo_90,100:f_rollo_100')"
[color]="EG.Rollo.Buero.Fenster:pct | map('0:green,´[1-9]´:red,´1[0-9]´:red,´2[0-9].*´:red,´3[0-9].*´:red,´4[0-9].*´:red,´5[0-9].*´:red,´6[0-9].*´:red,´7[0-9].*´:red,´8[0-9].*´:red,´9[0-9].*´:red,100:red')">
</ftui-icon>
<ftui-icon size="7" popup-target="....popup_ROLLO(EG.Rollo.Wohnzimmer.Fenster)...."  <<< *****************************************
[name]="EG.Rollo.Wohnzimmer.Fenster:pct | map('0:f_rollo_0,´[1-9]´:f_rollo_1,´1[0-9]´:f_rollo_10,´2[0-9].*´:f_rollo_20,´3[0-9].*´:f_rollo_30,´4[0-9].*´:f_rollo_40,´5[0-9].*´:f_rollo_50,´6[0-9].*´:f_rollo_60,´7[0-9].*´:f_rollo_70,´8[0-9].*´:f_rollo_80,´9[0-9].*´:f_rollo_90,100:f_rollo_100')"
[color]="EG.Rollo.Wohnzimmer.Fenster:pct | map('0:green,´[1-9]´:red,´1[0-9]´:red,´2[0-9].*´:red,´3[0-9].*´:red,´4[0-9].*´:red,´5[0-9].*´:red,´6[0-9].*´:red,´7[0-9].*´:red,´8[0-9].*´:red,´9[0-9].*´:red,100:red')">
</ftui-icon>


function popup_ROLLO(DEVICE...) {
<ftui-popup id="{DEVICE}" timeout="0" width="500px" height="260px">
<header class="size-3">Rollo-Steuerung {DEVICE}</header>
<ftui-row>
<ftui-column>
<ftui-button [(value)]="{DEVICE}:pct"
[color]="{DEVICE}:motor | map('´^stop\:off$|^stop\:zu$´:medium,´^stop\:on$|^stop\:auf$´:red,´^stop\:([0-9]|([1-9][0-9]))$|^stop\:([0-9]\.[0-9]|([1-9][0-9]\.[0-9]))$´:medium,´^down.*$´:medium,´^up.*$´:orange')"
size="large" fill="inline" states="100">
<ftui-icon 
[name]="{DEVICE}:motor | map('´^stop\:off$|^stop\:zu$´:f_rollo_100,´^stop\:on$|^stop\:auf$´:f_rollo_100,´^stop\:([0-9]|([1-9][0-9]))$|^stop\:([0-9]\.[0-9]|([1-9][0-9]\.[0-9]))$´:f_rollo_100,´^down.*$´:f_rollo_100,´^up.*$´:fts_shutter_up')"
[class-name]="{DEVICE}:motor | map('´^up.*$´:blink')"
size="5">
</ftui-icon>
</ftui-button>
<ftui-label size="2" text="auf"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [(value)]="{DEVICE}" size="large" fill="inline" states="stop"
[color]="{DEVICE}:motor | map('´^down:.*$´:medium,´^up:.*$´:medium,´^stop:.*$´:red')">
<ftui-icon size="5" name="stop-circle-o"></ftui-icon>
</ftui-button>
<ftui-label size="2" text="stop"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [(value)]="{DEVICE}r:pct"
[color]="{DEVICE}:motor | map('´^stop\:off$|^stop\:zu$´:green,´^stop\:on$|^stop\:auf$´:medium,´^stop\:([1-9]|([1-9][0-9]))$|^stop\:([1-9]\.[0-9]|([1-9][0-9]\.[0-9]))$´:medium,´^down.*$´:orange,´^up.*$´:medium')"
size="large" fill="inline" states="0">
<ftui-icon 
[name]="{DEVICE}:motor | map('´^stop\:off$|^stop\:zu$´:f_rollo_0,´^stop\:on$|^stop\:auf$´:f_rollo_0,´^stop\:([1-9]|([1-9][0-9]))$|^stop\:([1-9]\.[0-9]|([1-9][0-9]\.[0-9]))$´:f_rollo_0,´^down.*$´:fts_shutter_down,´^up.*$´:f_rollo_0')"
[class-name]="{DEVICE}:motor | map('´^down.*$´:blink')"
size="5">
</ftui-icon>
</ftui-button>
<ftui-label size="2" text="zu"></ftui-label>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-button [(value)]="{DEVICE}:pct" size="large" fill="inline" states="80"
[color]="{DEVICE}:pct | map('´^[0-9]\.[0-9]$|^[0-9]$|^[1-7][0-9].*$|^100$´:medium,´^8[0-9].*$|^9[0-9].*$´:red')">
<ftui-icon size="5" name="f_rollo_80"></ftui-icon>
</ftui-button>
<ftui-label size="2" text="80%"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [(value)]="{DEVICE}:pct" size="large" fill="inline" states="60"
[color]="{DEVICE}:pct | map('´^[0-9]\.[0-9]$|^[0-9]$|^[1-5][0-9].*$|^[8-9][0-9].*$|^100$´:medium,´^6[0-9].*$|^7[0-9].*$´:red')">
<ftui-icon size="5" name="f_rollo_60"></ftui-icon>
</ftui-button>
<ftui-label size="2" text="60%"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [(value)]="{DEVICE}:pct" size="large" fill="inline" states="40"
[color]="{DEVICE}:pct | map('´^[0-9]\.[0-9]$|^[0-9]$|^[1-3][0-9].*$|^[6-9][0-9].*$|^100$´:medium,´^4[0-9].*$|^5[0-9].*$´:red')">
<ftui-icon size="5" name="f_rollo_40"></ftui-icon>
</ftui-button>
<ftui-label size="2" text="40%"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [(value)]="{DEVICE}:pct" size="large" fill="inline" states="20"
[color]="{DEVICE}:pct | map('´^[0-9]\.[0-9]$|^[0-9]$|^1[0-9].*$|^[4-9][0-9].*$|^100$´:medium,´^2[0-9].*$|^3[0-9].*$´:red')">
<ftui-icon size="5" name="f_rollo_20"></ftui-icon>
</ftui-button>
<ftui-label size="2" text="20%"></ftui-label>
</ftui-column>
</ftui-row>
</ftui-popup>
}



ODER vielleicht in weitere Dateien auslagern und mit z.B. include(Datei) nachladen.

Bin ich da alleine mit meiner Meinung oder wie seht bzw. macht ihr das ?

Wenn das ganze was ich hier verzapft habe Humbug ist.... mea culpa

[mr_petz]

Schau dir mal content an.
Hier ein Beispiel:
https://forum.fhem.de/index.php/topic,120379.msg1149119.html#msg1149119

[ms_steini]

unfassbar.......

bin von 1000 Zeilen Code auf 350 Zeilen runter......
OK, die Zeilen in den Content-Dateien NICHT mitgezählt.... ABER es macht es ungemein übersichtlicher.

mein Icon-Symbol mit Popup:

Code Auswählen Erweitern


<ftui-column>
   <ftui-content file="Rollo-2fach-Fenster.html" RolloDevice="EG.Rollo.Buero.Fenster" FensterDevice="FE_Buero" LabelText="Büro"></ftui-content>
</ftui-column>


und mein Popup:

Code Auswählen Erweitern


<ftui-popup id="EG.Rollo.Buero.Fenster" timeout="0" width="500px" height="260px">
   <header class="size-3">Rollo-Steuerung Büro Fenster</header>
   <ftui-content file="Rollo-Steuerung-POPUP.html" RolloDevice="EG.Rollo.Buero.Fenster"></ftui-content>
</ftui-popup>


und das beste, ich brauche die Struktur des PopUp's nicht mehrfach schreiben und ggf. ändern.

@mr_petz:  Vielen Dank für den Link. Hat mich echt weitergebracht

[Stephan.K]

Hallo zusammen,

ich versuche gerade meine Heizungsvisualisierung auf FTUI3 umzustellen.
Ich habe gelernt, daß ich mit:

Code Auswählen Erweitern

<div ftui-binding [data-test]="smartMeter2:power" onclick="window.alert(this.getAttribute('data-test')); return false;">Hallo</div>
Readings abonnieren kann.
Nun möchte ich dieses Readings jedoch nicht als Attribut haben sondern in einem Tag, also zwischen den >< also quasi innerHTML.
Ziel ist es eine SVG Grafik mit Werten zu versehen.
Wie mache ich dies, bzw wie kann ich mit einer JS Funktion ein Reading abonnieren.

Hoffe soweit verständlich.
Vielen Dank im Voraus.
MfG Stephan

[yersinia]

Spontan fällt mir nur der Weg über ftui-content ein, da du dort dann Werte ersetzen kannst (man kann zB devices etc übergeben). Du würdest dann deinen Inhalt definieren:

Code Auswählen Erweitern

<ftui-content file="mypowercontent.html" [mypower]="smartMeter2:power"></ftui-content
Du erzeugst eine neue HTML mypowercontent.html, die dann deinen anzuzeigenden Inhalt beinhaltet und den Parameter {{mypower}} welcher durch suchen&ersetzen regex durch den wert hinter mypower ersetzt wird:

Code Auswählen Erweitern

<div onclick="window.alert('{{mypower}}'); return false;">{{mypower}}</div>
Ist ungetestet aber so würde ich es zumindest erstmal versuchen.

Wahrscheinlich würde dies auch einfacher mit JS gehen.

[Stephan.K]

Spontan fällt mir nur der Weg über ftui-content ein, da du dort dann Werte ersetzen kannst (man kann zB devices etc übergeben). Du würdest dann deinen Inhalt definieren:

Danke für die Info, jedoch leider funktioniert dies nicht, da nach meinem Verständnis dies ein reines suchen ersetzen ist.
Ich brauche aber den Wert inklusive der Aktualisierungen.

MfG Stephan

[yersinia]

Meines Verständnisses nach wird die Aktualisierung durchgereicht. Hast du es mal probiert?

Wenn es nicht gehen sollte, wirst du um eine kleine Component/JS Code nicht drumherum kommen.

[Stephan.K]

Meines Verständnisses nach wird die Aktualisierung durchgereicht. Hast du es mal probiert?

Ja, hab ich. Ich bin jedoch der Meinung dies ist ein Missverständnis.
Hier ein Auszug aus einem SVG:

Code Auswählen Erweitern

  <text
     class="text"
     y="30"
     id="text153"><tspan
   x="5"
   dy="1.2em"
   id="tspan150">el. Leistung</tspan><tspan
   x="5"
   dy="1.2em"
   id="idKcPower" ftui-binding [data-kc-val]="smartMeter2:power">HIER SOLL DER WERT AUS smartMeter2:power STEHEN</tspan> W</text>

Zwischen dem tspan soll nun der Wert des readings rein.

Habe mir momentan mit einem eigenen Pipe beholfen:

Code Auswählen Erweitern

const kcHpsuSvg = ($targetId) => input => document.getElementById($targetId).innerHTML=input;

Das SVG sieht dann so aus:

Code Auswählen Erweitern

  <text
     class="text"
     y="30"
     id="text153"><tspan
   x="5"
   dy="1.2em"
   id="tspan150">el. Leistung</tspan><tspan
   x="5"
   dy="1.2em"
   id="idKcPower" ftui-binding [data-kc-val]="smartMeter2:power | kcHpsuSvg('idKcPower')">-</tspan> W</text>
Es funktioniert zwar, jedoch elegant ist vermutlich anders.

Bin für neue Ideen offen.
MfG Stephan

[yersinia]

Wo ist der Aufruf durch ftui-content, welcher das svg lädt?

Ich denke da an eine eigene HTML für das svg:

Code Auswählen Erweitern

  <text
     class="text"
     y="30"
     id="text153"><tspan
   x="5"
   dy="1.2em"
   id="tspan150">el. Leistung</tspan><tspan
   x="5"
   dy="1.2em">{{idkpower}}</tspan> W</text>

diese speicherst du irgendwo, wo ftui3 drauf zugreifen kann, ab und bindest diesen Inhalt dann in deiner ftui3-seite via

Code Auswählen Erweitern

<ftui-content file="deine_svg_datei.html" [idkpower]="smartMeter2:power"></ftui-content>
ein.

Du übergibst so den Wert aus dem Reading an eine interne Variable (idkpower), die FTUI3 dann in dem aufgerufenen Inhalt ersetzt (deswegen dort auch {{idkpower}}).

Aber wenn es über die eigene pipe funktioniert ist es ja gut.

[Stephan.K]

Ich denke da an eine eigene HTML für das svg:

Genau das habe ich probiert, jedoch dann steht im tspan smartMeter2:power und nicht der Wert des readings.

MfG Stephan