HiDPI / Retina Testing

[jean-emmanuel]

Everything needed to scale the interface is implemented, but no test has been made with HiDPI / Retina devices. Some testing and feedback on this would be greatly appreciated.

[tristan-k]

I do have a Microsoft Surface device. (3000x2000 resolution). I just discovered open-stage-control but I'm happy to help.

[jean-emmanuel]

Cool !

Well, I guess the first question would be: does everything renders twice as small as it should ? I'm not sure if chrome takes care of the scaling already...

[jean-emmanuel]

I've just pushed a commit that makes the app scale to the device's pixel ratio, the new behavior can be tested at http://demo.osc.ammd.net/, please tell me if it works :)

I suspect this is not the right solution as it will actually make the app too big on many small screens with high pixel density (tablets & smartphone) (commit reverted).

[korakios]

It seems fine in iOS safari browser ,plus web midi browser :) However in iPhone the menu is a bit messy. If you want I could upload some pictures. Very interesting project, well done!

[jean-emmanuel]

Why not ! Please note that safari is not officially supported though. Only chrome/chromium is, it's available on iOS, isn't it ?

[tristan-k]

Works great. Thanks. Though I still dont know how to connect to the interface, I'm having some issues with javascript. Will open another report.

[korakios]

In iOS ,currently the only browser supporting midi is 'Web Midi Browser'. In the second picture there are the midi IO plus Bluetooth midi.

But stage control works on safari browser too (no midi). Those picture where iPad screenshots

These are from iPhone 5s, the menus are a difficult to access but there so point to edit them in such small screen

[jean-emmanuel]

Open Stage Control doesn't rely on browser midi support: osc and midi messages are handled by the server only which communicates with clients through websockets. The visual glitches you're experiencing are a typical example of the cross-browser styling issues that made me limit official support to chrome ;).

[korakios]

Ok, I got it! No midi on client browsers! The menu 'mess' is also on iphone's Chrome browser, but I think it's normal on such a small screen.

[jean-emmanuel]

Alright ! Could you send me some iOS + Chrome screenshot ? What's is your chrome's version btw ?

[korakios]

Well ,maybe it was my mistake posting iphone pictures. The dpi is 326 (1136X640) and I don't know if it's considered HiDpi . Chrome looks exact the same as the last iphone pictures. (iphone 5s iOS 10.2)

[jean-emmanuel]

I've pushed 2 commits that aim to fix these glitches (layout mess & input rounded corners), can you try the demo (http://demo.osc.ammd.net) and check if it works ?

[korakios]

All good now ! I strongly recommend porting to iOS as a paid app :)

[jean-emmanuel]

Hahaha good, thanks for your feedback ! This will be included in the next release coming soon. The app will remain free and open source forever though ;)

[jean-emmanuel]

I figured out what was needed to take advantage of high resolution devices. Hdpi support can be enabled by adding ?hdpi=1 to the server's url. It's not enabled by default as I suspect it might have a bad impact on performances with some devices.

You can compare both modes:

• http://openstagecontrol.herokuapp.com/
• http://openstagecontrol.herokuapp.com/?hdpi=1

[jean-emmanuel]

The difference consists in upscaling graphics relying on canvas elements to reach the device's resolution (the other elements beeing already scaled natively). On hdpi / mobile devices, widgets should appear less blurry (look at the fader for instance).