FTUI version 3

[Dracolein]

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

[mr_petz]

Hi Stephan
Mal auf die schnelle.

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 | t=>this.element.textContent=t">-</tspan> W</text>


LG mr_petz

[Dracolein]

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:

Code Auswählen Erweitern


      <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>


[mr_petz]

@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:

Code Auswählen Erweitern


              <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

[Dracolein]

Danke, das hat geklappt.

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

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.

[mr_petz]

Kannst es mal testen. Einmal mit height="auto" und das gleiche mit style="height:auto;".
Sieht beides unterschiedlich aus.
height="auto" wird umgestrickt zu :

Code Auswählen Erweitern


flex: 0 0 auto;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;

Kann man in der Console sehen...
LG

[yersinia]

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.

[mr_petz]

Hi Stephan
Mal auf die schnelle.

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 | 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):

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 | this.element.textContent=text">-</tspan> W</text>

text kommt vom binding.

Edit:
Hier gehen nur keine weiteren pipes.
Wenn dann nur so. Bsp.:

Code Auswählen Erweitern


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()):

Code Auswählen Erweitern


ftui-binding [data-kc-val]="smartMeter2:power | slice(0,5) | t=>this.element.textContent=t"

alternativ so:

Code Auswählen Erweitern


ftui-binding [data-kc-val]="smartMeter2:power | ()=>this.element.textContent=text.slice(0,5)"


LG mr_petz

[Stephan.K]

@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

[C0mmanda]

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:

Code Auswählen Erweitern


      <!-- 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...

Code Auswählen Erweitern


      <!-- 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?

Code Auswählen Erweitern


      <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

[grossmaggul]

Hast Du mal in den Beispielen zum knob auf setstates git nachgesehen?

[C0mmanda]

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.

[mr_petz]

zu1: round() zieht nur bei Readings mit Kommastellen. (fügt keine Nachkommastelle hinzu). dazu fix() verwenden...
zu2: scroll ins label mit einfügen
zu3:

Code Auswählen Erweitern


        <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

[C0mmanda]

zu1: round() zieht nur bei Readings mit Kommastellen. (fügt keine Nachkommastelle hinzu)
zu2: scroll ins label mit einfügen
zu3:

Code Auswählen Erweitern


        <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 

Code Auswählen Erweitern


...
| replace('EG.sp.TK.Spielzimmer','Spielezimmer')"
        width="80%" scroll></ftui-label>
...


zu 3: Klasse, funktioniert!

Danke!

[mr_petz]

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