New ZoomPan (Zooming and Panning) on Watch, Montage page

[IgorA100]

Control:
1. Zoom buttons that appear when you hover the mouse over the image.
Additionally, you can use "Ctrl".
"Ctrl" + mouse click on the "-" button - reset the scale to "1"
"Ctrl" + mouse click on the "+" button - increase at speed X2

2. Mouse.
- "Shift" pressed. Zoom In/Out can be done by scrolling the mouse wheel. The area of the image over which the mouse cursor is located is enlarged. You can also left-click on any part of the image to enlarge it.
- "Ctrl" pressed - mouse click in any area of the image = reset the scale to "1"

I hope that soon this function will appear on the Event page when viewing recorded events.

Ready to listen to comments/suggestions.

[twild]

Hello

i have an (minor) issue regarding this option. If i checked the box "Use old ZoomPan" I can't uncheck anymore? Doesn't matter witch browser.

If I loin in with an other system the box is still unchecked, but same game if check it, no uncheck possible.

I' using zoneminder-1.37.61-1.203.20240705gitg84e1869fb.el8..

did i something wrong?

many thanks in advance.

regards ThW

[IgorA100]

I can't uncheck anymore?

I have made corrections to the code https://github.com/ZoneMinder/zoneminder/pull/4090
The bug will be fixed in the next version of ZM.
You can also immediately apply my patch by making changes (just one line) to your ZM.
After making the correction, it is recommended to clear your cookies.

[twild]

Many tnx, I can confirm, I can uncheck again.

ThW

[Bluemax]

Additionally, you can use "Ctrl".

Doesn't work in Firefox/Linux (X11) so i guess its chrome-only?

The problem i have with the new video canvas is the inability to be draggable (drag the whole page instead of canvas content). That's more a problem on mobile browsers. I'm coming from 1.34 that works quite well in browsers default 'mobile view mode'. For 1.37 the best experience so far (in event view) is using 'desktop mode' to get a large virtual canvas where you can pan around in portrait mode. You have to scale/pan a lot but that's the only way to get a usable experience atm. Using 'mobile mode' would result in a cropped video on the left side. Its unusable since 1.36.

The 'Use old ZoomPan' button is missing in 'event view'. It should improve the situation at least in 'desktop mode'.

Android 11
Chrome
1.37.63

[IgorA100]

Doesn't work in Firefox/Linux (X11)

I checked on Firefox 129.0 build #2016035991 on Android. I didn't find any problems with Zoom & Panning.

its chrome-only?

No, not only. All popular browsers are supported.

[Bluemax]

I checked on Firefox 129.0 build #2016035991 on Android. I didn't find any problems with Zoom & Panning.

Yes, the new 'Zoom & Panning' technically works properly. The problem is that you cannot drag the video frame anymore to move the page itself. On Android my preferred view is to have the whole page (and thus the video frame) overzoomed (manually zoomed-in way over the visible display area) and then pan around. This doesn't work anymore as the video frame only takes input for the inner frame (video frame). It does work outside the frame though (pinch-in to zoom and pan). It would help alot if you could add the 'Old Pan&Zoom' option in the event viewer as well (as in live view).

All popular browsers are supported.

I especially meant the hotkeys for zooming (ctrl, shift-click, etc). These do not work here on Firefox (Desktop/Linux).

[iconnor]

I find in portrait mode everything works really well. Surprised by that actually. It all goes bad in landscape though. Def some work to be done here.

[IgorA100]

I'll be able to work on improving it for low-resolution mobile clients a bit later.
I'm currently trying to finish the experimental merger of live and recorded event viewing with the new Timeline. I was planning to finish this work 2 weeks ago, but it so happened that I had to get distracted by domestic issues.

[IgorA100]

The problem is that you cannot drag the video frame anymore to move the page itself.

Try specifying the parameter "Scale" = "Actual"

It would help alot if you could add the 'Old Pan&Zoom' option in the event viewer as well (as in live view).

This is not the best solution. It will be very difficult to support both versions of Pan&Zoom in the future. Ideally, we need to understand what exactly is not right with the new version of Pan&Zoom and make improvements for more convenient use.

[Bluemax]

Try specifying the parameter "Scale" = "Actual"

This leads to an overzoomed videoframe indeed (i probably see 1/4 of the video) but there is nearly no place on the canvas to move/pan the page.

It will be very difficult to support both versions of Pan&Zoom in the future.

I understand.

I find in portrait mode everything works really well. Surprised by that actually.

I will try to demonstrate my viewing practice. Give me some time. I will report back.

[Bluemax]

Video: zm137.mp4 11MB, h264, 01m37s.
Done in 'desktop mode', portrait, Android, Chrome.

What you'll see:
1) After entering 'Hours' list and zooming up i scroll to the right via main canvas. I have to move the inner frame as well to reach the far right end. I've fiddled already with events.css and 'overflow' and 'flex' but haven't had any success yet (to get a static table/page).
2) The video comes up. Usually its smaller (fit to width) and i have to scale/pan to a proper position. I would go even larger but i need to keep a white area at the bottom as you'll see when i try to pan in the frame it doesn't work (works with 'old pan&zoom'). Zooming/Panning inside the frame does work as well but is not as responsive or comfortable as doing this by main canvas.
3) Skipping to next video keeps the same scaling. Zooming-in some more.
4) Going back to previous video. The page starts at top-position and the video frame is quite large. Its hard to find a free spot on the canvas to grab the page (to move down).

That's how i'm viewing my videos. Overzoomed and (permanently) panning/zooming around.

[IgorA100]

That's how i'm viewing my videos. Overzoomed and (permanently) panning/zooming around.

I think I understood your problem and wish.
I created a PR https://github.com/ZoneMinder/zoneminder/pull/4118
You can simply replace your "web/js/panzoom.js" file with my modified one and check the work.
If Zoom = 1, then you will be able to pan your page by clicking on the image.
I hope this will suit you.

[IgorA100]

I created another PR https://github.com/ZoneMinder/zoneminder/pull/4120
Double-clicking on the Stream on the Event page will toggle full-screen mode. This way, when viewing a recorded event, there will be no unnecessary elements on the screen, which is especially important for mobile devices.

[Bluemax]

Works great. Its now possible to zoom/pan the page. There seems to be a little race condition though when you pinch-zoom on the event. The event (inner frame) still seems to slightly zoom as well. Barely noticeable but if you repeat it some time the effect gets stronger.

Not sure if i understand the 2nd PR correctly. When i double-click the event i can zoom/pan the inner frame and when double-clicking again i can zoom/pan the whole page? It works this way if the inner frame is zoomed-out completely.