Tissue Focus
intermediateviewportzoomfocus
Console
PMA.UI version: 2.43.3
Tissue focus tool
tissue_focus.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 <meta name="google" content="notranslate">
9
10 <!-- Include PMA.UI required libraries downloaded or from CDN -->
11 <script src="./pma.ui/jquery-3.1.0.js"></script>
12 <link href="./pma.ui/font-awesome.min.css" type="text/css" rel="stylesheet">
13
14 <!-- Include optional libraries downloaded or from CDN -->
15 <link rel="stylesheet" href="./pma.ui/bootstrap.min.css">
16 <script src="./pma.ui/bootstrap.bundle.min.js"></script>
17
18 <!-- Include PMA.UI script & css -->
19 <script src="./pma.ui/pma.ui.js"></script>
20 <link href="./pma.ui/pma.ui.css" type="text/css" rel="stylesheet">
21
22 <!-- Include custom script & css -->
23 <script src="./js/tissue_focus.js"></script>
24 <link href="./css/tissue_focus.css" type="text/css" rel="stylesheet">
25
26 <title>Tissue Focusing</title>
27
28</head>
29
30<body>
31 <div id="display-tools" class="slide">
32 <div class="btn-group btn-group-sm">
33 <button type="button" id="focus-button" class="btn btn-primary" disabled data-type="tissueFocus" title="Tissue focusing">
34 <span class="caret">Tissue Focus <i class="fa fa-eye"></i></span>
35 </button>
36 </div>
37 </div>
38 <div id="viewer"></div>
39</body>
40
41</html>tissue_focus.css
1html,
2body {
3 height: 100%;
4 padding: 0px;
5 margin: 0px;
6 overflow: hidden;
7}
8
9body .pma-ui-viewport-container {
10 height: calc(100% - 64px);
11 width: 100%;
12}
13
14button {
15 border: 1px solid lightgrey !important;
16}
17
18.btn-group {
19 padding: 0 5px;
20}
21
22#viewer {
23 border: 2px solid rgba(0, 60, 136, .5);
24}
25
26#display-tools {
27 padding: 15px 5px;
28 text-align: center;
29}
30
31#focus-button {
32 width: 120px;
33}
tissue_focus.js
1var serverUrl = "https://host.pathomation.com/pma.core.3/";
2var imageUrl = "wsiformats/brightfield/3DHistech/CMU-1.mrxs";
3var imageBaseUrl = "https://host.pathomation.com/pma.view/Content/themes/base/Images/";
4var usr = "PMA_UI_demo";
5var pwd = "PMA_UI_demo";
6
7console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
8
9$(document).ready(function () {
10 window.context = new PMA.UI.Components.Context({
11 caller: "sdk demo"
12 });
13
14 new PMA.UI.Authentication.AutoLogin(window.context, [{
15 serverUrl: serverUrl,
16 username: usr,
17 password: pwd
18 },]);
19
20 window.zuim = new PMA.UI.Components.SlideLoader(window.context, {
21 element: "#viewer",
22 overview: true,
23 channels: {
24 collapsed: true
25 },
26 dimensions: true,
27 filename: false,
28 rotationControl: true,
29 barcode: true,
30 scaleLine: true,
31 annotationsLayers: false,
32 colorAdjustments: false,
33 digitalZoomLevels: 2,
34 loadingBar: true,
35 highQuality: true,
36 barcode: {
37 collapsed: true
38 },
39 snapshot: false,
40 // theme: "modern",
41 magnifier: false,
42 flip: {
43 horizontally: false,
44 vertically: false,
45 }
46 });
47
48 zuim.listen(PMA.UI.Components.Events.SlideLoaded, function (args) {
49 $("button").removeAttr("disabled");
50 });
51
52 zuim.load(serverUrl, imageUrl);
53
54 $("button[data-type]").click(function (e) {
55 e.preventDefault();
56 focusToTissue($(this).data("type"));
57 });
58});
59
60function focusToTissue(type) {
61 if (!type) {
62 return;
63 }
64 if (type == "tissueFocus") {
65 zuim.mainViewport.focusToTissueRegion();
66 }
67}