Autor Thema: FTUI version 3  (Gelesen 220591 mal)

Offline Dracolein

  • Sr. Member
  • ****
  • Beiträge: 500
Antw:FTUI version 3
« Antwort #2610 am: 22 September 2022, 19:13:54 »
Hey zusammen,

gibts eigentlich irgendwo eine dokumentierte Übersicht über mögliche Layout-Parameter zur optischen Ausrichtung verschiedener Elemente zueinander?
Die FTUI2 Dokumentation war sehr ausführlich.

Hintergrund:
Ich häng mein Problem als Bild einmal an.
Die gelb markierten Flächen sind unnötig freier Platz, den ich gern vermeiden möchte.
Die Zelle besteht aus 3 Spalten, die nebeneinander platziert sind.
Nun habe ich in der Spalte "Franziska" ein Heizungssymbol zusätzlich NEBEN das TV-Symbol plaziert und plötzlich zieht sich die ganze Spalte weiter auseinander sodass es doff ausschaut
(linke Spalte "Maximilian" - so sah es vorher aus und passte)

Kopfkratz...
Raspberry Pi 4 mit FHEM; FTUI Dashboard auf Asus 15,6" VT168H Touchscreen; ZigBee mit ConBee2 USB-Stick; div. Shelly 2.5; integr. Gaszähler mit ESP8266 & ESPEasy;

Offline mr_petz

  • Sr. Member
  • ****
  • Beiträge: 948
Antw:FTUI version 3
« Antwort #2611 am: 22 September 2022, 19:20:03 »
Hi Stephan
Mal auf die schnelle.
  <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 | t=>this.element.textContent=t">-</tspan> W</text>

LG mr_petz

Offline Dracolein

  • Sr. Member
  • ****
  • Beiträge: 500
Antw:FTUI version 3
« Antwort #2612 am: 22 September 2022, 20:38:57 »
Hey zusammen,

gibts eigentlich irgendwo eine dokumentierte Übersicht über mögliche Layout-Parameter zur optischen Ausrichtung verschiedener Elemente zueinander?
Die FTUI2 Dokumentation war sehr ausführlich.

Hintergrund:
Ich häng mein Problem als Bild einmal an.
Die gelb markierten Flächen sind unnötig freier Platz, den ich gern vermeiden möchte.
Die Zelle besteht aus 3 Spalten, die nebeneinander platziert sind.
Nun habe ich in der Spalte "Franziska" ein Heizungssymbol zusätzlich NEBEN das TV-Symbol plaziert und plötzlich zieht sich die ganze Spalte weiter auseinander sodass es doff ausschaut
(linke Spalte "Maximilian" - so sah es vorher aus und passte)

Kopfkratz...

Ich pack mal noch meinen Zellencode dabei:

      <ftui-grid-tile row="1" col="6" height="3" width="5">
        <header>Dachgeschoss</header>
        <ftui-row>
          <ftui-column>
              <ftui-label size="0"  popup-target="maximilian">Maximilian:</ftui-label>
              <ftui-row style="margin-top:-1em;">
              <ftui-button [(value)]="ShellyPlug3" shape="circle" class="size-1"
                    [color]="ShellyPlug3 | map('on:brown, off:dark')">
                <ftui-icon [name]="ShellyPlug3 | map('on:tv, off:tv')"
                    [color]="ShellyPlug3 | map('on:dark, off:light')"></ftui-icon>
              </ftui-button> 
              <ftui-button [(value)]="ShellyPlug6" shape="circle" class="size-1"
                    [color]="ShellyPlug6 | map('on:danger, off:dark')">
                <ftui-icon [name]="ShellyPlug6 | map('on:fire, off:fire')"
                    [color]="ShellyPlug6 | map('on:yellow, off:light')"></ftui-icon>
              </ftui-button>             
              </ftui-row>
             
              <ftui-button color="dark" popup-target="maximilian">
                <ftui-label [text]="RaumsensorMaxi_T:temperature | fix(0)" class="size-4" popup-target="maximilian"
                            [color]="RaumsensorMaxi_T:temperature | step('16: blue, 19:green, 23: orange, 25: red')">
                            <span class="size-1" slot="unit">°C</span></ftui-label>
              </ftui-button>
              <ftui-icon size="0" path="../images/openautomation"
                      [name]="HUESensor56 | map('open:fts_window_1w_tilt, closed:fts_window_1w')"
                      [class-name]="HUESensor56 | map('open:hop,closed:')"
                      [color]="HUESensor56 | map('open:danger, closed:medium')">
              </ftui-icon>
            </ftui-column>
          <ftui-column>
              <ftui-label size="0">Nachtlicht Flur:</ftui-label>
              <ftui-button [(value)]="HUEDevice3" shape="circle"
                             [color]="HUEDevice3 | map('on:brown, off:dark')">
                <ftui-icon name="moon" size="3"
                             [color]="HUEDevice3 | map('on:dark, off:light')"></ftui-icon>
              </ftui-button>
              <ftui-label size="0">Zeitplan:</ftui-label>
              <ftui-label [text]="Nachtlichtautomatik:timer_01_c01" size="0"
                          [hidden]="Nachtlichtautomatikschalter:state | map('on:false, off:true')"></ftui-label>
              <ftui-label [text]="Nachtlichtautomatik:timer_02_c02" size="0"
                          [hidden]="Nachtlichtautomatikschalter:state | map('on:false, off:true')"></ftui-label>
              <ftui-label size="0"
                          [hidden]="Nachtlichtautomatikschalter:state | map('on:true, off:false')">inaktiv</ftui-label>
          </ftui-column>
          <ftui-column>
              <ftui-label size="0" popup-target="franziska">Franziska:</ftui-label>
             
              <ftui-row style="margin-top:-1em;">
              <ftui-button [(value)]="ShellyPlug4" shape="circle" class="size-1"
                    [color]="ShellyPlug4 | map('on:brown, off:dark')">
                <ftui-icon [name]="ShellyPlug4 | map('on:tv, off:tv')"
                    [color]="ShellyPlug4 | map('on:dark, off:light')"></ftui-icon>
              </ftui-button>   
             
              <ftui-button [(value)]="ShellyPlug5" shape="circle" class="size-1"
                    [color]="ShellyPlug5 | map('on:danger, off:dark')">
                <ftui-icon [name]="ShellyPlug5 | map('on:fire, off:fire')"
                    [color]="ShellyPlug5 | map('on:yellow, off:light')"></ftui-icon>
              </ftui-button>
              </ftui-row>
                           
              <ftui-button color="dark" popup-target="franziska">
                <ftui-label [text]="RaumsensorFranzi_T:temperature | fix(0)" class="size-4" popup-target="franziska"
                            [color]="RaumsensorFranzi_T:temperature | step('16: blue, 19: green, 23: orange, 25: red')">
                            <span class="size-1" slot="unit">°C</span></ftui-label>
              </ftui-button>
              <ftui-icon size="0" path="../images/openautomation"
                      [name]="HUESensor55 | map('open:fts_window_1w_tilt, closed:fts_window_1w')"
                      [class-name]="HUESensor55 | map('open:hop,closed:')"
                      [color]="HUESensor55 | map('open:danger, closed:medium')">
              </ftui-icon>
          </ftui-column>
        </ftui-row>
      </ftui-grid-tile>
Raspberry Pi 4 mit FHEM; FTUI Dashboard auf Asus 15,6" VT168H Touchscreen; ZigBee mit ConBee2 USB-Stick; div. Shelly 2.5; integr. Gaszähler mit ESP8266 & ESPEasy;

Offline mr_petz

  • Sr. Member
  • ****
  • Beiträge: 948
Antw:FTUI version 3
« Antwort #2613 am: 22 September 2022, 21:30:13 »
@Draco

Es gibt:
margin
padding
height
width
und style=""
Edit:
für label gibt es noch
top
left
text-align

Du könntest folgendes im ftui-row testen:
              <ftui-label size="0" popup-target="franziska">Franziska:</ftui-label>           
              <ftui-row margin="0" padding="0" style="height:auto;">
hier muss height="auto" ins style, weil sonst das normale Attribute height="auto"
wird zu flex:0 0 auto
Bei mir sieht es gleichmäßig aus.

Des Weiteren könntest du es noch mit ner (in eine) ftui-cell versuchen (packen).

LG mr_petz
« Letzte Änderung: 22 September 2022, 22:09:07 von mr_petz »
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline Dracolein

  • Sr. Member
  • ****
  • Beiträge: 500
Antw:FTUI version 3
« Antwort #2614 am: 22 September 2022, 22:08:04 »
Danke, das hat geklappt.

margin="0" und "Padding="0" hatte ich im Vorfeld durchprobiert, ohne sichtbare Veränderung.

Zitat
hier muss height="auto" ins style, weil sonst das normale Attribute height="auto"
wird zu flex:0 0 auto
Das war mir neu. height="auto".  Deine Begründung habe ich nicht ganz nachvollzogen, seis drum; funktioniert perfekt.
Raspberry Pi 4 mit FHEM; FTUI Dashboard auf Asus 15,6" VT168H Touchscreen; ZigBee mit ConBee2 USB-Stick; div. Shelly 2.5; integr. Gaszähler mit ESP8266 & ESPEasy;

Offline mr_petz

  • Sr. Member
  • ****
  • Beiträge: 948
Antw:FTUI version 3
« Antwort #2615 am: 22 September 2022, 22:15:33 »
Kannst es mal testen. Einmal mit height="auto" und das gleiche mit style="height:auto;".
Sieht beides unterschiedlich aus.
height="auto" wird umgestrickt zu :
flex: 0 0 auto;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
Kann man in der Console sehen...
LG
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline yersinia

  • Hero Member
  • *****
  • Beiträge: 1417
    • Cyanide & Happiness
Antw:FTUI version 3
« Antwort #2616 am: 23 September 2022, 07:32:32 »
Genau das habe ich probiert, jedoch dann steht im tspan smartMeter2:power und nicht der Wert des readings.
Interessant, ich bin davon ausgegangen, dass ftui-content das binding ausliest und an den Inhalt weitergibt. Danke fürs Richtigstellen durch Test. :)
viele Grüße, yersinia
----
FHEM 6.1 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

Offline mr_petz

  • Sr. Member
  • ****
  • Beiträge: 948
Antw:FTUI version 3
« Antwort #2617 am: 23 September 2022, 11:58:37 »
Hi Stephan
Mal auf die schnelle.
  <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 | t=>this.element.textContent=t">-</tspan> W</text>

LG mr_petz

Nachtrag:
Es geht auch noch einwenig anders ohne Pfeilfunktion (was nun besser ist musst du für Dich entscheiden):
  <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 | this.element.textContent=text">-</tspan> W</text>
text kommt vom binding.

Edit:
Hier gehen nur keine weiteren pipes.
Wenn dann nur so. Bsp.:
this.element.textContent=String(text).slice(0,5)

Bei der Pfeilfunktion muss man die anderen pipes die man benötigt voran setzen.

Edit2:
Upsss
In der 2. Variante kommt eine Fehlermeldung im log. Funktioniert zwar, aber würde ich da nicht so verwenden... Sorry.
Pfeilfunktion ist hier besser (hier mit der pipe slice()):
ftui-binding [data-kc-val]="smartMeter2:power | slice(0,5) | t=>this.element.textContent=t"
alternativ so:
ftui-binding [data-kc-val]="smartMeter2:power | ()=>this.element.textContent=text.slice(0,5)"

LG mr_petz
« Letzte Änderung: 23 September 2022, 15:36:34 von mr_petz »

Offline Stephan.K

  • New Member
  • *
  • Beiträge: 32
Antw:FTUI version 3
« Antwort #2618 am: 23 September 2022, 14:43:28 »
@mr_petz

Vielen Dank für die Ausführungen.
Werde deine zweite Variante primär Einsetzen.
Meine eigene Pipe Funktion werde ich nur da verwenden wo ich auch Texte übersetzen bzw weitere Anpassungen per JS machen muß.

MfG Stephan
NUC 7 i3 mit Proxmox | FHEM LXC mit FTUI2 & FTUI3 | MariaDB LXC | DebMatic VM | Grafana LXC | Mosquitto LXC | NodeRed LXC | ...

Offline C0mmanda

  • Sr. Member
  • ****
  • Beiträge: 511
Antw:FTUI version 3
« Antwort #2619 am: 26 September 2022, 08:18:43 »
Hallo,

versuche meine FTUI2 Oberfläche auf FTUI3 umzustellen.
Fange gerade erst an mich da wieder einzuarbeiten, hänge aber gleich mal fest.. :(

1. Wie bekomme ich es hin im knob-value und im label eine Dezimalstelle anzuzeigen?
Sämtliche Versuche mit round(1) oder decimals="1" oder komplett ohne eine Angabe schlagen fehl, mehr Varianten konnte ich bisher
nicht ergooglen... :(
Ich habe immer keine Dezimalstelle.
Mein aktueller Code dazu:
      <!-- Temp Küche-->
      <ftui-grid-tile row="3" col="2" height="2" width="3" shape="round">
          <header>Küche</header>
    <ftui-row>
    <ftui-column>
        <ftui-knob [value]="EG.ku.TF.Kueche:temperature | round(1) "
                   [color]="EG.ku.TF.Kueche:temperature | step('0: primary, 18: ok, 20: yellow, 22: orange, 30: danger')"
                   width="140" offset-y="10"
                   type="handle" min="16" max="25" unit="°C" readonly has-value-text></ftui-knob>
        </ftui-column>
        <ftui-column>
          <ftui-label [text]="EG.ku.TF.Kueche:humidity | round(1) " unit="%" size="7">
          </ftui-label>
        </ftui-column>
    </ftui-row>
    </ftui-grid-tile>

2. Wie kann ich einen Zeilenumbruch bei der Anzeige der offenen Fenster erzwingen? Aktuell laufen sie rechts aus dem tile...
      <!-- FENSTER -->
      <ftui-grid-tile row="6" col="8" height="2" width="2"
                      [color]="Homemode:contactsWindowsOpen_ct | map('0:ok, `.*`:danger')">
        <header>Fenster</header>   
        <ftui-icon name="classic-window" size="3"></ftui-icon>
        <ftui-label [text]="Homemode:contactsWindowsOpen
          | replace('OG.ba.TK.Badezimmer','Bad')
          | replace('OG.sz.TK.FensterSZ','Schlafzimmer')
          | replace('EG.sp.TK.Spielzimmer','Spielezimmer')"
        width="80%" scroll></ftui-label>
      </ftui-grid-tile>

Eine dritte Frage:
Wie kann ich beim Segmented-button mir nur den Status des Devices anzeigen lassen, ihn aber nicht "klickbar" einstellen?

      <ftui-grid-tile row="10" col="2" height="1" width="6">
          <header>Homemode</header>
        <ftui-segment [(value)]="rgr_Home">
          <ftui-segment-button value="home">
            <ftui-icon name="home"></ftui-icon>
          </ftui-segment-button>
          <ftui-segment-button value="asleep">
            <ftui-icon name="bed"></ftui-icon>
          </ftui-segment-button>
          <ftui-segment-button value="absent">
            <ftui-icon name="road"></ftui-icon>
          </ftui-segment-button>
          <ftui-segment-button value="gone">
            <ftui-icon name="plane"></ftui-icon>
          </ftui-segment-button>
        </ftui-segment>
      </ftui-grid-tile>

Vielen Dank bis dahin :)

Gruß
Sascha
« Letzte Änderung: 26 September 2022, 08:32:21 von C0mmanda »

Offline grossmaggul

  • Sr. Member
  • ****
  • Beiträge: 645
    • Mein Blog
Antw:FTUI version 3
« Antwort #2620 am: 26 September 2022, 14:46:54 »
Hast Du mal in den Beispielen zum knob auf setstates git nachgesehen?
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1, 1 x IT-3000

Offline C0mmanda

  • Sr. Member
  • ****
  • Beiträge: 511
Antw:FTUI version 3
« Antwort #2621 am: 26 September 2022, 15:02:28 »
Hast Du mal in den Beispielen zum knob auf setstates git nachgesehen?

Ja habe ich natürlich reingeschaut, da finde ich aber nichts, bzw ist dort überhaupt kein Parameter angegeben (wie in meinem Code) und es werden Dezimalstellen
angezeigt. Bei mir jedoch nicht, obwohl sie im Reading enthalten sind.


Offline mr_petz

  • Sr. Member
  • ****
  • Beiträge: 948
Antw:FTUI version 3
« Antwort #2622 am: 26 September 2022, 15:23:27 »
zu1: round() zieht nur bei Readings mit Kommastellen. (fügt keine Nachkommastelle hinzu). dazu fix() verwenden...
zu2: scroll ins label mit einfügen
zu3:         <ftui-segment [(value)]="rgr_Home" style="pointer-events:none;">
          <ftui-segment-button value="home">
            <ftui-icon name="home"></ftui-icon>
          </ftui-segment-button>
          <ftui-segment-button value="asleep">
            <ftui-icon name="bed"></ftui-icon>
          </ftui-segment-button>
          <ftui-segment-button value="absent">
            <ftui-icon name="road"></ftui-icon>
          </ftui-segment-button>
          <ftui-segment-button value="gone">
            <ftui-icon name="plane"></ftui-icon>
          </ftui-segment-button>
        </ftui-segment>

Edit: hier sind alle pipes zu sehen:
https://github.com/knowthelist/ftui/blob/master/www/ftui/modules/ftui/ftui.binding.js#L6

LG mr_petz
« Letzte Änderung: 26 September 2022, 15:31:28 von mr_petz »

Offline C0mmanda

  • Sr. Member
  • ****
  • Beiträge: 511
Antw:FTUI version 3
« Antwort #2623 am: 26 September 2022, 15:30:46 »
zu1: round() zieht nur bei Readings mit Kommastellen. (fügt keine Nachkommastelle hinzu)
zu2: scroll ins label mit einfügen
zu3:         <ftui-segment [(value)]="rgr_Home" style="pointer-events:none;">
          <ftui-segment-button value="home">
            <ftui-icon name="home"></ftui-icon>
          </ftui-segment-button>
          <ftui-segment-button value="asleep">
            <ftui-icon name="bed"></ftui-icon>
          </ftui-segment-button>
          <ftui-segment-button value="absent">
            <ftui-icon name="road"></ftui-icon>
          </ftui-segment-button>
          <ftui-segment-button value="gone">
            <ftui-icon name="plane"></ftui-icon>
          </ftui-segment-button>
        </ftui-segment>

LG mr_petz

Vielen Dank!

zu 1: Naja das reading HAT ja eine Kommastelle?! (Knob zeigt im Bild "19" an, der tatsächliche Wert im reading ist "19.1" gewesen.

zu 2: scroll ist im label angegeben  :o
...
| replace('EG.sp.TK.Spielzimmer','Spielezimmer')"
        width="80%" scroll></ftui-label>
...

zu 3: Klasse, funktioniert! :)

Danke!

Offline mr_petz

  • Sr. Member
  • ****
  • Beiträge: 948
Antw:FTUI version 3
« Antwort #2624 am: 26 September 2022, 15:33:18 »
zu 1: fix() verwenden.
habe es oben hinzugefügt...

scroll muss ich mal anschauen...
Edit: füge für scroll bei deinen Kommas ein Leerzeichen mit ein, sonst kann er es nicht umbrechen...

LG
« Letzte Änderung: 26 September 2022, 15:45:35 von mr_petz »