Treeview & slide loader

basicslide loadertreeview

Console

PMA.UI version: 2.43.3

Tree view & slide loader example.

tree_slide.html

1<!doctype html>
2<html lang="en">
3
4<head>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=10">
7    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
8
9    <!-- Include PMA.UI required libraries downloaded or from CDN -->
10    <script src="./pma.ui/jquery-3.1.0.js"></script>
11    <link href="./pma.ui/font-awesome.min.css" type="text/css" rel="stylesheet">
12
13    <!-- Include PMA.UI script & css -->
14    <script src="./pma.ui/pma.ui.js"></script>
15    <link href="./pma.ui/pma.ui.css" type="text/css" rel="stylesheet">
16
17    <!-- Include custom script & css -->
18    <script src="./js/tree_slide.js"></script>
19    <link href="./css/tree_slide.css" type="text/css" rel="stylesheet">
20
21    <title>Tree view & slide loader</title>
22</head>
23
24<body>
25    <!-- The element that will host the treeview -->
26    <div id="treeview"></div>
27
28    <!-- The element that will host the slide loader -->
29    <div id="viewer"></div>
30</body>
31
32</html>

tree_slide.css

1html,
2body
3{
4    height: 100%;
5    padding: 0px;
6    margin: 0px;
7}
8
9#treeview
10{
11    height: calc(100vh - 6px);
12    width: 33%;
13    float: left;
14}
15
16#viewer
17{
18    height: 100vh;
19    width: 66%;
20    float: left;
21}

tree_slide.js

1// Initial declarations
2var serverUrl = "https://host.pathomation.com/pma.core.2/";
3var serverUsername = "PMA_UI_demo";
4var serverPassword = "PMA_UI_demo";
5var treeviewElementSelector = "#treeview";
6var slideLoaderElementSelector = "#viewer";
7var caller = "DemoPortal";
8
9jQuery(function () {
10    console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
11
12    // Create a context
13    var context = new PMA.UI.Components.Context({ caller: caller });
14
15    // Add an autologin authentication provider
16    new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
17
18    // Create a tree view that will display the contents of PMA.core servers
19    var tree = new PMA.UI.Components.Tree(context, {
20        servers: [
21            {
22                name: "PMA.core v2.x",
23                url: serverUrl,
24            }
25        ],
26        element: treeviewElementSelector,
27    });
28
29    // Create an image loader that will allow us to load images easily
30    var slideLoader = new PMA.UI.Components.SlideLoader(context, {
31        element: slideLoaderElementSelector,
32    });
33
34    // Listen for the slide selected event by the tree view
35    tree.listen(PMA.UI.Components.Events.SlideSelected, function (args) {
36        console.log("Slide selected");
37        console.log(args);
38        // Load the image selected from treeview
39        slideLoader.load(serverUrl, args.path);
40    });
41
42    // Listen for the slide loaded event by the slide loader
43    slideLoader.listen(PMA.UI.Components.Events.SlideLoaded, function (args) {
44        console.log("Slide loaded");
45        console.log(args);
46    });
47
48    // Listen for the slide info error event by slide loader
49    slideLoader.listen(PMA.UI.Components.Events.SlideInfoError, function (args) {
50        console.log("Slide info error");
51        console.log(args);
52    });
53});