FTUI version 3

octek0815 · 22 Januar 2021, 15:16:05

Ich habe gestern Abend auch das Update gefahren.
Es liegt an den neuen width Anpssungen (vermutlich auch height).
Es ist jetzt so das 100% auch 100% sind und du nun die Breite entsprechen in den Spalten aufteilen musst.

Grüße
Olli

PS: So finde ich es aber nun richtig!

yersinia · 22 Januar 2021, 15:38:49

Wie kann ich mit FTUI3 einen Hyperlink generieren?
Der Link ist der Inhalt eines (user)reading eines Devices, die Beschreibung (Text) wäre aus einem anderen Reading. Wie könnte man das realisieren? label oder button?

moonsorrox · 22 Januar 2021, 15:46:07

Ok Olli, ich habe eigentlich überall die Prozente drin nur gerade bei den Popups noch nicht, das wollte ich noch ändern... nun muss ich es wohl

Deshalb ist mein Markisen Popup auch in Ordnung, da habe ich schon Prozente drin...

EDIT:// obwohl beim Schalfzimmer habe ich auch schon Prozent drin und auch das ist auseinander gezogen.
Die Angaben jetzt auch in Prozent..?

Code Auswählen

<ftui-popup id="popup-modus_sz" timeout="40" width="500px" height="230px" shape="round">

setstate · 22 Januar 2021, 16:10:39

Ohne width bzw. height wird der vorhandene Platz gleichmäßig ausgefüllt. Willst du eine Zeile oder Spalte etwas breiter/höher machen, braucht man auch nur dort eine Angabe zu machen. %, px oder em ist egal. Der Rest begnügt sich dann mit dem Rest des Platzes. Wenn noch weitere Vorhaben dazukommen, dürfen diese in Summe nicht über 100% kommen. Weniger ist mehr ...

moonsorrox · 22 Januar 2021, 16:14:18

Also muss ich um das richtig hinzubekommen erst einmal alle height und width raus nehmen und dann neu anpassen.?

setstate · 22 Januar 2021, 16:18:01

Ja genau, besser hätte ich nicht sagen können.

moonsorrox · 22 Januar 2021, 16:24:02

OK so dachte ich es mir

gut dann mache ich das mal, war ja grad dabei die Popups anzupassen...

OdfFhem · 22 Januar 2021, 17:59:03

@setstate

das refresh-Attribut im ftui-label funktioniert einwandfrei - herzlichen Dank.

Ich habe aktuell noch zwei "Auffälligkeiten":

die class size-5 scheint fehlerhaft ... s. angehängtes Bild.

ich nutze gerne das shape-Attribut und zwar in der round-Variante. Nutze ich diese Form z.B. im ftui-grid-tile, dann wird die Form durch eine Farbänderung in ftui-row oder ftui-column zerstört ... s. die angehängten Bilder

moonsorrox · 22 Januar 2021, 19:07:31

ähnlicher Fall bei mir bei einigen Popup's Wetter und auch einige Kalender
Screenshot 1

Code Auswählen

<ftui-popup id="wetter_heute" width="750px" height="380px" timeout="20" position="top" shape="round">

und hier ein Kalender Screenshot und immer unten der Radius

moonsorrox · 22 Januar 2021, 19:34:46

ein Problem habe ich noch obwohl ich hier nichts an "height" eingestellt habe, dass die rechte Spalte anders ist, da weiß ich grad nichts zu, alle anderen Dinge habe ich hinbekommen. Liegt das evtl. an den Formatierungen vom Text (screenshot)

Code Auswählen

	<!-- Temperaturen START -->
	<ftui-grid-tile row="5" col="2" height="10" width="9" class="semitransparent3d">
		<ftui-row class="size-2">
			<ftui-column align-items="left" margin="1" width="60%">
				<ftui-label text="Wohnzimmer"></ftui-label>
				<ftui-label text="Küche"></ftui-label>
				<ftui-label text="HWR"></ftui-label>
				<ftui-label text="Gäste WC"></ftui-label>
				<ftui-label text="Badezimmer"></ftui-label>
				<ftui-label text="Schlafzimmer"></ftui-label>
				<ftui-label text="Gästezimmer"></ftui-label>
				<ftui-label text="Arbeitszimmer"></ftui-label>					
				<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>					
				<ftui-label text="Garage"></ftui-label>
				<ftui-label text="Eingang Norden"></ftui-label>
				<ftui-label text="Terrasse Süden"></ftui-label>					
				<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>					
				<ftui-label text="Helligkeit"></ftui-label>
				<ftui-label text="Luftdruck"></ftui-label>					
            </ftui-column>                
			<ftui-column align-items="right" width="20%">
				<ftui-label [text]="Temperatur_Wohnzimmer:temperature" 
							[color]="Temperatur_Wohnzimmer:temperature | map('-73:SteelBlue, 19:MediumSpringGreen, 25:Crimson')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
				<ftui-label [text]="Temperatur_Kueche:temperature" 
							[color]="Temperatur_Kueche:temperature | map('-73:SteelBlue, 19:MediumSpringGreen, 25:Crimson')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
				<ftui-label [text]="Temperatur_HWR_Xiaomi:temperature" 
							[color]="Temperatur_HWR_Xiaomi:temperature | map('-73:SteelBlue, 19:MediumSpringGreen, 25:Crimson')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
				<ftui-label [text]="Temperatur_GWC_Xiaomi:temperature" 
							[color]="Temperatur_GWC_Xiaomi:temperature | map('-73:SteelBlue, 19:MediumSpringGreen, 25:Crimson')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
				<ftui-label [text]="Temperatur_Badezimmer_Weather:measured-temp | fix(1)" 
							[color]="Temperatur_Badezimmer_Weather:measured-temp | map('-73:SteelBlue, 19:MediumSpringGreen, 25:Crimson')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
				<ftui-label [text]="Temperatur_Schlafzimmer:temperature" 
							[color]="Temperatur_Schlafzimmer:temperature | map('-73:SteelBlue, 19:MediumSpringGreen, 25:Crimson')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
				<ftui-label [text]="Temperatur_Gaestezimmer_Weather:temperature" 
							[color]="Temperatur_Gaestezimmer_Weather:temperature | map('-73:SteelBlue, 19:MediumSpringGreen, 25:Crimson')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
				<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:temperature" 
							[color]="Temperatur_Arbeitszimmer_Weather:temperature | map('-73:SteelBlue, 19:MediumSpringGreen, 25:Crimson')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
				<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>				
				<ftui-label [text]="Temperatur_Garage:temperature" 
							[color]="Temperatur_Garage:temperature | map('-73:SteelBlue, 0:MediumBlue, 10:Orange1, 15:Danger, 24:Crimson ')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
				<ftui-label [text]="Temperatur_Norden:temperature" 
							[color]="Temperatur_Norden:temperature | map('-73:SteelBlue, 0:MediumBlue, 10:Orange1, 15:Danger, 24:Crimson ')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
				<ftui-label [text]="Temperatur_Terrasse:temperature" 
							[color]="Temperatur_Terrasse:temperature | map('-73:SteelBlue, 0:MediumBlue, 10:Orange1, 15:Danger, 24:Crimson ')"><span slot="end" style="margin-left:0.3em;" class="size-0">°C</span></ftui-label>
				<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>	
				<ftui-label [text]="BWM_Terrasse:brightness | fix(0)"><span slot="end" style="margin-left:0.3em;" class="size-0">Lux</span></ftui-label>
				<ftui-label [text]="Temperatur_Terrasse:pressure | fix(1)" 
							[color]="Temperatur_Terrasse:pressure | map(' 1015:Crimson, 1005:MediumSpringGreen, 0:MediumBlue')"><span slot="end" style="margin-left:0.3em;" class="size-0">hPa</span></ftui-label>
			</ftui-column>                   
			<ftui-column align-items="center" width="20%">               
                <ftui-label [text]="Temperatur_Wohnzimmer:humidity | fix(0)" 
							[color]="Temperatur_Wohnzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:MediumSpringGreen, 40:Danger, 10:orange1')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>
				<ftui-label [text]="Temperatur_Kueche:humidity | fix(0)" 
							[color]="Temperatur_Kueche:humidity | map('80: darkviolet, 70: darkviolet, 55:MediumSpringGreen, 40:Danger, 10:orange1')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>						
				<ftui-label [text]="Temperatur_HWR_Xiaomi:humidity | fix(0)" 
							[color]="Temperatur_HWR_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:MediumSpringGreen, 40:Danger, 10:orange1')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>
				<ftui-label [text]="Temperatur_GWC_Xiaomi:humidity | fix(0)" 
							[color]="Temperatur_GWC_Xiaomi:humidity | map('80: darkviolet, 70: darkviolet, 55:MediumSpringGreen, 40:Danger, 10:orange1')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>						
				<ftui-label [text]="Temperatur_Badezimmer_Weather:humidity | fix(0)" 
							[color]="Temperatur_Badezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:MediumSpringGreen, 40:Danger, 10:orange1')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>
				<ftui-label [text]="Temperatur_Schlafzimmer:humidity | fix(0)" 
							[color]="Temperatur_Schlafzimmer:humidity | map('80: darkviolet, 70: darkviolet, 55:MediumSpringGreen, 40:Danger, 10:orange1')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>								
				<ftui-label [text]="Temperatur_Gaestezimmer_Weather:humidity | fix(0)" 
							[color]="Temperatur_Gaestezimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:MediumSpringGreen, 40:Danger, 10:orange1')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>						
				<ftui-label [text]="Temperatur_Arbeitszimmer_Weather:humidity | fix(0)" 
							[color]="Temperatur_Arbeitszimmer_Weather:humidity | map('80: darkviolet, 70: darkviolet, 55:MediumSpringGreen, 40:Danger, 10:orange1')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>								
				<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>				
				<ftui-label [text]="Temperatur_Garage:humidity | fix(0)" 
							[color]="Temperatur_Garage:humidity | map(' 73: crimson, 40: steelblue, 0:MediumSpringGreen')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>								
				<ftui-label [text]="Temperatur_Norden:humidity | fix(0)" 
							[color]="Temperatur_Norden:humidity | map(' 73: crimson, 40: steelblue, 0:MediumSpringGreen')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>								
				<ftui-label [text]="Temperatur_Terrasse:humidity | fix(0)" 
							[color]="Temperatur_Terrasse:humidity | map(' 73: crimson, 40: steelblue, 0:MediumSpringGreen')"><span slot="end" style="margin-left:0.3em;" class="size-0">%</span></ftui-label>								
				<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
				<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>
				<ftui-label [text]=""><span style="margin-left:-0.5em;"></span></ftui-label>								
			</ftui-column>    
		</ftui-row>
	</ftui-grid-tile>
	<!-- Temperaturen ENDE -->

EDIT:// ich denke ich baue das ganze Gebilde um auf <row> mit jeweils 3 <column> die ich dann mit height und width anpasse... Hab das mal mit einer Reihe gemacht das sieht gut aus.

setstate · 22 Januar 2021, 21:59:14

Zitat von: OdfFhem am 22 Januar 2021, 17:59:03
@setstate

das refresh-Attribut im ftui-label funktioniert einwandfrei - herzlichen Dank.

Ich habe aktuell noch zwei "Auffälligkeiten":

die class size-5 scheint fehlerhaft ... s. angehängtes Bild.

ich nutze gerne das shape-Attribut und zwar in der round-Variante. Nutze ich diese Form z.B. im ftui-grid-tile, dann wird die Form durch eine Farbänderung in ftui-row oder ftui-column zerstört ... s. die angehängten Bilder

Danke, ist beides jetzt gefixed.

moonsorrox · 22 Januar 2021, 23:35:13

Zitat von: setstate am 22 Januar 2021, 21:59:14
Danke, ist beides jetzt gefixed.

@setstate nur zur Info
ich habe das Update mal herunter geladen, habe aber nach wie vor bei zwei Kalendern das unten die Ecken nicht abgerundet sind... und auch bei den Wetter Popups.
Da sind es alle, heißt der header oben hat einen Radius aber das Popup unten nicht.

setstate · 23 Januar 2021, 09:39:54

beim popup geht es jetzt auch

setstate · 23 Januar 2021, 13:15:34

Zitat von: yersinia am 22 Januar 2021, 15:38:49
Wie kann ich mit FTUI3 einen Hyperlink generieren?
Der Link ist der Inhalt eines (user)reading eines Devices, die Beschreibung (Text) wäre aus einem anderen Reading. Wie könnte man das realisieren? label oder button?

solange 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


  <a ftui-binding [href]="AgroWeather:fc0_weather00Icon">
    <ftui-label [text]="AgroWeather:fc0_weather00Icon"></ftui-label>
  </a>

target="_blank" scheint nicht zu funktionieren. Workaround:

Code Auswählen


  <a ftui-binding [href]="AgroWeather:fc0_weather00Icon" onclick="window.open(this.href,'_blank');return false;">Wettericon</a>

octek0815 · 23 Januar 2021, 14:14:39

Zitat von: setstate am 23 Januar 2021, 13:15:34
Mit dem Dekorator ftui-binding kann man bei beliebigen HTML Elementen deren Attribute mit FHEM-Readings koppeln.

Moin setstate,

vielen Dank für den tollen Hinweis, damit konnte ich auch mein Problem mit <ftui-image> und den % Angaben für height oder width lösen.

Zitat von: setstate am 20 Januar 2021, 10:27:34
ja, über style geht das.

https://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height_percent

Ich könnte ja versuchen, den Wert height des ftui-image auf den style anzuwenden, anstatt auf das height des img.

So geht es dann mit % werten für ein Image aus einem Reading...

Code Auswählen


<img ftui-binding [src]="System_Unwetterzentrale:Warn_0_IconURL" style="width:65%;"></img>

Grüße
Olli