Simple slide loader
basicslide loader
Console
PMA.UI version: 2.43.3
Slide will load
- ▶{serverUrl: "https://host.pathomation.com/pma.core.2/", path: "Reference/3DHistech/CMU-1.mrxs", cancel: false}
Slide loader example, showing available events.
slideLoader.html
1<!doctype >
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/slideLoader.js"></script>
19 <link href="./css/slideLoader.css" type="text/css" rel="stylesheet">
20
21 <title>Simple Slide Loader</title>
22</head>
23
24<body>
25 <!-- The element that will host the slide loader -->
26 <div id="slideLoader"></div>
27</body>
28
29</html>slideLoader.css
1html,
2body
3{
4 height: 100%;
5 padding: 0px;
6 margin: 0px;
7}
8
9#slideLoader
10{
11 height: 100vh;
12}
slideLoader.js
1// Initial declarations
2var serverUrl = "https://host.pathomation.com/pma.core.2/";
3var serverUsername = "PMA_UI_demo";
4var serverPassword = "PMA_UI_demo";
5var caller = "DemoPortal";
6var slideLoaderElementSelector = "#slideLoader";
7var imagePath = "Reference/3DHistech/CMU-1.mrxs";
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 an image loader that will allow us to load images easily
19 var slideLoader = new PMA.UI.Components.SlideLoader(context, {
20 element: slideLoaderElementSelector,
21 });
22
23 // Listen for the slide loaded event by the slide loader
24 slideLoader.listen(PMA.UI.Components.Events.SlideLoaded, function (args) {
25 console.log("Slide loaded");
26 console.log(args);
27 });
28
29 // Listen for the before slide load event by the slide loader
30 slideLoader.listen(PMA.UI.Components.Events.BeforeSlideLoad, function (args) {
31 console.log("Slide will load");
32 console.log(args);
33 });
34
35 // Listen for the slide info error event by slide loader
36 slideLoader.listen(PMA.UI.Components.Events.SlideInfoError, function (args) {
37 console.log("Slide info error");
38 console.log(args);
39 });
40
41 // Listen for the before data dropped event by the slide loader
42 slideLoader.listen(PMA.UI.Components.Events.BeforeDrop, function (args) {
43 console.log("Data will be dropped in slide loader");
44 console.log(args);
45 });
46
47 // Load the image with the context
48 slideLoader.load(serverUrl, imagePath);
49});