search

CodingTrain / Directional-Boring

Horizontal Directional Drilling Simulation
MIT License
46 stars 21 forks source link

Interface adapted to mobile screens #26

Open alin256 opened 2 years ago

alin256 commented 2 years ago

@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:

interface-concept

@holsaeter

DenisovichDev commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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/

image

alin256 commented 2 years ago

@DenisovichDev the improved CSS did not scale correctly on iPhone. Do you know how to fix? ![Uploading A032FF69-CF6D-4AA5-A5CB-440656DA1DF0.png…]()

alin256 commented 2 years ago

2821AAC8-099C-4BA6-B4F7-5A56E0B50E0A

DenisovichDev commented 2 years ago

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

alin256 commented 2 years ago

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 commented 2 years ago

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

alin256 commented 2 years ago

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;