mainsail-crew / mainsail

Mainsail is the popular web interface for managing and controlling 3D printers with Klipper.
https://docs.mainsail.xyz
GNU General Public License v3.0
1.71k stars 363 forks source link

webcam: better positioning for webcam feeds in "webcam" tab #1970

Closed arekm closed 1 month ago

arekm commented 2 months ago

Requested feature:

Please improve webcam windows positioning in "webcam" mainsail tab. Currently it wastes so much space making feed small and thus missing all details.

Running mainsail v2.12.0

Solves the following problem:

Scaling and better positioning. Tons of web real estate wasted here. Second webcam should be under fist, not on the side.

webcam-view-bad

Additional information:

No response

meteyou commented 1 month ago

@arekm thx for your request. your specific screenshot, shows a small but high windows. which solution do you think would fit on portrait and on landscape window sizes? for example a ultra wide screen has a lot more space in width and very very less in the height.

arekm commented 1 month ago

Don't know about css magic but can't it be flexbox like https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ?

(here I use ultrawide monitor but often I put webcam window on right 1/3 of screen, just like on screenshot)

meteyou commented 1 month ago

it is already with flexbox and each webcam has 50% width. so the 3rd webcam will be in the next row.

arekm commented 1 month ago

Unfortunately as I wrote I have no idea about css magic but why is that 50% width limit and not each stream being separate "box" ? (so it would rearrange itself when making browser window narrow)

Some css grid-template-columns, grid-template-rows with flexboxes inside and @media queries limiting minimal window stream size... guessing.

I more or less see result (so grid of streams, self rearranging based on browser window size, with minimal stream window sizes maybe set in preferences. So it by default would use all available real estate and would scale streams down when making window smaller (but not below certain point) ... and no idea how to get there.

meteyou commented 1 month ago

i dont ask for a specific CSS code, i just ask how you think it should work.

its just the exact same panel as on the dashboard and this current implementation is the best to fit multiple webcams in 1 panel. the webcam page is more for 1 webcam as big as possible. i dont see any usecase to see multiple webcams on the webcam page only if you have 4 or more (i think 7 was the biggest setup i have ever seen).

you just see 1 specific usecase with a small browser window. for a good solution, you have to check also all other possible usecases to speak about "the best solution".

arekm commented 1 month ago

Ok.

Allow to choose which (multiple) webcams should be visible in dashboard and (as separate option) which in webcam menu. For me dashboard and webcam menu have different goals.

Dashboard - just to see that things are happening (since stream sizes are small anyway) webcam menu - see details of what is happening, to notice if there are any print failures for example etc.

So if I had 7 cameras I would choose only two most important ones for dashboard and few important (probably adjusting which cameras - for particular print) for webcam menu.

Regardless of chosen number of cameras next rule is would be to use such layout automatically which wastes minimal part of available real estate area. 1 camera, so big stream - use entire available area, 2 cameras - then see (I assume it's possible) which layout wastes less and choose that. Same for multiple cameras - check which wastes minimal amount. Even with calculations of all common variants if there is no ready mechanism for that in css.

Obviously people could have different goals than mine but these rules (ability to choose which cameras are visible here and there and don't waste screen) look generic enough.

Any downsides of such approach, from user point of view?

meteyou commented 1 month ago

why do you don't change to 1 single webcam in the webcam page to see as much as possible? (with more than 1 webcam, its just impossible to fill the whole place, because of the ratio from the cams)

its also possible right now to have 1 specific webcam or grid on the dashboard and another (or the same) specific webcam or the grid on the webcam page. this setting will be stored for each view.

to be honest, mainsail is a printer interface and not a webcam interface. recently i feel like i'm just wasting time on webcam stuff instead of working on important features...

arekm commented 1 month ago

So with 1 camera just standard "waste minimal number of space", too.

My use case is: two cameras (one in front and one in back of print bed) because one doesn't cover all details of the print (and printing happens on another floor, so can't use my eyes directly for that).

All my (various) printers have webcams, so well ... webcam is part of modern printer experience here.

Obviously I can workaround problems by opening streams directly.

Anyway I made this feature request with idea to improve what exists in mainsail. If you think that this feature request makes no sense feel free to close it.

meteyou commented 1 month ago

i see in your first screenshot that the page is not really utilized, but i see more disadvantages due to unnecessary complexity in your description before.

you should also keep in mind that users are already struggling to set up 1 webcam in mainsail. settings for different sites are even more confusing here.

i'm just looking for a simple solution that everyone can understand without having to read up on it or anything else...

github-actions[bot] commented 1 month ago

Ahoi!

It looks like there hasn't been any recent updates on this issue. If you created this issue and no longer consider it to get merged, then please login to github and close it. Otherwise, if there is no further activity on this issue, it will be automatically closedwithin the next 7 days.

Fair wind and a following sea! ~ Your friendly MainsailGithubBot

PS: I'm just an automated script, not a real sailor.