Theme switch
basicviewportthemes
Console
PMA.UI version: 2.43.3
Theme switch example
theme_switch.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/theme_switch.js"></script>
23 <link href="./css/theme_switch.css" type="text/css" rel="stylesheet">
24
25 <title>Theme switch</title>
26</head>
27
28<body>
29 <div class="container-fluid">
30 <div class="row">
31 <div class="col-2 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">Theme</label>
36 <select class="custom-select theme-select col-6 pt-2">
37 <option selected value="default">Default</option>
38 <option value="classic">Classic</option>
39 <option value="modern">Modern</option>
40 </select>
41 </div>
42 </fieldset>
43 </form>
44 </div>
45 <div class="col-10 p-0">
46 <!-- The element that will host the viewport -->
47 <div id="viewer"></div>
48 </div>
49 </div>
50 </div>
51</body>
52
53</html>theme_switch.css
1html,
2body {
3 height: 100%;
4 padding: 0px;
5 margin: 0px;
6}
7
8#viewer {
9 height: 100vh;
10}
11
12.col-form-label {
13 align-self: center;
14}
theme_switch.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 = "wsiformats/brightfield/3DHistech/CMU-1.mrxs";
8var slideLoader = null;
9let initialConfiguration = null;
10let currentConfiguration = null;
11
12jQuery(function () {
13 console.log(`PMA.UI version: ${PMA.UI.getVersion()}`);
14
15 // Create a context
16 var context = new PMA.UI.Components.Context({ caller: caller });
17
18 // Add an autologin authentication provider
19 new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: serverUrl, username: serverUsername, password: serverPassword }]);
20
21 // Create an image loader that will allow us to load images easily
22 slideLoader = new PMA.UI.Components.SlideLoader(context, {
23 element: slideLoaderElementSelector,
24 theme: $(".theme-select").val(),
25 digitalZoomLevels: 2,
26 });
27
28 // Listen for the slide loaded event by the slide loader
29 slideLoader.listen(PMA.UI.Components.Events.SlideLoaded, function (args) {
30 console.log("Slide loaded");
31 console.log(args);
32 $("#controls").attr("disabled", false);
33 });
34
35 // Listen for the slide info error event by slide loader
36 slideLoader.listen(PMA.UI.Components.Events.SlideInfoError, function (args) {
37 console.log("Slide info error");
38 console.log(args);
39 });
40
41 // Load the image with the context
42 slideLoader.load(serverUrl, imagePath);
43
44 $("#controls").on("change", ".theme-select", function (e) {
45 var t = e.target.value;
46 slideLoader.setOption("theme", t);
47 slideLoader.load(serverUrl, imagePath);
48 });
49});