<form autocomplete="off" onsubmit="event.preventDefault()">

    <script>
        for (let element of document.getElementsByClassName("lockView_expandable")) {
            element.addEventListener("click",(event) => {
                let thisElement = event.target;
                if (event.target.className == "lockView_expandableIcon") thisElement = event.target.parentElement;
                let nextElement = thisElement.nextElementSibling;
                const collapse = nextElement.className == "lockView_collapsed" ? false : true;
                nextElement.className = collapse ? "lockView_collapsed" : "";
                thisElement.children[0].src = collapse ? "modules/LockView/img/icons/right.png" : "modules/LockView/img/icons/down.png";
            })
        }
    </script>

    <div style="width:1200px">
        <h1 class="lockView_expandable"><img src="modules/LockView/img/icons/down.png" class="lockView_expandableIcon" style="width:20px">Introduction</h1>
        <div class="">
            Lock View is a module that gives the GM (or a designated player) control over the zoom and pan capabilities of users, such as locking the zoom or pan, moving the canvas, or setting the view to a specified setting.<br>
            The module was originally made as a companion app for my <a href="https://github.com/CDeenen/MaterialPlane">Material Plane</a> module, and to make play using a digital playmat, 
            such as a horizontally mounted TV, easier.<br>
            Over time, however, the module's features have expanded greatly, including many functions that can be useful for digital play.<br>
            <br>
            The module has 6 main functions:<br>
            <ul>
                <li><b>Autoscaling:</b> Scales the scene in various ways (horizontal fit, vertical fit, automatic fit, or scaled to a physical gridsize)</li>
                <li><b>Zoom lock:</b> Locks the zooming of the scene to prevent the user from (accidentally) messing up the autoscale</li>
                <li><b>Pan lock:</b> Locks the panning of the scene. If you use physical minis you don't want to accidentally pan</li>
                <li><b>Bounding box:</b> Limit zoom and pan to stay within a bounding box</li>
                <li><b>Force initial view:</b> After loading a new scene, the view is forced to the initial view (as set in the scene configuration menu), regardless of the position of tokens</li>
                <li><b>Viewbox:</b> Allows the GM to see what's shown on users screens, and allows the GM to control the pan and zoom of those users</li>
            </ul>
            'Autoscaling', 'Zoom Lock', 'Pan Lock', 'Bounding Box' and 'Force Initial View' can be set for each scene independently.<br>
            'Zoom Lock', 'Pan Lock' and 'Bounding Box' can be enabled and disabled at any time using control buttons.<br>
            These functions can be applied to selected connected users (must be set in the GM's module settings).<br>
            <br>
            <b>Note:</b> When 'Zoom Lock' or 'Pan Lock' are enabled, this module disables all zooming and/or panning functionality, regardless of who or what is requesting that zoom or pan. This means that, for example, modules that try to pan or zoom won't work.    
        </div>
        
        <h1 class="lockView_expandable"><img src="modules/LockView/img/icons/right.png" class="lockView_expandableIcon" style="width:20px">Example Configurations</h1>
        <div class="lockView_collapsed">
            <h2 class="lockView_expandable"><img src="modules/LockView/img/icons/right.png" class="lockView_expandableIcon" style="width:15px">Physical Play</h2>
            <div class="lockView_collapsed">
                When using a horizontally mounted screen, for the purpose of playing with physical minis, you should do the following:<br>
                <br>
                <b>GM's client, module settings:</b><br>
                -In the User Configuration screen, enable the module and viewbox for the user that is connected to the TV<br>
                <br>
                <b>GM's client, scene configuration menu (for each scene):</b><br>
                -Set 'Autoscale' to 'Physical Gridsize', which forces the TV's client to a specific zoom, ensuring the grid is always the same physical size<br>
                -Enable 'Lock Pan' and 'Lock Zoom', which prevents the TV's client from accidentally zooming or panning<br>
                <br>
                <b>TV's client, module settings:</b><br>
                -Set 'Gridsize' to the desired physical size of the grid. Usually 25 mm or 1 inch. Only fill in the number, not the units<br>
                -Set 'Screen Width' to the physical width of your screen (the actual screen, without bezel). Must be in the same units as 'Gridsize'<br>
                <br>
                Refer to the 'Settings and Controls' section below to see how the GM can manipulate the view of the TV's client.
            </div>
            
            <h2 class="lockView_expandable"><img src="modules/LockView/img/icons/right.png" class="lockView_expandableIcon" style="width:15px">Digital Play</h2>
            <div class="lockView_collapsed">
The module can also be used when playing digitally (every user has their own computer). When doing so, you can ignore the following settings:<br>
-'Gridsize' and 'Screen Width' in the module settings<br>
-'Physical Gridsize' in the scene configuration menu (Autoscale option) and in the 'Set View' dialog box<br>
<br>
<b>GM's client, module settings:</b><br>
In the User Configuration screen, enable the module and viewbox for each user whose view you want to control/view.<br>
<br>
<b>GM's client, scene configuration menu (for each scene):</b><br>
Set up the settings as desired (see below)<br>
<br>
Refer to the 'Settings and Controls' section below to see how the GM can manipulate the view of the user clients.<br>
            </div>
    
            <h2 class="lockView_expandable"><img src="modules/LockView/img/icons/right.png" class="lockView_expandableIcon" style="width:15px">Landing Page/Splashscreen</h2>
            <div class="lockView_collapsed">
                You can use Lock View to create a static landing page or splashscreen.<br>
                <br>
                <b>GM's client, module settings:</b><br>
                In the User Configuration screen, enable the module and viewbox for each user whose view you want to control/view.<br>
                <br>
                In the Scene Configuration:<br>
                -Set 'Autoscale' to 'Automatic Fit'. You can choose either the inside (crops a part of the canvas to make it full screen) or outside option (shows the whole canvas,
                but can show some padding)<br>
                -Enable 'Lock Pan' and 'Lock Zoom'<br>
                -Make sure 'Bounding Box' is disabled<br>
                -Optionally enable 'Exclude Sidebar' and 'Blacken Sidebar' to make sure the sidebar isn't blocking part of the scene<br>
                -Set the scene background color to black ('#000000')<br>
            </div>
        </div>
        

        <h1 class="lockView_expandable"><img src="modules/LockView/img/icons/right.png" class="lockView_expandableIcon" style="width:20px">Settings</h1>
        <div class="lockView_collapsed">
            <h2 class="lockView_expandable"><img src="modules/LockView/img/icons/right.png" class="lockView_expandableIcon" style="width:15px">Module Settings</h2>
            <div class="lockView_collapsed">
                <img src="modules/LockView/img/examples/ModuleSettings.png" align="right" HSPACE="5" width="450">
                In the module settings, as a GM you will find 3 buttons at the top:
                <ul>
                    <li><b>Help: </b>Opens this help screen</li>
                    <li><b>User Configuration: </b>Opens the user configuration screen, where you can configure how the module acts for specific players (see 'User Configuration' section below)</li>
                    <li><b>Scene Configurator: </b>Opens the scene configurator, where you can configure Lock View for each scene (see 'Scene Configurator' section below)</li>
                </ul>
                <br>
                Below that, as a GM you will see the following setting:
                <ul>
                    <li><b>Hide Control Button</b> - Enabling this will hide the control button (on the left side of the screen). This can be useful if this control button is never used, and will prevent it from cluttering the screen.</li>
                </ul>
                All connected users will also see two more settings which are only relevant if 'Autoscaling' is set to 'Physical Gridsize' (see 'Scene Settings' section below), as these settings allow the module to calculate the correct grid scale.<br>
                These settings are:
                <ul>
                <li><b>Screen Width</b> - Fill in the physical screen width in mm or inch of the TV</li>
                <li><b>Gridsize</b> - Fill in the desired gridsize in mm or inch (must be the same unit as 'Screen Width'). This is usually 25 mm or 1 inch</li>
                </ul>
                
                <BR CLEAR="right" />

                
            </div>

            <h2 class="lockView_expandable"><img src="modules/LockView/img/icons/right.png" class="lockView_expandableIcon" style="width:15px">User Configuration</h2>
            <div class="lockView_collapsed">
                <img src="modules/LockView/img/examples/UserConfiguration.png" align="right" HSPACE="5" width="300">
                This screen can be accessed from the module settings. Here you can configure how the module acts for each user or group of users. Under 'User Settings' you can configure each user individually, and under 'Role Overrides' you can configure the settings based on user roles.<br>
                <br>
                The following options are available:
                <ul>
                    <li><b>Enable</b>: Enables all features for the user (locks, autoscaling, etc), except for the viewbox</li>
                    <li><b>Viewbox</b>: Enables the viewbox for the user, and allows the view to be controlled</li>
                    <li><b>Control</b>: Allows the user to control enabled users (always enabled for the GM). This will give access to the control buttons (to enable/disable locks, view/edit viewboxes, etc)</li>
                </ul>
                Below the users you'll find the 'Default' user settings. Whenever a new user is created these settings will be applied.
                <BR CLEAR="right" />
            </div>

            <h2 class="lockView_expandable"><img src="modules/LockView/img/icons/right.png" class="lockView_expandableIcon" style="width:15px">Scene Configurator</h2>
            <div class="lockView_collapsed">
                <img src="modules/LockView/img/examples/SceneConfigurator.png" align="right" HSPACE="5" width="450">
                This screen can be accessed from the module settings or from each scene's configuration.<br>
                The Scene Configurator can be used to quickly modify the settings for each scene. The settings are identical to the ones configurable in the 'Scene Settings' (see below).<br>
                Each row in the table represents a scene with its configured settings and can be changed as desired.<br>
                The bottom row is the 'Default' configuration. New scenes will use these settings.<br>
                <br>
                At the right of each row are 3 buttons:
                <ul>
                    <li><b>Copy: </b>Copy this configuration</li>
                    <li><b>Paste: </b>Paste the copied configuration to this scene</li>
                    <li><b>Reset: </b>Reset this scene to the default configuration</li>
                </ul>
                <BR CLEAR="right" />
            </div>
            
            <h2 class="lockView_expandable"><img src="modules/LockView/img/icons/right.png" class="lockView_expandableIcon" style="width:15px">Scene Settings</h2>
            <div class="lockView_collapsed">
                In the scene configuration screen, you'll find a new Lock View section with the following settings:<br>
                <img src="modules/LockView/img/examples/SceneSettings.png" align="right" HSPACE="5" width="450">
                <ul>
                <li><b>Lock Pan: </b>Initial 'Pan Lock' setting</li>
                <li><b>Lock Zoom: </b>Initial 'Zoom Lock' setting</li>
                <li><b>Bounding box: </b>Initial 'Bounding Box' settings</li>
                <li><b>Autoscale: </b>Automatically scales the screen</li>
                <li><b>Rotation: </b>Rotate the canvas</li>
                <li><b>Exclude Sidebar: </b>Exclude the area behind the sidebar from the bounding box or autoscaling. This can be enabled because the sidebar can obscure parts of the map</li>
                <li><b>Blacken Sidebar: </b>Blackens the background of the sidebar to prevent users from seeing outsie of the bounding box or canvas (only works if 'Exclude Sidebar' is enabled)</li>
                <li><b>Collapse Sidebar on Scene Load: </b>Collapses the sidebar when the scene is loaded, mainly useful in combination with 'Hide UI on Sidebar Collapse'</li>
                <li><b>Hide UI Elements on Sidebar Collapse: </b>Hides selected UI elements (such as the macro hotbar, scene navigation, etc) when the sidebar is lockView_collapsed, great for landing pages or 
                    splash screens. You can configure which elements to hide by pressing the 'cog' button next to the checkbox. By default all elements except for the sidebar are enabled.
                    The 'Ctrl+u' hotkey can hide/unhide the elements in case they need to be accessed</li>
                <li><b>Force Initial View: </b>Forces the view to the 'Initial View Position' after loading the scene. Only works if 'Autoscale' is set to 'Off' or 'Physical Gridsize'</li>
                <li><b>Configure Initial View Position button: </b>The button is located to the right of the 'Force Initial View' checkbox. Pressing it opens the 'Configure Initial View Position dialog screen (see below)</li>
                <li><b>Scene Configurator: </b>Opens the scene configurator, where you can configure Lock View for each scene (see 'Scene Configurator' section above)</li>
                </ul>
                Autoscale can be set to the following options:<br>
                <ul>
                <li><b>Off: </b>Autoscale disabled</li>
                <li><b>Horizontal Fit: </b>Automatically scales the scene to fit the browser window. Horizontal fit, so it may cut off vertical parts of the scene</li>
                <li><b>Vertical Fit: </b>Automatically scales the scene to fit the browser window. Vertical fit, so it may cut off horizontal parts of the scene</li>
                <li><b>Automatic Fit (inside): </b>Automatically chooses horizontal or vertical fit so no non-image background will ever be seen</li>
                <li><b>Automatic Fit (outside): </b>Automatically chooses horizontal or vertical fit so the full background can be seen, but can show the padding (area outside of the background image)</li>
                <li><b>Physical Gridsize: </b>Scales the scene so the on-screen gridsize corresponds with a real world value (for example 25mm or 1"). The gridsize is determined by setting the 'Screen Width' and 'Gridsize' in the module settings. These settings are local, which means that they can be different for each connected client</li>
                </ul>
                <b>Note 1:</b> The 'Pan Lock', 'Zoom Lock' and 'Bounding Box' settings determine the initial settings. These are applied when a scene is loaded, or after closing the scene configuration screen. After that, you can enable or disable them by pressing the control buttons (see below).<br>
                <b>Note 2:</b> 'Horizontal Fit', 'Vertical Fit', 'Automatic Fit' and 'Physical Gridsize' are applied when a scene is loaded, or after closing the scene configuration screen. After that, the user can zoom and pan around (if Zoom Lock or Pan Lock are disabled)<br>
                <br>
                
                <h3><b>Configure Initial View Position</b></h3>
                <img src="modules/LockView/img/examples/SetInitialViewPosition.png" align="right" HSPACE="5" width="450">
                By pressing the 'Configure Initial View Position' button to the right of the 'Force Initial View' checkbox, a dialog box opens and a red box is drawn on the canvas. 
                This red box corresponds with the 'Initial View Position' as set in the 'Ambience and Atmosphere' section of the 'Scene Configuration Screen'.<br>
                Pressing the 'move' icon at the top left of the red box moves the box around while pressing the 'scale' icon at the right bottom scales the box.
                <br>
                <br>
                In the dialog box, you'll find the following values and buttons:
                <ul>
                    <li><b>Old initial view position</b> - The old initial view position as it is currently set in the scene configuration</li>
                    <li><b>New initial view position</b> - The new initial view position as displayed by the red box. These values are user editable</li>
                    <li><b>Size in grid spaces</b> - The size of the view expressed in grid spaces. These values are user editable</li>
                    <li><b>Set to physical gridsize</b> - Scales the 'new initial view position' to correspond with the physical gridsize as set in the module settings</li>
                    <li><b>Set to player view</b> - By selecting the name of a player that's currently connected, you can set the initial view position to the view of that player by pressing 'Capture View'</li>
                    <li><b>Snap to grid</b> - Snaps the 'new initial view poisition' to the grid. With the dropdown menu you can select which corner of the box should be snapped to the grid</li>
                </ul>
                <b>Note: </b>The displayed red box has the aspect ratio of the your (the GM's) screen. This does not necessary correspond to the aspect ratio of your players' view. The center of the red box
                will correspond with the center of the players' view (it ignores the sidebar).
                <br>
                By pressing the 'Cancel', 'Save', or 'Close' button, you'll return to the scene configuration. Only when the 'Save' button is pressed the initial view position on the scene configuration will be updated.<br>
                Don't forget to save the scene configuration to have the new settings take effect.
            </div>

            <h2 class="lockView_expandable"><img src="modules/LockView/img/icons/right.png" class="lockView_expandableIcon" style="width:15px">Bounding Box</h2>
            <div class="lockView_collapsed">
                <img src="modules/LockView/img/examples/DrawingConfiguration.png" align="right" HSPACE="5" width="400">
                The bounding box function limits how much a user can zoom or pan. It needs to be enabled, either in the scene configuration screen, or using control buttons. This function ensures that they always stay within a defined box.<br>
                To enable the bounding box function on a scene load, you can enable the function in the scene configuration screen. The function can also be enabled on the fly by pressing the control button.<br>
                <br>
                By default this box is the canvas size (size of your background image), so users will not see the background color and padding.<br>
                It is also possible to define a bounding box by drawing a rectangle (control buttons => drawing tools => draw rectangle). After drawing the rectangle, you can edit it (double clicking the rectangle) to set the rectangle as a bounding box. This can be done in the Lock View tab, where you have the following options:
                <ul>
                <li><b>Disabled:</b> The rectangle is not used as a bounding box</li>
                <li><b>Owned Tokens:</b> Use the rectangle as bounding box if a token that's owned by the user is within the rectangle. You can set multiple rectangles to 'Owned Tokens'. Moving a token from one 'Owned Tokens' rectangle to another forces the view to the new rectangle. If you have multiple owned tokens in different 'Owned Tokens' rectangles, the bounding box will extend to fit all of these rectangles</li>
                <li><b>Always:</b> The rectangle is always used as bounding box, also if no tokens are within the rectangle. This overrides all other rectangles. Only one rectangle should be set to 'Always'. If more rectangles are set to 'Always', only one is chosen</li>
                </ul>
            </div>
        </div>
        
        <h1 class="lockView_expandable"><img src="modules/LockView/img/icons/right.png" class="lockView_expandableIcon" style="width:20px">Controls</h1>
        <div class="lockView_collapsed">
            <h2 class="lockView_expandable"><img src="modules/LockView/img/icons/right.png" class="lockView_expandableIcon" style="width:15px"> Control Buttons</h2>
            <div class="lockView_collapsed">
                <img src="modules/LockView/img/examples/ControlButtons.png" align="right" HSPACE="5" width="50">
                On the left of the screen, there are new control buttons for the GM that display and toggle the current setting on the scene.<br>
                From the top to the bottom:<br>
                <ul>
                <li><b>Set View</b> - Creates a dialog box with options to set the view, see below</li>
                <li><b>Pan Lock</b> - Shows/switches the current state of 'Pan Lock'. If on, panning is disabled</li>
                <li><b>Zoom Lock</b> - Shows/switches the current state of 'Zoom Lock'. If on, zooming is disabled</li>
                <li><b>Bounding Box</b> - Shows/switches the current state of 'Bounding Box'. If on, zoom and pan are limited to the bounding box</li>
                <li><b>Viewbox</b> - Draws a square on the canvas that shows what enabled users can see. The color of the square corresponds with the 'Player Color'</li>
                <li><b>Edit Viewbox</b> - Allows the GM to edit a viewbox, and the users' view. Right-click dragging drags a viewbox and pans the viewbox's user sceen, the scrollwheel increases or decreases the size of the viewbox and zooms the screen the user in or out. Additionally, two icons appear next to each viewbox which can be used to zoom or pan the view of the user.</li>
                </ul>
        
                <BR CLEAR="right" />
        
                <h3 style="width:100%">Set View Dialog</h3>
                After clicking the 'Set View' control button, a dialog box appears that gives multiple options to control the view of users. There's 3 dropdown menu's, and 3 number boxes<br>
                <b>Top dropdown menu (X & Y movement)</b><br>
                <ul>
                <li><b>Reset to initial view: </b>Resets the view to the initial view position, as set in the scene configuration screen</li>
                <li><b>Horizontal fit: </b>Scale and move the view so the scene fits horizontally</li>
                <img src="modules/LockView/img/examples/SetViewDialog.png" align="right" HSPACE="5" width="300">
                <li><b>Vertical fit: </b>Scale and move the view so the scene fits vertically</li>
                <li><b>Automatic Fit (inside): </b>Automatically chooses horizontal or vertical fit so no non-image background will ever be seen</li>
                <li><b>Automatic Fit (outside): </b>Automatically chooses horizontal or vertical fit so the full background can be seen, but can show the padding (area outside of the background image)</li>
                <li><b>Move grid spaces: </b>Moves the view in grid-units, relative to the current view. So setting X to 1 will move the view 1 gridspace to the right</li>
                <li><b>Move to coordinates: </b>Moves the view to the absolute coordinates as set in the number boxes</li>
                </ul>
        
                <b>Middle dropdown menu (Zooming)</b><br>
                <ul>
                <li><b>Ignore scale: </b>No zooming will occur</li>
                <li><b>Set scale: </b>Zooms to the scale size set in the 'Scale' box</li>
                <li><b>Reset scale: </b>Resets the zoom to the initial zoom factor, as set in the scene configuration screen</li>
                <li><b>Physical gridsize: </b>Automatically scales the gridsize to make it correspond to a physical gridsize (in mm or inch), as set in the module settings </li>
                </ul>

                <b>Bottom dropdown menu (Rotation)</b><br>
                Rotate the canvas as set in the dropdown menu.
            </div>
            
            <h2 class="lockView_expandable"><img src="modules/LockView/img/icons/right.png" class="lockView_expandableIcon" style="width:15px">Viewbox</h2>
            <div class="lockView_collapsed">
                The viewbox is a function that allows the GM so see what users can see.<br>
                If enabled (enable for the user in the User Configuration screen in the module settings, and enable the 'Viewbox' control button), 
                a rectangle is drawn that corresponds with the view of the user. The color of the rectangle is the user color, and above the rectangle you can find the user name.<br>
                <br>
                It is possible for the GM to control the view of the users by enabling the 'Edit Viewbox' control button.<br>
                If enabled, the GM can either control the view of all enabled users: pan by left-click dragging and zoom by using the scroll wheel.<br>
                Or control the view of individual users by dragging the icons next to each viewbox that appear when the 'Edit Viewbox' control button is pressed: Drag the upper-left icon to pan, drag the lower-right icon to zoom.<br>
            
                <img src="modules/LockView/img/examples/ViewBox.png" align="center" HSPACE="5" VSPACE="5">
            </div>
        </div>
        
        <h1 class="lockView_expandable"><img src="modules/LockView/img/icons/right.png" class="lockView_expandableIcon" style="width:20px">Feedback & Credits</h1>
        <div class="lockView_collapsed">
            If you have any suggestions or bugs to report, feel free to contact me on Discord (Cris#6864), or send me an email: cdeenen@outlook.com.<br>
            <br>
            <b>Author:</b> Cristian Deenen (Cris#6864 on Discord)<br>
            <br>
            If you enjoy using my modules, please consider supporting me on <a href="https://www.patreon.com/materialfoundry">Patreon</a>.
        </div>
    </div>    
</form>