Note
This documentation is for the new OMERO 5.1. version. See the latest OMERO 5.0.x version or the previous versions page to find documentation for the OMERO version you are using if you have not upgraded yet.
Note
These example are intended to be used with images that have been added to the PUBLIC group with a Public member in OMERO, making them publicly available. To see how to configure public url filters, see Public data in OMERO.web page.
Insert the following:
<div id="omeroviewport"><iframe width="850" height="600" src="http://localhost:8000/webclient/img_detail/IMAGE_ID/" id="omeroviewport" name="omeroviewport"></iframe></div>
Use the following code to reference the scripts.
<script type="text/javascript">
function openPopup(url) {
owindow = window.open(url, 'anew', config='height=600,width=850,left=50,top=50,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,directories=no,status=no');
if(!owindow.closed) owindow.focus();
return false;
}
</script>
Then in <BODY> insert the following:
<a href="#" onclick="return openPopup('http://localhost:8000/webclient/img_detail/IMAGE_ID/')">Open viewer</a>
This web page demonstrates how to embed an OMERO.web image viewer in any HTML page, allowing use of resources directly from an OMERO server.
$ bin/omero config set omero.web.public.url_filter '/webgateway'Provided the image corresponding to IMAGE_ID is in the PUBLIC group, it can be accessed via the link: http://your_host/webgateway/img_detail/IMAGE_ID/. Please remember that public images must be in a public group where a public user can access them.
Use the following code to load stylesheets and scripts.
<link rel="stylesheet" type="text/css" href="http://your_host/static/omeroweb.viewer.min.css">
<script type="text/javascript" src="http://your_host/static/omeroweb.viewer.min.js"></script>
Then create the small JavaScript with associated stylesheet which allows you to view particular image defined by IMAGE_ID.
<style type="text/css">
.viewport {
height: 500px;
width: 800px;
padding: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
/* Prepare the viewport */
viewport = $.WeblitzViewport($("#viewport"), "http://your_host/webgateway/", {
'mediaroot': "http://your_host/static/"
});
/* Load the selected image into the viewport */
viewport.load(IMAGE_ID);
});
</script>
Then in <BODY> insert the following:
<div id="viewport" class="viewport"></div>
The viewport can be made more interactive by adding buttons or links to allow display of scalebars, ROIs, zooming and selection of channels. Full examples of how to embed microscopy or Whole Slide Image are available here.