FTUI version 3

[mr_petz]

@HoTi
Noch ein Hinweis/Tip für dich:
man kann auch variablen einem content übergeben und mit Bsp.: {{value}} aufrufen.
Das ist bei Copystrecken sinnvoll und damit spart man sich das mehrfache schreiben der Devices bei gleichen Layout und man schreibt bei Änderung nur einmal um.
Bsp:
device wird gesetzt:

Code Auswählen Erweitern


<ftui-content file="content/wetter.html" device="Proplanta"></ftui-content>

und der Aufruf im content:

Code Auswählen Erweitern


<ftui-label [text]="{{device}}:tempMin" size="5" unit="°C" class="thin"></ftui-label>
<ftui-label [text]="{{device}}:tempMax" size="10" unit="°C" class="thin"></ftui-label>


LG

[Adimarantis]

Im dem Zusammenhang, möchte ich hier kurz meine 4-Tages Wetteranzeige teilen.
Basiert auf einer Lösung die weiter vorne mal ohne "ftui-content" gepostet wurde.
Das gestaltet den Code im index.html extrem kurz und ermöglicht ganz einfach den Namen der Proplanta Device (meine heisst "Wetter") nur dort zu ändern.

Code Auswählen Erweitern

<ftui-grid-tile row="8.5" col="8" height="4" width="7" shape="round">
<header>Wetter</header>
<ftui-row>
<ftui-content file="wetter_day.html" Label="Heute" Device="Wetter" Day="0" Color="orange"></ftui-content>
<ftui-content file="wetter_day.html" Label="Morgen" Device="Wetter" Day="1" Color="gray"></ftui-content>
<ftui-content file="wetter_day.html" Label="Tag3" Device="Wetter" Day="2" Color="gray"></ftui-content>
<ftui-content file="wetter_day.html" Label="Tag4" Device="Wetter" Day="3" Color="gray"></ftui-content>
</ftui-row>
</ftui-grid-tile>  

Die einzelnen Tagesspalten und die Stundenansicht sind parametrisiert über die angehängten Dateien realisiert.

[andreas_r]

Cool ... bedeutet das, dass man das ftui-content auch "rekursiv" verwenden kann? Als ich das das letzte Mal versucht hatte, hat es leider nicht geklappt. Ist das was Neues?

VG, Andreas

[stefan-dd]

Was wurde an den Popups geändert.
Seit dem letzten Update funktionieren sie nicht mehr.
Spiele ich die alte "popup.component.js" wieder ein, funktioniert es.

Code Auswählen Erweitern

<!-- Keller -->
      <ftui-grid-tile row="1" col="23" height="4" width="4" shape="round">
      <header>Kellertür</header>
        <ftui-icon popup-target="pop1" class="size-3" [name]="Keller_Status:cmd | map('1|4: fts_door_open, `.*`: fts_door')"
                                                      [color]="Keller_Status:cmd | map('1|4: red, 2|5: yellow, 3|6: green')"></ftui-icon>
      </ftui-grid-tile>

Code Auswählen Erweitern

  <ftui-popup id="pop1" shape="round" timeout="15" height="250px" width="500px">
    <header>Kellertür</header><br>
    <table width="100%" align="center">
    <tr height="90px" align="center">
      <td width="33%"><ftui-button [(value)]="Keller_Status"  states="cmd_6" direction="vertical" color="current" fill="none">
        <ftui-icon name="fts_door" [color]="Keller_Status:cmd | map('3|6: green, `.*`: dark')"
                                   [class-name]="Keller_Status:cmd | map('6: blink size-8, `.*`: size-8')"></ftui-icon></ftui-button></td>
      <td width="33%"><ftui-button [(value)]="Keller_Status"  states="cmd_5" direction="vertical" color="current" fill="none">
        <ftui-icon name="fts_door" [color]="Keller_Status:cmd | map('2|5: yellow, `.*`: dark')"
                                   [class-name]="Keller_Status:cmd | map('5: blink size-8, `.*`: size-8')"></ftui-icon></ftui-button></td>
      <td width="33%"><ftui-button [(value)]="Keller_Status"  states="cmd_4" direction="vertical" color="current" fill="none">
        <ftui-icon name="fts_door_open" [color]="Keller_Status:cmd | map('1|4: red, `.*`: dark')"
                                        [class-name]="Keller_Status:cmd | map('4: blink size-8, `.*`: size-8')"></ftui-icon></ftui-button></td>
    </tr>
    <tr height="70px" align="center">
      <td><ftui-label size="4">verschlossen</ftui-label></td>
      <td><ftui-label size="4">entriegelt</ftui-label></td>
      <td><ftui-label size="4">offen</ftui-label></td>
    </tr>
  </table>
      </ftui-grid-tile>
  </ftui-popup>

[mr_petz]

@stefan-dd
Eine Seite weiter vorn steht die Antwort auf deine Frage:
https://forum.fhem.de/index.php/topic,115259.msg1246689.html#msg1246689

LG

[Sailor]

Es muss nur ordentlich kommuniziert werden!

Das hoffe ich auch. Der WAF war erstmal im Keller!

Gruß
    Sailor

[fremitus]

Hallo zusammen,

wie bekomme ich die Funktion "@hold" ans Laufen? Ich hatte schon die Anmerkungen zu "popup-target" gelesen und dann mal mit @click rumgespielt, was soweit dann auch funktioniert. Nur möchte ich eben die Hold Funktion, also ein verzögertes Anzeigen der Popup Funktion, einrichten. Hier mein Code, der mit @click, mit @hold leider aber nicht....

Code Auswählen Erweitern

<ftui-grid-tile row="1" col="1" height="1" width="1" shape="round">
    <ftui-grid-header>Bulli Lampen</ftui-grid-header>
    <ftui-button (value)="MQTT2_myMQTT2" fill="none"  @hold="long_press.open()">
      <ftui-icon name="lightbulb" size="10" [color]="MQTT2_myMQTT2 | map('on:primary, off:medium')"></ftui-icon>
    </ftui-button>
  </ftui-grid-tile>

  <ftui-popup id="long_press">
    <header>LongPress Popup</header>
    <ftui-label>More settings after Long Press ...</ftui-label>
  </ftui-popup>

Gruss Peer

[mr_petz]

Wo soll die Funktion @hold herkommen?

[fremitus]

von der example Seite ....

-> https://knowthelist.github.io/ftui/www/ftui/examples/button.html

und dann der Source Code:

Code Auswählen Erweitern

<ftui-grid-tile row="4" col="4" height="1" width="1" shape="round">
      <ftui-grid-header>LONG PRESS</ftui-grid-header>
      <ftui-button [(value)]="GalerieLicht" fill="none" @hold="long_press.open()">
        <ftui-icon name="lightbulb" size="3" [color]="GalerieLicht | map('on:primary, off:medium')"></ftui-icon>
      </ftui-button>
    </ftui-grid-tile>

    <ftui-popup id="long_press" timeout="0">
      <header>LongPress Popup</header>
      <ftui-label>More settings after Long Press ...</ftui-label>
    </ftui-popup>

[mr_petz]

Ok ging an mir vorbei.
funktioniert bei mir...
Lange (0.5sec) drücken und das popup geht auf...
Hast du das Update schon gemacht?
Und am besten auch den Cache vom Browser leeren...

LG

Edit:
Ahh... jetzt verstehe ich warum @setstate das popup-target eliminiert hat...

[fremitus]

thx, das hat geholfen ... es ist mein Bulli FHEM, da habe ich glatt noch keine Updates eingespielt....

[fremitus]

ich teste mich ja gerade durch....und bin über den "hueslider" gestolpert. Hierzu gab es auch schon mal einen Eintrag im Thread hier...leider ohne eine Antwort auf die Antwort von mr_petz, wenn ich es richtig gelesen habe.

hueSlider schmeisst leider nur "rgb: FFFFFF" raus (laut Logfile), egal wohin man klickt. Hier mein Code dazu:

Code Auswählen Erweitern

<ftui-colorpicker size="small" layout="hueSlider"
                (hex)="replace('#','') | MQTT2_myMQTT2:rgb"
                [hex]="MQTT2_myMQTT2:rgb">
                </ftui-colorpicker>

Tausche ich den hueSlider mit einem wheel aus (also einfach ohne Layout Definition), dann geht es.

Noch eine Randfrage: wie kann ich die Längen, Radien etc. der Wheels und Slider beeinflussen? Das "size" im Code bleibt ohne Auswirkung.

Gruss Peer

[mr_petz]

@fremitus
Ich zitiere mich mal für dein Belangen:

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

LG

[fremitus]

Hi mr_petz,

hmmm...ich habe ja jetzt nur den Slider alleine stehen und nicht mehr zwei Layouts in einem Element. Es ändert sich leider nicht.

Code Auswählen Erweitern

<ftui-popup position="page" width="300px" height="300px" id="long_press" timeout="0" --popup-border-radius: 0.5em>
    <header><b>Farbe</b></header>

    <ftui-colorpicker size="small" layout="hueSlider"
                (hex)="replace('#','') | MQTT2_myMQTT2:rgb"
                [hex]="MQTT2_myMQTT2:rgb">
                </ftui-colorpicker>
  </ftui-popup>

Meine von dir zitierte Frage konnte ich inzwischen so lösen:

Code Auswählen Erweitern

<ftui-popup position="page" width="300px" height="300px" id="long_press" timeout="0" --popup-border-radius: 0.5em>
    <header><b>Farbe</b></header>

    <ftui-colorpicker size="small"
                (hex)="replace('#','') | MQTT2_myMQTT2:rgb"
                [hex]="MQTT2_myMQTT2:rgb">
                </ftui-colorpicker>
    <ftui-colorpicker layout="valueSlider"
                [brightness]="MQTT2_myMQTT2:pct  | toInt()"
                (brightness)=" toInt() | MQTT2_myMQTT2:pct"
                </ftui-colorpicker>
  </ftui-popup>

[mkriegl]

Langsam komme ich mit dem Aufbau meines neuen Dashboards voran. Eine Sache die mir aufgefallen ist:

- Ich will beim Wert 0 und 1 die Tonne hüpfen lassen. Komischerweise hüpft sie auch beim Wert 11 - bei 12 nicht
- Zu dem zeige ich die aktuellen Resttage mit label an - gibt es da eine schönere Variante wie früher mit "warn"?

Code Auswählen Erweitern

<ftui-icon name="trash-o" size="3" color="blue"
[class-name]="myAbfall:Papiertonne | map('`0|1`:hop warn,`.*`:')">
<ftui-label [text]="myAbfall:Papiertonne"></ftui-label>
</ftui-icon>