FTUI version 3

setstate · 27 Januar 2021, 12:11:49

Zitat von: yersinia am 27 Januar 2021, 09:21:54
Coole Sache, nur findet die ftui.helper.js diese nicht wenn via script direkt im HTML eingebunden; die Konsole sagt:
Code Auswählen Erweitern
ReferenceError: minusBlue is not defined ftui.helper.js:107:17

Über extener, eigener JS eingebunden funktioniert es.

Kann ich nicht nachvollziehen. Ein <Script> funktioniert bei mir überall im HTML. Achtung: <Script> nicht in ein mit ftui-content nachgeladenes File schreiben. Das wird ignoriert. Nur ins Main-HTML.

yersinia · 27 Januar 2021, 12:17:20

Zitat von: setstate am 27 Januar 2021, 12:11:49Achtung: <Script> nicht in ein mit ftui-content nachgeladenes File schreiben. Das wird ignoriert. Nur ins Main-HTML.

Das ist der entscheidende Hinweis. Das erklärt auch, warum es bei mir nicht funktioniert - ich habe den Inhalt über ftui-content geladen. Dann geht diesbezgl. nur über mainHTML.

khk123 · 27 Januar 2021, 13:57:43

Zitat von: Eisix am 24 November 2020, 21:32:41
Hallo grossmaggul,

Anrufliste habe ich fertig, hängt dran.

Gruß
Eisix

In der Anrufliste waren noch ein paar Tippfehler. Daher hatte das Mapping der Icons bei mir nicht funktioniert. Außerdem habe ich die letzten fünf Anrufe aufgelistet und die Anordnung verändert. Vielliecht kann es ja jemand gebrauchen. Screenshot und Definitionen hängen dran.

moonsorrox · 27 Januar 2021, 14:16:06

meine Telefonliste sieht exakt genauso aus... blöd das er die Icons nicht komplett in Farbe macht... denn das finde ich nicht so toll, hatte versucht auch die Icons Online zu bearbeiten aber das hat nicht funktioniert mit dem Link hie raus dem Thread...

OdfFhem · 27 Januar 2021, 18:22:27

@setstate

Anfang der Woche war leider nur wenig Zeit - heute konnte ich mich dann aber wieder ein wenig mehr mit FTUI3 beschäftigen. Nachträglich noch mal vielen Dank für die Klärung der meisten Punkte ...

***

css-Klassen können bei ftui-image jetzt auf jeden Fall angewendet werden. Aufgefallen dabei ist mir noch, dass quasi idente Klassen für img und ftui-image zu einem anderen Ergebnis führen können. Ich nutze z.B. die border-Funktionalität und erhalte dabei das unten angehängte Ergebnis (ftui-image in der oberen Zeile ; img in der unteren Zeile): reines img macht was es soll, ftui-image positioniert das Bild im bereitgestellten Rahmen "falsch".

Code Auswählen


  img { border: 3px solid #ddd; }
  .image { border: 3px solid #ddd; }

***

Die "neuen" pipe-Möglichkeiten sind bei vielen Dingen anwendbar - Deine const-Umstellung habe ich noch gut im Hinterkopf; hoffentlich finden bei der breiteren Anwendung noch etliche Allgemeinfunktionen ihren Weg zur Basis ...

***

Die Rückgabe der m2-Variante im dateFromString (z.Zt. Zeile 169) scheint noch mit dem ermittelten offset beeinflusst werden zu müssen. Ich übergebe z.B. die epoch 1611954000, erhalte dann aber nicht das Date für meine Zeitzone, sondern für GMT.

Code Auswählen


--> GMT: Friday, January 29, 2021 9:00:00 PM
--> eigene Zeitzone: Friday, January 29, 2021 10:00:00 PM GMT+01:00

***

Das hidden-Attribute bzgl. ftui-column sorgt für das erwartete Ergebnis. Bei ftui-row hat es scheinbar keinerlei Auswirkung - display:none ist zwar vorhanden, aber der Platz ist trotzdem verbraucht. Ist dies korrekt?

***

ftui-knob habe ich um ein desired-Attribut erweitert, damit man bei einem Thermostat das eigentliche Ziel sichtbar machen kann. Meine Frage wäre, ob dies nicht eine allgemeine Erweiterung wäre ... (s. angehängtes Bild)

***

Da ich doch reichlich Readings mit einer kompletten URL-Angabe für Icons verwende, habe ich ftui-icon um ein url-Attribut erweitert. Scheint mir auch von allgemeinem Interesse ...

===

Für die Erweiterungen - sofern notwendig bzw. gewünscht - würde ich auch einen PR bereitstellen ...

khk123 · 28 Januar 2021, 00:33:40

Zitat von: moonsorrox am 27 Januar 2021, 14:16:06
meine Telefonliste sieht exakt genauso aus... blöd das er die Icons nicht komplett in Farbe macht... denn das finde ich nicht so toll, hatte versucht auch die Icons Online zu bearbeiten aber das hat nicht funktioniert mit dem Link hie raus dem Thread...

Hab meine Telefonliste noch etwas angepasst. Da die Icons nich völlig eingefärbt wurden, habe ich die Icons entsprechen gefärbt und bei meinen Icons abgelegt. Telefonliste und Icons sind angehängt. Vielleicht braucht es jemand.

Edit: Oops, falsche Bild angehängt. Kommt gleich noch.

khk123 · 28 Januar 2021, 00:37:42

Hier das richtige Bild.

octek0815 · 28 Januar 2021, 08:32:03

Moin setstate,

gestern Abend gesehen das du nun eine "swiper" Komponente gebaut hast, sieht im übrigen schick aus.
Gibt es ein Parameter für ein Autoscroll, z.B. in Sekunden?

Grüße
Olli

setstate · 28 Januar 2021, 10:06:41

Es gibt noch keine Parameter. Muss ich erst noch alles einbauen. Autoscroll wird es auch geben.

DEMO

Eisix · 28 Januar 2021, 11:41:31

Hallo,

hatte gestern auch den swiper kurz getestet. Ist es auch möglich Icons einzubinden wie in meinem Anhang? Hat mir bei einem schnellen Test alles zerschossen.

Gruß
Eisix

torte · 28 Januar 2021, 17:24:15

Hallo,

ich hab so ein ähnliches Problem wie moonsorrox ende des Jahres schon.

Zitat von: moonsorrox am 28 Dezember 2020, 13:27:03
Meine Probleme nochmal mit der Anzeige der Geräte ganz oben, das sich mehrere dann zusammen schieben, aber umso weniger es werden teilen sie sich den Platz und rutschen nicht nach oben. Siehe Screenshot
Ich hatte es eingetragen mit "align-items="top" height="10%"

Hab mir ein Content File gemacht für Türen und Fenster. Seit dem ich Hidden mit eingebaut habe schieben sich die Elemente nicht mehr nach oben. Jemand einen Idee warum das so ist?

Content File

Code Auswählen


<ftui-row align-items="top" class="size-0"  [hidden]="{{device}}:state | map('close:true, open:false')">
	<ftui-column align-items="left" width="10%" >
		<ftui-icon class="size-0" name="{{displayicon}}" [color]="{{device}}:{{reading}} | map('`open`:blue,`off`:green,`close`:green,`open_warning`:red,`tilted`:blue,`tilted_warning`:orange, .*:danger')" ></ftui-icon>
	</ftui-column>
	<ftui-column align-items="left" width="60%" >
		<ftui-label class="size-0" text="{{devicename}}" ></ftui-label>
	</ftui-column>
	<ftui-column align-items="left" width="30%" >
		<ftui-label class="size-0" [text]="{{device}}:state:time | toDate() | ago() | timeFormat('h:mm Min')" interval="60" ></ftui-label>
	</ftui-column>
</ftui-row>

Grüße
Torte

setstate · 28 Januar 2021, 19:03:09

Zitat von: torte am 28 Januar 2021, 17:24:15
Hallo,

ich hab so ein ähnliches Problem wie moonsorrox ende des Jahres schon.

Hab mir ein Content File gemacht für Türen und Fenster. Seit dem ich Hidden mit eingebaut habe schieben sich die Elemente nicht mehr nach oben. Jemand einen Idee warum das so ist?

Content File
Code Auswählen Erweitern
<ftui-row align-items="top" class="size-0" [hidden]="{{device}}:state | map('close:true, open:false')"> <ftui-column align-items="left" width="10%" > <ftui-icon class="size-0" name="{{displayicon}}" [color]="{{device}}:{{reading}} | map('`open`:blue,`off`:green,`close`:green,`open_warning`:red,`tilted`:blue,`tilted_warning`:orange, .*:danger')" ></ftui-icon> </ftui-column> <ftui-column align-items="left" width="60%" > <ftui-label class="size-0" text="{{devicename}}" ></ftui-label> </ftui-column> <ftui-column align-items="left" width="30%" > <ftui-label class="size-0" [text]="{{device}}:state:time | toDate() | ago() | timeFormat('h:mm Min')" interval="60" ></ftui-label> </ftui-column> </ftui-row>

Grüße
Torte

align-items="top" ist im ftui-row. Also werden alle Kinder in row hochgezogen (anstatt mittig). Die Kinder sind die ftui-column. Die haben 100% Höhe.
Was soll da hochgezogen werden? Wenn du den Columns 50% Höhe geben würdest, könnte man sehen, wie sie hochgezogen werden. Oder 10%

torte · 28 Januar 2021, 19:46:28

hi setstate

ich glaube das hier fehlt um zu verstehen was ich gebastelt habe

Code Auswählen


<ftui-grid-tile row="1" col="14" height="4" width="3" shape="normal">
  <header>T&uuml;ren und Fenster</header>
   <ftui-content device="tuer2" devicename="K&uuml;che" reading="eventState" displayicon="circle" align-items="top" class="size-0" width="100%" height="10%" file="content/content_system_door_status.html"></ftui-content>
 <ftui-content device="tuer1" devicename="Dachfenster" reading="state" displayicon="circle" [hidden]="tuer1:state | map('close:true, open:false')"align-items="top" class="size-0 no-content" width="100%" height="70%" file="content/content_system_door_status.html" ></ftui-content>
<...>

Hab die height jetzt mal auf 20% in der Column gesetzt bleibt aber so. Wenn ich in der Row das hidden wegnehme ist alles schön untereinander.
Der Abstand zwischen den Element wird immer größer je mehr ftui-content man nutzt.

Grüße
Torte

ToM_ToM · 28 Januar 2021, 21:46:07

Hallo Zusammen,

gibt es eine Möglichkeit ein popup-target von einem DIV aus zu setzen?
Ich möchte eine Anzeige mit Icons und Knob basteln welches readonly ist und sobald ich auf den Bereich drücke, das Popup aufgeht.

VG, Thomas

setstate · 28 Januar 2021, 23:26:51

Zitat von: torte am 28 Januar 2021, 19:46:28
hi setstate

ich glaube das hier fehlt um zu verstehen was ich gebastelt habe

Code Auswählen Erweitern
<ftui-grid-tile row="1" col="14" height="4" width="3" shape="normal"> <header>Türen und Fenster</header> <ftui-content device="tuer2" devicename="Küche" reading="eventState" displayicon="circle" align-items="top" class="size-0" width="100%" height="10%" file="content/content_system_door_status.html"></ftui-content> <ftui-content device="tuer1" devicename="Dachfenster" reading="state" displayicon="circle" [hidden]="tuer1:state | map('close:true, open:false')"align-items="top" class="size-0 no-content" width="100%" height="70%" file="content/content_system_door_status.html" ></ftui-content> <...>

Hab die height jetzt mal auf 20% in der Column gesetzt bleibt aber so. Wenn ich in der Row das hidden wegnehme ist alles schön untereinander.
Der Abstand zwischen den Element wird immer größer je mehr ftui-content man nutzt.

Grüße
Torte

Okay, jetzt ist mir deine Absicht klarer.

Ich würde folgendes setzen:

Code Auswählen


<ftui-grid-tile align-items="top" ...
    <ftui-content height="3em" [hidden]="....

Grid-Tile zieht seine Kinder nach oben.
Feste Höhe der Kinder, damit sich diese nicht durch den freiwerdende Raum auseinander ziehen.
Hidden auf die Kinder direkt, nicht innerhalb. Sonst verbleiben die leeren ftui-content Container stehen.

Ich habe noch etwas angepasst. align-items="top" bei ftui-grid-tile gibt es nur nach einem Update