brute force screen resolution for volumio running in iframe

Help and Support Help
1

Hello,

I am using Volumio and I would like to integrate the volumio web UI in a
webpage of my home automation server. I tried to add Volumio
as an iframe which is basically working, however, the Volumio web UI
never adapts well to the dimensions of the iframe size.

Seems as if the Volumio Web UI always wants to adapt to the full browser
window, but not to the iframe size. Since I always have the same absolute
iframe size and use full screen browsing on a 10" tablet, it would be sufficient if I could
fix the Volumio web UI to a static value, e.g. 800x600 or something else.
What variables in which files need to be changed ? I looked a bit into the
css js and php files but in fact, I do not know where to change what,
unfortunatly my lausy html knowledge is limited to simple static webpages…

Anybody can help ?

Thanks

Ralf

2

anybody can help ?

3

Try to install Volumio app for android!

4

Screenshot_2016-01-09-00-13-00.pngHello,

I do not need an app, I want to modify the standard web UI
such that the screen is not adaptive anymore.

The web UI in a browser window alone works perfectly.

However, I want to fix the resultion to e.g. 800x600 because I
want to rune VOLUMIO in a html page (home automation server)
within an iframe.

See screenshot attached. As you can see, the volumio UI
tries to adapt to the full screen resolution so it does not
fit into the iframe. If I could tell or modify Volomio to return a
non-adptive webpage with a fixed screen resolution,
it should fit into the iframe.

Ralf

5

You lazy to try! Volumio app for android is a standard web UI!! But in the optimized window!
play.google.com/store/apps/deta … ease&hl=ru

6

Another app does not help. It has to run in the normal browser.

7

Jeez norrest, your not helping…

I’ve actully came across two possible solutions for your problem while searching for something completely different concerning iframes.
You should be able to do it using Javascript (jQuery) or you could do it using css.

Take a look over here for a jQuery: http://stackoverflow.com/questions/16526257/adjust-iframe-scroll-to-height-of-screen-resolution
Take a look over here for CSS: http://stackoverflow.com/questions/5711416/iframe-css-forcing-iframe-to-fit-screen

Hope this helps

8

Thanks… this makes much more sense … at least
seems you understand what I am talking about

I tried both but couldn’t get it working.

I think there must be a quite easy solution within volumio,
e.g. changing the meta viewport parameters or somethink alike.

<meta name="viewport" content="width=device-width <p>But also I couldn’t get it working changing that…</p>
9

Hello,

let me bring that topic up again, I still couldn’t solve the problem. No idea how to switch off the responsive web UI such that that the server returns a fixed resolution ?

thanks

Ralf

10

To be honest, I have no idea how you could change that…

11

This might help…

SSH into whatever is running volumio and edit panels.css

sudo nano /var/www/css/panels.css

Find the following;

.container { padding: 40px 0; }

Change it to, replacing 960px with the width of your iframe.

.container { padding: 40px 0; max-width: 960px; }

Then find…

#menu-top, #menu-bottom { position: fixed; left: 0; right: 0; height: 40px; line-height: 40px; background: #7A848E; color: #fff; z-index: 1000; }

replace with… again change 960px to the width of your iframe.

#menu-top, #menu-bottom {
    position: fixed;
    left: 0;
    right: 0;
    height: 40px;
    line-height: 40px;
    background: #7A848E;
    color: #fff;
    z-index: 1000;
    max-width: 960px;
}

That should force a maximum width for the UI. I haven’t tested it so it might not work!

12

Thanks I will try that !

I meanwhile set up a stupid work around… see pic…
I made the segmentation of my home automation server
such that VOLUMIO can use the full width. Then I deleted the
footer and integrated its function into the header dropdown menu.

So here Volumio resizes but that doesn’t matter because
there is no bottom segment (which caused most of the trouble)

Ralf

13

@ alphapapa: I tried your code, the max width does work. However the bottom bar (browse/playback/playlist) still causes trouble (it disappears, gets hidden).
But combining my solution of eliminating the bottom bar and your max width now allows almost any iframe sizes
thanks

Ralf