Broken layout of camera view area in web demo

1j01 / tracky-mouse

Mouse control via head tracking, as a cross platform desktop app and JS library. eViacam alternative.

https://trackymouse.js.org/

MIT License

25 stars 4 forks source link

Broken layout of camera view area in web demo #52

Closed 1j01 closed 5 months ago

1j01 commented 5 months ago

The layout was broken in https://github.com/1j01/tracky-mouse/commit/e46a2cc72c8bf6eef8c803d22f46d2e1c7e85c5b when fixing #9 because I only tested on the desktop app, which doesn't need to prompt for camera access.

1j01 commented 5 months ago

Actually it's not just a problem with the "Allow Camera Access" button. Even after allowing access, the camera view is not visible in the web demo. Conversely, in the desktop app, the "Allow Camera Access" button shows up fine (while the app is loading). So I guess I was right to tag this with affects:web-library and not affects:desktop-app.

I'm not sure what's going on though. Why are all of these collapsed to 0 or 20 (line height?) pixels in height? And not in the desktop app?

.tracky-mouse-canvas-container-container
.tracky-mouse-canvas-container
.tracky-mouse-canvas-overlay
.tracky-mouse-canvas

1j01 commented 5 months ago

Okay, so the desktop app includes html, body, .tracky-mouse-ui { height: 100%; } The solution I came up with for the layout doesn't give these elements any intrinsic height, unfortunately. I should just need a min-height somewhere though...

1j01 commented 5 months ago

I've fixed this but not in the simplest/best way.

I could leave min-height unset (auto), for the web demo, where the .tracky-mouse-ui is unconstrained in height. This way, the camera area can actually have an intrinsic height based on its width and aspect-ratio. This would also provide two benefits to the web demo:

When the viewport is wide, the camera view area would expand to exactly fill the width of the container. Right now it's limited by the min-height combined with the aspect-ratio, leaving space to the left and right.
When the viewport is very narrow, the camera view area would avoid useless space below it. Right now, the width fits nicely but the fixed min-height causes it to take up extra height.