Autor Thema: FTUI version 3  (Gelesen 96639 mal)

Offline Thyraz

  • Hero Member
  • *****
  • Beiträge: 1212
Antw:FTUI version 3
« Antwort #30 am: 17 November 2020, 08:33:22 »
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.


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.

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, ...

Offline eppi

  • Full Member
  • ***
  • Beiträge: 432
Antw:FTUI version 3
« Antwort #31 am: 17 November 2020, 18:27:41 »
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
HM, FS20, CUL, CUNO V1, CUNO V2, HMLAN, FHT, S555, SIS-PM, IT, OWFS,  DebianWheezy@ODROID-U3

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4237
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #32 am: 17 November 2020, 18:49:47 »
Ich würde zu gegebener Zeit wieder ein Update File anbieten. Oder gibt es mittlerweile etwas besseres?
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline grossmaggul

  • Sr. Member
  • ****
  • Beiträge: 545
    • Mein Blog
Antw:FTUI version 3
« Antwort #33 am: 18 November 2020, 10:04:59 »
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):
« Letzte Änderung: 18 November 2020, 15:16:09 von grossmaggul »
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1, 1 x IT-3000

Offline Eisix

  • Hero Member
  • *****
  • Beiträge: 1082
Antw:FTUI version 3
« Antwort #34 am: 18 November 2020, 14:12:14 »
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

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4237
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #35 am: 18 November 2020, 14:54:17 »

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"

Offline OdfFhem

  • Sr. Member
  • ****
  • Beiträge: 789
Antw:FTUI version 3
« Antwort #36 am: 19 November 2020, 03:53:48 »
@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.
Gefällt mir Gefällt mir x 1 Zustimmung Zustimmung x 1 Liste anzeigen

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4237
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #37 am: 19 November 2020, 12:16:06 »
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.

Offline Eisix

  • Hero Member
  • *****
  • Beiträge: 1082
Antw:FTUI version 3
« Antwort #38 am: 19 November 2020, 12:33:32 »

Zitat
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.


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

Offline Eisix

  • Hero Member
  • *****
  • Beiträge: 1082
Antw:FTUI version 3
« Antwort #39 am: 19 November 2020, 13:11:04 »
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

Offline Eisix

  • Hero Member
  • *****
  • Beiträge: 1082
Antw:FTUI version 3
« Antwort #40 am: 19 November 2020, 13:15:11 »
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

Offline Thyraz

  • Hero Member
  • *****
  • Beiträge: 1212
Antw:FTUI version 3
« Antwort #41 am: 19 November 2020, 13:23:59 »
        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, ...

Offline grossmaggul

  • Sr. Member
  • ****
  • Beiträge: 545
    • Mein Blog
Antw:FTUI version 3
« Antwort #42 am: 19 November 2020, 13:25:18 »
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, 1 x IT-3000

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4237
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:FTUI version 3
« Antwort #43 am: 19 November 2020, 13:32:55 »
Oh, ftui-grid-tile nachladen habe ich noch nicht probiert.
Da könnte noch was  mit der Größe nicht passen.

Offline Eisix

  • Hero Member
  • *****
  • Beiträge: 1082
Antw:FTUI version 3
« Antwort #44 am: 19 November 2020, 13:39:26 »
@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