Hallo,
ich habe folgendes Popup:
<ftui-popup id="calllist">
<ftui-content file="content/callllist.html"></ftui-content>
</ftui-popup>
Mit folgendem Inhalte der callist.html
<ftui-row>
<!-- Icon -->
<ftui-column align-items="left" margin="1">
<ftui-icon class="align-left" path="../images/openautomation/"
[name]="fritzlist:1-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out, `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')" [color]="fritzlist:1-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')"></ftui-icon>
<ftui-icon class="align-left" path="../images/openautomation/"
[name]="fritzlist:2-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out, `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')" [color]="fritzlist:2-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')"></ftui-icon>
<ftui-icon class="align-left" path="../images/openautomation/"
[name]="fritzlist:3-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out, `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')"
[color]="fritzlist:3-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')"></ftui-icon>
<ftui-icon class="align-left" path="../images/openautomation/"
[name]="fritzlist:4-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out, `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')"
[color]="fritzlist:4-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')"></ftui-icon>
<ftui-icon class="align-left" path="../images/openautomation/"
[name]="fritzlist:5-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out, `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')"
[color]="fritzlist:5-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')"></ftui-icon>
<ftui-icon class="align-left" path="../images/openautomation/"
[name]="fritzlist:6-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out, `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')"
[color]="fritzlist:6-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')"></ftui-icon>
<ftui-icon class="align-left" path="../images/openautomation/"
[name]="fritzlist:7-state | map('`=>`:phone_call_end_in, `<= X`:phone_missed_out, `=> X`:phone_missed_out, `<=`:phone_call_end_out, `=> ((o))`:phone_ring, `=> [=]`:phone_ring_in, `=> O_O`:phone_answering')"
[color]="fritzlist:7-state | map('`=>`:green, `<= X`:danger, `<= X`:danger, `<=`:blue, `=> ((o))`:danger, `=> [=]`:green, `=> O_O`:yellow')"></ftui-icon>
</ftui-column>
<!-- Name -->
<ftui-column align-items="left" margin="1">
<ftui-label class="size-2 align-left" [text]="fritzlist:1-name"></ftui-label>
<ftui-label class="size-2 align-left" [text]="fritzlist:2-name"></ftui-label>
<ftui-label class="size-2 align-left" [text]="fritzlist:3-name"></ftui-label>
<ftui-label class="size-2 align-left" [text]="fritzlist:4-name"></ftui-label>
<ftui-label class="size-2 align-left" [text]="fritzlist:5-name"></ftui-label>
<ftui-label class="size-2 align-left" [text]="fritzlist:6-name"></ftui-label>
<ftui-label class="size-2 align-left" [text]="fritzlist:7-name"></ftui-label>
</ftui-column>
<!-- Nummer -->
<ftui-column align-items="left" margin="1">
<ftui-label class="size-2 align-left" [text]="fritzlist:1-number"></ftui-label>
<ftui-label class="size-2 align-left" [text]="fritzlist:2-number"></ftui-label>
<ftui-label class="size-2 align-left" [text]="fritzlist:3-number"></ftui-label>
<ftui-label class="size-2 align-left" [text]="fritzlist:4-number"></ftui-label>
<ftui-label class="size-2 align-left" [text]="fritzlist:5-number"></ftui-label>
<ftui-label class="size-2 align-left" [text]="fritzlist:6-number"></ftui-label>
<ftui-label class="size-2 align-left" [text]="fritzlist:7-number"></ftui-label>
</ftui-column>
<!-- Zeit -->
<ftui-column align-items="left" margin="1">
<ftui-label class="size-1 align-left" [text]="fritzlist:1-timestamp"></ftui-label>
<ftui-label class="size-1 align-left" [text]="fritzlist:2-timestamp"></ftui-label>
<ftui-label class="size-1 align-left" [text]="fritzlist:3-timestamp"></ftui-label>
<ftui-label class="size-1 align-left" [text]="fritzlist:4-timestamp"></ftui-label>
<ftui-label class="size-1 align-left" [text]="fritzlist:5-timestamp"></ftui-label>
<ftui-label class="size-1 align-left" [text]="fritzlist:6-timestamp"></ftui-label>
<ftui-label class="size-1 align-left" [text]="fritzlist:7-timestamp"></ftui-label>
</ftui-column>
<!-- Anruferbild -->
<ftui-column align-items="left" margin="1">
<ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/" [src]="fritzlist:1-image" width="40" shape="circle"></ftui-image>
<ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/" [src]="fritzlist:2-image" width="40" shape="circle"></ftui-image>
<ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/" [src]="fritzlist:3-image" width="40" shape="circle"></ftui-image>
<ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/" [src]="fritzlist:4-image" width="40" shape="circle"></ftui-image>
<ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/" [src]="fritzlist:5-image" width="40" shape="circle"></ftui-image>
<ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/" [src]="fritzlist:6-image" width="40" shape="circle"></ftui-image>
<ftui-image base="http://192.168.1.12:8083/fhem/ftui/images/kontakte/" [src]="fritzlist:7-image" width="40" shape="circle"></ftui-image>
</ftui-column>
</ftui-row>
Das funktioniert auch soweit, wie man auf dem ersten Bild erkennen kann.
Da die Bilder aber über den Rand hinausragten wollte ich das Popup größer machen und zwar so:
<ftui-popup id="calllist" width="640" height="480">
<ftui-content file="content/calllist.html"></ftui-content>
</ftui-popup>
Das geht allerdings gründlich schief, denn das Popup sieht dann so aus, wie im zweiten Bild.
Ich sag nix :-X
<table height="100%" width="100%" class="" border="5">
<tr>
<th>
<ftui-icon
[name]="Calllist:1-state | map('`.*`: phone1')"
[color]="Calllist:1-state | map('`=> O_O`: red, `<=`: mygreen, `=>`: mygreen, `=> X`: red, `=> ((o))`: yellow, `<= ((o))`: yellow, `=> [=]`: mygreen, `<= [=]`: mygreen, `<= X`: white')">
</ftui-icon>
</th>
<th>
<ftui-icon
[name]="Calllist:1-state | map('`=> O_O`: chevron-circle-down, `<=`: chevron-circle-up, `=>`: chevron-circle-down, `=> X`: chevron-circle-down, `=> ((o))`: chevron-circle-down, `<= ((o))`: chevron-circle-up, `=> [=]`: chevron-circle-down, `<= [=]`: chevron-circle-up, `<= X`: chevron-circle-up')"
[color]="Calllist:1-state | map('`=> O_O`: red, `<=`: mygreen, `=>`: mygreen, `=> X`: red, `=> ((o))`: yellow, `<= ((o))`: yellow, `=> [=]`: mygreen, `<= [=]`: mygreen, `<= X`: white')">
</ftui-icon>
</th>
<th>
<ftui-label
[text]="Calllist:1-timestamp"
></ftui-label>
</th>
<th>
<ftui-label
[text]="Calllist:1-number"
></ftui-label>
</th>
<th>
<ftui-image base="../images/Anrufer/" [src]="Calllist:1-image" shape="circle" width="20"></ftui-image>
<ftui-label
[text]="Calllist:1-name"
></ftui-label>
</th>
<th>
<ftui-label
[text]="Calllist:1-duration"
></ftui-label>
</th>
</tr>
<tr>
<th>
<ftui-icon
.
.
.
.
Gruß ;)
Eisix
;D
Gut, es darf aber dann doch die Frage erlaubt sein, wenn man <table> benutzen soll, wofür dann <ftui-row> und <ftui-column> gut sein sollen. ::)
Warum nicht gleich div-table (https://www.mediaevent.de/css/display-table.html)?
Wahrscheinlich bildet <ftui-table> <div style="display:table;"> usw ab...
Ganz pragmatisch gesagt weil es damit funktioniert.
Solange du die gleichen Buttons, Icons uns shape nutzt funktioniert alles mit ftui-row, ftui-column. Sobald du die mixt werden die Reihen unterschiedlich. Denke da stimmt noch was nicht mit den Größen die von den Objekten belegt werden. Deshalb zwinge ich das ganze in solchen Fällen in <table>. Wenns ein <ftui-table> gibt kann ich das ja nutzen.
Beispiel:
<ftui-column>
<ftui-row>
<ftui-button (value)="set harmony_4619 command Rewind" fill="solid"><ftui-icon name="fast-backward"></ftui-icon></ftui-button>
<ftui-button (value)="set harmony_4619 command Pause" fill="solid"><ftui-icon name="pause1"></ftui-icon></ftui-button>
<ftui-button (value)="set harmony_4619 command Play" fill="solid" shape="circle" color="red" class="size-3"><ftui-icon name="play"></ftui-icon></ftui-button>
<ftui-button (value)="set harmony_4619 command Stop" fill="solid"><ftui-icon name="stop"></ftui-icon></ftui-button>
<ftui-button (value)="set harmony_4619 command FastForward" fill="solid"> <ftui-icon name="fast-forward"></ftui-icon></ftui-button>
</ftui-row>
<table style="border:0px solid grey; width:90%">
<tr height=90>
<td>
<center>
<ftui-button (value)="set harmony_4619 command Exit" shape="circle"><ftui-icon name="rc_EXIT" color="mygreen" class="size-2"></ftui-icon></ftui-button>
</center>
</td>
<td>
<center>
<ftui-button (value)="set harmony_2598 command VolumeUp" fill="outline" shape="circle"><ftui-icon name="volume-up"></ftui-icon></ftui-button>
</center>
</td>
<td>
<center>
<ftui-button (value)="set harmony_4619 command DirectionUp"><ftui-icon name="angle-up"></ftui-icon></ftui-button>
</center>
</td>
<td>
<center>
<ftui-button (value)="set harmony_4619 command ChannelUp" fill="outline" shape="round"><ftui-icon name="plus"></ftui-icon></ftui-button>
</center>
</td>
<td>
<center>
<ftui-button (value)="set harmony_4619 command Info" shape="circle"><ftui-icon name="rc_INFO" color="mygreen" class="size-2"></ftui-icon></ftui-button>
</center>
</td>
</tr>
<tr height=90>
<td>
<center>
<ftui-button (value)="set harmony_4619 command Menu" shape="circle"><ftui-icon name="rc_MENU" color="mygreen" class="size-2"></ftui-icon></ftui-button>
</center>
</td>
<td>
<center>
<ftui-button (value)="set harmony_4619 command DirectionLeft"><ftui-icon name="angle-left"></ftui-icon></ftui-button>
</center>
</td>
<td>
<center>
<ftui-button (value)="set harmony_4619 command Select" shape="circle" class="size-3"><ftui-icon name="rc_OK"></ftui-icon></ftui-button>
</center>
</td>
<td>
<center>
<ftui-button (value)="set harmony_4619 command DirectionRight"><ftui-icon name="angle-right"></ftui-icon></ftui-button>
</center>
</td>
<td>
<center>
<ftui-button (value)="set harmony_4619 command Guide" shape="circle"><ftui-icon name="rc_EPG" color="mygreen" class="size-2"></ftui-icon></ftui-button>
</center>
</td>
</tr>
Anders habe ich das Layout nicht vernünftig hingekriegt, lasse mir aber gerne zeigen wie es geht.
Gruß
Eisix
Das ist eigtl relativ einfach:
<table> => <div style="display:table;">
<tr> => <div style="display:table-row;">
<td> => <div style="display:table-cell;">
Border Definitionen gehen analog:
<div style="display:table;border:0px solid grey; width:90%;">
Und das <center> kannst du auch via <div style="display:table-cell;text-align:center;vertical-align:middle;"> darstellen.
CSS display:table, table-row, table-cell (https://www.mediaevent.de/css/display-table.html)
ZitatGanz pragmatisch gesagt weil es damit funktioniert.
Das ist natürlich ein Argument. ;)
Mir ist schon klar, daß ich das alles nachbilden kann, aber ich möchte das nicht nutzen, wenn es in ftui3 entsprechende Funktionen dafür gibt.
Zitat von: grossmaggul am 07 Januar 2021, 15:41:57
...
<ftui-popup id="calllist" width="640" height="480">
<ftui-content file="content/calllist.html"></ftui-content>
</ftui-popup>
....
Das geht allerdings gründlich schief, denn das Popup sieht dann so aus, wie im zweiten Bild.
width="640px" height="480px"Mit px
Ah, o.k., danke!
Darf ich mal fragen, warum man beim Popup bei width und height "px" angeben muss, bei <ftui-image> aber nicht?
Weil die Elemente, die den Wert konsumieren das so brauchen. Ich mache (bis jetzt) keine Fallunterscheidung und füge eine Einheit hinzu oder lösche sie raus, wenn es nicht nötig ist.
O.K, danke.
Zitat von: setstate am 07 Januar 2021, 17:37:02
width="640px" height="480px"
Mit px
Cool wäre es wenn man das prozentual angeben könnte.
Dann könnte man auch bei den Font Sizes mit vh arbeiten.
Dann würde sich die ganze Oberfläche dynamisch mit der Größe des Bildschirms verkleinern und vergrößern.
Ich hatte das mal in TableUI (also 2.x) umgesetzt, bin aber immer an den Popups gescheitert.
Grüße
Olli
Kann man
<ftui-popup id="calllist" width="80%" height="90%" timeout="0">
<ftui-content file="tests/content_calllist.html"></ftui-content>
</ftui-popup>
Zitat von: setstate am 08 Januar 2021, 19:10:53
Kann man
<ftui-popup id="calllist" width="80%" height="90%" timeout="0">
<ftui-content file="tests/content_calllist.html"></ftui-content>
</ftui-popup>
spannend, bin sicher das es bis vor kurzem nicht ging.
Danke!