Viewport filename options
basicviewportfilename
Console
PMA.UI version: 2.43.3
Filename options example
viewport_filename.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/viewport_filename.js"></script>
23 <link href="./css/viewport_filename.css" type="text/css" rel="stylesheet">
24
25 <title>Viewport filename</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 <form>
33 <fieldset id="controls">
34 <div class="form-group row">
35 <label for="inputFilename" class="col-4 col-form-label col-form-label-sm">Filename
36 Options</label>
37 <div class="col-8">
38 <div class="input-group mt-2">
39 <div class="input-group-prepend">
40 <div class="input-group-text">
41 <input checked name="filenameRadios" type="radio" id="inputHidden"
42 autocomplete="off" value="hidden">
43 </div>
44 </div>
45 <input type="text" class="form-control" id="inputFullPathText" placeholder="Hidden"
46 disabled>
47 </div>
48 <div class="input-group mt-2">
49 <div class="input-group-prepend">
50 <div class="input-group-text">
51 <input name="filenameRadios" type="radio" id="inputFullPath"
52 autocomplete="off" value="fullpath">
53 </div>
54 </div>
55 <input type="text" class="form-control" id="inputFullPathText"
56 placeholder="Full path" disabled>
57 </div>
58 <div class="input-group mt-2">
59 <div class="input-group-prepend">
60 <div class="input-group-text">
61 <input name="filenameRadios" type="radio" id="inputFileName"
62 autocomplete="off" value="filename">
63 </div>
64 </div>
65 <input type="text" class="form-control" id="inputFileNameText"
66 placeholder="Filename" disabled>
67 </div>
68 <div class="input-group mt-2">
69 <div class="input-group-prepend">
70 <div class="input-group-text">
71 <input name="filenameRadios" type="radio" id="inputCustom" value="custom"
72 autocomplete="off">
73 </div>
74 </div>
75 <input type="text" class="form-control" id="inputCustomText" value="Custom text"
76 autocomplete="off">
77 </div>
78 </div>
79 </div>
80 <hr />
81 <div class="form-group row">
82 <div class="col">
83 <button id="reset-btn" type="button" class="btn btn-light btn-sm"><i
84 class="fas fa-history"></i> Reset values</button>
85 </div>
86 </div>
87 </fieldset>
88 </form>
89 </div>
90 <div class="col-8">
91 <!-- The element that will host the viewport -->
92 <div id="viewer"></div>
93 </div>
94 </div>
95 </div>
96</body>
97
98</html>viewport_filename.css
1html,
2body
3{
4 height: 100%;
5 padding: 0px;
6 margin: 0px;
7}
8
9#viewer
10{
11 height: 100vh;
12}
viewport_filename.js
1// Initial declarations
2var serverUrl = "https://host.pathomation.com/pma.core.3/";
3var serverUsername = "PMA_UI_demo";
4var serverPassword = "PMA_UI_demo";
5var imagePath = "Reference/3DHistech/CMU-1.mrxs";
6var viewerElementSelector = "#viewer";
7var caller = "DemoPortal";
8var slideLoader;
9
10jQuery(function () {
11 console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
12 // Create a context
13 var context = new PMA.UI.Components.Context({ caller: caller });
14
15 // Add an autologin authentication provider
16 new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
17
18 // Create an image loader that will allow us to load images easily
19 slideLoader = new PMA.UI.Components.SlideLoader(context, {
20 element: viewerElementSelector,
21 overview: false,
22 barcode: false,
23 snapshot: false,
24 rotationControl: false,
25 fullscreenControl: false,
26 scaleLine: false,
27 zoomSlider: false,
28 filename: false
29 });
30
31 // Load the image with the context
32 slideLoader.load(serverUrl, imagePath);
33
34 // On radio change load corresponding filename option
35 $('input[type=radio][name=filenameRadios]').on("change", function () {
36 switch (this.value) {
37 case "hidden":
38 slideLoader.setOption("filename", false);
39 break;
40 case "fullpath":
41 slideLoader.setOption("filename", (opt) => opt.path);
42 break;
43 case "filename":
44 slideLoader.setOption("filename", (opt) => opt.path.split('/').pop());
45 break;
46 case "custom":
47 slideLoader.setOption("filename", $("#inputCustomText").val());
48 break;
49 default:
50 break;
51 }
52
53 slideLoader.load(serverUrl, imagePath);
54 });
55
56 // On custom text change update filename control
57 $("#inputCustomText").on("blur", function () {
58 if (!$('#inputCustom').is(":checked")) {
59 return;
60 }
61 slideLoader.setOption("filename", this.value);
62 slideLoader.load(serverUrl, imagePath);
63 });
64
65 $("#reset-btn").on("click", function () {
66 // Assign initial values to inputs
67 $('#inputHidden').click();
68 $("#inputCustomText").val("Custom text");
69
70 console.log("Values reverted to initial");
71 })
72});