Tutorial: Tree, Gallery & Image Loader

Tree, Gallery & Image Loader


Note how the context component is shared among the components and, via the prompt login provider, handles authentication so that the rest of the components do not have to manage sessionIDs themselves.
    <!-- include PMA.UI script & css -->
    <script src="view/pma.ui.view.min.js" type="text/javascript"></script>
    <link href="view/pma.ui.view.min.css" type="text/css" rel="stylesheet">

    <!-- include PMA.UI.components script & css -->
    <script src="components/pma.ui.components.all.min.js" type="text/javascript"></script>
    <link href="components/pma.ui.components.all.min.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
            channels: {
                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: