FTUI version 3

[juemuc]

Hi Curt,

ich finde das alles etwas durcheinander Mag aber auch an meinem Alter (nicht mehr ganz taufrisch) liegen 

Ich würde mir erst  einmal darüber Gedanken machen, was auf welcher Seite gezeigt werden soll. Ich habe z.B. alles nach Räumen gegliedert und diese kann ich über das Menü auswählen. Dann habe ich noch drei zusätzliche Seiten (Home - als Zusammenfassung, System - für Systemdaten und sonstiges.) Wenn ich dann etwas nicht unterbekomme (z.B. zu viele Heizkörper), arbeite ich mit Popups (siehe oben).
Alternativ kannst Du Dir aber auch mal dieses Beispiel ansehen https://knowthelist.github.io/ftui/www/ftui/examples/mobile_plain.html

Viele Grüße
Jürgen

[curt]

Das kann zu Verwirrungen kommen. Es scheint es wäre ein popup.
Das sollte aber mit FTUI3 umzusetzen sein!
Paar grids und das popup.

Schon habe ich es mit den Verwirrungen "geschafft", gna. Natürlich ist das ein Popup.
Einiges ist schon (manches übrigens mit Deiner freundlichen Hilfe) umgesetzt. Jetzt ist der Punkt durchzuatmen und nochmal nachzudenken - siehe unten.

ich finde das alles etwas durcheinander
Ich würde mir erst  einmal darüber Gedanken machen, was auf welcher Seite gezeigt werden soll.

Das ist (für mich) gar nicht durcheinander. Das folgt der usablity (schickes Wort), welches in Cockpits von Kampfjets Anwendung findet. Und ich habe das alles ja schon, in FTUI2. Nun wird es langsam umziehen.

Mein erstes Problem ist auf dem ersten Bild meines letzten Beitrags: Da gibt es viele Kacheln, die Fensterzustände zeigen. Der Code ist eigentlich immer identisch, ich zeige das unten. Was sich da jeweils ändert ist label, view und Devicename.

Weil der Code ansich immer identisch ist, schreit das nach einem template. Suche im Forum (Sucheingrenzung auf FTUI3 ist schwierig) findet: "Ja, du kannst dafür ftui-content nutzen.".

Ja gut, aber wie?

Code Auswählen Erweitern


      <ftui-grid-tile row="2" col="2" height="1" width="1" color="my_grey3">
       <ftui-row>
        <ftui-label margin="-18px 0 0 0" class="size-0">Arbeitszimmer</ftui-label>
       </ftui-row>
       <ftui-row>
           <ftui-tab view="Raum_Arbeitszimmer" direction="vertical">
              <ftui-icon margin="-18px 0 0 0" size="3" [name]="Arbeits_rechts | map('open: `icons-eigene/window-open`, closed: `icons-eigene/window-closed`')"
                         [color]="Arbeits_rechts | map('open:my_signalred, closed:my_signalgreen')">
              </ftui-icon>
           </ftui-tab>
       </ftui-row>
      </ftui-grid-tile>


[juemuc]

Hi Curt,

ich bin wie folgt vorgegangen:

• Für den Code, der immer redundant ist, eine "Content-html-Datei" definieren. Bei Dir z.B. "Fenster.html"
• Dann einmal den Code in diese Datei kopieren
• Die Werte, die sich immer ändern, durch Variablen ersetzen z.B:{{VAR1}} {{VAR2}}..
• Aufruf der Content-Datei mit den VAriablen.

Beispiel für Deine Fenster-Content-Datei:

Code Auswählen Erweitern

       <ftui-row>
        <ftui-label margin="-18px 0 0 0" class="size-0">Arbeitszimmer</ftui-label>
       </ftui-row>
       <ftui-row>
           <ftui-tab [view]="{{Raum}}" direction="vertical">
              <ftui-icon margin="-18px 0 0 0" size="3" [name]="{{Fenster}} | map('open: `icons-eigene/window-open`, closed: `icons-eigene/window-closed`')"
                         [color]="{{Fenster}} | map('open:my_signalred, closed:my_signalgreen')">
              </ftui-icon>
           </ftui-tab>
       </ftui-row>

Aufruf mit

Code Auswählen Erweitern

<ftui-grid-tile row="2" col="2" height="1" width="1" color="my_grey3">
    <ftui-content
          file="./content/Fenster.html" Raum="Arbeitszimmer" Fenster="Arbeits_rechts">
    </ftui-content>
    <ftui-content
          file="./content/Fenster.html" Raum="Arbeitszimmer" Fenster="Arbeits_links">
    </ftui-content>
</ftui-grid-tile>


Viele Grüße
Jürgen

[curt]

Hallo Jürgen,
danke für die verständliche Erklärung. Ich werde in den nächsten Tagen alles anpassen und melde mich dann ggf. mit weiteren Fragen wieder.

[curt]

Hallo allerseits,
ich bin bei popup angekommen. Leider finde ich da keine Seite mit allen möglichen Parametern. Was geht da alles?

Eine konkrete Frage habe ich auch schon:
Kann ich da auch Variable wie {{ein_Name}} nutzen? Und falls ja: Kann ich Variable über mehrere Ebenen durchreichen? Also von ftui-content die Variable nochmals übergeben an popup?

Und wo kommt das Konstrukt ftui-popup in der Datei eigentlich hin? Außerhalb von ftui-tab-view, ganz unten in die Datei?

Im Moment sieht mein erster Test so aus und funktioniert:

Code Auswählen Erweitern


<ftui-grid-tile row="4" col="6" height="1" width="1" color="my_grey3">
  <ftui-row>
   <ftui-icon margin="-18px 0 0 0" name="icons-eigene/putzfrau" class="size-2"
                   [color]="Putzi_1:run_state | map('dock:my_grey2, standby:my_grey2, closed:my_grey2, self-test:my_green, `cleaning vacuum`:my_signalgreen, paused:my_signalorange, `return to dock`:my_darkblue')" @click="pop1.open()">
   </ftui-icon>
  </ftui-row>
</ftui-grid-tile>
[...]
  <ftui-popup id="pop1" timeout="600" width="600px" height="350px">
    <header>Popup 1</header>
    <ftui-button popup-close>close</ftui-button>
    <ftui-label @click="pop1.close()">Close Pop1</ftui-label>
  </ftui-popup>


[twinFHEM]

Hallo zusammen!

Ich möchte ein riesiges Log an den Entwicker von FTUI 3 aussprechen!!!
Ich beschäftige mich seit ein paar Tagen damit und ich finde es richtig, richtig gut.
Das einfache Binding, auch die Pipes und die daraus resultierende Dynamik! Mega!

Gibt es bereits eine Art Datepicker oder hat jemand sich schon daran versucht?
Ich hoffe, ich kann demnächst etwas beisteuern.

TopJob! Vielen Dank!

[darkness]

Hallo Zusammen.

Ich benutzte ftui-dropdown zur Steuerung einer LightScene

Code Auswählen Erweitern

<ftui-dropdown
          [value]="70_st_ls_EG:state"
          (value)="set 70_st_ls_EG scene">
          <option value="arbeit">Arbeit</option>
          <option value="aus">Aus</option>
          <option value="abendbeleuchtung">Abend</option>
</ftui-dropdown>

Änderungen werden aber nur übertragen, wenn eine andere Option ausgewählt wird. Gibt es eine Möglichkeit eine bereits ausgewählte Option nocheinmal auszuwählen.
Wenn ich zB die Option Aus gewählt habe muss ich erst eine andere Option auswählen um Aus erneut zu wählen.

[mr_petz]

...
Gibt es bereits eine Art Datepicker oder hat jemand sich schon daran versucht?
...

Hi.
Es gibt zur Zeit nur einen Timepicker.:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/timeset.html
Demo:
https://knowthelist.github.io/ftui/www/ftui/examples/timeset.html

LG mr_petz

[mr_petz]

...
Änderungen werden aber nur übertragen, wenn eine andere Option ausgewählt wird. Gibt es eine Möglichkeit eine bereits ausgewählte Option nocheinmal auszuwählen.
Wenn ich zB die Option Aus gewählt habe muss ich erst eine andere Option auswählen um Aus erneut zu wählen.

Hi.
Leider nein. War hier schon Thema. Durch das event onchange wird dies verhindert.
Ab hier ist die Diskussion darüber ob es sinn macht das dropdown nocheinmal den selben Wert anzuwählen:
https://forum.fhem.de/index.php/topic,132022.msg1262157.html#msg1262157
Du könntest es nur über einen Leerraum lösen und dahin umswitchen und zurück. Bsp.:

Code Auswählen Erweitern

<ftui-dropdown
          [value]="70_st_ls_EG:state"
          (value)="set 70_st_ls_EG scene">
          <option value=""></option>
          <option value="arbeit">Arbeit</option>
          <option value="aus">Aus</option>
          <option value="abendbeleuchtung">Abend</option>
</ftui-dropdown>
Oder du bekommst den Dropdownzustand in Fhem zurückgesetzt.

LG mr_petz

[mr_petz]

@curt

Wenn das popup innerhalb des content liegt, dann kannst du auch Variablen zuweisen/mitgeben.
Das popup kann eigentlich überall im code gesetzt werden.

LG mr_petz

[curt]

Danke, verstanden.

Bzgl. Übergabe von Variablen, Beispiel:

Code Auswählen Erweitern


<ftui-row>
<ftui-label margin="-18px 0 0 0" class="size-0">{{Raum}}</ftui-label>
</ftui-row>
<ftui-row>
        <ftui-tab view="{{Raum_Detail}}" direction="vertical">
  <ftui-icon margin="-18px 0 0 0" size="3"
                [name]="{{Geber1}} | map('open: `icons-eigene/window-open`, closed: `icons-eigene/window-closed`')"
                [color]="{{Geber1}} | map('open:my_signalred, closed:my_signalgreen')">
  </ftui-icon>
</ftui-tab>
</ftui-row>


Raum_Detail ist dabei der Name eines Content-Files. Es gibt eine weitere Variable {{Thermostat}}, gefüllt mit dem Namen des Thermostats. Diese möchte ich bei diesem Aufruf (ftui-tab) mit übergeben.

Geht das? Falls ja: Wie geht das?

[juemuc]

Ich nutze hier das Reading "alias", welches ich dann übergebe.

Viele Grüße
Jürgen

[curt]

Hmmm. Derzeit habe ich ein Anfängerproblem.

ftui-button.
Ich möchte die Breite fest einstellen. Aber das kriege ich leider nicht hin.
Ich möchte die Schriftart fett, eigentlich noch lieber fetter haben. (Fett kriege ich hin.)
Und wie stellt man die Schriftfarbe ein?

Also so geht es schon mal nicht:

Code Auswählen Erweitern


<ftui-button class="size-1 bold" style="--button-width=800px" color="orange" fill="solid">11</ftui-button>


[setstate]

Hallo curt,

du könntest den Inhalt des Buttons als eigenes Element per Span oder Div definieren und dann unabhängig gestalten

Code Auswählen Erweitern

     
<ftui-button width="9em" color="orange">
    <span style="color:brown; font-weight: 900;">Huhu</span>
</ftui-button>



[cotecmania]

Hallo,

ich starte gerade mit FTUI3 und habe schon beim TabView und separaten Dateien Probleme.

Wenn alles in der Index.html ist funktionierts und die Uhrzeit wird in 2 separaten Blocks richtig angezeigt (siehe screenshot 2) :

Code Auswählen Erweitern

<ftui-tab-view id="Weather">
      <ftui-grid-tile row="1" col="3" height="2" width="2" shape="round" color="secondary">
        <ftui-clock format="hh:mm" size="9"></ftui-clock>
     </ftui-grid-tile>

     <ftui-grid-tile row="2" col="7" height="2" width="2" shape="round" color="primary">
          <ftui-clock format="hh:mm" size="9"></ftui-clock>
     </ftui-grid-tile>
    </ftui-tab-view>


Wenn ich aber den Code in eine separate Datei auslagere stimmt die Positionierung nicht mehr und die 2 Elemente erscheinen untereinander über den ganzen Screen:
(siehe Screenshot 1)

Code Auswählen Erweitern

<ftui-tab-view id="Weather">
      <ftui-content file="weather.html" room="weather"></ftui-content>
    </ftui-tab-view>

Inhalt "weather.html" :

Code Auswählen Erweitern

<ftui-tab-view id="Weather">
      <ftui-grid-tile row="1" col="3" height="2" width="2" shape="round" color="secondary">
        <ftui-clock format="hh:mm" size="9"></ftui-clock>
     </ftui-grid-tile>

     <ftui-grid-tile row="2" col="7" height="2" width="2" shape="round" color="primary">
          <ftui-clock format="hh:mm" size="9"></ftui-clock>
     </ftui-grid-tile>
    </ftui-tab-view>

Was mache ich falsch ?

Gruss
Joe