# 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>

#### Result: