Annotations copying
advancedslide loaderannotations
Console
PMA.UI version: 2.43.3
Example showing how to get the annotations loaded on one viewport and copying them to another one.
annotations_copying.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/annotations_copying.js"></script>
23 <link href="./css/annotations_copying.css" type="text/css" rel="stylesheet">
24
25 <title>Annotations copying</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 <button type="button" class="btn btn-light" id="copy-btn" disabled>Copy selected annotations</button>
34 <button type="button" class="btn btn-light" id="remove-btn" disabled>Remove copied annotations</button>
35 </div>
36 </div>
37 </div>
38 <div class="row no-gutters">
39 <div class="col">
40 <!-- The element that will host the first slide loader -->
41 <div id="viewer1"></div>
42 </div>
43 <div class="col">
44 <!-- The element that will host the second slide loader -->
45 <div id="viewer2"></div>
46 </div>
47 </div>
48 </div>
49</body>
50
51</html>annotations_copying.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}
annotations_copying.js
1// Initial declarations
2var serverUrl = "https://host.pathomation.com/pma.core.3/";
3var serverUsername = "PMA_UI_demo";
4var serverPassword = "PMA_UI_demo";
5var caller = "DemoPortal";
6var slideLoaderElementSelector1 = "#viewer1";
7var slideLoaderElementSelector2 = "#viewer2";
8var imagePath1 = "Reference/Annotations/CMU-1/CMU-1.svs";
9var imagePath2 = "Read_only_annotations/CMU-1/CMU-1.svs";
10var slideLoader1 = null;
11var slideLoader2 = null;
12var annotationManager1 = null;
13var annotationManager2 = null;
14
15jQuery(function () {
16 console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
17
18 // Create a context
19 var context = new PMA.UI.Components.Context({ caller: caller });
20
21 // Add an autologin authentication provider
22 new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
23
24 // Create an image loader that will allow us to load images easily
25 slideLoader1 = new PMA.UI.Components.SlideLoader(context, {
26 element: slideLoaderElementSelector1,
27 annotations: {},
28 });
29
30 // Create an image loader that will allow us to load images easily
31 slideLoader2 = new PMA.UI.Components.SlideLoader(context, {
32 element: slideLoaderElementSelector2,
33 annotations: {},
34 });
35
36 slideLoader1.load(serverUrl, imagePath1, function () {
37 annotationManager1 = new PMA.UI.Components.Annotations({
38 context: context,
39 element: null,
40 viewport: slideLoader1.mainViewport,
41 serverUrl: serverUrl,
42 path: imagePath1,
43 enabled: true
44 });
45
46 slideLoader2.load(serverUrl, imagePath2, function () {
47 annotationManager2 = new PMA.UI.Components.Annotations({
48 context: context,
49 element: null,
50 viewport: slideLoader2.mainViewport,
51 serverUrl: serverUrl,
52 path: imagePath2,
53 enabled: true
54 });
55
56 $("#copy-btn").prop('disabled', false);
57 $("#remove-btn").prop('disabled', false);
58 });
59 });
60
61 $("#copy-btn").on("click", function () {
62 // Get selected annotations from first slide
63 var annots = annotationManager1.getSelection().map(x => x.metaData);
64
65 // Copy selected annotations to second slide
66 annotationManager2.replaceAnnotations(annots);
67
68 console.log(`Copied ${annots.length} annotations`);
69 });
70
71 $("#remove-btn").on("click", function () {
72 // Remove annotations from second slide
73 annotationManager2.replaceAnnotations([]);
74
75 console.log("Removed copied annotations");
76 });
77});