FTUI version 3

[Eisix]

Läuft auch nicht. Allerdings läuft auch ein

Code Auswählen Erweitern

class="size-2 spin"
nicht.
Ich sehe auch gerade, dass die CSS Klasse .spin nicht referenziert wird obwohl sie in der ftui.css definiert ist. Ich werde mal den Browser neu starten.

EDIT: scheint ein Browser-Problem zu sein bei mir, die Klasse wird geladen, aber der FF (84.0.1) interpretiert das auf meiner FTUI3x Seite nicht. Auf anderen (nicht-FTUI-)Seiten funktioniert spin allerdings.

Beim map muss doch : anstatt = sein oder?
Bei mir funktioniert es so

Code Auswählen Erweitern


<ftui-icon name="trash-o" color="black" [class-name]="Abfall:Calendar_RestmuellAWB_days | map('1:muellspin, 2:size-2')"></ftui-icon>


Die css Einträge habe ich wegen der Icongröße gemacht da die sonst nicht stimmen oder kann man mittlerweile 2 class angeben?
custom.css

Code Auswählen Erweitern


.muellhop {
  animation-name: hop;
  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
  animation-duration: 2s;
  animation-iteration-count: infinite;
  font-size: 1rem;
}

.muellspin {
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  font-size: 1rem;
}



Gruß
Eisix

[octek0815]

Die css Einträge habe ich wegen der Icongröße gemacht da die sonst nicht stimmen oder kann man mittlerweile 2 class angeben?

Ja geht.

Code Auswählen Erweitern


[class-name]="HWR1_EG_Fensterrollladen:moving | map('up:blink size-0, down:blink size-0, stop:size-0')">


[yersinia]

Beim map muss doch : anstatt = sein oder?

Bei mir geht beides, sowohl : als auch =. ich vermute = kann/soll bei numerischen Werten benutzt werden.

Die css Einträge habe ich wegen der Icongröße gemacht da die sonst nicht stimmen oder kann man mittlerweile 2 class angeben?

Ja, mit ` (ging bei mir aber auch ohne):

Code Auswählen Erweitern

<ftui-icon name="trash-o" color="black" [class-name]="Abfall:Calendar_RestmuellAWB_days | map('1:`size-2 spin`, 2:`size-2`')"></ftui-icon>

[setstate]

Bei mir geht beides, sowohl : als auch =. ich vermute = kann/soll bei numerischen Werten benutzt werden.

Es geht beides. Der String muss ein gültiges HOCON sein.

https://en.wikipedia.org/wiki/HOCON

https://hocon-playground.herokuapp.com

[moonsorrox]

@ setstate hast du mal bei meinem Problem mit der map im badge geschaut... ich bekomme es aktuell nicht hin ab Tag 2 eine Zahl anzuzeigen und am letzten Tag im Badge stehen zu haben Heute...

Nur Zahlen geht wunderbar
Es geht mit den Zahlen und werden jetzt auch richtig, wenn ich aber bei 0:Heute in die map eintrage zeigt er mir immer Heute an, evtl hast du es verfolgt...

[setstate]

@ setstate hast du mal bei meinem Problem mit der map im badge geschaut... ich bekomme es aktuell nicht hin ab Tag 2 eine Zahl anzuzeigen und am letzten Tag im Badge stehen zu haben Heute...

Nur Zahlen geht wunderbar
Es geht mit den Zahlen und werden jetzt auch richtig, wenn ich aber bei 0:Heute in die map eintrage zeigt er mir immer Heute an, evtl hast du es verfolgt...

Entweder du nimmst nur Zahlen

Code Auswählen Erweitern

| map('0:Heute, 1:Morgen, 2:')

also: ab 0, ab 1, ab 2

Oder du zwingst zu einem RegEx Vergleich

Code Auswählen Erweitern

| map('`[0]`:Heute, `[1]`:Morgen, .*:')

Hintergrund ist die benutze Funktion, die versucht den Vergleichstyp zu erraten:

Code Auswählen Erweitern


export function isEqualOrGreater(pattern, value) {
  return value === pattern ||
    parseFloat(value) >= parseFloat(pattern) ||
    String(value).match('^' + pattern + '$');
}


Ich glaube es wäre besser, das map aufzusplittern in map (nur String und RegEx) und <andererNameAnstattMap> (Nummer ist gleich oder größer)

[yersinia]

Oder man erzeugt einfach zwei badges und versteckt immer ein Element:

Code Auswählen Erweitern

<ftui-badge [text]="myAbfall:Restmuell_tage | map('0:Heute, 1:Morgen, 2:')"
[color]="myAbfall:Restmuell_tage | map('0:crimson, 1:darkviolet, 2:transparent')"
[hidden]="myAbfall:Restmuell_tage | map('0:false, 1:false, 2:true')" class="size-0">
</ftui-badge> <!-- Heute und Morgen -->
<ftui-badge [text]="myAbfall:Restmuell_tage"
color="darkblue"
[hidden]="myAbfall:Restmuell_tage | map('0:true, 1:true, 2:false')" class="size-0">
</ftui-badge> <!-- alles groesser 1 -->

[moonsorrox]

Oder man erzeugt einfach zwei badges und versteckt immer ein Element:

das ist eine gute Idee, ich werde mal die Varianten probieren.
Kein Wunder da ich das gestern nicht mehr hinbekommen habe... weil beides eben so nicht geht, dass hattest du ja schon vermutet...

[octek0815]

Oder man erzeugt einfach zwei badges und versteckt immer ein Element:

So habe ich das auch von Anfang an laufen...

Code Auswählen Erweitern


<ftui-column>
<ftui-icon [name]="System_Abfall:urSchwarz | map('0:_abfalltonne_auf, 1:_abfalltonne_zu')" color="_grau1"
[class-name]="System_Abfall:urSchwarz | map('0:spin, 1:hop, 2:')"></ftui-icon>
<ftui-badge [color]="System_Abfall:urSchwarz | map('0=_rot1, 1=_rot1, 2=_orange1, 3=gray')"
[text]="System_Abfall:urSchwarz" [hidden]="System_Abfall:urSchwarz | map('0:true, 1:false')"></ftui-badge>
<ftui-badge [color]="System_Abfall:urSchwarz | map('0=_rot1, 1=_rot1, 2=_orange1, 3=gray')"
[text]="System_Abfall:urSchwarz | map('0:!')"
[hidden]="System_Abfall:urSchwarz | map(' 0:false, 1:true')"></ftui-badge>
</ftui-column>


[octek0815]

Wie kann ich bei Chart die Punkte verkleinern oder gar weglassen?

[moonsorrox]

So habe ich das auch von Anfang an laufen...

das hat mich schon gewundert das du zwei badge hast, aber ich habe es nicht für wahr genommen.....
War mir so nicht klar, dann hätte ich nur etwas mehr aufpassen müssen 

Aber jetzt geht es ja

[octek0815]

wäre es möglich bei <ftui-content> das file aus einem FHEM Reading zu bekommen?

Beispielhaft...

Code Auswählen Erweitern


<ftui-content [file]="Test_Dummy:state"></ftui-content>


Im Reading steht dann z.B. mein_content.html

[Eisix]

Geht allerdings muss man das Icon nochmal klicken um einen refresh zu haben

Code Auswählen Erweitern


<ftui-tab [view]="TEST"><ftui-icon class="size-2" name="television"></ftui-icon></ftui-tab>


Gruß
Eisix

Geht bei ftui-tab, TEST ist ein reading.

besseres beispiel

Code Auswählen Erweitern


                <ftui-tab [view]="hub:activity | map('Fernsehen|Musik|PowerOff:TV, AmazonPrime:AmazonPrime')"><ftui-icon class="size-2" name="television"></ftui-icon></ftui-tab>


Gruß
Eisix

[setstate]

wäre es möglich bei <ftui-content> das file aus einem FHEM Reading zu bekommen?

Beispielhaft...

Code Auswählen Erweitern


<ftui-content [file]="Test_Dummy:state"></ftui-content>


Im Reading steht dann z.B. mein_content.html

teils teils

Das Attribute file wird bei Readingänderung gesetzt, aber die Komponente hat noch kein onAttributeChanged() implementiert, was darauf reagiert, um dann loadFileContent() zu rufen.

Müsste ich mal versuchen.

Ein Problemchen sehe ich: es wird dann immer ein ftuiApp.initComponents() für den neuen Content gerufen, aber die alten Inhalte werden nicht sauber aufgeräumt. Ich habe noch keine Ahnung, was die Subscriptions dann machen. Ob es knallt oder nur Datenmüll entsteht.

[setstate]

Habe ich jetzt hinzugefügt

Code Auswählen Erweitern

<ftui-clock format="eeee, DD.MMMM YYYY" class="size-5"></ftui-clock>
Es funktioniert, aber MMMM gibt für Heute Februar zurück. ^^
(Ja, Systemzeiten FHEm/Browser-OS sind korrekt)

Danke, ist mir garnicht aufgefallen: ist aber jetzt korrigiert.