FTUI version 3

mr_petz · 15 November 2021, 21:43:36

Hi.
Beim Knob musst du


min="0" max="1000"

mit hinzufügen, weil der im Standard "nur" von 0-100 geht. Woher soll er wissen das dein Reading bis 1000 geht?

Der meter scheint allgemein "nur" von 0 bis 100 zugehen und keine definierbaren min/max Werte zu besitzen... Alles andere läuft über...
LG

mr_petz · 15 November 2021, 21:52:19

@h3llsp4wn

Hast du den segmentedbutton auf der index/start-seite?
Ich frage deswegen, weil er bei mir nicht auf der index-seite drauf ist und erst nachdem ich oder fhem das Reading upgedatet haben wird der richtige Reiter gesetzt...
Ist er auf der Indexseite (also beim initialisieren/laden) wird er gleich richtig gesetzt...
LG

h3llsp4wn · 15 November 2021, 22:48:31

@mr_petz:

Ich habe die menu.html aus dem examples Ordner aufgebohrt - dort wo das Menü auffährt, habe ich über den Buttons noch den
segmentedbutton. Dieser dient zur Anzeige und Umschaltung des "homestatus". Es würde wahrscheinlich ausreichen, wenn ich das Update triggern könnte, wenn das Menü angeklickt wird. Da habe ich mich jetzt noch nicht reingefuchst, um da ggf. einen onclick o.ä. auszulösen.

Wenn ich von dort aus beispielsweise eine Unterseite für die Heizung aufrufe, sehe ich auch, dass dort die segementedbuttons für die Heizprogramme nicht aktuell sind, aber dann beim klick auf den Menüpunkt (Seite wird ja sofort eingeblendet) - sehe ich die Animation, die den Fokus aus das korrekte Programm legt. Damit kann ich leben.

Beim Homestatus wird die Funktion wohl zu früh geladen - ich denke das Event über den Klick auf das Menü auszulösen, wäre wohl die clevere Variante.

D.h. die kurze Antwort ist - ja - der eine segmentedbutton ist quasi in die Startseite integriert.

Anmerkung dazu: Also die Icon-Farbe ist korrekt - nur die Hintergrundfarbe, die über die translateX transformation durchgeführt wird - die steht falsch und wird erst nach einer Aktion "zurechtgerückt".

mr_petz · 16 November 2021, 08:12:47

Zitat von: h3llsp4wn am 15 November 2021, 22:48:31
....

Wenn ich von dort aus beispielsweise eine Unterseite für die Heizung aufrufe, sehe ich auch, dass dort die segementedbuttons für die Heizprogramme nicht aktuell sind, aber dann beim klick auf den Menüpunkt (Seite wird ja sofort eingeblendet) - sehe ich die Animation, die den Fokus aus das korrekte Programm legt. Damit kann ich leben.

Bei mir ist das genauso auf der Heizungspage.

Zitat
Beim Homestatus wird die Funktion wohl zu früh geladen - ich denke das Event über den Klick auf das Menü auszulösen, wäre wohl die clevere Variante.

Diese Funktion sollte setstate mit integrieren. Ob das geht weiss nur er...
Er hat das Initialisieren glaube bei onConnected...

Zitat
D.h. die kurze Antwort ist - ja - der eine segmentedbutton ist quasi in die Startseite integriert.

Anmerkung dazu: Also die Icon-Farbe ist korrekt - nur die Hintergrundfarbe, die über die translateX transformation durchgeführt wird - die steht falsch und wird erst nach einer Aktion "zurechtgerückt".

Das sollte aber gehen.
Du kannst hier Mal deine Definition posten, um zu sehen ob alles korrekt ist...
Lg

h3llsp4wn · 16 November 2021, 10:16:08

Ok, anbei die Definition:

Code Auswählen


    <ftui-segment [(value)]="homeStatus" style="margin-top: 40px;">
      <ftui-segment-button value="home">
        <ftui-icon name="home1"></ftui-icon>
      </ftui-segment-button>
      <ftui-segment-button value="night">
        <ftui-icon name="bed"></ftui-icon>
      </ftui-segment-button>
      <ftui-segment-button value="away">
        <ftui-icon name="road"></ftui-icon>
      </ftui-segment-button>
      <ftui-segment-button value="holiday">
        <ftui-icon name="plane"></ftui-icon>
      </ftui-segment-button>
    </ftui-segment>

Ich habe noch zwei Dinge getan:

1. Roll-Back auf einen älteren Stand vom FTUI - Problem behoben. Bringt mich aber nicht in der Weiterentwicklung nach vorne, da ich auch noch das eine oder andere dazuentwickle.

2. onConnected bzw this.update extern getriggert - hat aber nicht den gewünschten Effekt, da müsste ich jetzt wirklich weiter debuggen und ich glaube es macht wenig Sinn, wenn ich da lange an der Stelle Suche, die für setstate wahrscheinlich leicht zu finden ist.

Danke für die Unterstützung!

Cheers,

h3ll

Nachtrag:

Die Änderung kam wohl mit dem Change 'tab segment examples' rein, mit einer Version der segment.component.js vor dem 04.10.2021 tritt der Fehler nicht auf.

mr_petz · 16 November 2021, 10:40:55

Die Farben vom Icon solltest du mit mappen hinbekommen...
Bsp. Von meiner Heizungspage:

Code Auswählen


<ftui-icon
	[value]="MQTT2_ebusd:Mode_hcmode1_value"
	[name]="MQTT2_ebusd:Mode_hcmode1_value | map('on|set_on:an_mode')"
	[color]="MQTT2_ebusd:Mode_hcmode1_value | map('on:red')">
</ftui-icon>

Edit. Ignoriere das einfach. Ich habe nicht richtig gelesen...

Lg

Dracolein · 16 November 2021, 20:23:34

Designerfrage:

Wenn ich zwei <ftui-label></ftui-label> Elemente mit Text untereinander definiere, wird zwischen den Elementen Platz gelassen entsprechend der freien Gesamthöhe des übergeordneten Elements (cell, column, grid-tile...).
Gibt es eine smarte Lösung, diesen zwei Elementen beizubringen, dass sie keinen freien Platz zwischeneinander lassen sollen, ohne verhältnismäßig aufwendige Tabellenkonstrukte zu basteln?

mr_petz · 16 November 2021, 21:52:59

@Dracolein

Was besseres wie das fällt mir erst mal nicht ein:
Extrembeispiel:

Code Auswählen


<ftui-cell>
  <ftui-label height="35px" text="1.Zeile mit height='35px'" class="size-7 thin"></ftui-label>
  <ftui-label height="28px" text="2.Zeile mit height='28px'" class="size-6 thin"></ftui-label>
  <ftui-label height="22px" text="3.ZEILE MIT HEIGHT='22px'" class="size-5 thin"></ftui-label>
  <ftui-label text="4.ZEILE NORMAL" class="size-4 thin"></ftui-label>
</ftui-cell>

muss aber in der cell sein, sonst rutscht alles wieder auseinander...
LG mr_petz

setstate · 16 November 2021, 22:25:16

Zitat von: h3llsp4wn am 16 November 2021, 10:16:08
Ok, anbei die Definition:

Code Auswählen Erweitern
<ftui-segment [(value)]="homeStatus" style="margin-top: 40px;"> <ftui-segment-button value="home"> <ftui-icon name="home1"></ftui-icon> </ftui-segment-button> <ftui-segment-button value="night"> <ftui-icon name="bed"></ftui-icon> </ftui-segment-button> <ftui-segment-button value="away"> <ftui-icon name="road"></ftui-icon> </ftui-segment-button> <ftui-segment-button value="holiday"> <ftui-icon name="plane"></ftui-icon> </ftui-segment-button> </ftui-segment>

Ich habe noch zwei Dinge getan:

1. Roll-Back auf einen älteren Stand vom FTUI - Problem behoben. Bringt mich aber nicht in der Weiterentwicklung nach vorne, da ich auch noch das eine oder andere dazuentwickle.

2. onConnected bzw this.update extern getriggert - hat aber nicht den gewünschten Effekt, da müsste ich jetzt wirklich weiter debuggen und ich glaube es macht wenig Sinn, wenn ich da lange an der Stelle Suche, die für setstate wahrscheinlich leicht zu finden ist.

Danke für die Unterstützung!

Cheers,

h3ll

Nachtrag:

Die Änderung kam wohl mit dem Change 'tab segment examples' rein, mit einer Version der segment.component.js vor dem 04.10.2021 tritt der Fehler nicht auf.

Das Zusammenschieben des Menüs und die relativen Weite des Segment-Controls (100%) verursachen den Fehler. Mit einem

Code Auswählen

style="width:250px" beim Segment-Controls kann man das lösen.

Dracolein · 17 November 2021, 06:38:36

Zitat von: mr_petz am 16 November 2021, 21:52:59
@Dracolein

Was besseres wie das fällt mir erst mal nicht ein:
Extrembeispiel:
Code Auswählen Erweitern
<ftui-cell> <ftui-label height="35px" text="1.Zeile mit height='35px'" class="size-7 thin"></ftui-label> <ftui-label height="28px" text="2.Zeile mit height='28px'" class="size-6 thin"></ftui-label> <ftui-label height="22px" text="3.ZEILE MIT HEIGHT='22px'" class="size-5 thin"></ftui-label> <ftui-label text="4.ZEILE NORMAL" class="size-4 thin"></ftui-label> </ftui-cell>
muss aber in der cell sein, sonst rutscht alles wieder auseinander...
LG mr_petz

Verstehe, na das sieht nach einer guten Lösung aus. Ich dachte bisher, das Cell-Element sei nur in Verbindung mit row/column sinnvoll und ich hatte weiterhin nicht auf dem Schirm, dass man einem label-Element eine Höhe zuweisen kann.
Meine HTML-Skills sind 20 Jahre alt.
Ja geil, danke, baue ich heute abend ein.

h3llsp4wn · 17 November 2021, 10:32:06

Zitat von: setstate am 16 November 2021, 22:25:16
Das Zusammenschieben des Menüs und die relativen Weite des Segment-Controls (100%) verursachen den Fehler. Mit einem

Code Auswählen Erweitern
style="width:250px" beim Segment-Controls kann man das lösen.

@setstate:
Awesome! Das war's!

Vielen Dank!

kafi · 17 November 2021, 20:31:19

Zitat von: mr_petz am 15 November 2021, 21:43:36
Hi.
Beim Knob musst du
Code Auswählen Erweitern
min="0" max="1000"
mit hinzufügen, weil der im Standard "nur" von 0-100 geht. Woher soll er wissen das dein Reading bis 1000 geht?

Der meter scheint allgemein "nur" von 0 bis 100 zugehen und keine definierbaren min/max Werte zu besitzen... Alles andere läuft über...
LG

Danke für den Tip.
Den Knob habe ich nun mit der 1000er Skalierung zur Anzeige bringen können.
Nun hatte ich weitergespielt und wieder Parameter mit eingebaut, mit denen ich vorher auch schon rumgespielt hatte, und stelle fest:
Wenn ich zum Beispiel

Code Auswählen

has-scale-text einbaue, verschwindet der Knob wieder.
Wenn ich

Code Auswählen

has-value-text einbaue, verschwindet der Knob ebenfalls aber es steht zumindest der Werte an dieser Stelle.

mr_petz · 17 November 2021, 21:50:47

@kafi

Schau dir am besten mal die demo hier an:
https://knowthelist.github.io/ftui/www/ftui/examples/knob.html
um zu sehen was deinen Vorstellungen entspricht.

und danach das examples File:
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/knob.html
da wird einiges klarer wie man den knob definiert...
LG

Edit: Falls du das optisch wie im Bildanhang vorhast, sollte deine Definition so aussehen (ist hier readonly):

Code Auswählen


<ftui-knob [value]="Heizung:ENERGY_Power" min="0" max="1000" has-scale has-arc has-scale-text readonly></ftui-knob>

und wenn du mit value haben möchtest so:

Code Auswählen


<ftui-knob [value]="Heizung:ENERGY_Power" min="0" max="1000" has-scale has-arc has-scale-text has-value-text readonly></ftui-knob>

und wenn du value mit unit haben möchtest so:

Code Auswählen


<ftui-knob [value]="Heizung:ENERGY_Power" min="0" max="1000" has-scale has-arc has-scale-text has-value-text unit="%" readonly></ftui-knob>

ps. ohne has-scale funktioniert auch kein has-scale-text

kafi · 18 November 2021, 20:19:32

@mr_petz

Danke.
Die Links hatte ich alle schon vor meinem ersten Post mehr oder weniger intensiv durchprobiert
Ich bin nur nicht auf die Idee mit Abhängigkeiten der Parameter untereinander gekommen und habe blöderweise beim Testen mit einzelnen / den falschen Parametern angefangen.
Jetzt hauts hin!

Dracolein · 19 November 2021, 10:25:17

Gibt es folgende Option auch in FTUI3, um ein Datum in einen Wochentag zu wandeln ?

Zitat von: setstate am 29 März 2016, 23:15:13
Input Format ist FHEM Reading TS Format: YYYY-MM-DD HH:MI:SS oder DD.MM.YYYY

.eeee() liefert 'Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'

.eee() liefert 'Son','Mon','Die','Mit','Don','Fre','Sam'

.ee() liefert 'So','Mo','Di','Mi','Do','Fr','Sa'

Ich fand dies Beispiel via SuFu:

Code Auswählen

<ftui-label [text]="device:reading | toDate() | format('hh:mm')"></ftui-label>
Aber was gebe ich bei format() an, um den Wochentag dargestellt zu bekommen?