[GELÖST] [FTUI3] - Swiper in Popup / Popup Größe / Popup Fragen

[ekur]

Hallo zusammen,

nachdem ich schon ein paar Stunden zugebracht habe um mich mit FTUI3 zu befassen, muss ich sagen, die Ansätze finde ich gut da wesentlich schlanker, aber eben zum jetzigen Zeitpunkt auch wesentlich komplizierter für mich als ungelernten Bausteinanwender ohne Programmierfähigkeiten die tiefer sind wie ein Glas Wasser. Man findet einiges wenn man sucht, aber eben doch nicht alles. So auch die Thematik Swiper in Popup und die Größe des Popupfensters.
Zur Aufgabenstellung: Es sollen ein paar Grafanacharts, die über ein iframe eingebunden werden in einem Popup dargestellt werden.
Offen Punkt 1: Bei Darstellung von nur einem Iframe ergibt sich immer die gleiche Größe des Popup, egal was als Höhe und Breite eingegeben wird. Das Popup wird immer mit der gleichen Größe und Scrollrahmen dazu dargestellt, das Grafanachart auch mit den Scrollbalken obwohl es keine hat (Siehe Bild Popup_1)
Die Codezeilen dazu:
Aufruf des Popups über Icon

Code Auswählen Erweitern

<ftui-icon name="area-chart" popup-target="pop_graph_e"></ftui-icon>
Popup selber

Code Auswählen Erweitern

<ftui-popup id="pop_graph_e" timeout="0" width="950" height="700">
    <header>Graphiken Energie</header> 
    <ftui-label color="danger" slot="close" popup-close>Close</ftui-label>
    <iframe src="http://xxx.xxx.xxx.xxx.:3000/d/BJWeWVank/pv_anlage?orgId=1&from=now-12h&to=now&kiosk"
width="890" height="630"></iframe>
  </ftui-popup>

Offener Punkt2: Swiper in Popup
Hier sieht die ganze noch düsterer aus hinsichtlich der Darstellung. Die Funktionalität des Swiper im Popup ist gegeben, die Daten werden auch angezeigt, aber das Popup lässt sich nicht bewegen dass es größer Dargestellt wird. Die Größe sieht aus wie die Standartgröße (siehe Bild Popup_Swiper)
Der Code zum Aufruf des Popup ist identisch zu oben.
Der Code für das Popup mit Swiper:

Code Auswählen Erweitern

  <ftui-popup id="pop_graph_e" timeout="0" width="920" height="650">
    <header>Graphiken Energie</header> 
    <ftui-label color="danger" slot="close" popup-close>Close</ftui-label>
      <ftui-swiper id="swiper3" dots >
    <iframe src="http://xxx.xxx.xxx.xxx:3000/d/BJWeWVank/pv_anlage?orgId=1&from=now-12h&to=now&kiosk"
width="890" height="630"></iframe>
        <iframe src="http://xxx.xxx.xxx.xxx:3000/d/axwY8Cfnz/pv_history?orgId=1&kiosk=tv"
               width="890" height="380"></iframe>
        <iframe src="http://xxx.xxx.xxx.xxx:3000/d/MkDksts7z/pv_eigennutzung?orgId=1&from=now-12h&to=now&kiosk=tv"
               width="890" height="550"></iframe>
      </ftui-swiper>
  </ftui-popup>

Kann jemand weiterhelfen? Mache ich einen elementaren Fehler? Oder geht das Popupfenster nicht größer wie dargestellt?

Viele Grüße

ekur

[mr_petz]

Hi. Füge mal noch

Code Auswählen Erweitern


position="page"

ins popup hinzu.
Wenn es nicht drin ist, dann nimmt das Popup nur die Größe vom ftui-grid-tile an.

LG mr_petz

Edit: und noch px hinter deinen Größenangaben...

Code Auswählen Erweitern


width="950px" height="700px"


[ekur]

Hallo mr_petz,

beides zusammen hat den gewünschten Erfolg gebracht, danke.
Den Rahmen um das Iframe habe ich mit einem

Code Auswählen Erweitern

frameborder="0" ausblenden können.
Die Scrollbalken sind nach wie vor zu sehen, wobei das aber bei mir nur im FF zu sehen ist, auf dem Tablet mit Fully sind diese nicht zu sehen.

Viele Grüße

ekur

[ekur]

Hallo mr petz,
ein, zwei Fragen sind doch noch aufgetaucht zum Popup.
Ich habe zwei neue Popup Grids (ich stelle gerade viel auf Popup um wegen einem für mich nicht funktionierenden Mehrstufenmenü), dabei habe ich folgendes festgestellt:
Popup Code 1 (gelöst)

Code Auswählen Erweitern

<!-- Verkehr_Arbeit -->
    <ftui-grid-tile row="5" col="1" height="1" width="2" shape="round">
      <header>Verkehr Arbeit</header>
<ftui-row>     
      <ftui-column width="50%">
      <ftui-label size="3">Name1</ftui-label>
<ftui-icon class="size-4" name="map-signs" popup-target="pop_ver_name1"></ftui-icon>
</ftui-column>
      <ftui-column width="50%">
      <ftui-label size="3">Name2</ftui-label>
<ftui-icon class="size-4" name="map-signs" popup-target="pop_ver_name2"></ftui-icon>
</ftui-column>
</ftui-row>
    </ftui-grid-tile>

<!-- Popup_Verkehr -->
    <ftui-popup id="pop_ver_name1" timeout="0" width="900px" height="450px" position="page">
    <header>Verkehr Name1</header>
<iframe frameborder="0" scrolling="no" src="http://xxx.xxx.xxx.xxx:8183/fhem/TRAFFIC?name=Name1_Arbeit"
               width="890" height="550"></iframe>
</ftui-popup>
    <ftui-popup id="pop_ver_name2" timeout="0" width="900px" height="450" position="page">
    <header>Verkehr Name2</header>
<iframe frameborder="0" scrolling="no" src="http://xxx.xxx.xxx.xxx:8183/fhem/TRAFFIC?name=Name2_Arbeit"
               width="890" height="550"></iframe>
</ftui-popup>   
Dazu passend habe ich die Bilder ver_name1.png und ver_name2.png hochgeladen.
Das Phänomen: Bei PopUp Name 1 wird mit dem richtigen Code (height="450px") der Header zur Hälfte abgeschnitten, bei PopUp Name 2 wird mit dem falschen Code height="450" der Header richtig dargestellt. Je nachdem ob ich die px dazufüge bei height wird der Header abgeschnitten oder nicht.
Gut, ich könnte damit leben, aber ich haben eben oben gelernt dass die "px" eigenltich gebraucht werden. Eine Idee?

Lösung: Schön wenn die Dinge einfach liegen, man muss nur drauf kommen. Das "Phänomen" tritt auf wenn die Pixel des Iframes größer sind wie die Pixels des PopUps. Sobald die Werte des Iframes kleiner sind wie die PopUp Werte sieht alles normal aus. Ich hatte ja geglaubt dass ein zu großes Iframe einfach das Popup füllt, aber die Auswirkung hier war eine andere.

Popup Code 2

Code Auswählen Erweitern

<!-- Garagentore -->
    <ftui-grid-tile row="4" col="1" height="1" width="2" shape="round">
      <header>GARAGENTORE</header>
<ftui-row>     
      <ftui-column width="50%">
<ftui-icon size="5" [name]="Tor_links | map('zu:garage_z, auf:garage_o')"
path="icons_e" popup-target="pop_gar_links"
[color]="Tor_links | map('zu:green , auf:orange')"></ftui-icon>
</ftui-column>
      <ftui-column width="50%">
<ftui-icon size="5" [name]="Tor_rechts | map('zu:garage_z, auf:garage_o')"
path="icons_e" popup-target="pop_gar_rechts"
[color]="Tor_rechts | map('zu:green , auf:orange')"></ftui-icon>
</ftui-column>
</ftui-row>
    </ftui-grid-tile>

<!-- Popup_Garage -->
    <ftui-popup id="pop_gar_links" timeout="0" width="300px" height="150px" position="page">
    <header>Garage links</header>
<ftui-row>
<ftui-label size="3">Garagentor</ftui-label>
<ftui-label size="3"
[text]="Tor_links | map('zu:öffnen ? , auf:schliessen ?')"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-button size="large"
(value)="set Aktor_Garage_Sw_02 on-for-timer 1"
color="green" popup-close>Ja
</ftui-button>
<ftui-button size="large" color="red" popup-close>Nein</ftui-button>
</ftui-row>
</ftui-popup>

    <ftui-popup id="pop_gar_rechts" timeout="0" width="300px" height="150px" position="page">
    <header>Garage rechts</header>
<ftui-row>
<ftui-label size="3">Garagentor</ftui-label>
<ftui-label size="3"
[text]="Tor_rechts | map('zu:öffnen ? , auf:schliessen ?')"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-button size="large"
(value)="set Aktor_Garage_Sw_01 on-for-timer 1"
color="green" popup-close>Ja
</ftui-button>
<ftui-button size="large" color="red" popup-close>Nein</ftui-button>
</ftui-row
</ftui-popup>

Dieser Popup funktioniert einwandfrei, nur darf ich den Teil ab "<!-- Popup_Garage -->" erst am Ende der html Datei einfügen, da ansonsten alle Tiles ab diesem Popup nicht mehr dargestellt werden. Ich dachte an ein Formatierungsfehler oder ähnliches, aber ich habe nichts gefunden. Kann es mit dem zwei "popup-close" zu tun haben?

Vielleicht kannst Du mir nochmal auf die Sprünge helfen.

Viele Grüße

ekur

[mr_petz]

Hi. Schau mal genau bei dem 2. Popup.
Da fehlt hinter dem 2. </ftui-row das > Zeichen.
Nicht geschlossene Tags oder so ein Tippfehler (oder copy/paste) kann eine fehlerhafte Darstellung zur Folge haben...

LG mr_petz

[ekur]

Hi, danke für die Korrektur. Wobei das auch nicht die Intention der Nachfrage war, sondern ob der Code her richtig war. Aber manchmal sieht man einfach die Dinge nicht mehr...
Merci auf jeden Fall nochmal.
Noch eine Verständnissfrage zum PopUp, in den Beispielen habe ich da nichts gefunden. Kann man im PopUp auch mit ftui-grid-tile arbeiten, oder ist das ein NoGo?

Viele Grüße

ekur

[mr_petz]

...
Dieser Popup funktioniert einwandfrei, nur darf ich den Teil ab "<!-- Popup_Garage -->" erst am Ende der html Datei einfügen, da ansonsten alle Tiles ab diesem Popup nicht mehr dargestellt werden. Ich dachte an ein Formatierungsfehler oder ähnliches, aber ich habe nichts gefunden. Kann es mit dem zwei "popup-close" zu tun haben?
...

Meine Antwort war auf diese Frage bezogen.

Zur neuen Frage. Klar geht Bsp:

Code Auswählen Erweitern


<!-- Verkehr_Arbeit -->
    <ftui-grid-tile row="1.5" col="1" height="1" width="2" shape="round">
      <header>Verkehr Arbeit</header>
<ftui-row>     
      <ftui-column width="50%">
      <ftui-label size="3">Name1</ftui-label>
<ftui-icon class="size-4" name="map-signs" popup-target="pop_ver_name1"></ftui-icon>
</ftui-column>
</ftui-row>
    </ftui-grid-tile>

<!-- Popup_Verkehr -->
    <ftui-popup id="pop_ver_name1" timeout="0" width="900px" height="450px" position="page">
    <header>Verkehr Name1</header>
        <ftui-grid-tile row="1.5" col="1" height="1" width="2" shape="round">
          <header>Verkehr Arbeit1</header>
          <ftui-row>     
            <ftui-column width="50%">
              <ftui-label size="3">Name1</ftui-label>
            <ftui-icon class="size-4" name="map-signs"></ftui-icon>
          </ftui-column>
          </ftui-row>
        </ftui-grid-tile>
        <ftui-grid-tile row="1.5" col="3" height="1" width="2" shape="round">
          <header>Verkehr Arbeit2</header>
          <ftui-row>     
            <ftui-column width="50%">
              <ftui-label size="3">Name2</ftui-label>
            <ftui-icon class="size-4" name="map-signs"></ftui-icon>
          </ftui-column>
          </ftui-row>
        </ftui-grid-tile>
    </ftui-popup>


Hier sollte man nur den header mit einrechnen, da sonst der grid im header sitzt.

LG mr_petz

[ekur]

Super, danke für die Info.