FTUI version 3

[presskopf]

@presskopf, @hackepeter

Ich habe den Beitrag gefunden (ist von Januar 2021):
https://forum.fhem.de/index.php/topic,115259.msg1125250.html#msg1125250

Ich habe es auch so in der Art umgesetzt.
LG mr_petz

Echt cool!
Ich versuche das gerade auf einen tab-view zu portieren.
mit dem @click klappt es prima, den Dummy mit der neuen URL zu füttern.
Wenn ich den tab-view verlasse, dann muss ich es mit einem anderen Tab-View-Icon entsprechend steuern.
Gibt es auch eine Möglichkeit à la @Verlassen-des-aktuellen-tab-view="sendFhem ..." ?

[setstate]

Code Auswählen Erweitern


        <ftui-tab view="View3" (value)="dummy1">
          <ftui-label size="5">Tab3</ftui-label>
        </ftui-tab>


Bei Anwählen von Tab3 wird 'on' an dummy1 gesendet. Beim Verlassen 'off'

[presskopf]

Danke.
Mittels dummy1 und einem doif kriege ich den URL-Dummy prima gefüttert!

[presskopf]

@setstate
Das hast Du doch gerade eben - on the fly - eingebaut, oder?
War nämlich gerade am verzweifeln, weil meine Produktiv- und Test-Installation nicht identisch liefen! Ein Update hat's gefixt. 

[misux]

Sagemal, welche Vorteile hat FTUI 3 eigentlich gegenüber der 2er? Außer das es Edler aussieht und Moderner ist...?

[mr_petz]

Sagemal, welche Vorteile hat FTUI 3 eigentlich gegenüber der 2er? Außer das es Edler aussieht und Moderner ist...?

Nicht falsch verstehen, aber die Vorteile stehen hier in den 131 langen Thread .
mpm
LG mr_petz

[curt]

Ich wünsche allen vor allem Gesundheit im neuen Jahr!
(Und meinen sehr freundlichen Helfer @mr_petz grüße ich ganz besonders, danke!)

[Pause zum Jahreswechsel machen]

Das machst du richtig!

Back on stage.

Deswegen hatte ich auch schon erwähnt dass das Meiste schon im Thread steht.

Kein Mensch liest sich jedesmal 120 Seiten durch. Daher @setstate @rudolfkoenig
Wäre ein eigenes Unterforum für ftui3 nicht viel sinnvoller? Da kann es dann Threads für die einzelnen Elemente geben - es kann doch nicht wirklich sinnvoll sein, dass jeder das Rad neu erfindet.

Ich weiss es trotzdem nicht genau was du willst. Kannst du es genauer Beschreiben?
@click hatte ich hier schon mehrfach erwähnt.

Dafür habe ich eine Lösung gefunden (die vielleicht nicht so gedacht war) und gleich mal einen Bug dazu @setstate. Ich fange von vorne an:

Wir reden über das Kacheldesign, links senkrecht untereinander die Icons, die bei Klick auf die "Unterseiten" verzweigen. Nun möchte ich es so haben, dass zusätzlich ein Klick auf ein Icon in einer beliebigen Kachel eine konkrete vorhandene Unterseite aufgerufen wird.

Die Kachel mit dem Fenstersymbol soll bei Klick auf die 'Seite' "View2" führen, das ist das konkrete Ziel.

Ohne Verlinkung ist der Code so (und das Ergebnis im ersten Bild):

Code Auswählen Erweitern


     <ftui-grid-tile row="1" col="2" height="1" width="1" color="black">
          <ftui-column>
           <ftui-label>Fenster</ftui-label>
          </ftui-column>
          <ftui-column>
              <ftui-icon class="size-4" [name]=" structure_Fenster | map('open: window-open, closed: window-closed')"
                 [color]="structure_Fenster | map('open:my_signalred, closed:my_signalgreen')"
                         interval="60" nocache></ftui-icon>
          </ftui-column>
      </ftui-grid-tile>


Mit Verlinkung ist der Code so (und das Ergebnis im zweiten Bild):

Code Auswählen Erweitern


      <ftui-grid-tile row="1" col="2" height="1" width="1" color="black">
          <ftui-column>
           <ftui-label>Fenster</ftui-label>
          </ftui-column>
          <ftui-column>
           <ftui-tab view="View2" direction="vertical">
              <ftui-icon class="size-4" [name]=" structure_Fenster | map('open: window-open, closed: window-closed')"
                 [color]="structure_Fenster | map('open:my_signalred, closed:my_signalgreen')"
                         interval="60" nocache></ftui-icon>
           </ftui-tab>
          </ftui-column>
      </ftui-grid-tile>


Nun funktioniert der 'Link' sehr schön - aber mir hat es die Gestaltung zerhauen, "size-4" wird offensichtlich nicht mehr umgesetzt. Ist das ein Bug?

Nachtrag, Verständnisfragen:
Also 'interval="60"' sorgt offenbar dafür, dass der Status der Summe aller meiner Fenster alle 60 Sekunden erneuert wird, richtig?

Aber was bewirkt die Anwesenheit bzw. Abwesenheit von 'nocache' genau?

[curt]

Mit Knob stehe ich leider auch noch auf dem Kriegsfuß, da gibt es (aus meiner bescheidenen Sicht) mehrere Formatierungsprobleme.

Basis (Größe der Kachel) ist

Code Auswählen Erweitern


  <ftui-grid base-width="96" base-height="86" margin="4">


Bei der linken Kachel sieht die Skala ganz schön aus - aber da kriege ich den Text nicht drunter:

Code Auswählen Erweitern


      <ftui-grid-tile row="2" col="6" height="1" width="1" color="black">
       <ftui-row>
        <ftui-knob [value]="Temperatur_Blumen_Flur:temperature"
                   [color]="Temperatur_Blumen_Flur:temperature | step('-25:my_darkred,0:my_darkblue,17:blue,21:my_signalgreen,25:my_signalorange,30:my_darkred')"
               height="90" width="90" offset-y="10" has-arc min="-20" max="40" unit="°C" readonly
               interval="60" nocache
               has-value-text value-size="20px" stroke-width="6" decimals="1" class="size-1 bold">
        </ftui-knob>
       </ftui-row>
       <ftui-row>
        <ftui-label>Flur</ftui-label>
       </ftui-row>
      </ftui-grid-tile>


Bei der rechten Kachel klappt das, weil ich die Größe von Knob auf 65x65 setzte - aber das sieht Sheiße aus:

Code Auswählen Erweitern


      <ftui-grid-tile row="2" col="8" height="1" width="1" color="black">
       <ftui-row>
        <ftui-knob [value]="Gewaechshaus:temperature"
               [color]="Gewaechshaus:temperature | step('-25:my_darkred,0:my_darkblue,17:blue,21:my_signalgreen,25:my_signalorange,30:my_darkred')"
               height="65" width="65" offset-y="10" has-arc min="-20" max="40" readonly
               interval="60" nocache
               has-value-text value-size="20px" stroke-width="6" decimals="1" class="size-1 bold">
        </ftui-knob>
       </ftui-row>
       <ftui-column>
        <ftui-label>Gewächshaus</ftui-label>
       </ftui-row>
      </ftui-grid-tile>


Kriegt man das irgendwie besser hin? Also optisch wie links, aber den unten stehenden Text noch sichtbar?

Zusatzfrage:
'decimals="1"' soll ja theoretisch eine Nachkommastelle bringen. Aber warum wird die mir bei Knob nicht angezeigt? Mache ich da was falsch?

[OdfFhem]

Nun funktioniert der 'Link' sehr schön - aber mir hat es die Gestaltung zerhauen, "size-4" wird offensichtlich nicht mehr umgesetzt. Ist das ein Bug?

Nachtrag, Verständnisfragen:
Also 'interval="60"' sorgt offenbar dafür, dass der Status der Summe aller meiner Fenster alle 60 Sekunden erneuert wird, richtig?

Aber was bewirkt die Anwesenheit bzw. Abwesenheit von 'nocache' genau?

"icon" unterstützt selbst auch ein Attribut namens size; hier kann die gewünscht Größe angegeben werden: z.B. aus class="size-4" könnte dann size="4" werden - wohlgemerkt im "ftui-icon"-Tag.

"icon" unterstützt weder interval noch nocache - "image" natürlich schon, da man ja z.B. auf "externe", sich ständig ändernde Bilder zurückgreift.

Laut Deinem Beispiel wird autom. dann aktualisiert, wenn structure_Fenster ein EVENT auslöst.


Die von @setstate bereitgestellten Beispiele vermitteln einen ungefähren Überblick, daher lohnt ein Blick ...

[OdfFhem]

Kriegt man das irgendwie besser hin? Also optisch wie links, aber den unten stehenden Text noch sichtbar?

Zusatzfrage:
'decimals="1"' soll ja theoretisch eine Nachkommastelle bringen. Aber warum wird die mir bei Knob nicht angezeigt? Mache ich da was falsch?

Ich nutze das ungefähr nach folgendem Muster:

Code Auswählen Erweitern


      <ftui-row height="80%" color="yellow">
        <ftui-knob [value]="Temperatur_Blumen_Flur:temperature"
                   [color]="Temperatur_Blumen_Flur:temperature | step('-25:my_darkred,0:my_darkblue,17:blue,21:my_signalgreen,25:my_signalorange,30:my_darkred')"
               height="90" width="90" offset-y="10" has-arc min="-20" max="40" unit="°C" readonly
               interval="60" nocache
               has-value-text value-size="20px" stroke-width="6" decimals="1" class="size-1 bold">
        </ftui-knob>
      </ftui-row>
      <ftui-row height="20%" color="red">
        <ftui-label>Flur</ftui-label>
      </ftui-row>


Die color-Angabe im ftui-row-Tag ist natürlich nur zur Anschauung und hat im echten Leben keine Bedeutung.
Die height-Angabe im ftui-row-Tag hingegen ist wichtig, sobald sie in einem der beiden ftui-row-Tags fehlt, verliert man die Kontrolle. Hat man sie in beiden ftui-row-Tags, nimmt der obere Teil 80% und der untere 20% des verfügbaren Platzes ein.

Bzgl. decimals="1": Ich verwende nicht die allerneueste Fassung von FTUI3 und da funktioniert es so, wie Du es Dir vorstellst. Also, egal ob ich keine oder zehn Nachkommastellen anlliefere, die Anzeige hat genau eine Nachkommastelle. Entweder Bug oder mittlerweile andere Funktionsweise - dunkel erinnere ich mich da ...

[curt]

Ich nutze das ungefähr nach folgendem Muster:

Danke, teste ich nachher.

Bzgl. decimals="1": Ich verwende nicht die allerneueste Fassung von FTUI3

Ich hatte ja rumgemault, dass Nachkommastellen konzeptgemäß eigentlich in die Pipe und damit in round(x) gehören. @setstate hatte dazu allgemein und sybillisch reagiert - mag sein, er schraubt(e) da nun rum.

Also, egal ob ich keine oder zehn Nachkommastellen anlliefere, die Anzeige hat genau eine Nachkommastelle. Entweder Bug oder mittlerweile andere Funktionsweise - dunkel erinnere ich mich da ...

Ich würde mal von Bug ausgehen wollen - als ich anfing, war die Nachkommastelle noch da ... meine ich.

[curt]

"icon" unterstützt selbst auch ein Attribut namens size

Ahhh - danke!

Laut Deinem Beispiel wird autom. dann aktualisiert, wenn structure_Fenster ein EVENT auslöst.

Das tut es.
(Das Icon ist grün, wenn sämtliche Fenster geschlossen ist. Wenn eins [oder mehrere] offen sind, ist es rot.)

Die von @setstate bereitgestellten Beispiele vermitteln einen ungefähren Überblick, daher lohnt ein Blick ...

... um einen Blick auf Javascript-Fehler zu nehmen. Aber ok, ist Beta.

Um da noch einen Schritt weiterzukommen:
Die Struktur header ist insoweit klar, als das sie oben steht. Aber kann ich da auch dafür sorgen, dass der Hintergrund dem Hintergrund der Kachel entspricht? Und kann ich die Schrift manipulieren, also beispielsweise nicht fett? Oder kleiner oder so?

Geil wäre natürlich auch eine Struktur footer. @setstate

[OdfFhem]

Um da noch einen Schritt weiterzukommen:
Die Struktur header ist insoweit klar, als das sie oben steht. Aber kann ich da auch dafür sorgen, dass der Hintergrund dem Hintergrund der Kachel entspricht? Und kann ich die Schrift manipulieren, also beispielsweise nicht fett? Oder kleiner oder so?

Geil wäre natürlich auch eine Struktur footer. @setstate

style- und/oder class-Attribut hilft im Zweifel weiter ...

Code Auswählen Erweitern


  <header style="background-color:inherit !important;" class="size-6 thin"></header>


Es gibt auch ein footer-Tag ... allerdings funktioniert es in meinem (nicht aktuellen) Stand nicht richtig:

Code Auswählen Erweitern


  <footer style="color:green;">Ich bin ein Footer</footer>


[setstate]

Mit Knob stehe ich leider auch noch auf dem Kriegsfuß, da gibt es (aus meiner bescheidenen Sicht) mehrere Formatierungsprobleme.

Basis (Größe der Kachel) ist

Code Auswählen Erweitern


  <ftui-grid base-width="96" base-height="86" margin="4">


Du gibst deiner Kachel nur 96x86 Pixel und der Knob bekommt davon 90x90. Für das Label bleibt da echt nicht wirklich viel Rest-Platz übrig. Da kommt man nur mit Pixelschubserei weiter.

Code Auswählen Erweitern

margin="-18px 0 0 0" unit-offset-y="13" value-offset-y="-5"

Dafür habe ich jetzt unit-offset-y und value-offset-y eingeführt.

Code Auswählen Erweitern


  <ftui-grid base-width="96" base-height="86" margin="4">

  <ftui-grid-tile row="2" col="6" height="1" width="1">

     <ftui-knob value="-1.44453"
            value-decimals="1"   
            height="90" width="90" offset-y="10" has-arc min="-20" max="40" unit="°C" readonly
            margin="-18px 0 0 0" unit-offset-y="13" value-offset-y="-5"
            has-value-text value-size="18px" stroke-width="6" class="bold">
     </ftui-knob>

     <ftui-label margin="-20px 0 0 0">Flur</ftui-label>

   </ftui-grid-tile>

  </ftui-grid>


decimals wurde ersetzt durch value-decimals und scale-decimals

[mr_petz]

@setstate
mir ist gerade aufgefallen, dass das hbus.svg nicht mehr im branch existiert und du das ehemals  refresh1.svg in refresh.svg umbenannt hast.
Jetzt kommt ein Fehler auf der Departure Demo.
Ich habe da mal ein pull request angestoßen
LG mr_petz

Edit: oh misst. vertippt.. (renamed)