Simple viewer
basicviewport
Console
PMA.UI version: 2.43.3
Viewer example, showing available events.
viewer.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 PMA.UI script & css -->
14 <script src="./pma.ui/pma.ui.js"></script>
15 <link href="./pma.ui/pma.ui.css" type="text/css" rel="stylesheet">
16
17 <!-- Include custom script & css -->
18 <script src="./js/viewer.js"></script>
19 <link href="./css/viewer.css" type="text/css" rel="stylesheet">
20
21 <title>Simple Viewer</title>
22</head>
23
24<body>
25 <!-- The element that will host the viewport -->
26 <div id="viewer"></div>
27</body>
28
29</html>viewer.css
1html,
2body
3{
4 height: 100%;
5 padding: 0px;
6 margin: 0px;
7}
8
9#viewer
10{
11 height: 100vh;
12}
viewer.js
1// Initial declarations
2var serverUrl = "https://host.pathomation.com/pma.core.2/";
3var serverUsername = "PMA_UI_demo";
4var serverPassword = "PMA_UI_demo";
5var imagePath = "Reference/3DHistech/CMU-1.mrxs";
6var viewerElementSelector = "#viewer";
7var caller = "DemoPortal";
8
9jQuery(function () {
10 console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
11
12 // Initialize the viewport
13 new PMA.UI.View.Viewport(
14 // Viewport parameters
15 {
16 caller: caller,
17 element: viewerElementSelector,
18 image: imagePath,
19 serverUrls: [serverUrl],
20 username: serverUsername,
21 password: serverPassword,
22 digitalZoomLevels: 2,
23 },
24 // Success callback function
25 function () {
26 console.log("Success! Viewport initialized successfully.");
27 },
28 // Failure callback function
29 function () {
30 console.log("Error! Viewport failed to initialize properly.");
31 }
32 );
33});