FTUI version 3

[Thyraz]

Hi OdFhem

Bin mir nicht sicher, ob das meine Lösung wäre. Da ich sowieso in der eigenen css-Datei eingreifen muss, würde ich dort einfach die Klasse .fc-toolbar-title redefinieren ("the most basic technique")

Das wird mit FTUI3 nicht mehr klappen.
Die Widgets sind ja mittlerweile echte Web Komponenten.
Ihr Inhalt ist also in einem Shadow DOM gekapselt und damit auch die CSS Rules.

Von außen kommst du da nicht ran (von fiesen Javascript Tricksereien mal abgesehen).
Der neue Weg ist also, dem Nutzer der Komponente die nötigen Infos und Settings von außen erreichbar/konfigurierbar zu machen.

Bei der eigentlichen Konfiguration einer Web Komponente wären das dann die Attribute/Properties.
Styling Eigenschaften die jetzt nicht zur normalen Konfiguration gehören, sondern nur der optischen Anpassung außerhalb der Standardnutzung dienen,
stellt man hingegen für gewöhnlich als CSS-Variablen zur Verfügung. (Siehe z.B. auch die neue Chart Komponente die davon stark Gebrauch macht.)
Diese wirken auf alle untergeordneten Elemente und passieren dabei auch die Grenze des Shadow-DOM.
Sind sozusagen die Brücke über die Kapselung hinweg.

Allgemein kann man festhalten, dass fullcalendar für praktisch jedes Darstellungselement eine eigene Klasse - teilweise sogar CSS-Variablen - definiert hat und damit schon eine extreme Beeinflussbarkeit anbietet.

Übrigens bin ich mir auch nicht sicher, ob die component in einer eigenen css-Datei überhaupt die fc-Vorgaben überschreiben sollte, denn fullcalendar bietet ja bereits ein komplettes "Standard"-Design, das jeder Nutzer selbst beeinflussen kann. Nur mal angenommen, man wollte auf das Standard-Design zurück, dann wird es schwierig ...

Ist aber - wie immer - nur eine Meinung, kein "Gesetz" ...

Ich weiß aus der Vergangenheit natürlich auch, dass es sehr viele verschiedene "Typen" von FTUI-Nutzern gibt.
Die, die in diesem Forumsbereich am stärksten auffallen, sind sicher die Bastler die gern an jeder Stellschraube drehen.

Ich hab mir allerdings auf die Fahnen geschrieben FTUI durch spezielle Komponenten auch für einen Nutzerkreis zu erschließen, die entweder nicht so HTML-versiert sind,
oder einfach keine Lust auf lange Konfigurationsorgien haben.
Entsprechend versuche ich Komponenten, Templates, ... zu bauen die nicht zuuuu komplex von der Konfiguration sind und möglichst einfach dazu genutzt werden können um Standardanwendungen abzubilden.

Siehe auch die Idee mit fertigen Panels wie panel-dimmer oder panel-blind.

Entsprechend bin ich hier auch nicht aus der Sicht Ich will FullCalendar in FTUI nutzbar machen herangegangen,
sondern hatte ein bestimmtes Ergebnis im Sinn und FullCalendar war eben das Werkzeug das den Weg dorthin schnell und einfach gemacht hat.

Die CSS Anpassungen dienen auch nur diesem Zweck:
- Der Kalender soll sich von den Farben an FTUI anpassen
- Das Ganze soll sich auch ohne eigene CSS Anpassungen soweit optisch gut integrieren
- Das Layout wird soweit angepasst, dass ich den Kalender für gut lesbar und nutzbar halte (das ist natürlich subjektiv und evtl. leidet ihr dann unter meinen Fehleinschätzungen. )

Als Beispiel für den letzten Punkt: Mir gefällt z.B. bei FullCalendar nicht, dass sich in der Listenansicht die ganztätigen Events optisch kaum von normalen Terminen unterscheiden.
Also hab ich das geändert. Damit müsst ihr nun eben leben.

Das Ganze ist ja aber nur eine 3rd Party Komponente unter vielen.
Wenn das für die Hardcore User nicht ausreicht, wird sicher irgendwann zusätzlich zu dieser Calendar Komponente noch eine FullCalendar Komponente von irgendjemand auftauchen.
Gab bisher ja auch schon diverse Chart-Lösungen für FTUI 2.x

[grossmaggul]

Es geht um eine CSS-Variable, die in einer eigenen css-Datei definiert werden kann.

Danke, ich stecke in CSS nicht so drin, deshalb war mir das bisher nicht bekannt, daß es da auch Variablen gibt, werde mich mal schlau machen.

Ich hab mir allerdings auf die Fahnen geschrieben FTUI durch spezielle Komponenten auch für einen Nutzerkreis zu erschließen, die entweder nicht so HTML-versiert sind,
oder einfach keine Lust auf lange Konfigurationsorgien haben.

Das finde ich sehr lobenswert.

[Thyraz]

edit:

Danke, ich stecke in CSS nicht so drin, deshalb war mir das bisher nicht bekannt, daß es da auch Variablen gibt, werde mich mal schlau machen.

War gerade schon dabei dir auch noch eine Antwort zu tippen.

Super, danke!

Wollte ich jetzt gerade mal ausprobieren, ich bekomme es aber irgendwie nicht hin, ist das so falsch?

Das ist etwas, an das man sich als FTUI 3 Nutzer gewöhnen muss.

Wie im langen letzten Beitrag erwähnt, kann man die CSS Eigenschaften der Komponenten "von außen" nicht mehr direkt beeinflussen.
Fast alle Komponenten nutzen daher mittlerweile für diverse grafische Anpassungsmöglichkeiten die CSS Variablen.


Kurz zu den Basics:
CSS Variablen wirken von außen nach innen.
Sprich, wenn du eine Variable in body oder :root definierst, ist der Wert auch in allen Unterelementen lesbar.
Man kann Variablen in Unterelementen aber auch überschreiben.
Außerhalb ist dann weiterhin der alte Wert gültig. Aber alle Elemente die innerhalb dieser überschriebenen Zuweisung liegen sehen dann den neuen Wert.

Nehmen wir an du hast nur einen Kalender in deinem Setup, oder willst zumindest bei allen Kalendern einen einheitlichen Header-Style.
Dann belegst du in deinem User CSS File diese Variable:

Code Auswählen Erweitern


:root {
  --calendar-title-font-size: 12px;
}

Damit bist du dann schon fertig.

Willst du hingegen nur bei einem Kalender einen kleinen Header und bei den restlichen nicht, darfst du den Variablenwert nur dort zuweisen, wo sie nicht auf die anderen Kalender wirkt.
Zum Beispiel über eine Klasse die du direkt diesem Kalender-Element zuweist.
User CSS File:

Code Auswählen Erweitern


.calendar-small-title{
  --calendar-title-font-size: 12px;
}


HTML Code:

Code Auswählen Erweitern


<ftui-calendar class="calendar-small-title">
  <ftui-calendar-data calendar="Calendar"></ftui-calendar-data>
</ftui-calendar>


[setstate]

man muss nicht unbedingt  - gerade für Tests oder wenn man das nicht überall haben will - eine User CSS einbinden.

Man kann auch nur ein Style Tag in der Header der Seite angeben

Beispiel aus dem Knob Example:

Code Auswählen Erweitern


  <title>FTUI Example Knob</title>
  <style>
    #myKnob1 {
      --knob-needle-color: #da3745;
    }
  </style>


Man kann aber auch die persönlichen Überschreibungen auch in einem Theme-File sammeln und dann der Allgemeinheit als neues Supi-Dupi-Theme zur Verfügung stellen. 

[grossmaggul]

Danke, Thyraz und setstate, ich habe das zwischenzeitlich schon selber herausbekommen, aber so zusammengefasst hilft das auch schon sehr weiter.

Aber nochwas anderes zu Deinem Kalender, hin und wieder, wenn man die Seite neu lädt bekommt man folgende Fehlermeldung:

Code Auswählen Erweitern

calendar.component.js:118
TypeError: dataElement.fetch is not a
function

Und auf iOS Geräten kommt diese Meldung immer, wenn man eine Seite neu lädt:

Code Auswählen Erweitern

calendar.component.js:113
TypeError: dataElement.fetch is not a
function. (In 'dataElement.fetch()',
dataElement.fetch' is undefined)

Und im Widget steht dann "No events to display"

[Thyraz]

Ok.

Das sieht so aus, als ob die calendar-data Elemente noch nicht bereit sind.
Dort soll ja die Funktion fetch() aufgerufen werden.

Muss ich mir mal anschauen.

@setstate weißt du, was da vom Lifecycle der Elemente schiefgehen kann?
Der Ablauf ist genauso wie wir das beim Chart Widget haben:

- Im Constructor von calendar hole ich mir die calendar-data Elemente
- Im ConnectedCallback von calendar rufe ich refresh() im calendar auf
- In refresh() loope ich dann über die calendar-data Elemente und rufe bei diesen fetch() auf.

Die Methode fetch() ist dann bei grossmaggul teilweise noch nicht bekannt und es knallt.
Das könnte bei Chart genauso passieren, da der Mechanismus identisch ist.

Ich bin mir nicht sicher wie der Seitenaufbau und das Initialisieren der einzelnen Komponenten abläuft.
Geht das von oben nach unten im HTML Code?
Also außere Elemente vor Inneren?

Und ConnectedCallback scheint aufgerufen zu werden sobald ein Element fertig geladen ist wie es aussieht.
Hatte gedacht, das passiert wenn alle Elemente initialisiert sind.

Ich weiß nicht ob man eher auf DOMContentLoaded lauschen sollte für den initialen Refresh?
Aber ist da sichergestellt, dass die Komponenten wirklich initialisiert sind, oder kann es sein, dass die Custom Web Components auch noch nicht fertig geladen sind?

[setstate]

Beim Chart passt der Ablauf.

Code Auswählen Erweitern

readystatechange
DOMContentLoaded
readystatechange
pageshow

2 chart control connected
3 chart data connected
chart data connected
2 chart connected
refresh ftui-chart-1
refresh ftui-chart-2

Ich benutze das pageshow Event, um FTUI zu initialisieren. Dann werden alle ':not(:defined)' Elemente gesucht und deren Module geladen.
Dort gebe ich keine Reihenfolge vor.
Ich bin der Meinung, wenn man sichergehen will, dass eine Subkomponente vorher geladen ist, reicht es, das als import anzugeben.

Ich habe beim Chart extra ein import { FtuiChartData } from './chart-data.component.js'; reingenommen (auch schon als wir das noch nicht direkt brauchten), damit das vorher geladen und definiert werden kann.

[Thyraz]

Ich bin der Meinung, wenn man sichergehen will, dass eine Subkomponente vorher geladen ist, reicht es, das als import anzugeben.

Top das war es.

@grossmaggul Update is online

[OdfFhem]

@Thyraz

zunächst mal vielen Dank für die ausführlichen Informationen rund um CSS.

Ich kann die Schilderungen gut nachverfolgen, denn grundsätzlich gab es das Problem ja auch schon unter dem "alten" FTUI. Hat man in einem Widget eine widget-css-Datei geladen, dann war es im Grunde mit einer user-css-Datei schon vorbei - Überladen quasi unmöglich.

Vom Prinzip her habe ich aber ein wenig den Eindruck, dass beide Welten das gleiche und eigentlich lösbare Problem besitzen.

Aus dem Grund habe ich mich mal einfach spielerisch um eine Lösung bemüht, die für den Entwickler praktisch keinen Mehraufwand bedeutet, die Tür für die auffälligen "Typen" aber zum Glück weit auflässt.

Letztlich waren zwei zusätzliche Zeilen in calendar.component.js nötig und eine (praktisch) leere Datei - Tricksereien waren nicht notwendig.

Herausgekommen ist dann - ohne Einsatz von css-Variablen - eine Ausgabe, die unten im Screenshot zu sehen ist.


Das Unmögliche scheint also doch lösbar zu sein ...

[grossmaggul]

@grossmaggul Update is online

Das ging ja fix.

Und gleich ein neues Problem, also ich habe eins, nicht FTUI3(vermute ich zumindest).

Ich habe versucht mit folgendem Code eine Telefonliste zu basteln:

Code Auswählen Erweitern

<ftui-grid-tile row="3" col="9" height="2" width="3" shape="round">
        <header>Telefon</header>
        <ftui-row class="size-0">
        <ftui-icon path="../images/openautomation/" [name]="fritzlist:1-state | map('=>:phone_call_end_in,=> X:phone_missed_out,<=:phone_call_end_out,=> ((o)):phone_ring,=> [=]:phone_ring_in,=> O_O:phone_answering" [color]="fritlist:1-state | '=>:green,=> X:danger,<=:blue,=> ((o)):danger,=> [=]:green,=> O_O:yellow'"></ftui-icon>
        <ftui-label [text]="fritzlist:1-name"></ftui-label>
        <ftui-label [text]="fritzlist:1-number"></ftui-label>
        <ftui-label [text]="fritzlist:1-timestamp"></ftui-label>
        </ftui-row>
</ftui-grid-tile>


Leider werden nicht wie erwartet die entsprechenden Icons angezeigt sondern nur ein kleiner, roter Punkt, was mache ich da falsch?
Die Icons befinden sich wirklich dort, gebe ich einfach über "name=dingsbums_icon" ein Icon an, wird es angezeigt.

[Eisix]

Hallo grossmaggul,

Anrufliste habe ich fertig, hängt dran.

Gruß
Eisix

[setstate]

rot umrahmt werden Komponenten, die einen Fehler in der Config haben. Die Sonderzeichen in der Map musst du quoten.
Sobald eines folgender Zeichen im String vorkommen,  musst du den String in Quotes angeben.

Code Auswählen Erweitern

[]():=.!$&?*+,#'^@

Da schon " und ' vergeben sind, habe ich ` dafür benutzt.

anstatt

Code Auswählen Erweitern

=>:phone_call_end_in

musst du

Code Auswählen Erweitern

`=>`:phone_call_end_in

schreiben

Für das Map benutze ich HOCON, das ist wie JSON nur ohne immer alles in Quotes angeben zu müssen

https://github.com/lightbend/config/blob/master/HOCON.md
https://hocon-playground.herokuapp.com

[grossmaggul]

Sobald eines folgender Zeichen im String vorkommen,  musst du den String in Quotes angeben

Ich dachte es mir fast, wußte nur nicht welche Quotes ich benutzen sollte, da " und ' ja schon vergeben waren.

Anrufliste habe ich fertig, hängt dran.

Ah, sehr schön, danke!

[Eisix]

Hallo,

wie bindet man fa icons ein?

Gruß
Eisix

[setstate]

Viele fa Icon sind im Icon-Set mit drin. Ich habe selektiv Interessantes für Homeautomation aufgenommen.

Wenn was fehlt und es für viele interessant ist, könnte ich es noch mit aufnehmen.

Ansonsten musst du das komplette ZIP downloaden und die *.svg Files aus dem /svgs Ordner irgendwo hin kopieren. Den neuen Folder kann man dann mit dem path Attribut im ftui-icon  angeben.

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself