FTUI version 3

[StephanFHEM]

klappt super! Dank dir.

hab jetzt nur noch Ausrichtungs-Probleme. In einem anderen Fall hab ich Columns in einer Reihe angeordnet und das funktioniert prima.
Jetzt geht das aber nicht wg. den Icons wg. der unterscheidlichen Größe (die Column ist länger und etwas verschoben). Daher hab ich jetzt einzelne Reihen gemacht.
Das klappt auch soweit aber sie lassen sich nicht Top align.. egal was ich mache.

Jemand eine Idee?

[setstate]

Schau mal im Grid Example nach. Man kann bei Column und Row die Attribute

align-items und
margin
padding

setzen

Code Auswählen Erweitern


    <ftui-grid-tile row="4" col="4" height="4" width="3">
      <header>TABLE</header>
      <ftui-row>
        <ftui-column width="40%"  align-items="top" padding="2">
          <ftui-icon name="smile-o" color="green" size="-3"></ftui-icon>
          <ftui-icon name="meh-o" color="yellow"  size="-3"></ftui-icon>
          <ftui-icon name="frown-o" color="red"  size="-3"></ftui-icon>
        </ftui-column>
        <ftui-column>
          <ftui-label> name="smile-o" size="-3"</ftui-label>
          <ftui-label> name="meh-o" size="-3"</ftui-label>
          <ftui-label> name="frown-o" size="-3"</ftui-label>
        </ftui-column>
      </ftui-row>
    </ftui-grid-tile>


Das ganze Fein-Verschieben kann man sich aber sparen, wenn die Element, die gleich ausgerichtet sein sollen, sich in der gleichen Row (für vertikale Ausrichtung) oder in der gleichen Column (für horizontale Ausrichtung) befinden.

Siehe hier mein letztes Beispiel nur Column und Row vertauscht. Dadurch bleibt der rechte Text auf der gleichen Höhe, wie das größere Icon.

Code Auswählen Erweitern


    <ftui-grid-tile row="8" col="4" height="4" width="3">
      <header>TABLE</header>
      <ftui-column>
        <ftui-row>
          <ftui-icon name="smile-o" color="green" margin="1" size="3"></ftui-icon>
          <ftui-label> name="smile-o" size="-3"</ftui-label>
        </ftui-row>
        <ftui-row>
          <ftui-icon name="meh-o" color="yellow" margin="1" size="-3"></ftui-icon>
          <ftui-label> name="meh-o" size="-3"</ftui-label>
        </ftui-row>
        <ftui-row> 
          <ftui-icon name="frown-o" color="red" margin="1" size="-3"></ftui-icon>
          <ftui-label> name="frown-o" size="-3"</ftui-label>
        </ftui-row>
      </ftui-column>
    </ftui-grid-tile>


Nachtrag:

man kann aber auch den kleineren Icons in einer Column etwas padding oben und unten geben, damit sie in Summe dem großen Icon hoch sind.

Code Auswählen Erweitern


    <ftui-grid-tile row="4" col="4" height="4" width="3">
      <header>TABLE</header>
      <ftui-row>
        <ftui-column width="40%">
          <ftui-icon name="smile-o" color="green" size="3"></ftui-icon>
          <ftui-icon name="meh-o" padding="1rem 0" color="yellow" size="-3"></ftui-icon>
          <ftui-icon name="frown-o" padding="1rem 0" color="red" size="-3"></ftui-icon>
        </ftui-column>
        <ftui-column>
          <ftui-label> name="smile-o" size="-3"</ftui-label>
          <ftui-label> name="meh-o" size="-3"</ftui-label>
          <ftui-label> name="frown-o" size="-3"</ftui-label>
        </ftui-column>
      </ftui-row>
    </ftui-grid-tile>


[StephanFHEM]

hmm .... .hab ich aber auch schon alles probiert... vielleicht sehe ich auch einfach den Wald vor lauter Bäumen nicht...

hier mein Code und wie es aussieht:

Code Auswählen Erweitern

        <ftui-grid-tile row="1" col="1" height="4" width="5" color="blue-translucent">
          <header class="size-0">Sicherheit</header>     
          <ftui-column align-items="top">
            <ftui-row align-items="top">
              <ftui-label color="white" class="size-2 bold" width="40%">Name</ftui-label>
              <ftui-label color="white" class="size-2 bold" width="25%" align="center">Status</ftui-label>
              <ftui-label color="white" class="size-2 bold" width="35%">seit....</ftui-label>
            </ftui-row>
            <ftui-row align-items="top">
              <ftui-label color="white" class="size-2" [text]="Fensterstatus:001_device" width="40%"></ftui-label>
              <ftui-cell width="25%"><ftui-icon [name]="Fensterstatus:001_state | map('open: fts_window_1w_open, close: fts_window_1w')" color="orange" size="-2"></ftui-icon></ftui-cell>
              <ftui-label color="white" class="size-2" [text]="Fensterstatus:001_age" width="35%"></ftui-label>
            </ftui-row>
            <ftui-row>
              <ftui-label color="white" class="size-2" [text]="Fensterstatus:002_device" width="40%"></ftui-label>
              <ftui-cell width="25%"><ftui-icon [name]="Fensterstatus:002_state | map('open: fts_window_1w_open, close: fts_window_1w')" color="orange" size="-2"></ftui-icon></ftui-cell>
              <ftui-label color="white" class="size-2" [text]="Fensterstatus:002_age" width="35%"></ftui-label>
            </ftui-row>
          </ftui-column>

Das Cell um das Icon musste ich übrigens einsetzen weil er das width 25% direkt im Icon nicht geschluckt hat
Beim Updaten kommt übrigens eine Fehlermeldung: "021.10.02 20:31:31 1 : Got 5065 bytes for www/ftui/examples/icon.html, expected 5038" ... evnt muss da noch etwas angepasst werden?

[meier81]

Hallo und guten Morgen,

wollte heute morgen mein FHEM auf den aktuellen Stand bringen, das Update meckert aber bei den Änderungen von gestern. Hier mal der LOG-Auszug:

Code Auswählen Erweitern

2021.10.03 08:15:43.314 1 : Downloading https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
2021.10.03 08:15:43.315 1 :
2021.10.03 08:15:43.316 1 : ftui
2021.10.03 08:15:43.388 1 : UPD www/ftui/components/button/button.component.css
2021.10.03 08:15:43.403 1 : UPD www/ftui/components/element.component.js
2021.10.03 08:15:43.415 1 : UPD www/ftui/components/grid/grid.component.js
2021.10.03 08:15:43.427 1 : UPD www/ftui/components/icon/icon.component.js
2021.10.03 08:15:43.439 1 : UPD www/ftui/components/knob/knob.component.js
2021.10.03 08:15:43.451 1 : UPD www/ftui/components/label/label.component.js
2021.10.03 08:15:43.493 1 : UPD www/ftui/examples/contents/content-components.html
2021.10.03 08:15:43.494 1 : UPD www/ftui/examples/icon.html
2021.10.03 08:15:43.495 1 : Got 5065 bytes for www/ftui/examples/icon.html, expected 5038
2021.10.03 08:15:43.495 1 : aborting.

Denke da passt wohl was nicht bezüglich der Dateigrösse.

Ich habe auch mal einen Pull-Request für das Problem mit der Datumsanzeige bei GitHub eingestellt, Quelle war von yersinia, siehe hier:

Ja, das liegt an dem Sekunden replacement in der ftui.helper.js. Analog zum März/Mai-Problem kannst du dies umgehen durch unicode; ersetze Zeile 185 durch diese:

Code Auswählen Erweitern

  const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];

Und der Vollständigkeit halber, Zeilen 185+186:

Code Auswählen Erweitern

  const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];


Und für September, November und Dezember:

Code Auswählen Erweitern

  const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'Dece%#109;ber'];

Gruß Markus

[setstate]

Merge ist gemacht und Controlfile Fehler ist behoben.

[StephanFHEM]

lief nun ohne Probleme durch bei mir....

den Fehler mit dem aling-items="top" hab ich jetzt wieder genau so auf der nächsten Seite mit einer Liste von Heizungs-Thermostaten....
Jetzt muss ich da nur noch eine Lösung finden und einer müsste sich erbarmen und das weekprofile-widget von FTUI2 umsetzen;-)

und schon wieder der nächste Fehler... wenn ich den Button für Plus/Minus drücke sendet er nicht nur einmal den um 0.5 reduzierten Wert sondern macht daraus eine Dauerschleife. Er sendet also in Folge 21.0, 20.5, 20.0, 19.5 ... usw bis ich den Browser beende:-) nSieht jemand auf den ersten Blick was daran falsch ist?

Code Auswählen Erweitern

            <ftui-button [value]="{{device}}:desired-temp" (value)="add(-0.5) | {{device}}:desired-temp" states="$value" fill="">
              <ftui-icon size="-2" name="minus"></ftui-icon>
            </ftui-button>

[meier81]

Merge ist gemacht und Controlfile Fehler ist behoben.

Super, bei mir auch alles geklappt. Mercy mal.

[StephanFHEM]

hab jetzt noch mal mit der Add-Pipe gespielt und in FHEM ein Dummy mit einfachem Zähler angelegt. Das Verhalten bleibt immer das selbe. Man klickt einmal drauf und er zählt dauerhaft hoch. Hab es auch in meiner Haupt-Index-Seite benutzt um andere Fehler auszuschließen aber auch dort das gleiche Verhalten. Mich wundert etwas, dass andere bisher nicht auf diesen Fehler gestoßen sind... vielleicht mache ich auch etwas fundamentales verkehrt...

hier nochmal der vereinfachte Code der den Fehler erzeugt:

Code Auswählen Erweitern

          <ftui-button [value]="Test:zaehler" (value)="add(1) | Test:zaehler" states="$value" fill="">
              <ftui-icon size="-2" name="plus"></ftui-icon>
           </ftui-button>

nochmal geändert mit setreading.. aber gleicher Fehler.... kann den Button evnt. mal jemand ausprobieren, ob das Verhalten nur bei mir zu beobachten ist? Man muss quasi nur ein "define Test dummy" und ein "setreading Test zaehler 1" in FHEM eingeben und dann den Button in FTUI3 reinsetzen. Nehmt aber eine extra Instanz des Browsers da sich der Browser ggf. aufhängt und so noch beendet werden kann...

Code Auswählen Erweitern

           <ftui-button [value]="Test:zaehler" (value)="add(1) | setreading Test zaehler $value" states="$value" fill="">
              <ftui-icon size="-2" name="plus"></ftui-icon>
           </ftui-button>

[mr_petz]

...
Mich wundert etwas, dass andere bisher nicht auf diesen Fehler gestoßen sind... vielleicht mache ich auch etwas fundamentales verkehrt...
...

Hilft dir nicht wirklich weiter, aber ich habe bei mir noch ne ältere ftui3 (03.2021) Version, da ist das Verhalten mit deinen Settings normal...
Muss sich setstate anschauen.

[setstate]

Bin dabei. Bei der Loop Erkennung hatte ich was geändert und dieser Fall funktioniert jetzt nicht mehr.

[StephanFHEM]

Bin dabei. Bei der Loop Erkennung hatte ich was geändert und dieser Fall funktioniert jetzt nicht mehr.

Super! War schon am verzweifeln.... gibt es eigentlich eine Möglichkeit, diesen tollen SegmentButton auch als Tab-View zu nutzen?

[setstate]

Hier habe ich mal zwei Tab-Segment Beispiel zusammengebaut:

1. mit Speichern in einem FHEM Reading

https://knowthelist.github.io/ftui/www/ftui/examples/tab-segment.html

2. nur lokal über script

https://knowthelist.github.io/ftui/www/ftui/examples/tab-segment-local.html

[StephanFHEM]

super vielen Dank dafür! das klappt wie gewünscht... allerdings dann leider doch noch nicht bei mir da ich das für ein Menü-Unterbaum nutzen wollte. Das scheint aktuell nicht zu funktionieren wie in FTUI2

Siehe https://forum.fhem.de/index.php/topic,115259.msg1140100.html#msg1140100

Edit: hab gerade noch ein Update gemacht und jetzt läuft das Menü im Menü!


By the way: wäre es möglich aus der Update-Prozedur die Index.html rauszunehmen? Er überschreibt immer wieder meine Seite;-)

[StephanFHEM]

Mein Problem mit der Darstellung besteht immer noch.... hab jetzt ein ähnliches Problem mit vertikal angeordneten Buttons in einem Feld.
Ich möchte diese zentriert haben (also align-items="center"). Das führt allerdings dazu, dass er die Icons mit gleichem Abstand auf die komplette Breite verteilt.

gibt es die Möglichkeit, dass man ohne viel gebastel die Buttons/Icons mittig anordnet mit einem bestimmten Abstand zueinander so dass je nach vorhandener Breite nur links und rechts der Rand wächst?
Mit margin bin ich da auch nicht weiter gekommen....

[StephanFHEM]

Ich habe eine Lösung für das Darstellungsproblem gefunden.
Wenn man die ganzen columns/rows in eine ftui-cell packt, dann nimmt er die komplette Standard-Formatierung raus und man kann die einzelnen Elemente mit Margin und co dahin rücken wo man sie haben möchte.