Note how the context component is shared among the components and, via the auto login provider, handles
authentication so
that the rest of the components do not have to manage sessionIDs themselves. The gallery can be created in
"horizontal",
"verical" or "grid" mode
<!-- include PMA.UI script & css -->
<script src="pma.ui.js" type="text/javascript"></script>
<link href="pma.ui.css" type="text/css" rel="stylesheet">
<!-- the element that will host the gallery -->
<div id="gallery"></div>
<!-- the element that will host the viewport -->
<div id="viewer" style="height: 500px"></div>
<script type="text/javascript">
console.log("PMA.UI loaded: " + PMA.UI.getVersion());
// create a context
var context = new PMA.UI.Components.Context({ caller: "PMA.UI demo" });
// add an autologin authentication provider
new PMA.UI.Authentication.AutoLogin(context, [{ serverUrl: "https://host.pathomation.com/pma.core.2/", username: "PMA_UI_demo", password: "PMA_UI_demo" }]);
// create an image loader that will allow us to load images easily
var slideLoader = new PMA.UI.Components.SlideLoader(context, {
element: "#viewer",
theme: PMA.UI.View.Themes.Default,
overview: {
collapsed: false
},
// the channel selector is only displayed for images that have multiple channels
dimensions: {
collapsed: false
},
// the barcode is only displayed if the image actually contains one
barcode: {
collapsed: false,
rotation: 180
},
loadingBar: true,
snapshot: true,
annotations: {
visible: true,
labels: true,
imageBaseUrl: "https://host.pathomation.com/pma.view/Content/themes/base/Images/",
imageScale: 0.5
},
digitalZoomLevels: 2,
scaleLine: true,
filename: true
});
// create a gallery that will display the contents of a directory
var gallery = new PMA.UI.Components.Gallery(context, {
element: "#gallery",
thumbnailWidth: 200,
thumbnailHeight: 150,
mode: "horizontal",
showFileName: true,
showBarcode: true,
barcodeRotation: 180,
filenameCallback: function (path) {
// show the filename without extension
return path.split('/').pop().split('.')[0];
},
additionalHtmlCallback: function (path) {
return "<strong>PMA.UI rocks!</strong>";
}
});
// load the contents of a directory
gallery.loadDirectory("https://host.pathomation.com/pma.core.2/", "Reference/3DHistech");
// listen for the slide selected event to load the selected image when clicked
gallery.listen(PMA.UI.Components.Events.SlideSelected, function (args) {
// load the image with the image loader
slideLoader.load(args.serverUrl, args.path);
});
</script>