Tutorial: Tree, Gallery & Image Loader

    <!-- include PMA.UI script & css -->
    <script src="pma.ui.js" type="text/javascript"></script>
    <link href="pma.ui.css" type="text/css" rel="stylesheet">

    <h4>Result:</h4>

    <div style="height: 620px">
    
        <!-- the element that will host the tree -->
        <div id="tree" style="float: left; height: 600px; width: 20%; overflow: auto;"></div>
        <div style="float: left; height: 200px; width: 80%">

            <!-- the element that will host the gallery -->
            <div id="gallery"></div>
        </div>

        <!-- the element that will host the viewport -->
        <div id="viewer" style="float: left; height: 400px; width: 80%"></div>
    </div>

    <script type="text/javascript">
        console.log("PMA.UI loaded: " + PMA.UI.getVersion());

        // create a context
        var context = new PMA.UI.Components.Context({ caller: "PMA.UI demo" });

        // add a prompt authentication provider
        new PMA.UI.Authentication.PromptLogin(context);

        // create an image loader component that will allow us to load images easily
        var slideLoader = new PMA.UI.Components.SlideLoader(context, {
            element: "#viewer",
            theme: PMA.UI.View.Themes.Default,
            overview: {
                collapsed: true
            },
            // the channel selector is only displayed for images that have multiple channels
            dimensions: {
                collapsed: false
            },
            // the barcode is only displayed if the image actually contains one
            barcode: {
                collapsed: true,
                rotation: 180
            },
            loadingBar: true,
            snapshot: true,
            annotations: {
                visible: true,
                labels: true,
                imageBaseUrl: "https://host.pathomation.com/pma.view/Content/themes/base/Images/",
                imageScale: 0.5
            },
            digitalZoomLevels: 2,
            scaleLine: true,
            filename: true
        });

        // create a tree view that will display the contents of PMA.core servers
        var tree = new PMA.UI.Components.Tree(context, {
            servers: [
                {
                    name: "PMA.core v1.x",
                    url: "https://host.pathomation.com/pma.core/",
                    showFiles: true
                },
                {
                    name: "PMA.core v2.x",
                    url: "https://host.pathomation.com/pma.core.2/",
                    showFiles: true
                }
            ],
            element: "#tree",
            preview: true
        });

        // create a gallery that will display the contents of a directory
        var gallery = new PMA.UI.Components.Gallery(context, {
            element: "#gallery",
            thumbnailWidth: 200,
            thumbnailHeight: 140,
            mode: "horizontal",
            showFileName: true
        });

        // listen for the directory selected event by the tree view
        tree.listen(PMA.UI.Components.Events.DirectorySelected, function (args) {
            // load the contents of the selected directory
            gallery.loadDirectory(args.serverUrl, args.path);
        });

        // listen for the slide selected event by the tree view
        tree.listen(PMA.UI.Components.Events.SlideSelected, function (args) {
            // load the image
            slideLoader.load(args.serverUrl, args.path);
        });

        // listen for the slide selected event to load the selected image when clicked
        gallery.listen(PMA.UI.Components.Events.SlideSelected, function (args) {
            // load the image with the context
            slideLoader.load(args.serverUrl, args.path);
        });

    </script>

Result: