Interface adapted to mobile screens

[alin256]

@DenisovichDev can we update the interface for the phone screen.

I am thinking to have a large toggle bias button in the middle and all the other controls closer to the bottom:

@holsaeter

[DenisovichDev]

Absolutely! It's a great concept, I'll start working on it. Might have change some bits on sketch.js to adapt on mobile devices

[alin256]

I tried it on iPad/iPhone yesterday, and the button interface is laggy. I suppose it is an issue with WebKit touch implementation.

Did anyone try on Android?

I suggest having some kind of direct touch controls on the main canvas for steering. Those seem to have much less lag in my testing.

[shiffman]

Yes, I would agree! Should we detect mobile and serve a different view or create a version that works at any resolution / aspect ratio?

[alin256]

Since it is a single-view application it is easier to just rescale it according to the screen and remove the scrolls.

We did a while ago for http://game.geosteering.no/geo/redirect
The code is here: https://github.com/NORCE-Energy/geosteering-game-gui

P5's support for scaling is quite good.
So it is a matter of preventing the scrolling in the CSS.
I can try something soon.

[alin256]

I feel like with keyboard and click-on-interface controls we can and should get rid of all buttons except for pull back

Demo here: https://al-digital.no/Directional-Boring/

[alin256]

@DenisovichDev the improved CSS did not scale correctly on iPhone. Do you know how to fix?

[alin256]

[DenisovichDev]

That is really weird... It's working fine in Android. I'll look into it

[alin256]

It's working fine in Android. I'll look into it

Can you check that the updated version did not become worse on Android?

[DenisovichDev]

It's not something Android specific, but the style sheets need work. I'll get into it tonight