Mouse in Linux browser-fullscreen

Wingnut

Well-known member
3rd Party Module Dev
Tutorial Author
Joined
Jan 2, 2020
Messages
1,393
When you use any browser in Linux and go fullscreen #HTML5_CANVAS_RESIZE_MODE 1 and 2 does not correctly scale mouse/touch coordinates.

Linux stretches fullscreen in only the y -direction and keeps the ratio, bascially centering x. So x is correct in the middle and when you go outward, it will scale more incorrectly the further you go.

Btw in MacOS all browsers stretches fullscreen in both directions, and Windows probably does the same I can't rememebe but I'm sure there' no issue there either as it would have been talked about in that case.

Linux browser fullscreen (default HTML5 mode 1)


Screenshot_20220124_214209.png


Code:
 #MOJO_AUTO_SUSPEND_ENABLED = False

 #HTML5_CANVAS_RESIZE_MODE=1            '0=locked, 1=stretch, 2=resize'




Import mojo2



Function Main()

    New Game

    Return 0

End



Class Game Extends App



    Field x:Int

    Field y:Int

    Field canvas:Canvas



    Method OnCreate()

        canvas = New Canvas()

       Return 0

    End



    Method OnUpdate()

          x = Int(MouseX()/8)*8

          y = Int(MouseY()/12)*12

    End



    Method OnRender()

        canvas.Clear 0,1,0

        canvas.DrawLine x,y,x,y+12

        canvas.Flush

    End



End
 
Progress in understanding this!

Add this and it will track mouse and touch correctly

#HTML5_CONSOLE_SHOW = False

BUT, I'm still wondering about one thing.

Fullscreen stretches both directions on macos, (Chrome and Safari tested)
Fullscreen on Linux stretches in y direction and keeps ratio in fullscreen (Chrome and Firefox tested)

So at least Chrome is a proof it's done differently, what if I want to change the behaviour is that possible?
I'm not sure how they can interpret the html css js so differently?

And which one does Windows comply to, It would be nice to be able to change the behaviour on all three as well as to have the same default on all three. I'm gonna investigate if it's easy to make it so.
 
I'm not sure how many ppl uses these different modes but they are all useful sometimes.

Mode 2 in HTML5 seems very nice as it makes things look like a native app, you can stretch the window to any size. This does not work in Linux at all really and in macos almost works perfectly but it limits the mouse to whatever was the original size, it does not allow you to go as far as you enlarged the window. Small things that needs to get ironed out probably.

I need to focus on coding Android right now but when I get the time I might want to look into this more!
 
I tried your code with mode 1 yesterday on Linux mint 20 and it behaved just fine. Stretched to x and y when I moved the divider. Mouse coordinates always reported 0:0 to 640:480. Pressing F11 made the browser turn to full screen and the app behaved the same.
 
Okay thanks for testing. I'm using Parrot Security, but as other webpages seem to behave just like they do in other platforms I can't come up with an answer what causes this behaviour. I need to sort these out later but for now it's just minor annoyance that I have to keep in mind.

I was ready to say that maybe my cause of a different stretch beheviour was becuase of issues with bad graphics driver, canvas vs web mojo1/mojo2. But I can't say any of these are the reason.
 
Back
Top Bottom