[FTUI 3] content und Popup

[grossmaggul]

Hallo,

ich habe folgendes Popup:

Code Auswählen Erweitern

<ftui-popup id="calllist">
                        <ftui-content file="content/callllist.html"></ftui-content>           
          </ftui-popup>

Mit folgendem Inhalte der callist.html

Code Auswählen Erweitern


<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:

Code Auswählen Erweitern

<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.

[Eisix]

Ich sag nix 

Code Auswählen Erweitern


<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

[grossmaggul]

 

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.

[yersinia]

Warum nicht gleich div-table?
Wahrscheinlich bildet <ftui-table> <div style="display:table;"> usw ab...

[Eisix]

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:

Code Auswählen Erweitern


<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

[yersinia]

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

[grossmaggul]

Ganz 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.

[setstate]

...

Code Auswählen Erweitern

<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.

Code Auswählen Erweitern

width="640px" height="480px"

Mit px

[grossmaggul]

Ah, o.k., danke!

[grossmaggul]

Darf ich mal fragen, warum man beim Popup bei width und height "px" angeben muss, bei <ftui-image> aber nicht?

[setstate]

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.

[grossmaggul]

O.K, danke.

[octek0815]

Code Auswählen Erweitern

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

[setstate]

Kann man

Code Auswählen Erweitern


  <ftui-popup id="calllist" width="80%" height="90%" timeout="0">
    <ftui-content file="tests/content_calllist.html"></ftui-content>           
</ftui-popup>


[octek0815]

Kann man

Code Auswählen Erweitern


  <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!