FTUI version 3

[grossmaggul]

Wir sollten nicht vergessen das hier ist noch "beta", aber dafür schon Top!

Das vergesse ich nicht und ja, das bisherige Ergebnis ist wirklich top.
Ich mache auch nur Vorschläge und habe keinerlei Forderungen(wäre ja auch noch schöner ), wenn's kommt freut's mich, wenn nicht, freue ich mich trotzdem.

[Thyraz]

wenn's kommt freut's mich.

Dann würde ich mal in setstates Github Repository vorbei schauen.
Dort hab ich gerade was entdeckt...

[Thyraz]

Hab mal eine neue Testversion von der Calendar Komponente hochgeladen.

Die unterstützt neben listMonth und listWeek nun auch dayGridMonth beim Attribut "view".
Dieser Monatsansicht hab ich 3 verschiedene Ansichten spendiert, je nachdem wie breit das Parent-Element ist.
Bisher ist das ein Automatismus. Eine Property zum direkten Wählen einer der Ansichten kommt noch.

Die Ansichten sind
- Schmal: Nur Punkte für Events
- Mittel: Event-Ttitel sind sichtbar
- Breit: Startzeit und Event-Titel sind sichtbar

Wenn man einen Parent ohne fixe Höhe hat,
Berechnet der Kalender selbst die optimale Höhe für sich.

Gibt man eine Höhe vor, versucht der Kalender sich einzupassen.
Klappt dies wegen zuvielen Terminen an manchen Tagen bei Ansicht Mittel oder Breit nicht, werden nicht alle Events dargesellt und es gibt ein "More" Button der ein Popup mit allen Events des Tages anzeigt.
Wird die Höhe selbst dafür zu klein, wird der Kalender scrollbar im Parent Element.

Die Höhe kann auf verschiedene Wege festgelegt werden:
- Standard bei Parent ohne festgelegte Höhe ist, dass der Calendar selbst die Höhe festlegt.
- Dies kann über das Attribut height überschrieben werden.
- Ist der Calendar in einen Parent mit fixer Höhe eingebunden (z.B. non-responsive Grid-Tile), dann passt er sich von der Größe ein. Das height Attribut muss nicht gesetzt werden.
- Ist die Höhe nicht ausreichend, ist der Kalender scrollbar.

Anbei ein paar Bilder um sich das besser vorstellen zu können:

[grossmaggul]

Jungs, Ihr seid ganz schön fix.

Thyraz, sehr schick!

Dort hab ich gerade was entdeckt...

Ich auch.


Mir ist aufgefallen, daß bei manchen Beispielseiten im git nur eine schwarze Seite zu sehen ist und bei allen Seiten kommt eine Fehlermeldung.

[setstate]

Mir ist aufgefallen, daß bei manchen Beispielseiten im git nur eine schwarze Seite zu sehen ist und bei allen Seiten kommt eine Fehlermeldung.

das könnte an den

Code Auswählen Erweitern

   
<!-- when serving the page with other web servers, e.g. lighttpd -->
<meta name="fhemweb_url" content="http://fhem.local:8083/fhem/">


liegen. Lösch das mal raus.

[grossmaggul]

Wie kann ich das denn rauslöschen, wenn es um die Seiten im github geht?

Also mir wird der Fehler angezeigt wenn ich die im Bild gezeigten Seiten aufrufe.

[setstate]

ach das. Das ist, weil versucht wird, FHEM zu erreichen. Das schaue ich mir an und versuche den Demo-Mode zu erkennen.

[eppi]

Hallo
Kann mir jemand einen Tip geben, wie ich "Home" direkt unter das Icon schieben kann, ohne das so ein grosser Abstand entsteht?

Code Auswählen Erweitern

<ftui-grid-tile row="1" col="1" height="8" width="1" shape="round">
      <div class="column">
        <ftui-tab view="View1" fill="solid" shape="circle" active><ftui-icon name="home1"></ftui-icon></ftui-tab>
<ftui-label class="size-1">HOME</ftui-label>
        <ftui-tab view="View2" fill="solid" shape="circle"><ftui-icon name="user"></ftui-icon></ftui-tab>
        <ftui-tab view="View3" fill="solid" shape="circle"><ftui-icon name="music"></ftui-icon></ftui-tab>
        <ftui-tab view="View4" fill="solid" shape="circle"><ftui-icon name="music"></ftui-icon></ftui-tab>
        <ftui-tab view="View5" fill="solid" shape="circle"><ftui-icon name="music"></ftui-icon></ftui-tab>
        <ftui-tab view="View6" fill="solid" shape="circle"><ftui-icon name="music"></ftui-icon></ftui-tab>
      </div>
</ftui-grid-tile>
Danke vielmals und Gruss Eppi

[setstate]

Kann mir jemand einen Tip geben, wie ich "Home" direkt unter das Icon schieben kann, ohne das so ein grosser Abstand entsteht?

Mit direction="vertical"

Code Auswählen Erweitern


        <ftui-tab view="View1" direction="vertical" active>
          <ftui-icon name="home1"></ftui-icon>
          <ftui-label>Home</ftui-label>
        </ftui-tab>
        <ftui-tab view="View2" direction="vertical">
          <ftui-icon name="music"></ftui-icon>
          <ftui-label>Music</ftui-label>
        </ftui-tab>


[grossmaggul]

Hallo,

ich habe gerade mal mit den Transparenzen rumgespielt, dabei ist mir aufgefallen, daß sich die Transparenz immer auf den gesamten Inhalt eine Tiles auswirkt, also beim Menü z.B. auch auf die Icons. Wäre es nicht sinnvoller, wenn man bei <ftui-grid-tile< die Transparenz setzt, daß dann nur das Tile die Transparenz annehmen würde, zumindest bei FTUI2 war das so.

Vielleicht mache ich aber auch was falsch, Beispiel Menü:

Code Auswählen Erweitern

<ftui-grid-tile row="1" col="1" height="8" width="1" shape="round" class="half-transparent">
      <ftui-column class="size-3">
        <ftui-tab view="Home" active><ftui-icon name="home1"></ftui-icon></ftui-tab>
        <ftui-tab view="Wetter"><ftui-icon name="weather"></ftui-icon></ftui-tab>
        <ftui-tab view="Licht"><ftui-icon name="lightbulb"></ftui-icon></ftui-tab>
        <ftui-tab view="View4"><ftui-icon name="coffee"></ftui-icon></ftui-tab>
        <ftui-tab view="View5"><ftui-icon name="music"></ftui-icon></ftui-tab>
      </ftui-column>
    </ftui-grid-tile>

Ich hoffe ich konnte mich verständlich machen.

[setstate]

transparent ist was anderes als translucent.
Ich habe jetzt color="translucent" ergänzt.

Aber mit den Bezeichnungen bin ich auch noch nicht zufrieden.
Jetzt:
- transparent: nix
- translucent: durchscheinend

Vielleicht so:
- none: nix
- transparent: durchscheinend

Oder so:
- clear: nix
- transparent: durchscheinend


Siehe examples/tab-trans.html
Einige Sonderanpassungen habe ich direkt in den Header geschrieben. Umfangreichere Anpassungen könnte man als Theme-File sammeln.

Code Auswählen Erweitern



  <style>
    body {
      background-image: url("https://hdhintergrundbilder.net/image/natur/1151/gebirge-nachthimmel-sterne-milchstrase.jpg");
      --tab-color: var(--dark-color);
      --tab-active-color: var(--medium-color);
      --tab-contrast-color: var(--light-color);
    }
  </style>


https://knowthelist.github.io/ftui/examples/tab-trans.html

[octek0815]

Mit Apache kann ich dir leider nicht helfen. Ich nutzte den lighttpd, den Pi-Hole mitbringt und habe nur einen symlink von /opt/fhem/www/ftui nach /var/www/html/ftui gesetzt. FHEMWEB ist mir auch zu langsam geworden. Mit Freezemon finde ich auch keine Ursache. Dort erscheint jeder Funktionsaufruf mit 1-2 Sekunden freeze.

Hallo setstate,

wie hast Du das eingerichtet? Wollte schauen ob ich FTUI 2 noch ein wenig beschleunigen kann, vor ich komplett auf 3 umstelle.
Ich habe lighttpd installiert und ein link erzeugt, aber die Seite wird nicht richtig aus geliefert (sowhl FTUI 2 als auch 3).
Hast ein Tipp?

Grüße
Olli

[setstate]

Mmmm,

Rechte kopieren?

Code Auswählen Erweitern

sudo chmod -R --reference=/var/www/html/admin /var/www/html/ftui

Gibt es Fehlermeldungen?

[grossmaggul]

setstate, ich glaube wir reden aneinander vorbei.

Ich habe mal zwei Bilder angehängt, das Erste zeigt FTUI3 mit class="half-transparent", das Zweite zeigt FTUI2 mit class="semitransparent"*.

Wie man deutlich sieht, ist bei FTUI2 nur der Hintergrund transluzent, der Vordergrund (die Icons) bleiben undurchscheinend.
Bei FTUI3 sind aber alle Elemente transparent, Hintergrund und Icons und "color="translucent" verhält sich ebenso.

*semitransparent (also eigentlich transluzent) hatte ich selber definiert:

Code Auswählen Erweitern

.semitransparent {
    background: rgba(0, 0, 0, 0.4) !important;
}

Ich hoffe es wird jetzt klarer, was ich meine.

[octek0815]

Mmmm,

Rechte kopieren?

Code Auswählen Erweitern

sudo chmod -R --reference=/var/www/html/admin /var/www/html/ftui

Gibt es Fehlermeldungen?

Habe mit FTUI 2.7.15 getestet und bekomme die folgende Meldung: