Tutorial: Viewport with full configuration

Viewport with full configuration

    <!-- include PMA.UI script & css -->
    <script src="pma.ui.js" type="text/javascript"></script>
    <link href="pma.ui.css" type="text/css" rel="stylesheet">
    <div id="viewer" style="height: 500px"></div>
    
    <script type="text/javascript">
        console.log("PMA.UI loaded: " + PMA.UI.getVersion());

        // initialize the viewport
        var viewport = new PMA.UI.View.Viewport({
                caller: "PMA.UI demo",
                element: "#viewer",
                image: "Reference/Annotations/3rdParty/visiopharm/PanCK-CD8_08260010C0006S.mrxs",
                serverUrls: ["https://host.pathomation.com/pma.core.2/"],
                username: "PMA_UI_demo",
                password: "PMA_UI_demo",
                keyboardPanFactor: 0.7,
                theme: PMA.UI.View.Themes.Default,
                overview: {
                    collapsed: false
                },
                // the dimensions selector is only displayed for images that have multiple channels / timeframes / z-stacks
                dimensions: {
                    collapsed: false
                },
                // the barcode is only displayed if the image actually contains one
                barcode: {
                    collapsed: false,
                    rotation: 180
                },
                flip: {
                    horizontally: false,
                    vertically: false
                },
                loadingBar: true,
                position: {
                    center: [223161, 193729],
                    zoom: 4,
                    rotation: 0.78
                },
                snapshot: true,
                annotations: {
                    visible: true,
                    labels: true,
                    showMeasurements: false
                },
                digitalZoomLevels: 2,
                scaleLine: true,
                filename: true,
                colorAdjustments: true,
                annotationsLayers: true
            },
            function () {
                console.log("Success!");
            },
            function () {
                console.log("Error! Check the console for details.");
            });
    </script>
Tutorial: Viewport with full configuration

Result:
