Montage page, Modernization

[IgorA100]

Because Now I'm modernizing the Montage page, I propose to discuss it here.

Grid will be based on https://github.com/gridstack/gridstack.js

Layout will be:
- "Freeform"
- 2 Wide, 3 Wide, 4 Wide, 6 Wide, 8 Wide, maybe 12 Wide
- User customizable.

Because grid elements are scalable, then it is probably necessary to change “Scale” for each element. But, when doing

Code: Select all

monitor.setScale(newscale, width, height)

Scale is not applied to the element because there is a condition in "setStreamScale() MonitorStream.js"

if (this.connKey) {
/* Can just tell it to scale, in fact will happen automatically on next query */

As far as I understand, it is not possible to change “Scale” during the translation process (when there is a “connKey” attribute)?
The "scale=10" attribute for IMG also has no effect.

Further.... With "Scale" it is not clear at all. There are options to select "Auto", "2x", "4x", etc., but there is a limitation in MonitorStream.js:

Code: Select all

if (newscale > 100) newscale = 100;

Those. if you select "2x" or "4x" - this will not work and Scale will be = 100 ?????

P.s. And in general, is “Scale” needed on the Montage page, provided that all elements (monitors) are scalable?
P.s.2 I plan to remove the "Width" and "Height" settings, because... Now I don’t know what to apply it to, if the dimensions of the element (monitor) can be changed using the mouse.

[IgorA100]

Scaling:
The font size is the same on both screenshots!

_1.JPG (225.91 KiB) Viewed 1084 times

_2.JPG (118.71 KiB) Viewed 1084 times

[makers_mark]

Been working on that for many years myself. I made a browser extension for customization and taking away developers responsibilities to the desires of others concerning the UI/UX. I succeeded a long time ago and tried sharing, to no avail. It is just me over the years. If you want to see what my ZM experience looks like, I just made a screen capture:

https://www.youtube.com/watch?v=_0g_TM4BKfA

Don't reinvent the wheel. Use the power of CSS and overlay/extensions. It is fast, and I can wait for loading events to unhide the montage images at the event. I can inject CSS into different pages (montage, watch, event, events...etc.). I did that last year to fix the events page on my end...

If you are curious about the computer that I used to record this interaction, I put it together in 2015 and has a 6700k processor.

CSS is king for a lot of things. It is very forgivable (there is no such things as an error, it works or doesn't). These cameras in this video are of different resolutions and aspect ratios, which was the exact reason when I first started my project...using CSS and letting the user decide the CSS properties in a dumbed down way, while letting more advanced users inject there own "styling". I can have the Montage header (or any page) swing open from the left/right/bottom or whatever within a minute. Change size....anything.

The wheel is fine

[IgorA100]

Don't reinvent the wheel. Use the power of CSS and overlay/extensions.

I looked at your solution. Yes, it's interesting, but:
- it is not possible to change the display size for each monitor.
- there is no way to change the sorting and location of monitors.
These are the main points why I decided to offer my solution.

Yes, you can make a basic grid without any problems using pure CSS. Basically my solution uses a CSS grid, but the JS resizes it as needed.

[iconnor]

Regards to scale= in img stream. There is no point in ZM upscaling the images to send to the browser more than 100%. The browser can scale the image to whatever size it wants. So we limit that parameter.

[IgorA100]

There is no point in ZM upscaling the images to send to the browser more than 100%.

I agree.
This means “Scale 2x, Scale 4x”, etc. won't work, right? Otherwise I'm confused.

[geraldbrandt]

https://www.youtube.com/watch?v=_0g_TM4BKfA

This is EXACTLY what I want montage to be.

Gerald

[geraldbrandt]

Don't reinvent the wheel. Use the power of CSS and overlay/extensions.

I looked at your solution. Yes, it's interesting, but:
- it is not possible to change the display size for each monitor.
- there is no way to change the sorting and location of monitors.
These are the main points why I decided to offer my solution.

Yes, you can make a basic grid without any problems using pure CSS. Basically my solution uses a CSS grid, but the JS resizes it as needed.

- I don't think changing the display size of each monitor is what montage is for. If you want a bigger image, click on it.
- sort and location of monitors is based on the order in the console and the layout.

[IgorA100]

This is EXACTLY what I want montage to be.

In this case, how will the image from the camera look not in landscape mode, but in portrait mode? Compressed twice vertically? Or cropped top and bottom?

[iconnor]

2x and 4x should work fine. We set the img.style.width and height to whatever 2x and 4x would be. We just don't ask for more than 100% from the server. We only tell zms to scale down to improve network bandwidth and cpu use.

[iconnor]

Actually lots of people want an arrangement where some cameras are bigger than others.

That's the problem, everyone wants something different.

[makers_mark]

Don't reinvent the wheel. Use the power of CSS and overlay/extensions.

I looked at your solution. Yes, it's interesting, but:
- it is not possible to change the display size for each monitor.
- there is no way to change the sorting and location of monitors.
These are the main points why I decided to offer my solution.

Yes, you can make a basic grid without any problems using pure CSS. Basically my solution uses a CSS grid, but the JS resizes it as needed.

I can change the size of each monitor using CSS scale. It is not ideal really because 1 pixel in the default scale(1) is turned into four pixels with scale(2).
The sorting and location can be changed using the ZM "freeform". This is not ideal either because changing the window size screws everything up, and on my end at least you have to reload the "freeform" style each time you land on the montage page. I don't use it, but I could override that and let the user decide on the options page, which dropdown to automatically apply. It would be immediate. On the options page, I already use that as an option for the scale dropdown. I have to handle that a little a little different from the past. I've rewritten about everything to be compliant with the forced manifest version 3, which you can't execute user supplied JS like I can with CSS. The majority of my logic was in the extension background script, which I moved to the individual content scripts. Now with MV3, the background script has to be a service worker, that dies. Yeah there's hackish ways to keep it running that are not dependable in time. With MV3 they moved everything away from ".executescript" to ".scripting" and everything has to be included in the zip as far as JS. It's all good though, I can make functionality still happen. Also learned a lesson about putting too much weight on your extension background.js. It was fun!

When I mentioned CSS was magic, I was really referring to the fact that it can do a lot of things that people don't realize, and that it is perfect for an extension that deals with different ZM versions. Trust me, things change as far as CSS selectors. I can cover what I want and there isn't going to be an error. Don't be mistaken though, 82% of the extension is javascript. It couldn't be done without it.

I did incorporate gridstack.js into my extension today though. It's more of a proof of concept at this point. ZMS doesn't update the images yet because it is looking at the wrong target, until I fix it and dynamically make the html. I did throw a little ffmpeg testsrc portrait monitor in there for you
https://youtu.be/y8cmfb9FhCs

[IgorA100]

All my changes are available in the current build: https://launchpad.net/~iconnor/+archive ... der-master