Realtime area / Distance measurements
basicslide loadermeasure
Console
PMA.UI version: 2.43.3
An example showing the real time measurements for distance and area
realtime_measurements.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/realtime_measurements.js"></script>
23 <link href="./css/realtime_measurements.css" type="text/css" rel="stylesheet">
24
25 <title>Realtime area / Distance measurements</title>
26</head>
27
28<body>
29 <div class="container-xl">
30 <div class="row">
31 <div class="col-auto annotations">
32 <div class="btn-group-vertical btn-group-md">
33 <div class="btn-group dropright">
34 <button type="button" class="btn btn-light" data-toggle="dropdown" aria-haspopup="true"
35 aria-expanded="false" title="Measure">
36 <i class="fas fa-ruler"></i> Measure
37 </button>
38 <div class="dropdown-menu">
39 <a class="dropdown-item" data-action="measure" data-type="line" href="#">Line</a>
40 <a class="dropdown-item" data-action="measure" data-type="area" href="#">Area</a>
41 <div class="dropdown-divider"></div>
42 <a class="dropdown-item" data-action="measure" data-type="clear" href="#">Clear
43 measurements</a>
44 </div>
45 </div>
46 </div>
47 </div>
48 </div>
49 <div class="row viewer-row">
50 <div class="col">
51 <div id="viewer"></div>
52 </div>
53 </div>
54 </div>
55</body>
56
57</html>realtime_measurements.css
1html,
2body
3{
4 height: 100%;
5 padding: 0px;
6 margin: 0px;
7}
8
9body .pma-ui-viewport-container {
10 height: 100%;
11 width: 100%;
12}
13
14.aligned-text {
15 display: inline-block;
16 text-align: right;
17 width: 70px;
18}
19
20.annotation-helper-icon i,
21.annotation-helper-icon span {
22 display: none;
23}
24
25.annotation-helper-icon.loading i {
26 display: initial;
27}
28
29.annotation-helper-icon.loading span {
30 display: none;
31}
32
33.annotation-helper-icon.saved i,
34.annotation-helper-icon.saved span.badge-danger {
35 display: none;
36}
37
38.annotation-helper-icon.saved span.badge-success {
39 display: initial;
40}
41
42.annotation-helper-icon.error i,
43.annotation-helper-icon.error span.badge-success {
44 display: none;
45}
46
47.annotation-helper-icon.error span.badge-danger {
48 display: block;
49}
50
51.annotations {
52 margin: 0 auto;
53 padding: 0;
54}
55.viewer-row {
56 height: calc(100vh - 38px);
57}
58.color-picker{
59 height: 35px;
60 margin-bottom: 1px;
61 border: none;
62}
realtime_measurements.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 context = null;
9var slideLoader = null;
10var annotationManager = null;
11
12function drawCommands(action, type) {
13 if (action) {
14
15 if (action === "measure") {
16 if (type === "clear") {
17 slideLoader.mainViewport.stopMeasuring();
18 return;
19 }
20
21 slideLoader.mainViewport.startMeasuring(type);
22 }
23 }
24}
25
26jQuery(function () {
27 $("button[data-action][data-type], a[data-action][data-type]").on("click", function (e) {
28 e.preventDefault();
29 drawCommands($(this).data("action"), $(this).data("type"));
30 });
31
32 console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
33
34 // Create a context
35 context = new PMA.UI.Components.Context({ caller: caller });
36
37 // Add an autologin authentication provider
38 new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
39
40 // Create an image loader that will allow us to load images easily
41 slideLoader = new PMA.UI.Components.SlideLoader(context, {
42 element: slideLoaderElementSelector
43 });
44
45 // Load the image with the context
46 slideLoader.load(serverUrl, imagePath);
47});