Hauptmenü

FTUI version 3

Begonnen von Bunnu, 25 Oktober 2020, 09:25:41

Vorheriges Thema - Nächstes Thema

Thyraz

Zitat von: grossmaggul am 16 November 2020, 20:45:02
Ich hoffe ich nerve nicht zu sehr. ::)

Quatsch, ist doch gut, dass der Code mal von ein paar Leuten getestet wird abseits der Example Seiten.
So fällt am Ehesten auf, wo noch was hakt.

Zitat von: setstate am 17 November 2020, 02:42:23

Thyraz hat schöne Multichlor-Icons gebaut, die man auch animieren kann:
https://thyraz.github.io/ftui/examples/icon-multicolor.html

Bin gerade noch zu sehr mit dem Programmieren von weiteren Komponenten beschäftigt,
aber der Plan is hier noch eine Haufen passender Icons zu erstellen.
Außerdem ein Template + kleine Anleitung, damit andere User auch dazu beitragen können.
Da mit Figma mittlerweile ein super Multiplattform UI-Designtool kostenlos nutzbar ist, wird das Tutorial wahrscheinlich dafür sein.

Zitat von: setstate am 17 November 2020, 02:42:23
Es gibt jetzt auch ftui-content
Super, danke auch von mir. :)
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...

eppi

Hallo
Wirklich cool, was da wieder auf die Beine gestellt wird - ein grosses DANKESCHOEN an dieser Stelle.
Frage: Wie updated ihr euer lokales FTUI Verzeichnis (opt/fhem/www/ftui)? In der Version 2 gab es die Möglichkeit diese mittels der controls_fhemtabletui.txt Datei in den Update-Prozess von FHEM aufzunehmen... Macht ihr das auf Kommandozeilen-Ebene mit den GIT Befehlen oder zieht ihr jeweils das Zip herunter?
Danke und viele Grüsse Eppi

setstate

Ich würde zu gegebener Zeit wieder ein Update File anbieten. Oder gibt es mittlerweile etwas besseres?

grossmaggul

#33
Je mehr ich mit der 3er Version rumspiele desto mehr merke ich was Ihr, setstate und Thyraz, da Geniales gebastelt habt. :)
Und vor allen Dingen bin ich von der Geschwindigkeit begeistert.

Cool finde ich die Möglichkeiten mit den maps, z.B der nächste Geburtstag wird am Tag vorher gelb, am Geburtstag rot und blinkt.

Eine Anmerkung noch, mir fehlt bei den Fontgrößen zwischen "big" und "normal" noch eine Größe mit 125%, hin und wieder kommt es vor, daß "big" zu groß und "normal" zu klein ist.
Ich habe das mal in der css ergänzt und bei den Terminen eingestellt, da die 150% zu groß und die 100% für meine sehschwachen Augen zu klein waren.

Ich hänge mal mein bisheriges Machwerk dran(ist allerdings erst eine Seite fertig):
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

Eisix

Hallo,

bin am testen von einfachen Sachen (Abfallkalender) und melde einfach was mir aufgefallen ist oder was ich mit meinem Verständnis nicht lösen konnte.

Hier greift die class big und das Icon wird größer dargestellt

<ftui-icon class="big"
        [name]="WLAN_GUEST | map('`.*`:wifi1')"
        [color]="WLAN_GUEST | map('`.*`: blue')">
</ftui-icon>


Hier wird es kurz groß dargestellt springt dann aber wieder auf die kleine Variante zurück

<div class="row">
        <div class="cell">
                <ftui-icon name="trash-o" color="brown" [class-name]="Abfall:AbfallCalendar_BiomuellAbholungfuerdays | map('1:hop,2:')"></ftui-icon>
                <ftui-badge color="danger" [text]="Abfall:AbfallCalendar_BiomuellAbholungfuerdays"></ftui-badge>
        </div>


Gibt es eine Möglichkeit das badge weiter rechts oben darzustellen, da es mir in der Standardeinstellung zuviel vom Icon verdeckt?

Gruß
Eisix

setstate

Zitat von: Eisix am 18 November 2020, 14:12:14

Hier wird es kurz groß dargestellt springt dann aber wieder auf die kleine Variante zurück

weil [class-name] alles überschreibt. Wenn class="big" vorher drinsteht, ist es damit dann mit dem neuen Inhalt gefüllt.

Ich werde ein animation Attribute für das Icon anbieten müssen, dann muss man nicht class dafür "verschwenden"

OdfFhem

@setstate

Ich verfolge die Entwicklung von FTUI 3 schon seit Anfang des Jahres und muss sagen, dass es mir immer besser gefällt - langsam ja zum Glück auch immer mehr FTUI-Freunden.


Zwischenzeitig hatte ich in "meinem" Stand eine ago bzw. till-Funktion integriert, die mir die Zeit seit bzw. bis zu einem Ereignis aufbereitete.

Damals hieß es noch:
text-filter="toDate(), ago('[ dd T + hh:mm:ss ]')"
Heute sollte/muss es vermutlilch eher heissen:

[text]="ftuitest:onoff:time | toDate() | ago | format('[ dd T + hh:mm:ss ]')"
[text]="ftuitest:dateTime | toDate() | till | format('[ dd T + hh:mm:ss ]')"


dd, hh, mm und ss stehen für Tage, Stunden, Minuten bzw. Sekunden; [, T, + und : sind beliebig wählbare Freitexte.

Können diese beiden Funktionen als allgemeine "Pipes" bereitgestellt werden ?


Abschließend noch eine Anmerkung zur Update-Bereitstellung: Unter Umständen wäre es besser, die neue FTUI-Version nicht als www/ftui, sondern als www/ftui3 bereitzustellen. In meinen Augen grenzt das "alt" und "neu" besser ab - gilt vermutlich auch fürs Wiki. Ist aber natürlich nur eine persönliche Einschätzung und kann im Ernstfall auch ohne Nebenwirkungen einfach ignoriert werden.

setstate

Neue Pipe Funktionen kann ich gerne hinzufügen.

Beim Ordnernamen würde ich nur ungern eine Versionsnummer mitgeben. Selten nutzt man zwei Versionen ewig parallel. Das ist immer nur in der Übergangszeit so. Zumal jetzt nach www/tablet deployed wird und ich die Version 3 nach www/ftui updaten lassen will. User, die das jetzt schon für die Version 2 benutzen und Version 3 ausprobieren wollen, müssten die v2 in www/ftui2 oder www/ftui _old umbenennen.

Fürs Wiki habe ich noch keine Idee. Dort sollte eine Unterscheidung langfristig gegeben bleiben.
Aber mal abwarten, ob die neue Version überhaupt Nutzer findet.  :o
Offiziell habe ich ja noch nix vorgestellt. Ist immer noch alles in der Betaphase, obwohl die Version 3 schon viel weiter fortgeschritten ist, als die Version 1 damals, als ich sie präsentiert hatte.

Eisix


ZitatAber mal abwarten, ob die neue Version überhaupt Nutzer findet.  :o
Offiziell habe ich ja noch nix vorgestellt. Ist immer noch alles in der Betaphase, obwohl die Version 3 schon viel weiter fortgeschritten ist, als die Version 1 damals, als ich sie präsentiert hatte.


Also ich nutze momentan 3 verschiedene Versionen

Die 2.7.1       für Android und IOS da geht die Verbindung nicht so oft verloren
Die 2.7.15     für Tablets
Die 3             wird die neue für alles, aus der Nummer kommst du nicht mehr raus jetzt  ;)

Gruß
Eisix

Eisix

Hallo setstate,


<ftui-image
        src="images/Minion-Kungfu-icon.png"
        width="45" height="45"
        [color]="rr_Test:state | map('absent:faded, gone:faded, home:solid, gotosleep:solid ')"
></ftui-image>


Je nach Residence Status soll das image normal zu sehen sein oder grau sein.
Color ist da wahrscheinlich nicht der richtige Parameter, muss wahrscheinlich ein neuer her.

Gruß
Eisix

Eisix

und noch einer!

Wie kriege ich Datum und Uhrzeit ganz unten hin.

        <ftui-grid-tile row="1" col="1" height="15" width="1">
        <div class="column">
                <ftui-tab view="View1" active><ftui-icon name="home1"></ftui-icon></ftui-tab>
                <ftui-tab view="View2"><ftui-icon name="video-camera"></ftui-icon></ftui-tab>
                <ftui-tab view="View3"><ftui-icon name="sunny-rain-mix"></ftui-icon></ftui-tab>

                <div class="footer">
                        <ftui-clock format="eeee" class="small text-center"></ftui-clock>
                        <ftui-clock format="DD.MM.YYYY" class="small text-center"></ftui-clock>
                        <ftui-clock format="hh:mm" class="text-center"></ftui-clock>
                </div>
        </div>
        </ftui-grid-tile>


Gruß
Eisix

Thyraz

Zitat von: Eisix am 19 November 2020, 13:11:04

        src="images/Minion-Kungfu-icon.png"


Je nach Residence Status soll das image normal zu sehen sein oder grau sein.
Color ist da wahrscheinlich nicht der richtige Parameter, muss wahrscheinlich ein neuer her.

Pixelgrafiken kannst du ja nicht einfach so umfärben.
Ist das mit Transparenz und du willst alle sichtbaren Pixel in Grau fräben? Oder das Bild in Graustufen wandeln?

Für Graustufen gäbe es die CSS Eigenschaft filter:

.myImage {
  filter: grayscale(1);
}


Dann könntest du das wahrscheinlich per Class mit Map zuweisen.
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...

grossmaggul

Ich habe ein Problem mit dem neuen "content", das will nicht so, wie ich will, möglicherweise habe ich aber auch die Funktionsweise nicht verstanden.

Mal ein paar Codeschnipsel
In der index.html:
<ftui-tab-view id="View3">
      <ftui-content file="templates/licht_template.html"></ftui-content>
    </ftui-tab-view>


Und die einzufügende Seite:
<ftui-grid-tile row="1" col="2" height="5" width="9">
        <ftui-colorpicker [hex]="wz.stehlampe_1:rgb" (hex)="replace('#','') | wz.stehlampe_1:rgb"></ftui-colorpicker>
</ftui-grid-tile>


Wenn ich den Menüpunkt aufrufe, hängt der "Tab" oben links in der Ecke über dem Menü.

Was stimmt da nicht, bzw. habe ich vergessen?
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

setstate

Oh, ftui-grid-tile nachladen habe ich noch nicht probiert.
Da könnte noch was  mit der Größe nicht passen.

Eisix

@Thyraz

so war der alte code

                <div class="round top-narrow grow-1 inline" data-type="image" data-device="rr_Eisix" data-state-get="state" data-states='["((home)|(gotosleep))","((absent)|(gone))"]' data-classes='["","faded"]' data-width="45" data-height="45" data-url="/fhem/images/Minion-Amazed-icon.png"></div>



Denke faded hatte eine niedrige opacity. Beispiel hängt dran.

Gruß
Thorsten