FTUI version 3

[Eisix]

Noch eine Frage zu map/step

Code Auswählen Erweitern


<ftui-icon class="size-3" [name]="Markise:position | map('`closed|0`:fts_sunblind_0, 25:fts_sunblind_20, 50:fts_sunblind_50, 75:fts_sunblind_80, `open|99|100`:fts_sunblind_100')"></ftui-icon>


Solche Fälle bleiben weiter map?

Gruß
Eisix

[tomster]

Hier was zum Probieren:
https://knowthelist.github.io/ftui/www/ftui/examples/rotor.html

Je mehr ich damit rumspiele, desto mehr komme ich zu dem Schluß, dass es schon wichtig wäre die einzelnen rotor-Elemente in einen delimiter zu packen.
Bislang wird z.B. jedes icon/label als eigenes Element gesehen und ge-rotort. Will man nun aber ein icon mit darunter stehendem label rotor'en lassen geht das aktuell nicht.

[setstate]

Du brauchst nur die zusammengehörenden Elemente zu klammern. Mit ftui-cell zum Beispiel

Code Auswählen Erweitern


    <ftui-grid-tile row="3" col="7" height="3" width="3">

      <ftui-rotor class="size-5">
        <ftui-cell>
          <ftui-icon name="bed"></ftui-icon>
          <ftui-label>Bed</ftui-label>
        </ftui-cell>
        <ftui-cell>
          <ftui-icon name="train"></ftui-icon>
          <ftui-label>Train</ftui-label>
        </ftui-cell>
        <ftui-cell>
          <ftui-icon name="industry"></ftui-icon>
          <ftui-label>Industry</ftui-label>
        </ftui-cell>
      </ftui-rotor>

    </ftui-grid-tile>


[tomster]

Du brauchst nur die zusammengehörenden Elemente zu klammern. Mit ftui-cell zum Beispiel

Yep, läuft. Danke!

Noch eine Frage zum tab, bzw. view, die wohl nur am Rande mit rotor zu tun hat:
Ich hab einen Tab, der aus einem rotor besteht. Nun möchte ich bei Click auf das jeweilige rotor-Element auf die entsprechende Tab-Seite (View5, bzw. View6) gelangen.

Code Auswählen Erweitern


<ftui-tab direction="vertical">
        <ftui-rotor interval="5" [hidden]="LifteHide:cmd | map('4:true, .*:false')">
                <ftui-cell view="View5">
                <ftui-icon name="trello" align="bottom" class="size-2">
                <ftui-badge [text]="Lifte:Lifte_geschlossen" color="red" class="bold">
                </ftui-badge></ftui-icon>
                <ftui-label>Lifte</ftui-label>
                </ftui-cell>
                <ftui-cell>
                <ftui-icon name="code-fork" align="bottom" class="size-2" view="View6">
                <ftui-badge [text]="Pisten:Pisten_geschlossen" color="red" class="bold">
                </ftui-badge></ftui-icon>
                <ftui-label>Pisten</ftui-label>
                </ftui-cell>
                </ftui-rotor>
        </ftui-tab>


So geht es schon Mal nicht. view="View5/6" wird ignoriert, egal ob in cell oder beim icon. Denkfehler bei mir oder geht nicht?

-edit im Code-Tag-

[setstate]

das geht so einfach nicht.

Entweder du nimmst statt ftui-cell -> ftui-tab (dann bekommt man aber auch dessen Style-Schema)

oder mit einem kleinen Skript im HTML

Code Auswählen Erweitern



<ftui-xxx ... @click="onClicked('View2')">
...
<script>
  function onClicked(view) {
    document.querySelectorAll('ftui-tab-view').forEach(elem => {
      if (elem.id !== view) {
        elem.setAttribute('hidden', '');
      } else {
        elem.removeAttribute('hidden');
      }
    });
  }
</script>


[tomster]

Der Austausch von cell nach tab funktioniert einwandfrei. In meinem Fall passt der Style, weil ich ja nur die view-tabs rotor'en möchte.
Danke für die rasche Rückmeldung!

[ToM_ToM]

Hallo zusammen, ich versuche gerade einen Button-Text abhängig vom Device Status anzuzeigen.
Aber irgendwie funtkioniert das mit dem Setzten des Resume oder Pause - Befehls nicht.
Kann mir jemand einen Tipp geben was ich hier falsch mache?

Code Auswählen Erweitern


<ftui-button shape="round" fill="solid" [value]="VacuumCleaner_Roborock:state | map('Cleaning|Zoned Clean:Pause, Paused|Sleeping:Resume')" (value)="VacuumCleaner_Roborock" states="Resume, Pause" [color]="VacuumCleaner_Roborock:state | map('Cleaning|Zoned Clean:red, Paused|Sleeping:green')">
<span class="big"><ftui-label [text]="VacuumCleaner_Roborock:state | map('Cleaning|Zoned Clean:Pause, Paused|Sleeping:Resume')"></ftui-label></span>
</ftui-button>


Grüße, Thomas

[pula]

Alter Schwede... da hat sich ja viel getan. 103 Seiten...
Gibts irgendwo auch ein howto, wie man von der 2er auf die 3er Version umsteigt?
Hab da noch einige 2er widgets (vdr/kodi, todoist)...
Cheers,
Pula

[Wolfgang Hochweller]

@ToM_ToM  :

Ich kenne die Einzelheiten des Roborock nicht, aber der Code sieht so aus, als kenne Roborock als 'state' : 'Cleaning' 'Zoned Clean' 'Paused' 'Sleeping'
und du versuchst, ihm   'state'    zu  'Pause' oder 'Resume' zu setzen.

[ToM_ToM]

@Wolfgang Hochweller: Ja genau. Es gibt die States die ich abfrage und ich möchte abhängig davon die Sets setzen.
Also z.b:

Code Auswählen Erweitern

set VacuumCleaner_Roborock Pause
wenn er sich im Sate "Cleaning" oder "Zoned Clean" befindet.

und

Code Auswählen Erweitern

set VacuumCleaner_Roborock Resume
wenn er sich im State "Paused" oder "Sleeping" befindet.

Hast du eine Idee wie ich meinen Code anpassen muss?

VG, Thomas

[tomster]

Ich vermute, Du musst das Leerzeichen in "Zoned Clean" escapen. Da ich sich aber meine Programmierfähigkeiten auch nur auf "Monkey see- Monkey do" beschränken, würde ich es damit versuchen, den Case "Zoned clean" erstmal wegzulassen. Wenn die übrigen states dann funktionieren, liegt es wohl am Leerzeichen. Ob man aber hier dann "grave accents", backslashs oder Hochkomma oder Anführungszeichen benutzt, weiß ich auch nie und probier dann einfach aus

[tomster]

Gibts irgendwo auch ein howto, wie man von der 2er auf die 3er Version umsteigt?
Hab da noch einige 2er widgets (vdr/kodi, todoist)...
Cheers,
Pula

Nein, ein Umstieg ist quasi eine Neuprogrammierung.
Da Du zudem auf Widgets angewiesen bist, die (noch) nicht existieren (und jetzt Module heißen), ist ein jetziger Umstieg nicht 1:1 zu machen.
Aber pack Dir doch die FTUI3-Files in ein separates Unterverzeichnis und probiere damit herum.
Nach kurzer Einarbeitung in die neue Struktur/Syntax kommt man da schnell auf sehr ansprechende und vor allem flotte Ergebnisse.

[Wolfgang Hochweller]

@ToM_ToM :

Poste doch mal ein Devicelisting, dann sehen wir mehr.

[meier81]

Hallo setstate,

ist es eigentlich möglich mit "Variablen" (weiß gerade nicht wie ich es besser ausdrücken soll) zu arbeiten, das heißt das ich z.B. beim umschalten der Seite eine Variable setzte mit der neuen Seite, um diese mir im Headerbereich anzeigen zu lassen. Hier wäre mal ein Beispiel:

Code Auswählen Erweitern

<header>
    <ftui-row>
      <ftui-column width="20%"><ftui-clock format="hh:mm:ss" class="size-3" color="warning"></ftui-clock></ftui-column>
      <ftui-column>{{room}}</ftui-column>
      <ftui-column width="20%"><ftui-clock format="eeee, DD.MMMM YYYY" class="size-3" color="warning"></ftui-clock></ftui-column>
    </ftui-row>
  </header>

Code Auswählen Erweitern

<main>
    <ftui-tab-view id="View1">
      <ftui-content file="content-home.html" room="Room1"</ftui-content>
    </ftui-tab-view>
  </main>

Code Auswählen Erweitern

<footer>
    <ftui-tab view="View1" direction="vertical" active>
      <ftui-icon name="home1"></ftui-icon>
      <label class="small">Home</label>
    </ftui-tab>
  </footer>

Es geht also hier im Beispiel um die Zeile

Code Auswählen Erweitern

<ftui-column>{{room}}</ftui-column> und

Code Auswählen Erweitern

<ftui-content file="content-home.html" room="Room1"</ftui-content>

Lässt sich so etwas bewerkstelligen oder gibt es die Möglichkeit hier nicht?

[tomster]

@ToM_ToM

Anscheind muss man nix escapen. FTUI kann mit diesen Stati umgehen. Zumindest konnte es mein Test-dummy.

Zu meines Schande muss ich zudem gestehen, dass ich bislang noch keinen Button verwendet habe (weil mein Magic Mirror einfach "touchless" ist).

Wenn ich aber die Button-Example-Seite ansehe, dann glaube ich, Du hast einen Dreher in der Logik mit dem Mapping und den value-states.
Probier Mal:

Code Auswählen Erweitern


<ftui-button shape="round" fill="solid" [value]="VacuumCleaner_Roborock:state | map('Cleaning|Zoned Clean:Resume, Paused|Sleeping:Pause')" (value)="VacuumCleaner_Roborock" states="Resume, Pause" [color]="VacuumCleaner_Roborock:state | map('Cleaning|Zoned Clean:red, Paused|Sleeping:green')">
<span class="big"><ftui-label [text]="VacuumCleaner_Roborock:state | map('Cleaning|Zoned Clean:Pause, Paused|Sleeping:Resume')"></ftui-label></span>
</ftui-button>