Syncing viewers
basicslide loadersync
Console
PMA.UI version: 2.43.3
Syncing viewers example.
sync_viewers.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 optional libraries downloaded or from CDN -->
14 <link rel="stylesheet" href="./pma.ui/bootstrap.min.css">
15 <script src="./pma.ui/bootstrap.bundle.min.js"></script>
16
17 <!-- Include PMA.UI script & css -->
18 <script src="./pma.ui/pma.ui.js"></script>
19 <link href="./pma.ui/pma.ui.css" type="text/css" rel="stylesheet">
20
21 <!-- Include custom script & css -->
22 <script src="./js/sync_viewers.js"></script>
23 <link href="./css/sync_viewers.css" type="text/css" rel="stylesheet">
24
25 <title>Simple Slide Loader</title>
26</head>
27
28<body>
29 <div class="container-fluid px-0">
30 <div class="row no-gutters">
31 <div class="col">
32 <div class="btn-group-toggle btn-group-sm d-flex justify-content-center" data-toggle="buttons">
33 <label class="btn btn-light">
34 <input type="checkbox" id="sync-btn" disabled> Toggle Sync
35 </label>
36 </div>
37 </div>
38 </div>
39 <div class="row no-gutters">
40 <div class="col">
41 <!-- The element that will host the first slide loader -->
42 <div id="viewer1"></div>
43 </div>
44 <div class="col">
45 <!-- The element that will host the second slide loader -->
46 <div id="viewer2"></div>
47 </div>
48 </div>
49 </div>
50</body>
51
52</html>sync_viewers.css
1html,
2body
3{
4 height: 100%;
5 padding: 0px;
6 margin: 0px;
7}
8
9#viewer1,
10#viewer2
11{
12 height: calc(100vh - 31px);
13 border: 1px solid gray;
14 box-sizing: border-box;
15}
sync_viewers.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 slideLoaderElementSelector1 = "#viewer1";
7var slideLoaderElementSelector2 = "#viewer2";
8var imagePath1 = "Reference/3DHistech/CMU-1.mrxs";
9var imagePath2 = "Reference/3DHistech/CMU-1.mrxs";
10var slideLoader1 = null;
11var slideLoader2 = null;
12var syncManager = null;
13
14jQuery(function () {
15 console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
16
17 // Create a context
18 var context = new PMA.UI.Components.Context({ caller: caller });
19
20 // Add an autologin authentication provider
21 new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
22
23 // Create an image loader that will allow us to load images easily
24 slideLoader1 = new PMA.UI.Components.SlideLoader(context, {
25 element: slideLoaderElementSelector1,
26 });
27
28 // Create an image loader that will allow us to load images easily
29 slideLoader2 = new PMA.UI.Components.SlideLoader(context, {
30 element: slideLoaderElementSelector2,
31 });
32
33 // Initialize sync manager for both slide loaders
34 syncManager = new PMA.UI.Components.SyncView([slideLoader1, slideLoader2]);
35
36 slideLoader1.load(serverUrl, imagePath1, function () {
37 slideLoader2.load(serverUrl, imagePath2, function () {
38 $("#sync-btn").prop('disabled', false);
39 });
40 });
41
42 $("#sync-btn").on("change", function () {
43 if (syncManager.getStatus()) {
44 syncManager.disableSync();
45 console.log("Syncing is now disabled!");
46 } else {
47 syncManager.enableSync();
48 console.log("Syncing is now enabled!");
49 }
50 });
51});