Snapshot
basicsnapshotslide loader
Console
PMA.UI version: 2.43.3
Snapshot example.
snapshot.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/snapshot.js"></script>
23 <link href="./css/snapshot.css" type="text/css" rel="stylesheet">
24
25 <title>Snapshot</title>
26</head>
27
28<body>
29 <div class="container-fluid">
30 <div class="row">
31 <div class="col-4 py-1 border-right" style="max-height: 100vh; overflow-y: auto">
32 <legend class="text-center">Snapshot options
33 <button type="button" class="btn btn-outline-secondary btn-sm" id="snapshot-btn"
34 title="Click to take snapshot" disabled>
35 <i class="fas fa-camera"></i>
36 </button>
37 </legend>
38 <form>
39 <div class="form-group row">
40 <label for="inputFormat" class="col-6 col-form-label col-form-label-sm">Format</label>
41 <div class="col-6">
42 <select class="form-control form-control-sm" id="inputFormat">
43 <option value="png" selected>png</option>
44 <option value="jpg">jpg</option>
45 <option value="blob">blob</option>
46 </select>
47 </div>
48 </div>
49 <div class="form-group row">
50 <label for="inputTitle" class="col-6 col-form-label col-form-label-sm">Title</label>
51 <div class="col-6">
52 <input type="text" class="form-control form-control-sm" id="inputTitle">
53 </div>
54 </div>
55 <div class="form-group row">
56 <label for="inputTitleLocation" class="col-6 col-form-label col-form-label-sm">Title
57 location</label>
58 <div class="col-6">
59 <select class="form-control form-control-sm" id="inputTitleLocation">
60 <option value="Top" selected>Top</option>
61 <option value="Bottom">Bottom</option>
62 </select>
63 </div>
64 </div>
65 <div class="form-group row">
66 <label for="inputTitleFont" class="col-6 col-form-label col-form-label-sm">Title
67 font</label>
68 <div class="col-6">
69 <input type="text" class="form-control form-control-sm" id="inputTitleFont"
70 placeholder="32px serif">
71 </div>
72 </div>
73 <div class="form-group row">
74 <label for="inputTitleFontColor" class="col-6 col-form-label col-form-label-sm">Title
75 color</label>
76 <div class="col-6">
77 <input type="color" class="form-control form-control-sm" id="inputTitleFontColor"
78 value="#000000">
79 </div>
80 </div>
81 <div class="form-group row">
82 <label for="inputScalebar" class="col-6 col-form-label col-form-label-sm">Scalebar</label>
83 <div class="col-6">
84 <select class="form-control form-control-sm" id="inputScalebar">
85 <option value="true" selected>True</option>
86 <option value="false">False</option>
87 </select>
88 </div>
89 </div>
90 <div class="form-group row">
91 <label for="inputScalebarLocation" class="col-6 col-form-label col-form-label-sm">Scalebar
92 location</label>
93 <div class="col-6">
94 <select class="form-control form-control-sm" id="inputScalebarLocation">
95 <option value="TopLeft" selected>TopLeft</option>
96 <option value="TopRight">TopRight</option>
97 <option value="BottomLeft">BottomLeft</option>
98 <option value="BottomRight">BottomRight</option>
99 </select>
100 </div>
101 </div>
102 <div class="form-group row">
103 <label for="inputScalebarFont" class="col-6 col-form-label col-form-label-sm">Scalebar
104 font</label>
105 <div class="col-6">
106 <input type="text" class="form-control form-control-sm" id="inputScalebarFont"
107 placeholder="24px serif">
108 </div>
109 </div>
110 <div class="form-group row">
111 <label for="inputScalebarFontColor" class="col-6 col-form-label col-form-label-sm">Scalebar
112 color</label>
113 <div class="col-6">
114 <input type="color" class="form-control form-control-sm" id="inputScalebarFontColor"
115 value="#ff0000">
116 </div>
117 </div>
118 <div class="form-group row">
119 <label for="inputBarcode" class="col-6 col-form-label col-form-label-sm">Barcode</label>
120 <div class="col-6">
121 <select class="form-control form-control-sm" id="inputBarcode">
122 <option value="true">True</option>
123 <option value="false" selected>False</option>
124 </select>
125 </div>
126 </div>
127 <div class="form-group row">
128 <label for="inputOverview" class="col-6 col-form-label col-form-label-sm">Overview</label>
129 <div class="col-6">
130 <select class="form-control form-control-sm" id="inputOverview">
131 <option value="true">True</option>
132 <option value="false" selected>False</option>
133 </select>
134 </div>
135 </div>
136 <div class="form-group row">
137 <label for="inputDPI" class="col-6 col-form-label col-form-label-sm">DPI</label>
138 <div class="col-6">
139 <input type="number" min="0" step="1" class="form-control form-control-sm" id="inputDPI">
140 </div>
141 </div>
142 <div class="form-group row">
143 <label for="inputFilename" class="col-6 col-form-label col-form-label-sm">Filename</label>
144 <div class="col-6">
145 <input type="text" class="form-control form-control-sm" id="inputFilename"
146 placeholder="snapshot">
147 </div>
148 </div>
149 <div class="form-group row">
150 <label for="inputAction" class="col-6 col-form-label col-form-label-sm">Action</label>
151 <div class="col-6">
152 <select class="form-control form-control-sm" id="inputAction">
153 <option value="download" selected>download</option>
154 <option value="open-tab">open-tab</option>
155 </select>
156 </div>
157 </div>
158 </form>
159 </div>
160 <div class="col-8">
161 <!-- The element that will host the viewport -->
162 <div id="viewer"></div>
163 </div>
164 </div>
165 </div>
166</body>
167
168</html>snapshot.css
1html,
2body
3{
4 height: 100%;
5 padding: 0px;
6 margin: 0px;
7}
8
9#viewer
10{
11 height: 100vh;
12}
snapshot.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 = "#viewer";
7var imagePath = "Reference/3DHistech/CMU-1.mrxs";
8var slideLoader = null;
9
10jQuery(function () {
11 console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
12
13 // Create a context
14 var context = new PMA.UI.Components.Context({ caller: caller });
15
16 // Add an autologin authentication provider
17 new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
18
19 // Create an image loader that will allow us to load images easily
20 slideLoader = new PMA.UI.Components.SlideLoader(context, {
21 element: slideLoaderElementSelector,
22 annotations: {},
23 filename: false,
24 });
25
26 // Listen for the slide loaded event by the slide loader
27 slideLoader.listen(PMA.UI.Components.Events.SlideLoaded, function (args) {
28 console.log("Slide loaded");
29 console.log(args);
30 $("#snapshot-btn").attr("disabled", false);
31 });
32
33 // Listen for the slide info error event by slide loader
34 slideLoader.listen(PMA.UI.Components.Events.SlideInfoError, function (args) {
35 console.log("Slide info error");
36 console.log(args);
37 });
38
39 // Load the image with the context
40 slideLoader.load(serverUrl, imagePath);
41
42 $("#snapshot-btn").on("click", function () {
43 var format = $("#inputFormat").val();
44 var title = $("#inputTitle").val();
45 var titleLocation = $("#inputTitleLocation").val();
46 var titleFont = $("#inputTitleFont").val();
47 var titleFontColor = $("#inputTitleFontColor").val();
48 var showScalebar = $("#inputScalebar").val() === "true";
49 var scalebarLocation = $("#inputScalebarLocation").val();
50 var scalebarFont = $("#inputScalebarFont").val();
51 var scalebarFontColor = $("#inputScalebarFontColor").val();
52 var showBarcode = $("#inputBarcode").val() === "true";
53 var showOverview = $("#inputOverview").val() === "true";
54 var dpi = parseInt($("#inputDPI").val()) || "";
55 var filename = $("#inputFilename").val();
56 var action = $("#inputAction").val();
57
58 var snapshotOptions = Object.assign({},
59 title && { title: title },
60 titleLocation && { titleLocation: titleLocation },
61 titleFont && { titleFont: titleFont },
62 titleFontColor && { titleFontColor: titleFontColor },
63 showScalebar !== true && { scalebar: showScalebar },
64 scalebarLocation && { scalebarLocation: scalebarLocation },
65 scalebarFont && { scalebarFont: scalebarFont },
66 scalebarFontColor && { scalebarFontColor: scalebarFontColor },
67 showBarcode && { barcode: showBarcode },
68 showOverview && { overview: showOverview },
69 dpi && { dpi: dpi },
70 filename && { filename: filename },
71 action && { action: action },
72 );
73
74 console.log("Snapshot requested as " + format, snapshotOptions);
75
76 // Get snapshot with parameters
77 slideLoader.mainViewport.getSnapshot(format, snapshotOptions)
78 .then(function (data) {
79 console.log(data);
80 })
81 });
82});