Runtime controlling
advancedimage adjustmentsslide loader
Console
PMA.UI version: 2.43.3
Viewer example showing runtime controlling, such as flipping, changing brightness, gamma & contrast.
runtime_controls.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/runtime_controls.js"></script>
23 <link href="./css/runtime_controls.css" type="text/css" rel="stylesheet">
24
25 <title>Runtime controlling</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 for="inputBrightness" class="col-4 col-form-label col-form-label-sm">Brightness</label>
36 <div class="col-6 pt-2">
37 <input type="range" class="custom-range" min="-256" max="256" step="1" id="inputBrightness" value="">
38 </div>
39 <label for="inputBrightness" id="inputBrightness-label" class="col-2 col-form-label col-form-label-sm"></label>
40 </div>
41 <hr />
42 <div class="form-group row">
43 <label for="inputColorBalance" class="col-4 col-form-label col-form-label-sm align-self-center">Color balance</label>
44 <div class="col-8 pt-2">
45 <div class="form-group row">
46 <label for="inputBrightness" class="col-2 col-form-label col-form-label-sm">Red</label>
47 <div class="col-7 pt-2">
48 <input type="range" class="custom-range" min="0" max="2" step="0.01" id="inputColorBalanceR" value="">
49 </div>
50 <label for="inputColorBalanceR" id="inputColorBalanceR-label" class="col-3 col-form-label col-form-label-sm"></label>
51 </div>
52 <div class="form-group row">
53 <label for="inputBrightness" class="col-2 col-form-label col-form-label-sm">Green</label>
54 <div class="col-7 pt-2">
55 <input type="range" class="custom-range" min="0" max="2" step="0.01" id="inputColorBalanceG" value="">
56 </div>
57 <label for="inputColorBalanceG" id="inputColorBalanceG-label" class="col-3 col-form-label col-form-label-sm"></label>
58 </div>
59 <div class="form-group row">
60 <label for="inputBrightness" class="col-2 col-form-label col-form-label-sm">Blue</label>
61 <div class="col-7 pt-2">
62 <input type="range" class="custom-range" min="0" max="2" step="0.01" id="inputColorBalanceB" value="">
63 </div>
64 <label for="inputColorBalanceB" id="inputColorBalanceB-label" class="col-3 col-form-label col-form-label-sm"></label>
65 </div>
66 </div>
67 </div>
68 <hr />
69 <div class="form-group row">
70 <label for="inputContrast" class="col-4 col-form-label col-form-label-sm">Contrast</label>
71 <div class="col-6 pt-2">
72 <input type="range" class="custom-range" min="-20" max="20" step="0.1" id="inputContrast" value="">
73 </div>
74 <label for="inputContrast" id="inputContrast-label" class="col-2 col-form-label col-form-label-sm"></label>
75 </div>
76 <hr />
77 <div class="form-group row">
78 <label for="inputGamma" class="col-4 col-form-label col-form-label-sm">Gamma</label>
79 <div class="col-6 pt-2">
80 <input type="range" class="custom-range" min="0" max="50" step="0.1" id="inputGamma" value="">
81 </div>
82 <label for="inputGamma" id="inputGamma-label" class="col-2 col-form-label col-form-label-sm"></label>
83 </div>
84 <hr />
85 <div class="form-group row">
86 <div class="col text-center">
87 <button id="auto-adjust-btn" type="button" class="btn btn-light btn-sm"><i class="fas fa-balance-scale"></i> Auto adjust colors</button>
88 <button id="clear-auto-adjust-btn" type="button" class="btn btn-light btn-sm"><i class="fas fa-broom"></i> Clear color adjustments</button>
89 </div>
90 </div>
91 <hr />
92 <div class="form-group row">
93 <div class="col">
94 <button id="reset-btn" type="button" class="btn btn-light btn-sm"><i class="fas fa-history"></i> Reset values</button>
95 </div>
96 </div>
97 </fieldset>
98 </form>
99 </div>
100 <div class="col-8">
101 <!-- The element that will host the viewport -->
102 <div id="viewer"></div>
103 </div>
104 </div>
105 </div>
106</body>
107
108</html>runtime_controls.css
1html,
2body {
3 height: 100%;
4 padding: 0px;
5 margin: 0px;
6}
7
8#viewer {
9 height: 100vh;
10}
runtime_controls.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 = "#viewer";
7var imagePath = "Reference/Ventana/OS-1.bif";
8var slideLoader = null;
9var brightness = 0;
10var contrast = 0;
11var gamma = 0;
12var red = 0;
13var green = 0;
14var blue = 0;
15
16jQuery(function () {
17 console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
18
19 // Create a context
20 var context = new PMA.UI.Components.Context({ caller: caller });
21
22 // Add an autologin authentication provider
23 new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
24
25 // Create an image loader that will allow us to load images easily
26 slideLoader = new PMA.UI.Components.SlideLoader(context, {
27 element: slideLoaderElementSelector,
28 });
29
30 // Listen for the slide loaded event by the slide loader
31 slideLoader.listen(PMA.UI.Components.Events.SlideLoaded, function (args) {
32 console.log("Slide loaded");
33 console.log(args);
34
35 $("#reset-btn").attr("disabled", false);
36 $("#controls").attr("disabled", false);
37
38 // Get initial values from viewport
39 updateFromViewport();
40 });
41
42 // Listen for the slide info error event by slide loader
43 slideLoader.listen(PMA.UI.Components.Events.SlideInfoError, function (args) {
44 console.log("Slide info error");
45 console.log(args);
46 });
47
48 // Load the image with the context
49 slideLoader.load(serverUrl, imagePath);
50
51 $("#inputBrightness").on("input", function (e) {
52 $("#inputBrightness-label").text(e.target.value);
53 });
54
55 $("#inputBrightness").on("change", function (e) {
56 // Assign input's value to brightness
57 slideLoader.mainViewport.setBrightness(parseInt(e.target.value));
58 $("#inputBrightness-label").text(e.target.value);
59 console.log(`Brightness: ${e.target.value}`);
60 });
61
62 $("#inputContrast").on("input", function (e) {
63 $("#inputContrast-label").text(e.target.value);
64 });
65
66 $("#inputContrast").on("change", function (e) {
67 // Assign input's value to contrast
68 slideLoader.mainViewport.setContrast(parseFloat(e.target.value));
69 $("#inputContrast-label").text(e.target.value);
70 console.log(`Contrast: ${e.target.value}`);
71 });
72
73 $("#inputGamma").on("input", function (e) {
74 $("#inputGamma-label").text(e.target.value);
75 });
76
77 $("#inputGamma").on("change", function (e) {
78 // Assign input's value to gamma
79 slideLoader.mainViewport.setGamma(parseFloat(e.target.value));
80 $("#inputGamma-label").text(e.target.value);
81 console.log(`Gamma: ${e.target.value}`);
82 });
83
84 $("#inputColorBalanceR").on("input", function (e) {
85 $("#inputColorBalanceR-label").text(e.target.value);
86 });
87
88 $("#inputColorBalanceR").on("change", function (e) {
89 // Assign input's value to red
90 var r = parseFloat($("#inputColorBalanceR").val());
91 var g = parseFloat($("#inputColorBalanceG").val());
92 var b = parseFloat($("#inputColorBalanceB").val());
93 slideLoader.mainViewport.setColorBalance(r, g, b);
94
95 $("#inputColorBalanceR-label").text(e.target.value);
96 console.log(`Color Balance Red: ${e.target.value}`);
97 });
98
99 $("#inputColorBalanceG").on("input", function (e) {
100 $("#inputColorBalanceG-label").text(e.target.value);
101 });
102
103 $("#inputColorBalanceG").on("change", function (e) {
104 // Assign input's value to green
105 var r = parseFloat($("#inputColorBalanceR").val());
106 var g = parseFloat($("#inputColorBalanceG").val());
107 var b = parseFloat($("#inputColorBalanceB").val());
108 slideLoader.mainViewport.setColorBalance(r, g, b);
109
110 $("#inputColorBalanceG-label").text(e.target.value);
111 console.log(`Color Balance Green: ${e.target.value}`);
112 });
113
114 $("#inputColorBalanceB").on("input", function (e) {
115 $("#inputColorBalanceB-label").text(e.target.value);
116 });
117
118 $("#inputColorBalanceB").on("change", function (e) {
119 // Assign input's value to blue
120 var r = parseFloat($("#inputColorBalanceR").val());
121 var g = parseFloat($("#inputColorBalanceG").val());
122 var b = parseFloat($("#inputColorBalanceB").val());
123 slideLoader.mainViewport.setColorBalance(r, g, b);
124
125 $("#inputColorBalanceB-label").text(e.target.value);
126 console.log(`Color Balance Blue: ${e.target.value}`);
127 });
128
129 $("#auto-adjust-btn").on("click", function () {
130 slideLoader.mainViewport.autoAdjustColors(updateFromViewport);
131 });
132
133 $("#clear-auto-adjust-btn").on("click", function () {
134 contrast = 1;
135 gamma = 1;
136 red = 1;
137 green = 1;
138 blue = 1;
139 brightness = 0;
140 resetSettings();
141 });
142
143 $("#reset-btn").on("click", resetSettings);
144});
145
146function resetSettings() {
147 // Assign initial values to inputs
148 $("#inputBrightness").val(brightness);
149 $("#inputContrast").val(contrast);
150 $("#inputGamma").val(gamma);
151 $("#inputColorBalanceR").val(red);
152 $("#inputColorBalanceG").val(green);
153 $("#inputColorBalanceB").val(blue);
154 $("#inputBrightness-label").text(brightness);
155 $("#inputContrast-label").text(contrast);
156 $("#inputGamma-label").text(gamma);
157 $("#inputColorBalanceR-label").text(red);
158 $("#inputColorBalanceG-label").text(green);
159 $("#inputColorBalanceB-label").text(blue);
160
161 // Assign initial values to viewport
162 slideLoader.mainViewport.setBrightness(brightness);
163 slideLoader.mainViewport.setContrast(contrast);
164 slideLoader.mainViewport.setGamma(gamma);
165 slideLoader.mainViewport.setColorBalance(red, green, blue);
166
167 console.log("Values reverted to initial");
168}
169
170function updateFromViewport() {
171 brightness = slideLoader.mainViewport.getBrightness();
172 contrast = slideLoader.mainViewport.getContrast();
173 gamma = slideLoader.mainViewport.getGamma();
174 red = slideLoader.mainViewport.getColorBalance()[0];
175 green = slideLoader.mainViewport.getColorBalance()[1];
176 blue = slideLoader.mainViewport.getColorBalance()[2];
177
178 // Assign initial values to inputs
179 $("#inputBrightness").val(brightness);
180 $("#inputContrast").val(contrast);
181 $("#inputGamma").val(gamma);
182 $("#inputColorBalanceR").val(red);
183 $("#inputColorBalanceG").val(green);
184 $("#inputColorBalanceB").val(blue);
185 $("#inputBrightness-label").text(Math.round(brightness));
186 $("#inputContrast-label").text(Math.round(contrast));
187 $("#inputGamma-label").text(gamma);
188 $("#inputColorBalanceR-label").text(red);
189 $("#inputColorBalanceG-label").text(green);
190 $("#inputColorBalanceB-label").text(blue);
191}
192