FTUI version 3

yersinia · 23 Januar 2021, 15:06:34

Zitat von: setstate am 23 Januar 2021, 13:15:34solange es noch kein ftui-link gibt, kann man <a> benutzen.

Mit dem Dekorator ftui-binding kann man bei beliebigen HTML Elementen deren Attribute mit FHEM-Readings koppeln.
Code Auswählen Erweitern
<a ftui-binding [href]="AgroWeather:fc0_weather00Icon" onclick="window.open(this.href,'_blank');return false;">Wettericon</a>

Danke, funktioniert. Dann benötigt man eigtl auch <ftui-link> mMn nicht.

octek0815 · 23 Januar 2021, 15:58:39

@setstate

Ist es möglich eine Aktion in FHEM (set...) auszuführen wenn ein Popup beim timeout sich automatisch schließt?

setstate · 23 Januar 2021, 19:22:40

Zitat von: octek0815 am 23 Januar 2021, 15:58:39
@setstate

Ist es möglich eine Aktion in FHEM (set...) auszuführen wenn ein Popup beim timeout sich automatisch schließt?

jetzt ja:

Code Auswählen


  <ftui-popup id="pop5" shape="round" @close="sendFhem('set dummy1 on')">
    <header>Popup 5</header>
    <ftui-row>
      <ftui-column shape="round" color="light">light</ftui-column>
      <ftui-column shape="round" color="medium">medium</ftui-column>
      <ftui-column shape="round" color="dark">dark</ftui-column>
    </ftui-row>
  </ftui-popup>

octek0815 · 24 Januar 2021, 07:30:35

Zitat von: setstate am 23 Januar 2021, 19:22:40
Code Auswählen Erweitern
<ftui-popup id="pop5" shape="round" @close="sendFhem('set dummy1 on')">

Das funktioniert perfekt, vielen dank nochmal für die schnelle Umsetzung!

eppi · 24 Januar 2021, 10:20:13

Hallo setstate
Habe heute ein Update gemacht und festgestellt, dass das Circle-Menu nicht mehr bediendar ist, da es nicht mehr im Vordergrund der umliegenden Kacheln angezeigt wird. Gut sichtbar ist es auf auf der Example-Site: https://knowthelist.github.io/ftui/www/ftui/examples/circlemenu.html

Danke und viele Grüsse Eppi

SirMarco · 24 Januar 2021, 10:39:55

Zitat von: octek0815 am 24 Januar 2021, 07:30:35
Das funktioniert perfekt, vielen dank nochmal für die schnelle Umsetzung!

Interessante Funktion die du dir gewünscht hast

Was hast du damit vor?

Grüsse

setstate · 24 Januar 2021, 11:34:19

Zitat von: eppi am 24 Januar 2021, 10:20:13
Hallo setstate
Habe heute ein Update gemacht und festgestellt, dass das Circle-Menu nicht mehr bediendar ist, da es nicht mehr im Vordergrund der umliegenden Kacheln angezeigt wird. Gut sichtbar ist es auf auf der Example-Site: https://knowthelist.github.io/ftui/www/ftui/examples/circlemenu.html

Danke und viele Grüsse Eppi

oh oooh, das liegt am overflow: hidden für grid-tile, um shape=round nicht durch die Inhalte zu überdecken.
Beides, Circlemenu und overflow: hidden, unter einen Hut zu bringen, ist nicht einfach, ohne größeren Umbau.

octek0815 · 24 Januar 2021, 11:49:01

Zitat von: SirMarco am 24 Januar 2021, 10:39:55
Interessante Funktion die du dir gewünscht hast
Was hast du damit vor?

Grüsse

Moin,

ich steuere damit ob der Stream meiner IP-Cam aktiv zu meinem Tablet an oder aus ist.

Heir meine Konfiguration:

Popup mit IP-Cam Stream öffnen und aktivieren

Code Auswählen


<ftui-column>
	<ftui-button (value)="set System_IPcam_Haustuer_URL http://10.20.8.99:8765/picture/1/frame/" states='' fill="clear">
		<ftui-icon style="font-size:1em;" name="_security_camera" popup-target="popup-ipcam-haustuer" color="white"></ftui-icon>
	</ftui-button>
</ftui-column>

Hier dann die Popup Konfig...

Code Auswählen


<ftui-popup id="popup-ipcam-haustuer" timeout="60" [open]="System_FTUI_IPcam_Haustuer_PopUp_Anzeigen:state | map('on:true, off:false')" width="86.5%" height="91.5%" @close="sendFhem('set System_IPcam_Haustuer_URL http://10.20.8.248:8084/fhem/ftui/_leer.html; set System_FTUI_IPcam_Haustuer_PopUp_Anzeigen off')">
	<header class="_size-3vh">Kamera Haust&uuml;r</header>
	<ftui-label slot="close" class="_header-close-style" popup-close>&times;</ftui-label>
	<iframe ftui-binding [src]="System_IPcam_Haustuer_URL:state" style="overflow:hidden; border:0; width:100%; height:100%;"></iframe>
</ftui-popup>

Und dann noch der FHEM Dummy...

Code Auswählen


defmod System_IPcam_Haustuer_URL dummy
attr System_IPcam_Haustuer_URL room System
setstate System_IPcam_Haustuer_URL http://10.20.8.248:8084/fhem/ftui/_leer.html

Und der Inhalt der _leer.html

Code Auswählen


<!DOCTYPE html>
<html>
<body>
<img src="http://10.20.8.248:8084/fhem/ftui/images/no_cam.png"></img>
</body>
</html>

Das Image no_cam.png ist ein 1 Pixel großes png.
Und somit verursacht das Popup der IP-Cam nicht ständig last im Hintergrund.
Quelle ist im Übrigen motionEye, um RTSP Streams nutzen zu können.

Ursprünglich wollte ich das mit <ftui-image> lösen, aber da ich in meine Konfig. alles auf 100% Angaben umgestellt habe (für unterschiedliche Screengrößen) und <ftui-image> damit nicht umgehen kann, habe ich das jetzt so
gelöst.

VG
Olli

grossmaggul · 24 Januar 2021, 12:06:06

Hallo,

ich habe mir mit einem Slider eine Fortschrittsanzeige für meinen Squeezeboxplayer gebastelt:

Code Auswählen

 <ftui-slider (max)="bz.yamaha_air:duration" 
                      [(value)]="bz.yamaha_air:currentTrackPosition" handle="none">
</ftui-slider>

In "duration" und "currentTrackPosition" befindet sich die Zeit in Sekunden.
Jetzt ist es aber so, daß der Slider wohl als max-Wert immer 100 an nimmt und damit natürlich viel zu früh am Ende ist.

Mache ich was falsch oder ist das ein Bug?

gm

OdfFhem · 24 Januar 2021, 13:53:27

@grossmaggul

Ich nutze u.a. folgenden Code für die Fortschrittsanzeige und diese läuft auch nach dem (gestrigen) Update wie gewünscht. Der max-Wert schwankt, aber ist in der Regel sehr deutlich über 100 und wird auch entsprechend angezeigt (s. has-ruler) ... die relative Anzeige scheint zu passen ...

Code Auswählen


    <ftui-slider [max]="LS_Buero:currentTrackDurationSec"
                      [value]="LS_Buero:currentTrackPositionSimulatedSec" handle="none" has-ruler>
    </ftui-slider>

grossmaggul · 24 Januar 2021, 14:24:54

Ja, so geht's, ich war mir eigentlich sicher, daß ich das schon probiert hatte.

eurofinder · 24 Januar 2021, 14:39:34

Erst einmal danke für die tolle Weiterentwicklung zur Version 3.

Ich habe mal eine Frage, die nur am Rande etwas mit FTUI 3 selbst zu tun hat. Mich würde mal interessieren, wie ihr die Dateien editiert. Macht ihr das in dafür spezialisierte (Quelltext) Editoren (welche) und übertragt die Dateien dann auf den FHEM-Server oder macht ihr das direkt auf dem Server und ändert dort die Dateien direkt?

Vielleicht stelle ich mich einfach nur zu umständlich an. Meine Vorgehensweise ist derzeit direkt auf dem Server mit MC, finde das aber wenig komfortabel und suche nach Verbesserungspotential. Hat jemand einen Vorschlag für mich, wie ich das optimieren kann?

Gruß und schönes Restwochenende
eurofinder

moonsorrox · 24 Januar 2021, 14:41:47

weitere Formatierungs Frage
Ich habe zwei Button mit denen ich Popups bediene linker Button in der index.html (nicht ausgelagert) rechts Button mit ausgelagert also nicht in der index vorhanden.
Der Button rutscht komplett an den linken Rand sollte default nicht immer "center" sein..?

Es ist auch nicht möglich den button mit align-items="center" in die Mitte zu bekommen. Muss ich etwas beachten oder ist das ein Formatierungsfehler.?
Habe es erst einmal ohne auslagern gemacht..
Hatte den Screenshot vergessen

moonsorrox · 24 Januar 2021, 14:43:06

@eurofinder

ich habe die gleiche Struktur auf meinem PC wie auf dem Server, ich editiere die Datei immer lokal und schiebe sie dann mit FTP rüber

grossmaggul · 24 Januar 2021, 14:47:21

@eurofinder

Ich habe die fhem Installation per nfs eingebunden und kann dann so darauf zugreifen, als würde die Datei auf dem Rechner liegen.