iframe für responsive UI Website

[rasti]

Hallo,

ich versuche nun schon seit mehreren Tagen verzweifelt,
den Musicplayer Volumio per iframe einzubinden.
Und zwar (letzter Stand) so :

Code Auswählen Erweitern

<li data-row="2" data-col="2" data-sizex="6" data-sizey="5">
<div data-type="iframe"
    data-src="http://192.168.178.7/index.php"
    data-device="SERVER"

data-fill="no"
data-width="920"
data-height="725"
data-timeout="5000"
    data-scrolling="yes"
></div>

In die per iframe aufgerufene Seite habe ich die 1 Zeile so geändert

Code Auswählen Erweitern

<?php header("Access-Control-Allow-Origin: *");
,damit der Iframe-Aufruf überhaupt geht.

In Chrome wird das alles richtig angezeigt, alle anderen Browser versagen.
Siehe Sceenshots, einmal mit Chrome, einmal mit einem beliebigen Browser.
Ich möchte Chrome eigentlich nicht nehmen, da er richtig langsam ist.
Alle anderen Seiten außer dieser hier funktionieren mit fast jedem Browser und es geht richtig fix.

Problem ist,dass die aufgerufene Website "responsive" ist,
d.h. sie passt sich der Bildschirmgröße des Browsers an.

Ich habe versucht, das Problem durch Ändern der Datei panels.css der
aufgerufenen Musikserver-Seite zu ändern, bekomme das
aber mangels css Kenntnisse nicht ganz hin.

Lässt sich das Problem mit einem (modifizierten) fhem-Iframe-widget lösen,
das die per Iframe aufgerufene Seite "denken lässt" , die Bildschirmauflösung
würde eben der Iframe-Size (hier also data-width="920" data-height="725")
entsprechen ?


Gruß

Ralf

[rasti]

habe es (behelfsmässig) hinbekommen.
und zwar mir
http://jsfiddle.net/masau/7wrhm/
und Standard-iframes anstatt dem widget

Code Auswählen Erweitern

<li data-row="2" data-col="3" data-sizex="6" data-sizey="4">

     <div class="wrapper">
    <div class="h_iframe">
        <!-- a transparent image is preferable -->
        <img class="ratio" src="http://placehold.it/920x800/">
        <iframe src="http://192.168.178.7/index.php" frameborder="0" ></iframe>
    </div>
</div>

Musikserverseitig habe ich auch die panels.css ändern müssen.
Gruss

Ralf

[rasti]

Hallo,

wie von einem User per PN gewünscht, die zugehörige panels.css und die 3 zugehörigen tablet UI html Seiten

Ist aber für Volumio 1 (seit kurzem gibt es ja was neues) und für Tablet UI 1.xx , also alles Stand vor ca. 6-8 Monaten.
Die untere Buttonleiste von Volumio fehlt, deswegen hilfsweise 3 Seiten für Playback, Browse, Queue

Viele Grüße
Ralf

[hillbicks]

Perfekt, ich danke Dir.

Ich werde dann mal probieren die Volumio 2 Instanz in die aktuelle FTUI Version einzubinden und berichte dann hier.