Skip to content

Instantly share code, notes, and snippets.

@will-moore

will-moore/omero_viewer.html

Created September 27, 2022 22:14
Show Gist options
  • Save will-moore/73ba646eb591478b567b6e8c2e3c830b to your computer and use it in GitHub Desktop.
Save will-moore/73ba646eb591478b567b6e8c2e3c830b to your computer and use it in GitHub Desktop.
Download ZIP
Minimal viewer based on webgateway image viewer
Raw
omero_viewer.html
<html>
<!-- See https://forum.image.sc/t/omero-embedded-onto-html-pages-in-moodle/72047 -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="https://omero.mvls.gla.ac.uk/static/webgateway/css/ome.viewport.css?_5.8.1" media="all" />
<link rel="stylesheet" type="text/css" href="https://omero.mvls.gla.ac.uk/static/webgateway/css/ome.toolbar.css?_5.8.1" media="all"/>
<link rel="stylesheet" type="text/css" href="https://omero.mvls.gla.ac.uk/static/webgateway/css/ome.gs_slider.css?_5.8.1" media="all" />
<link rel="stylesheet" type="text/css" href="https://omero.mvls.gla.ac.uk/static/webgateway/css/base.css?_5.8.1" media="all" />
<link rel="stylesheet" type="text/css" href="https://omero.mvls.gla.ac.uk/static/webgateway/css/ome.snippet_header_logo.css?_5.8.1" media="all" />
<link rel="stylesheet" type="text/css" href="https://omero.mvls.gla.ac.uk/static/webgateway/css/ome.postit.css?_5.8.1" />
<link rel="stylesheet" type="text/css" href="https://omero.mvls.gla.ac.uk/static/3rdparty/farbtastic-1.2/farbtastic.css" media="all" />
<link rel="stylesheet" type="text/css" href="https://omero.mvls.gla.ac.uk/static/webgateway/css/ome.colorbtn.css?_5.8.1" />
<link rel="stylesheet" type="text/css" href="https://omero.mvls.gla.ac.uk/static/3rdparty/JQuerySpinBtn-1.3a/JQuerySpinBtn.css" />
<link rel="stylesheet" type="text/css" href="https://omero.mvls.gla.ac.uk/static/webgateway/css/omero_image.css?_5.8.1" media="all" />
<link rel="stylesheet" type="text/css" href="https://omero.mvls.gla.ac.uk/static/3rdparty/panojs-2.0.0/panojs.css" media="all" />
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/jquery-1.11.1.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/webgateway/js/ome.csrf.js?_5.8.1"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/webgateway/js/ome.popup.js?_5.8.1"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/aop-1.3.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/webgateway/js/ome.gs_utils.js?_5.8.1"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/webgateway/js/ome.viewportImage.js?_5.8.1"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/webgateway/js/ome.gs_slider.js?_5.8.1"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/webgateway/js/ome.viewport.js?_5.8.1"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/webgateway/js/omero_image.js?_5.8.1"></script>
<link rel="stylesheet" href="https://omero.mvls.gla.ac.uk/static/3rdparty/jquery-ui-1.10.4/themes/base/jquery.ui.base.css" type="text/css" />
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/webgateway/js/ome.smartdialog.js?_5.8.1"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/JQuerySpinBtn-1.3a/JQuerySpinBtn.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/webgateway/js/ome.colorbtn.js?_5.8.1"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/webgateway/js/ome.postit.js?_5.8.1"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/jquery.selectboxes-2.2.6.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/farbtastic-1.2/farbtastic.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/webgateway/js/ome.gs_utils.js?_5.8.1"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/webgateway/js/ome.scalebardisplay.js?_5.8.1"></script>
<!-- big images -->
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/panojs-2.0.0/extjs/ext-core.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/panojs-2.0.0/utils.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/panojs-2.0.0/PanoJS.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/panojs-2.0.0/controls.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/panojs-2.0.0/pyramid_Bisque.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/panojs-2.0.0/pyramid_imgcnv.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/panojs-2.0.0/pyramid_Zoomify.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/panojs-2.0.0/control_thumbnail.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/panojs-2.0.0/control_info.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/panojs-2.0.0/control_svg.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/panojs-2.0.0/control_roi.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/panojs-2.0.0/control_scalebar.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/jquery.mousewheel-3.0.6.js"></script>
<script type="text/javascript" src="https://omero.mvls.gla.ac.uk/static/3rdparty/hammer-2.0.2/hammer.min.js"></script>
</head>
<body>
<h1>Viewer</h1>
<table style="width:100%">
<tr>
<td style="width: 50%; text-align: center;">
Empty td 50% width
</td>
<!-- viewport container must have position: relative. Set width/height optional -->
<td style="position: relative; width: 50%; height: 500px">
<!-- Image Viewport -->
<div id="weblitz-viewport" style="left: 10px"></div>
</td>
</tr>
</table>
<script type="text/javascript">
// not used, but avoid a console warning
OME.PNG_LUTS = [];
OME.LUTS = [];
var viewport;
var calcResize = function () {
// update the viewport to fit inside it's container
let $container = $("#weblitz-viewport").parent();
viewport.self
.height($container.height() - 20)
.width($container.width() - 30);
viewport.refresh(true);
};
$(function () {
viewport = $.WeblitzViewport($('#weblitz-viewport'), 'https://idr.openmicroscopy.org/webgateway',{'mediaroot': 'https://omero.mvls.gla.ac.uk/static/' });
viewport.bind('imageLoad', _refresh_cb);
viewport.bind('imageLoad', _load_metadata);
/* Load the selected image into the viewport */
viewport.setQuality('0.9');
viewport.load(14000892, null, location.search);
/* Bind actions needed on window resize */
$(window).resize(calcResize);
calcResize();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment