FTUI version 3

[Thyraz]

Wird evtl. beides gewesen sein, da man wirklich keine Farben mehr sieht.

[Thyraz]

Wie kriege ich Datum und Uhrzeit ganz unten hin.

footer als class gibts glaub nicht.
Da wirst du dir ne eigene Klasse im CSS File erstellen müssen und dem DIV dann statt footer zuweisen.

Evtl. in die Richtung?
Weiß aber nicht ob irgendwas aus dem CSS vom Grid sich damit beißt.

Code Auswählen Erweitern


.fixed-clock {
    bottom: 10px;
    position: absolute;
}


[Eisix]

fixed-clock hat funktioniert.

Das andere nicht

Code Auswählen Erweitern


<ftui-image
        src="images/Minion-Kungfu-icon.png"
        width="45" height="45"
        [class]="rr_Test:state | map('absent:myimage, gone:myimage ')"
></ftui-image>
<ftui-image
        src="images/Minion-Kungfu-icon.png"
        width="45" height="45"
        [class-map]="rr_Eisix:state | map('absent:myimage, gone:myimage ')"
></ftui-image>



CSS

Code Auswählen Erweitern


.myImage {
    filter: grayscale(1);
    opacity: 0.5;
}


Gruß
Eisix

[setstate]

myImage ist ungleich myimage

[Eisix]

Ja, habe ich auch gemerkt. Das mapping funktioniert aber trotzdem nicht.

Code Auswählen Erweitern


<ftui-image
        class="myImage"
        src="images/Minion-Kungfu-icon.png"
        width="45" height="45"
></ftui-image>
<ftui-image
        src="images/Minion-Kungfu-icon.png"
        width="45" height="45"
        [class-map]="rr_Eisix:state | map('absent:myImage, gone:myImage ')"
></ftui-image>



[setstate]

Classnamen immer klein oder kebab-case

[Thyraz]

Und es muss doch class-name und nicht class-map sein, oder?

Der Mechanismus geht doch auf "className", also die Property des Attributs "class".
Oder ist das was selbstgestricktes in FTUI was ich bisher noch nicht entdeckt habe?

[Eisix]

Geht jetzt, merci!

CSS

Code Auswählen Erweitern


.myimage {
    opacity: 0.5;
}


HTML

Code Auswählen Erweitern


<ftui-image
        src="images/Minion-Kungfu-icon.png"
        width="45" height="45"
        [class-name]="rr_Eisix:state | map('absent:myimage, gone:myimage ')"
></ftui-image>


[setstate]

Ja, richtig - das nutzt nur

ElementNodeReference.className

das kann man als [class-name] Attribute setzen.

camelCase Properties kann man im FTUI per kebab-case Attribute setzen.

[Thyraz]

Hab mal eine frühe Version einer Kalender Komponente die gern getestet werden darf.

Eingebunden wird das Ganze dann so:

Code Auswählen Erweitern


<ftui-calendar view="listWeek" height="500px">
  <ftui-calendar-data calendar="iCloud" color="primary"></ftui-calendar-data>
  <ftui-calendar-data calendar="Abfall" color="brown"></ftui-calendar-data>
</ftui-calendar>


Optionen der Calendar Komponente:
- height
- view: Kann aktuell mit listWeek und listMonth belegt werden
- no-header: Versteckt die Kopfzeile (muss keinen Wert haben, also einfach <ftui-calendar no-header view="listWeek"...)

Wenn height nicht angegeben wird, ist Autosizing aktiv. Das macht aber nur Sinn, wenn der Kalender nicht in einem Container mit fixer Höhe steckt.
Wahrscheinlich kann man für die Höhe auch "90%" oder sowas angeben kommt mir gerade, hab ich aber noch nicht getestet.

Ist die Liste länger als der Anzeigebereich, ist Scrollen möglich.

Optionen der Calendar-Data Subkomponente:
- calendar: Calendar Name in Fhem
- color: Farbe mit der Einträge des Kalenders dargestellt werden sollen. Kann eine der FTUI Standardfarben wie Primary, Warning, Red, Brown usw. sein, oder ein Farbwert wie #00FF00

Schriftgrößen, Abstände,  usw. im Modul sind als "em" Angaben definiert.
Es wächst und schrumpft also alles mit der aktuellen Schriftgröße.
Wenn ihr <ftui-calendar> über eine CSS-Regel also eine andere Schriftgröße zuweist, könnt ihr in der Größe anpassen.
Alternativ kann die Größe für alle Kalender auch über die User- oder Theme-CSS Dateien mit der Variable --calendar-font-size gesetzt werden.

Achtung: Das Modul grenzt den abzurufenden Zeitraum noch nicht ein, sondern holt alle Termine die der Calendar in Fhem ausspuckt. Also aktuell noch Vorsicht beim Abruf über Mobilfunk, könnte datenintensiv sein.
edit: Fixed...

Zum Testen braucht man von hier: https://github.com/Thyraz/ftui
- /components/calendar/
- /modules/fullcalendar/

Bisher nur manuell installierbar, wenn setstate seinen Updateprozess aktiv hat, schaue ich auch mal wie ich zusätzliche Module zum automatischen Update anbieten kann...

[Eisix]

@Thyraz
teste gerade Blinds.
Meine Rolladen sind bei position 0 offen bei 100 zu. Bei deinem Widget ist das glaube ich genau umgekehrt definiert. Gibt es ein setting das zu invertieren?

Gruß
Eisix

[Eisix]

Kann man das auch so nutzen?
Ich möchte das neue animierte Icon nutzen

Code Auswählen Erweitern


        <ftui-circlemenu direction="bottom-half">
                <ftui-icon-multicolor name="blind" [value]=""Rolladen_1:position></ftui-icon-multicolor>
                <ftui-button (value)="Rolladen_1" states="opens">Auf</ftui-button>
                <ftui-button (value)="Rolladen_1" states="25">25</ftui-button>
                <ftui-button (value)="Rolladen_1" states="50">50</ftui-button>
                <ftui-button (value)="Rolladen_1" states="75">75</ftui-button>
                <ftui-button (value)="Rolladen_1" states="opens">Zu</ftui-button>
        </ftui-circlemenu>


In FTUI2 war der Code so:

Code Auswählen Erweitern


                <div data-type="circlemenu" class="narrow circlemenu noshade" data-circle-radius="80" data-direction="bottom-half">
                        <ul>
                                <li><div data-type="symbol"
                                data-device="Rolladen_WZ_aussen"
                                data-get="position"
                                data-states='["[0-9]","open","up","[1-3][0-9]","[4-6][0-9]","[7-9][0-9]","100"]'
                                data-icons='["oa-fts_window_2w","oa-fts_window_2w","oa-fts_window_2w","oa-fts_shutter_30","oa-fts_shutter_50","oa-fts_shutter_80","oa-fts_shutter_100"]'
                                data-colors='["lightgray","lightgray","lightgray","lightgray","lightgray","lightgray","lightgray"]'
                                ></div></li>
                                <li><div data-type="push" data-fhem-cmd="set Rolladen_WZ_aussen opens" data-icon="oa-fts_window_2w" data-background-icon=""></div></li>
                                <li><div data-type="push" data-fhem-cmd="set Rolladen_WZ_aussen 25" data-icon="oa-fts_shutter_20" data-background-icon=""></div></li>
                                <li><div data-type="push" data-fhem-cmd="set Rolladen_WZ_aussen 50" data-icon="oa-fts_shutter_50" data-background-icon=""></div></li>
                                <li><div data-type="push" data-fhem-cmd="set Rolladen_WZ_aussen 75" data-icon="oa-fts_shutter_80" data-background-icon=""></div></li>
                                <li><div data-type="push" data-fhem-cmd="set Rolladen_WZ_aussen closes" data-icon="oa-fts_shutter_100" data-background-icon=""></div></li>
                        </ul>
                </div>


Gruß
Eisix

[Thyraz]

Meine Rolladen sind bei position 0 offen bei 100 zu. Bei deinem Widget ist das glaube ich genau umgekehrt definiert. Gibt es ein setting das zu invertieren?

Geht noch nicht, schau ich mir aber an.

Kann man das auch so nutzen?
Ich möchte das neue animierte Icon nutzen

Code Auswählen Erweitern


        <ftui-circlemenu direction="bottom-half">
                <ftui-icon-multicolor name="blind" [value]=""Rolladen_1:position></ftui-icon-multicolor>
                <ftui-button (value)="Rolladen_1" states="opens">Auf</ftui-button>
                <ftui-button (value)="Rolladen_1" states="25">25</ftui-button>
                <ftui-button (value)="Rolladen_1" states="50">50</ftui-button>
                <ftui-button (value)="Rolladen_1" states="75">75</ftui-button>
                <ftui-button (value)="Rolladen_1" states="opens">Zu</ftui-button>
        </ftui-circlemenu>


Mal kurz erklärt wie die Animationen von Icon-Multicolor funktionieren:

Innerhalb des SVG Codes gibt es Groups, welche als Namen bestimmte Transform-Beschreibungen haben (inklusive Zwischenpositionen als Keyframes)..
Diese Gruppen, welche Teile des Icons beinhalten, werden dann anhand dieser Transforms über die Animation hinweg verändert.
Zum Beispiel gedreht, verschoben, skaliert, etc...

Beim Blind Icon gibt es hier mehrere Gruppen mit jeweils einer Rollladen-Lamelle, damit die Animation so funktioniert.

Hier mal die Attribute von Icon-Multicolor mit ihren Defaultwerten:

Code Auswählen Erweitern


path: 'icons/multicolor',
duration: 1.0,            // in seconds
iterations: 1,            // -1 for infinite
direction: 'normal',      // normal, reverse, alternate, alternate-reverse
autoplay: 1,              // start animation automatically when the icon changed
trigger: 0,               // events with values that are mapped to '1' start the animation (best used with autoplay 0)
progress: 0               // jumps to a specific animation frame when no animation is running (best used with autoplay 0). From 0.0 to 1.0

Das Standardverhalten von Icon Multicolor ist also, bei einer Änderung des Icons dieses einmalig abzuspielen (Mit einer Animationsdauer von 1 Sekunde).

Danach verhält es sich ruhig, bis wieder ein neues Icon gesetzt wird.
Alternativ kann man auch das trigger Attribut setzen, oder iterations auf -1 setzen für eine dauerhafte Animation z.B. bei einer Waschmaschine.

Was du erreichen willst ist allerdings eine manuelle Ansteuerung des Animationsfortschritts.
Dazu muss du erstmal das automatische Abspielen verhindern mit autoplay="0".
Danach kannst du progress an ein Reading von Fhem binden: [progress]="Rollo:position"

Weiß gerade nicht auswendig wie herum die Animation von dem Icon war.
Ob 0 oben oder 0 unten ist.
Dies sollte aber an sich notfalls über das Attribut direction="reverse" auch ohne invertierendes Userreading in Fhem lösbar sein.

Falls es nicht klappt, sag Bescheid, dann versuch ich das mal hier nachzustellen...

[Thyraz]

teste gerade Blinds.
Meine Rolladen sind bei position 0 offen bei 100 zu. Bei deinem Widget ist das glaube ich genau umgekehrt definiert. Gibt es ein setting das zu invertieren?

Mal noch eine Frage dazu:

Der Slider soll schon so bleiben, oder?
Also 0 (Slider rechts) dann eben bei dir offen statt zu?

Nur das Icon muss eben von der Anzeige invertiert sein und die up/down Buttons eben in die andere Richtung fahren (die fahren zum konfigurierten min / max Wert).

Oder überseh ich da noch was?

[grossmaggul]

Thyraz, der Kalender ist extrem cool!!
Und ja % Angaben funktionieren auch.
Schön wäre, wenn man noch die Headergröße anpassen könnte, ohne im CSS rumfuhrwerken zu müssen.