FTUI version 3

[torte]

Hallo zusammen,

habe eine Componente erstellt für die FlipClock hatte ich auch mal für FTUI2 gemacht, damals war dies mit einer gesonderten .js Lib.

Nun hab ich mal nur rein CSS probiert. Funktioniert soweit auch, da ich aber Javascript mäßig totaler Anfänger bin könnte dort ja mal einer der Profis drüber gucken.

Das Hauptproblem war, dass ich damit die Animation startet, dass Element mit den CSS Animation Keyframes erst Clonen muss und dann neu erstellen.
Hab das mal ins git gepackt. 

Code Auswählen Erweitern

https://github.com/T0RST3N/fhem-ftui-components-flip-clock

Die frage die sich mir stellt, da ich das mit den Shadow-Objekten noch nicht so ganz gepeilt habe, es ist doch so das template() genutzt wird innerhalb des shadow Objekts.
Kann ich in der FlipClock Componente auch weitere shadow tree objekte anlegen? Ich wusste nicht ob FTUI das zulässt oder ob das uncool ist.

Würde mich jedenfalls freuen wenn mal einer drüber guckt und mir sagen kann was man verbessern sollte/müsste.

Danke!
Grüße
Torte

[moonsorrox]

ich hab mal heute mal probiert ein Popup komplett durchsichtig zu gestalten, was mir zwar gelungen ist aber damit macht er alle Popups durchsichtig, was jetzt unproduktiv ist.

Hintergrund ist ich habe Kameras die mir ein Popup öffnen sollen und da reicht es mir wenn auf dem Tablet nur das Bild der Kamera zusehen ist, da brauche ich keinen Header und auch keinen Hintegrund, den Header auszublenden ist kein Problem, aber das Popup mit transparent oder einer class habe ich nicht hinbekommen.

Hat das einer von euch schon probiert.?

Was natürlich geht das Popup kleiner als das Bild zu machen, dann ist es auch nicht zusehen. So habe ich es zumindest jetzt erst mal...

[grossmaggul]

Hat das einer von euch schon probiert.?

Ja, ich, ist mir aber auch nicht gelungen.

[moonsorrox]

Ok, also ich habe es jetzt erst mal so am laufen wie oben beschrieben... ist ja eigentlich auch OK so.
Das Popup verkleinert zumindest nicht das Bild sondern versteckt sich dahinter, damit kann ich leben 

[octek0815]

ich hab mal heute mal probiert ein Popup komplett durchsichtig zu gestalten, was mir zwar gelungen ist aber damit macht er alle Popups durchsichtig, was jetzt unproduktiv ist.

Hintergrund ist ich habe Kameras die mir ein Popup öffnen sollen und da reicht es mir wenn auf dem Tablet nur das Bild der Kamera zusehen ist, da brauche ich keinen Header und auch keinen Hintegrund, den Header auszublenden ist kein Problem, aber das Popup mit transparent oder einer class habe ich nicht hinbekommen.

Hat das einer von euch schon probiert.?

Was natürlich geht das Popup kleiner als das Bild zu machen, dann ist es auch nicht zusehen. So habe ich es zumindest jetzt erst mal...

Hey René,

ich habe das so gelöst...

Code Auswählen Erweitern


<ftui-popup id="popup-ipcam-haustuer" timeout="55" [open]="System_FTUI_IPcam_Haustuer_PopUp_Anzeigen:state | map('on:true, off:false')" width="1692px" height="1006px">
     <header class="size-6">Kamera Haust&uuml;r</header>
     <ftui-label slot="close" class="cell size-9" style="font-weight:bold; margin-top:-0.15em; margin-right:0.1em; color: white" popup-close>&times;</ftui-label>
     <ftui-column>
          <iframe style="overflow:hidden; border:0; width:100%; height:100%;" loading="lazy" src="http://10.20.8.99:8765/picture/1/frame/"></iframe>
     </ftui-column>
</ftui-popup>


Header und Slot kannst Du ja weglassen.
Wenn du dann das Popup richtig dimensionierst, sollte das iframe die fläche es popup vollständig ausfüllen.

Grüße
Olli

[grossmaggul]

ist ja eigentlich auch OK so.

Solange man kein rundes Bild hat, z.B. das Mondphasenbild.

[moonsorrox]

Hey René,

ich habe das so gelöst...

Grüße
Olli

Ok mir hat eigentlich nur die Ansteuerung gefehlt, damit das Popup öffnet

Code Auswählen Erweitern

[open]="System_FTUI_IPcam_Haustuer_PopUp_Anzeigen:state | map('on:true, off:false')"

Hab mir da mal ein dummy gebaut welches den state raus gibt, da brauche ich nicht immer raus laufen 
aber funktioniert und mit der Größenanpassung auch....

Solange man kein rundes Bild hat, z.B. das Mondphasenbild.

ich hatte das mal ausprobiert, wenn der Mond in so einem durchsichtigen Popup drin ist, sieht so schlecht nicht aus 

[setstate]

ich hab mal heute mal probiert ein Popup komplett durchsichtig zu gestalten, was mir zwar gelungen ist aber damit macht er alle Popups durchsichtig, was jetzt unproduktiv ist.

Hintergrund ist ich habe Kameras die mir ein Popup öffnen sollen und da reicht es mir wenn auf dem Tablet nur das Bild der Kamera zusehen ist, da brauche ich keinen Header und auch keinen Hintegrund, den Header auszublenden ist kein Problem, aber das Popup mit transparent oder einer class habe ich nicht hinbekommen.

Hat das einer von euch schon probiert.?

Was natürlich geht das Popup kleiner als das Bild zu machen, dann ist es auch nicht zusehen. So habe ich es zumindest jetzt erst mal...

Du kannst mit der ID des Popup arbeiten

Code Auswählen Erweitern


  <style>
    #pop2 {
      --popup-background-color: translucent;
    }
  </style>


[moonsorrox]

Ok danke dir setstate.
eine weitere Frage ich stelle ein kleines Bild meiner WebCam ein, dass ist aber so groß das ich auch etwas erkennen kann oder ich kann es mit dem Popup öffen.
Jetzt gibt es doch im ftui-image einen refresh... der sollte dieses Bild doch regelmäßig aktualisieren ist das richtig.?

ich habe den auf refresh="10" stehen im Code

Code Auswählen Erweitern

<ftui-image src="http://10.0.0.66:8066/record/current.jpg" nocache shape="round" height="100" popup-target="popup-ipcam-eingang" refresh="10"></ftui-image>

Gestern am Abend immer noch das Tagesbild, er zeigt mir kein aktualisiertes Bild an, es bleibt Stunden gleich, irre ich mich mit dem refresh.?

[grossmaggul]

Wenn ich mir das image.html aus dem examples Ordner ansehe, dann wird der refresh da so angewandt:

Code Auswählen Erweitern

<ftui-image src="http://lorempixel.com/400/200/technics" width="100" [refresh]="ftuitest:state:time"></ftui-image>

Dann gibt's aber auch noch den Parameter "interval", möglicherweise führt das ja zum Ziel?

Code Auswählen Erweitern

<ftui-image src="https://www.dwd.de/DWD/wetter/aktuell/deutschland/bilder/wx_deutschland.jpg"
                    interval="300" nocache
                    width="250" height="200"></ftui-image>

Vielleicht muß aber auch noch eine Einheit dahinter.

[moonsorrox]

Wenn ich mir das image.html aus dem examples Ordner ansehe, dann wird der refresh da so angewandt:

Code Auswählen Erweitern

<ftui-image src="http://lorempixel.com/400/200/technics" width="100" [refresh]="ftuitest:state:time"></ftui-image>

Dann gibt's aber auch noch den Parameter "interval", möglicherweise führt das ja zum Ziel?

Code Auswählen Erweitern

<ftui-image src="https://www.dwd.de/DWD/wetter/aktuell/deutschland/bilder/wx_deutschland.jpg"
                    interval="300" nocache
                    width="250" height="200"></ftui-image>

Vielleicht muß aber auch noch eine Einheit dahinter.

vielen Dank erstmal ich hatte da auch schon einiges gefunden, aber bisher nicht weiter dran gearbeitet. Momentan aktualisiert sich das Bild wenn ich einmal drauf war.. mal abwareten was setstate sagt dazu wie man es einsetzen muss.... oder sollte.
Mit dem Intervall das mache ich aber mal

Baue grad fleißig an meiner letzten Seite und werde dann sehen was mir noch fehlt.
Aber eines ist mir klar geworden, dass ich längst nicht mehr soviele Seiten brauche das reduziert sich auf 4 Menüpunkte wobei die Wetter Seite noch recht leer ist.

[SirMarco]

was ich irgendwie gar nicht hinbekomme ist so etwas wie es in der Version 2 der "classchanger" gemacht hat.

Moin

Hast du es schon geschafft einen "classchanger" umzusetzen?

Grüsse

[Eisix]

Hallo,

classchanger

Code Auswählen Erweitern


<ftui-icon name="trash-o" color="black" [class-name]="Abfall:RestmuellAbholung_days | map('1:`size-2 spin`, 2:size-2')"></ftui-icon>


Wenn es das ist was du meinst.

Gruß
Eisix

[moonsorrox]

ich habe das mit [hidden] gemacht falls du mehr brauchst, stelle ich mal ein stück Code ein, bin nur gerade nicht am PC

[octek0815]

Moin

Hast du es schon geschafft einen "classchanger" umzusetzen?

Grüsse

Was möchtest Du umsetzen bzw. erreichen?