Remote HTTP Live View displaying in Wrong Format

edited September 24 in Troubleshooting
Hello Guys. I am trying to setup remote live http view.
The problem is that when i access the link from a cell phone, the image appears to be cropped, instead of fitting into the screen.




This is how it looks from a cell phone.

The feature is currently unusable from a phone. There is also no way to zoom out.

Any way to configure this, or fix it?


Comments

  • edited September 24
    Playing with the CSS, i see that the HTML should add this:

    height: auto;
    width: 100%;
    left: 0px;

    But i think this would break the desktop view
    How can i force this code into the view?
  • I fixed the issue by editing the main.css file inside the "C:\Program Files (x86)\OpenLP\plugins\remotes\html" folder, and adding the code:

    @media only screen and (max-width: 720px) {
        .size {
        position: absolute;
        top: 0px;
        vertical-align: middle;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        height: auto;
        width: 100%;
        left: 0px;
    }
    }


  • The remote live view wasn't really intended to be used on a cellphone. Did you try turning your cellphone on its side (I'm presuming you're using an Android with screen rotation enabled - I don't know if iOS even allows that)?

  • edited September 25
    @raoul, yes i tried. But the solution i posted works 100% fine. what it does is make the page responsive. if the screen is a cell phone, it fits the image into the browser.

    I wanted to setup the mobile viewer, because this way, singers on stage can simply open it on their phones, or tablet, and follow the lyrics in case they forget. (we do not have an on-stage monitor)


    We could actually add mentions to this on the wiki or manual. The remote viewer can be 100% customizable by editing the css, and the html in the folder. (I also played with it a little, to add a favicon, and change the background color).

    AMAZING! I love OpenLP more and more each day,
  • I would recommend using the /stage url instead, it's actually made for this purpose, It shows the verse order and a preview of the next verse. also works great on phones or tablets.

    I find using /main can be glitchy, it doesn't reliably change and can take time
Sign In or Register to comment.