FTUI version 3

[moonsorrox]

Danke, ist mir garnicht aufgefallen: ist aber jetzt korrigiert.

da wir hier beim Datum sind, wie ist es möglich dieses in einer anderen Farbe darzustellen, geht das nur mit css. Denn ein "color="farbe"" macht er nicht..?
Ein eingestzter style im <div><div> macht er auch nicht

[setstate]

da wir hier beim Datum sind, wie ist es möglich dieses in einer anderen Farbe darzustellen, geht das nur mit css. Denn ein "color="farbe"" macht er nicht..?
Ein eingestzter style im <div><div> macht er auch nicht

ist jetzt geändert. FtuiClock extends FtuiLabel, damit kann Clock jetzt alles, was auch Label kann

[moonsorrox]

ist jetzt geändert. FtuiClock extends FtuiLabel, damit kann Clock jetzt alles, was auch Label kann

Super und Danke für deinen unermüdlichen Einsatz... welche Datei muss ich dazu von github holen..? ah schon gesehen

[moonsorrox]

@setstate
Mal eine Zwischenfrage zur Ladezeit der gesamten Seite, eigntlich ist es logisch das es umso länger dauert, je mehr und länger die index.html wird.
Welche Ladezeiten wären denn akzeptabel, kannst du das ungefähr sagen..?

Ich sage jetzt mal wenn ich ca. bei 1600 ms bin ist das ja doch schon etwas an Zeit.
Was ich wissen möchte dahingehend bedarf es da einer Code Bereinigung, oder ist das alles im Rahmen.?

Ich habe z.B. sehr oft Codeschnipsel womit ich probiere und die kommentiere ich dann aus, macht das die Seite langsamer und sollte ich alles was grün im Code ist raus nehmen, oder spielt das für die ladezeit keine Rolle.

Und was mich noch interessiert, würde es was bringen wenn man einige Dinge auslagert, so wie es vorher möglich war mit Templates. Momentan geht das ja noch nicht... aber du hast ja schon einmal was dazu gesagt.

Ich habe z.B. gerade beim Wetter Webseiten drin, wo ich unten genau sehe wo er drauf wartet... das sind dann wohl auch die Seiten die den Seitenaufbau verzögern.
Meine Fragen deshalb weil alles so Mega schnell aufbaut, dass es Spass macht FTUI 3 zu nutzen... und ich möchte natürlich wenig an Zeit zum Aufbau der Seite verlieren.

Ein großer Dank geht hier nochmals raus für deine unermüdliche Arbeit 

[somansch]

Ich würde das in das Map File einbauen. Damit die Matrix aber nicht zu groß wird, habe ich einen Zwischenwert eingeführt.

Provider-Condition -> Weather-Condition -> Icon

Damit braucht man bei einem neuem Provider nur noch ein Provider-Condition -> Weather-Condition hinzufügen.
Und bei einem neuen IconSet ein Weather-Condition -> Icon

Könntest du dein Map daraufhin umstellen, dann übernehme ich das?

@setstate,
ich klinke mich jetzt auch mal hier ein. Sehr spannend, was hier gerade entsteht  .

Im Moment pflege ich ja das Wettericon-Mapping für "FTUI 2" und habe dort mehr als 1700 Übersetzungen (https://forum.fhem.de/index.php?action=dlattach;topic=96954.0;attach=143378) an Hand der API Readings sämtlicher Wetterprovider (DarkSky, OpenWeather, Wunderground, Proplanta, DWD und Netatmo) gemacht. Somit wird die unterschiedliche Schreibweise und auch der Tag/Nacht Unterschied geregelt.

Der Vorschlag des neuen Matrix-Ansatzes finde ich sehr gut, gibt es hier schon etwas? Ich schlage vor, diese Thematik in dem neuen Thread "[FTUI3ß] Andere Wettericons" https://forum.fhem.de/index.php/topic,117473.0.html weiterzuverfolgen.

Viele Grüße
Andreas

[blasterx]

Ich habe eine Fage ist es geplant eine Componente wie das Homestatus-Widget wom FTUI2 zu entwickeln?

Gruß BlasterX

[moonsorrox]

Habe ich jetzt hinzugefügt

Code Auswählen Erweitern

<ftui-clock format="eeee, DD.MMMM YYYY" class="size-5"></ftui-clock>
Es funktioniert, aber MMMM gibt für Heute Februar zurück. ^^
(Ja, Systemzeiten FHEm/Browser-OS sind korrekt)


Kann es sein, dass die CSS Klasse spin nicht mehr funktioniert? Genausowenig hop. Oder ist das nur nicht implementiert? blink klappt perfekt.


Apropos, für alle, die es noch nicht mitbekommen haben: die neue Update-URL ist jetzt:
https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt

Damit geht auch ein

Code Auswählen Erweitern

update add https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
um FTUI3 mit dem regulärem FHEM update Prozess durchzuführen.

Mir gefällt diese Ansicht das Datum auszugeben, komischer Weise steht hier der 10. Februar, während mein momentanes Datum aber richtig ist..! Hat das jemand auch so.?

[OdfFhem]

@moonsorrox

Angenommen, ich habe die Frage richtig verstanden, dann steht die Antwort hier: https://forum.fhem.de/index.php/topic,115259.msg1119805.html#msg1119805

Heute morgen habe ich selbst den aktuellen ftui3-Stand gezogen und es wird der "10.Januar" dargestellt.

[moonsorrox]

Ok, dann wird es an der Version liegen, ich ziehe den nicht jeden Tag 

@moonsorrox

Angenommen, ich habe die Frage richtig verstanden, dann steht die Antwort hier: https://forum.fhem.de/index.php/topic,115259.msg1119805.html#msg1119805

Heute morgen habe ich selbst den aktuellen ftui3-Stand gezogen und es wird der "10.Januar" dargestellt.

heute mal die aktuelle Version gezogen, aber mein so erstelltes Datum hat immer noch den Februar drin, mein benutztes Datum ist aber richtig...! 

Kommando zurück.... der leidige Browsercache musste geleert werden 

[OdfFhem]

@setstate

Unter dem bisherigen FTUI gab es beim label-Widget ein refresh-Attribut. Gibt es (jetzt schon bzw. bald) etwas Vergleichbares auch unter FTUI3?

Ich verwende dies z.B., um das Alter eines Readings automatisch anzupassen ... von FHEM-Seite kommt logischerweise kein Event - es sei denn, der Wert des Readings hat sich geändert ...

[setstate]

Nein, gibt es noch nicht. Hatte ich garnicht mehr auf dem Schirm. Schaue ich mir später mal an.

[Peter68]

@setstate

Kann man schon eine 2 Navigationsebene erstellen (wie mit pagebutton in Version 2) ?

VG
Peter

[eppi]

Hallo zusammen
Ich suche eine kreative Idee, wie ich meinen Briefkasten in FTUI3 implementieren kann. Bei FTUI2 habe ich das FileLog Modul verwendet, dass mir anzeigt hat wann jemand die Klappe bewegt hat (HM Fensterkontakt). Ich möchte das mit FTUI3 auch wieder lösen können und eine History von mindestens 10 Bewegungen haben mit Datum und Zeit. Wäre das ev möglich mit Label? Hat jemand etwas ähnliches oder eine Idee?

Danke und viele Grüsse, Eppi

[grossmaggul]

Es wäre vielleicht besser, wenn Du dafür einen eigenen Thread eröffnen würdest.

[yersinia]

@setstate

Wird es eigentlich sowas wie eine swiper Funktion wieder geben?
Oder gibt es diese schon?

Ja, ich hoffe ich finde eine gute Lösung ohne extra Lib. Wenn jemand etwas schönes kennt (Examples, Demos, etc.), dann her damit.

Da ich gerade teste, ob und wie man das DWD Warn Widget in FTUI3 überführen kann (was, btw, schon mit den vorhandenen Bordmitteln relativ trivial ist) und ich eine Art swiper bzw. slide benötige, bin ich auf folgendes gestoßen.
Using animation for automatic slideshows
Slider als Keyframe-Animation mit CSS3

Das funktioniert echt gut -ausschließlich- mit CSS3 und vergleichsweise wenig Code - wenn man eine vorher definierte, statische Anzahl an slides hat, da man die animationszeiten der childs definieren muss. Für statische Slideshows wie zB Wettervorhersagen (jeder Tag 1 slide) durchaus einfach machbar. Ich denke, dass kann anhand eines Beispiels jeder, der FTUI-Code zusammenbauen kann, auch definieren.

Für dynamische slide-Generierung wie zB bei Anzeige von DWD-Warnungen (Anzahl 0 bis m) müsste die CSS dynamisch angepasst werden, eventuell kann hier ftui3-eigenes JS aushelfen (welches die Animations-Gesamtzeit an die Anzahl der slides sowie das animations-delay der childs anpasst). Das CSS für ein slide-set könnte so aussehen (ich verwende die class als Selektor), dabei ist die Anzeige der slides 5s, die Gesamtanimation also 15s.

Code Auswählen Erweitern

.dwd-warn-slideset {
  position: relative;
}

.dwd-warn-slideset > * {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  animation: 15s dwd-warn-autoplay infinite; /* <-- depends on # of slides; overall animation time in seconds */
}

@keyframes dwd-warn-autoplay {
  0% {visibility: visible;}
  33.33% {visibility: hidden;}  /* <-- percentage depends on # of slides (fraction of 100%) */
}

/* below block depends on # of slides; defines animation delay of x seconds for every child */
.dwd-warn-slideset > *:nth-child(1) {animation-delay: 0s;}
.dwd-warn-slideset > *:nth-child(2) {animation-delay: 5s;}
.dwd-warn-slideset > *:nth-child(3) {animation-delay: 10s;}
Was denkst du? Ist da was machbar? Getestet habe ich das mit FF 84.0.2.
Im einfachen Ansatz gibt es aber so ohne weiteres keine Möglichkeit, dass der Benutzer hier interagieren (zB wischen bzw manuelles wechseln der Slides) kann.


Ich habe noch eine andere Frage. Bei mir funktioniert auf meiner FTUI-Seite die Animation von .hop und .spin nicht. Die Klassen werden eingebunden (kann ich im Inspektor sehen) und die Animationen funktioniert grundsätzlich (getestet im gleichen Browser (FF 84.0.2) mit der icon.html im examples Ordner - da funktionieren .hop und .spin). .blink funktioniert allerdings. Es betrifft anscheinend nur <ftui-icon> wenn ich 'fremde' SVGs wie font-awesome via path einbinde.
Mir fehlt irgendwie ein Ansatz zum debuggen. Hat hier jemand eine Idee und kann mich in eine Richtung schubsen?


Edit: gibt es eine Möglichkeit, den für den <header> reservierten Platz im grid content los zu werden? In einem tile bau' ich den header dynamisch zusammen und irgendwie bekomm' ich 'meinen' div container nicht an die Kante geschoben. hat sich erledigt, richtige positionierung ist das Stichwort.