Overlay grid
basicviewportgrid
Console
PMA.UI version: 2.43.3
Slide loader example, showing grid functionality.
slideLoader_grid.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/bootstrap5.min.css">
15 <script src="./pma.ui/bootstrap5.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/slideLoader_grid.js"></script>
23 <link href="./css/slideLoader_grid.css" type="text/css" rel="stylesheet">
24
25 <title>Simple Slide Loader</title>
26</head>
27
28<body>
29 <div class="container-fluid">
30 <div class="row">
31 <div class="col-4 py-1 border-right">
32 <legend class="text-center">Overlay grid options</legend>
33 <form>
34 <div class="row mb-3">
35 <label for="gridCellWidth" class="col-sm-6 col-form-label">Grid cell width (μm)</label>
36 <div class="col-sm-6">
37 <input type="number" class="form-control" id="gridCellWidth" min="1">
38 </div>
39 </div>
40 <div class="row mb-3">
41 <label for="gridCellHeight" class="col-sm-6 col-form-label">Grid cell height (μm)</label>
42 <div class="col-sm-6">
43 <input type="number" class="form-control" id="gridCellHeight" min="1">
44 </div>
45 </div>
46 <div class="row mb-3">
47 <label for="gridColor" class="col-6 col-form-label">Grid
48 color</label>
49 <div class="col-6">
50 <input type="color" class="form-control" id="gridColor" value="#c0c0c0">
51 </div>
52 </div>
53 <div class="row mb-3">
54 <legend class="col-form-label col-sm-6 pt-0">Show overlay grid</legend>
55 <div class="col-sm-6">
56 <div class="form-check form-switch">
57 <input class="form-check-input" type="checkbox" role="switch" id="showGrid">
58 </div>
59 </div>
60 </div>
61 </form>
62 </div>
63 <div class="col-8">
64 <!-- The element that will host the viewport -->
65 <div id="slideLoader"></div>
66 </div>
67 </div>
68 </div>
69</body>
70
71</html>slideLoader_grid.css
1html,
2body
3{
4 height: 100%;
5 padding: 0px;
6 margin: 0px;
7}
8
9#slideLoader
10{
11 height: 100vh;
12}
slideLoader_grid.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 = "#slideLoader";
7var imagePath = "Reference/3DHistech/CMU-1.mrxs";
8var gridCellWidth = 1000; // in micrometers
9var gridCellHeight = 1000; // in micrometers
10var gridColor = "#c0c0c0";
11var showGrid = true;
12var slideLoader;
13
14jQuery(function () {
15 $("#gridCellWidth").val(gridCellWidth);
16 $("#gridCellHeight").val(gridCellHeight);
17 $("#gridColor").val(gridColor);
18 $('#showGrid').prop("checked", showGrid);
19
20 console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
21
22 // Create a context
23 var context = new PMA.UI.Components.Context({ caller: caller });
24
25 // Add an autologin authentication provider
26 new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
27
28 function updateGrid() {
29 if (!showGrid && slideLoader) {
30 slideLoader.mainViewport.hideGrid();
31 return;
32 }
33
34 if (showGrid && slideLoader) {
35 slideLoader.mainViewport.showGrid([gridCellWidth, gridCellHeight], gridColor);
36 }
37 }
38
39 // Create an image loader that will allow us to load images easily
40 slideLoader = new PMA.UI.Components.SlideLoader(context, {
41 element: slideLoaderElementSelector,
42 grid: {
43 size: [gridCellWidth, gridCellHeight],
44 color: gridColor
45 },
46 });
47
48 $("#gridCellWidth").on("change", function (e) {
49 gridCellWidth = parseInt(e.target.value);
50 updateGrid();
51
52 });
53
54 $("#gridCellHeight").on("change", function (e) {
55 gridCellHeight = parseInt(e.target.value);
56 updateGrid();
57 });
58
59 $("#gridColor").on("change", function (e) {
60 gridColor = e.target.value;
61 updateGrid();
62 });
63
64 $('#showGrid').on('change', function () {
65 if ($(this).prop("checked") === true) {
66 showGrid = true;
67 } else {
68 showGrid = false;
69 }
70 updateGrid();
71 });
72
73 // Load the image with the context
74 slideLoader.load(serverUrl, imagePath);
75});