CodingTrain
Interface adapted to mobile screens
@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
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
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.
Yes, I would agree! Should we detect mobile and serve a different view or create a version that works at any resolution / aspect ratio?
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.
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/
@DenisovichDev the improved CSS did not scale correctly on iPhone. Do you know how to fix?
That is really weird... It's working fine in Android. I'll look into it
It's working fine in Android. I'll look into it
Can you check that the updated version did not become worse on Android?
It's not something Android specific, but the style sheets need work. I'll get into it tonight
For completeness, the solution to the iOS problems was in a magic line in the HTML file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and a magic line in the CSS file
-webkit-text-size-adjust: none;