Viewport animations
basicviewportanimations
Console
PMA.UI version: 2.43.3
Viewport animations example
viewport_animations.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_animations.js"></script>
23 <link href="./css/viewport_animations.css" type="text/css" rel="stylesheet">
24
25 <title>Viewport animations</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" disabled>
34 <div class="form-group row">
35 <label class="col-5 col-form-label col-form-label-sm">Animation duration (in ms)</label>
36 <input type="number" class="form-control col-6 pt-2" value="250" min="0" max="10000" id="animation_duration">
37 </div>
38 <div class="form-group row">
39 <label class="col-5 col-form-label col-form-label-sm">Μouse wheel zoom animation</label>
40 <div class="custom-control custom-switch col-3 pt-2">
41 <input type="checkbox" class="custom-control-input" id="mouse_wheel_zoom_animations">
42 <label class="custom-control-label" for="mouse_wheel_zoom_animations"></label>
43 </div>
44 </div>
45 <div class="form-group row">
46 <label class="col-5 col-form-label col-form-label-sm">Keyboard pan animation</label>
47 <div class="custom-control custom-switch col-3 pt-2">
48 <input type="checkbox" class="custom-control-input" id="pan_animations">
49 <label class="custom-control-label" for="pan_animations"></label>
50 </div>
51 </div>
52 <hr />
53 <div class="form-group row">
54 <div class="col">
55 <button id="reset-btn" type="button" class="btn btn-light btn-sm"><i class="fas fa-history"></i>
56 Reset values</button>
57 </div>
58 </div>
59 </fieldset>
60 </form>
61 </div>
62 <div class="col-8 p-0">
63 <!-- The element that will host the viewport -->
64 <div id="viewer"></div>
65 </div>
66 </div>
67 </div>
68</body>
69
70</html>viewport_animations.css
1html,
2body {
3 height: 100%;
4 padding: 0px;
5 margin: 0px;
6}
7
8#viewer {
9 height: 100vh;
10}
viewport_animations.js
1// Initial declarations
2var serverUrl = "https://host.pathomation.com/pma.core.3/";
3var serverUsername = "PMA_UI_demo";
4var serverPassword = "PMA_UI_demo";
5var caller = "DemoPortal";
6var slideLoaderElementSelector = "#viewer";
7var imagePath = "Reference/Annotations/CMU-1/CMU-1.svs";
8var slideLoader = null;
9var animationDuration = 250;
10var mouseWheelZoomAnimations = false;
11var panAnimations = false;
12
13
14function initializeSlideLoader() {
15 // Load the image with the context
16 slideLoader.load(serverUrl, imagePath);
17}
18
19
20jQuery(function () {
21 console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
22
23 // Create a context
24 var context = new PMA.UI.Components.Context({ caller: caller });
25
26 // Add an autologin authentication provider
27 new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
28
29 // Create an image loader that will allow us to load images easily
30 slideLoader = new PMA.UI.Components.SlideLoader(context, {
31 element: slideLoaderElementSelector,
32 animationDuration: animationDuration,
33 mouseWheelZoomAnimations: mouseWheelZoomAnimations,
34 panAnimations: panAnimations
35 });
36
37 // Listen for the slide loaded event by the slide loader
38 slideLoader.listen(PMA.UI.Components.Events.SlideLoaded, function (args) {
39 console.log("Slide loaded");
40 console.log(args);
41 $("#reset-btn").attr("disabled", false);
42 $("#controls").attr("disabled", false);
43 });
44
45 // Listen for the slide info error event by slide loader
46 slideLoader.listen(PMA.UI.Components.Events.SlideInfoError, function (args) {
47 console.log("Slide info error");
48 console.log(args);
49 });
50
51 // Load the image with the context
52 slideLoader.load(serverUrl, imagePath);
53
54 $("#controls").on("change", "#animation_duration", function (e) {
55 console.log(e.target.value);
56 animationDuration = e.target.value;
57 slideLoader.setOption('animationDuration', animationDuration);
58 initializeSlideLoader();
59 });
60
61 $("#controls").on("change", ".custom-switch", function (e) {
62 let id = e.target.id;
63
64 if (id == "mouse_wheel_zoom_animations") {
65 mouseWheelZoomAnimations = e.target.checked;
66 slideLoader.setOption('mouseWheelZoomAnimations', mouseWheelZoomAnimations);
67 }
68
69 if (id == "pan_animations") {
70 panAnimations = e.target.checked;
71 slideLoader.setOption('panAnimations', panAnimations);
72 }
73 initializeSlideLoader();
74 });
75
76 $("#reset-btn").on("click", function () {
77 animationDuration = 250;
78 mouseWheelZoomAnimations = false;
79 panAnimations = false;
80
81 $("#animation_duration").val(animationDuration);
82 $("#mouse_wheel_zoom_animations").prop('checked', mouseWheelZoomAnimations);
83 $("#pan_animations").prop('checked', panAnimations);
84
85 slideLoader.setOption('animationDuration', animationDuration);
86 slideLoader.setOption('mouseWheelZoomAnimations', mouseWheelZoomAnimations);
87 slideLoader.setOption('panAnimations', panAnimations);
88 initializeSlideLoader();
89
90 console.log("Values reverted to initial");
91 });
92});