CINXE.COM

<!DOCTYPE html> <html class="writer-html5" lang="en" data-content_root="../../"> <head> <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>View images in OMERO.iviewer — OMERO guide latest documentation</title> <link rel="stylesheet" type="text/css" href="../../_static/pygments.css?v=fa44fd50" /> <link rel="stylesheet" type="text/css" href="../../_static/css/theme.css?v=19f00094" /> <link rel="stylesheet" type="text/css" href="../../_static/graphviz.css?v=eafc0fe6" /> <link rel="stylesheet" type="text/css" href="../../_static/theme_overrides.css?v=10dd2d77" />  <script src="../../_static/jquery.js?v=5d32c60e"></script> <script src="../../_static/_sphinx_javascript_frameworks_compat.js?v=2cd50e6c"></script> <script src="../../_static/documentation_options.js?v=c6e86fd7"></script> <script src="../../_static/doctools.js?v=888ff710"></script> <script src="../../_static/sphinx_highlight.js?v=dc90522c"></script> <script src="../../_static/js/theme.js"></script> <link rel="index" title="Index" href="../../genindex.html" /> <link rel="search" title="Search" href="../../search.html" /> <link rel="next" title="Work with ROIs in OMERO.iviewer" href="iviewer_rois.html" /> <link rel="prev" title="OMERO.iviewer" href="index.html" /> <script async type="text/javascript" src="/_/static/javascript/readthedocs-addons.js"></script><meta name="readthedocs-project-slug" content="omero-guides" /><meta name="readthedocs-version-slug" content="latest" /><meta name="readthedocs-resolver-filename" content="/iviewer/docs/iviewer_viewing.html" /><meta name="readthedocs-http-status" content="200" /></head> <body class="wy-body-for-nav"> <div class="wy-grid-for-nav"> <nav data-toggle="wy-nav-shift" class="wy-nav-side"> <div class="wy-side-scroll"> <div class="wy-side-nav-search" > <a href="../../index.html" class="icon icon-home"> OMERO guide </a> <div class="version"> latest </div> <div role="search"> <form id="rtd-search-form" class="wy-form" action="../../search.html" method="get"> <input type="text" name="q" placeholder="Search docs" aria-label="Search docs" /> <input type="hidden" name="check_keywords" value="yes" /> <input type="hidden" name="area" value="default" /> </form> </div> </div><div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="Navigation menu"> <ul class="current"> <li class="toctree-l1"><a class="reference internal" href="../../core_features.html">General concepts</a></li> <li class="toctree-l1"><a class="reference internal" href="../../external_tools.html">External Software and OMERO</a></li> <li class="toctree-l1"><a class="reference internal" href="../../api_usage.html">OMERO Application Programming Interfaces</a></li> <li class="toctree-l1"><a class="reference internal" href="../../add_ons.html">Add-ons for OMERO</a></li> <li class="toctree-l1 current"><a class="reference internal" href="../../web_addons.html">OMERO.web extensions to view data</a><ul class="current"> <li class="toctree-l2"><a class="reference internal" href="../../figure/docs/index.html">OMERO.figure</a></li> <li class="toctree-l2"><a class="reference internal" href="../../fpbioimage/docs/index.html">OMERO.FPBioimage</a></li> <li class="toctree-l2 current"><a class="reference internal" href="index.html">OMERO.iviewer</a><ul class="current"> <li class="toctree-l3 current"><a class="current reference internal" href="#">View images in OMERO.iviewer</a></li> <li class="toctree-l3"><a class="reference internal" href="iviewer_rois.html">Work with ROIs in OMERO.iviewer</a></li> </ul> </li> <li class="toctree-l2"><a class="reference internal" href="../../parade/docs/index.html">OMERO.parade</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="../../write_guide.html">How to write a guide</a></li> <li class="toctree-l1"><a class="reference internal" href="../../example.html">OMERO walkthrough example</a></li> <li class="toctree-l1"><a class="reference internal" href="../../example_facility_manager.html">OMERO walkthrough for facility managers</a></li> <li class="toctree-l1"><a class="reference internal" href="../../training.html">Prepare an OMERO server for training</a></li> </ul> </div> </div> </nav> <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu" > <i data-toggle="wy-nav-top" class="fa fa-bars"></i> <a href="../../index.html">OMERO guide</a> </nav> <div class="wy-nav-content"> <div class="rst-content"> <div role="navigation" aria-label="Page navigation"> <ul class="wy-breadcrumbs"> <li><a href="../../index.html" class="icon icon-home" aria-label="Home"></a></li> <li class="breadcrumb-item"><a href="../../web_addons.html">OMERO.web extensions to view data</a></li> <li class="breadcrumb-item"><a href="index.html">OMERO.iviewer</a></li> <li class="breadcrumb-item active">View images in OMERO.iviewer</li> <li class="wy-breadcrumbs-aside"> <a href="../../_sources/iviewer/docs/iviewer_viewing.rst.txt" rel="nofollow"> View page source</a> </li> </ul> <hr/> </div> <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article"> <div itemprop="articleBody"> <section id="view-images-in-omero-iviewer"> <h1>View images in OMERO.iviewer<a class="headerlink" href="#view-images-in-omero-iviewer" title="Link to this heading"></a></h1> <p>We introduce OMERO.iviewer, a 2D viewer which can open and browse multi-t, multi-z and multi-channel images and allows to draw and edit Regions of Interest. It also offers the ability to view several images at the same time and synchronize the view.</p> <section id="description"> <h2>Description<a class="headerlink" href="#description" title="Link to this heading"></a></h2> <p>We will show here:</p> <ul class="simple"> <li><p>How to open multidimensional images in OMERO.iviewer</p></li> <li><p>How to change rendering settings in OMERO.iviewer and scroll through z and t</p></li> <li><p>How to change the Lookup table and invert the displayed intensities for a particular channel</p></li> <li><p>How to use the Histogram feature</p></li> <li><p>How to zoom and rotate the image</p></li> <li><p>How to create a maximum intensity Projection and save it</p></li> <li><p>How to save a current viewport as png in OMERO.iviewer</p></li> <li><p>How to use and synchronize multiple viewer windows inside OMERO.iviewer</p></li> </ul> </section> <section id="resources"> <h2>Resources<a class="headerlink" href="#resources" title="Link to this heading"></a></h2> <p>Example files used</p> <ul class="simple"> <li><p><a class="reference external" href="https://downloads.openmicroscopy.org/images/DV/siRNAi-HeLa/">https://downloads.openmicroscopy.org/images/DV/siRNAi-HeLa/</a></p></li> </ul> <p>Note: Only some of the images in this dataset are z-stacks, for example</p> <ul class="simple"> <li><p><a class="reference external" href="https://downloads.openmicroscopy.org/images/DV/siRNAi-HeLa/IN_03.r3d_D3D.dv">https://downloads.openmicroscopy.org/images/DV/siRNAi-HeLa/IN_03.r3d_D3D.dv</a></p></li> </ul> </section> <section id="setup"> <h2>Setup<a class="headerlink" href="#setup" title="Link to this heading"></a></h2> <p><strong>OMERO.iviewer installation</strong></p> <p>OMERO.iviewer is a pip installable application for OMERO.web. Follow the steps described in <a class="reference external" href="https://pypi.org/project/omero-iviewer/">https://pypi.org/project/omero-iviewer/</a> to install it and configure the OMERO.web accordingly.</p> <p>The walkthrough assumes that OMERO.iviewer has been set up as the default viewer for OMERO.web.</p> </section> <section id="step-by-step"> <h2>Step-by-Step<a class="headerlink" href="#step-by-step" title="Link to this heading"></a></h2> <ol class="arabic"> <li><p>Double-click on an Image thumbnail, or click the <code class="docutils literal notranslate"><span class="pre">Full</span> <span class="pre">Viewer</span></code> <a class="reference internal" href="../../_images/Iviewer1.png"><img alt="image1" src="../../_images/Iviewer1.png" style="width: 0.79167in; height: 0.27083in;" /></a> button in the right-hand pane to open an Image in a larger viewer called OMERO.iviewer. It is a Web app developed and released independently from the webclient. The OMERO.web framework can be extended with multiple apps to view data in different ways.</p></li> <li><p>Zoom in and out of the image by using the <code class="docutils literal notranslate"><span class="pre">+</span></code> and <code class="docutils literal notranslate"><span class="pre">-</span></code> buttons in top-left corner or by scrolling the mousewheel.</p></li> <li><p>Rotate the image by holding <code class="docutils literal notranslate"><span class="pre">Shift</span></code> on your keyboard and then drag the image using the mouse.</p></li> <li><p>We can adjust the rendering settings and scroll through Z or T.</p> <img alt="../../_images/Iviewer2.png" src="../../_images/Iviewer2.png" /> </li> <li><p>To change the Lookup Table (LUT) of a particular channel, click on the downward facing arrow next to the channel label <a class="reference internal" href="../../_images/Iviewer1b.png"><img alt="image1b" src="../../_images/Iviewer1b.png" style="width: 0.79167in;" /></a>.</p></li> <li><p>In the menu, select the LUT you wish to use. You can find here all the LUTs which are supported in ImageJ.</p> <p><a class="reference internal" href="../../_images/Iviewer1c.png"><img alt="image1c" src="../../_images/Iviewer1c.png" style="width: 2.7in;" /></a></p> </li> <li><p>In the same menu, you can also invert the intensity of the channel by checking the checkbox on the top.</p></li> <li><p>Still staying in the <code class="docutils literal notranslate"><span class="pre">Settings</span></code> tab in the right-hand side of OMERO.iviewer, click on the checkbox next to the <code class="docutils literal notranslate"><span class="pre">Histogram</span></code> word <a class="reference internal" href="../../_images/Iviewer0.png"><img alt="image0" src="../../_images/Iviewer0.png" style="width: 0.79167in; height: 0.27083in;" /></a> near the top.</p></li> <li><p>A histogram of the first channel which is on will appear. Note that when you move the rendering settings sliders beneath the histogram, the histogram updates to showing the channel you just manipulated.</p> <p><a class="reference internal" href="../../_images/Iviewer0b.png"><img alt="image0b" src="../../_images/Iviewer0b.png" style="width: 2.7in; height: 3in;" /></a></p> </li> <li><p>The <code class="docutils literal notranslate"><span class="pre">Interpolate</span></code> option provides a smoother rendering of the image in the viewer. Unchecking this will show the pixels at the same resolution as the original data. This option has no effect on the underlying pixel intensity values.</p></li> <li><p>Make a maximum intensity Projection of a z-stack by clicking the <code class="docutils literal notranslate"><span class="pre">stack</span></code> icon <a class="reference internal" href="../../_images/Iviewer0c.png"><img alt="image0c" src="../../_images/Iviewer0c.png" style="width: 0.4in;" /></a> in the bottom-left corner of the central pane, just under the z-slider.</p></li> <li><p>Note that on the vertical z-slider, there are now two knobs. Adjust the knobs to select the desired portion of the z-stack to be projected. The central pane will show a preview of your Projection.</p></li> <li><p>Save the Projection by selecting <code class="docutils literal notranslate"><span class="pre">File</span> <span class="pre">></span> <span class="pre">Save</span> <span class="pre">Projection</span> <span class="pre">as</span> <span class="pre">new</span> <span class="pre">image</span></code>. In the following dialog, click either <code class="docutils literal notranslate"><span class="pre">Navigate</span> <span class="pre">to</span> <span class="pre">Image</span> <span class="pre">in</span> <span class="pre">Webclient</span></code> or <code class="docutils literal notranslate"><span class="pre">Open</span> <span class="pre">Image</span> <span class="pre">in</span> <span class="pre">iviewer</span></code>.</p></li> <li><p>Save the viewport by selecting in the top-left corner <code class="docutils literal notranslate"><span class="pre">File</span> <span class="pre">></span> <span class="pre">Save</span> <span class="pre">Viewport</span> <span class="pre">as</span> <span class="pre">PNG</span></code>.</p></li> <li><p>Compare the two channels of one of the Images in multi-image view:</p> <ul> <li><p>Double-click on the thumbnail of the already opened Image in the left-hand pane of the viewer. This will open the Image again in a new window.</p></li> <li><p>Select one of the windows and in the right-hand pane switch the green channel off.</p></li> <li><p>On the other window, switch the blue channel off.</p> <blockquote> <div><img alt="../../_images/Iviewer12.png" src="../../_images/Iviewer12.png" /> </div></blockquote> </li> </ul> </li> <li><p>Work with images in the multi-view mode. There are several ways to get full views of the images from the thumbnails in the left-hand column.</p> <ul class="simple"> <li><p><code class="docutils literal notranslate"><span class="pre">Click</span></code> on a thumbnail to open the corresponding image in the currently active central pane viewer window, replacing the image in that viewer window.</p></li> <li><p><code class="docutils literal notranslate"><span class="pre">Double-click</span></code> on a thumbnail to open a new central pane viewer window with the double-clicked thumbnail image.</p></li> <li><p><code class="docutils literal notranslate"><span class="pre">Drag</span> <span class="pre">and</span> <span class="pre">drop</span></code> a thumbnail into an existing central pane viewer window to replace the image in that window with the image corresponding to the thumbnail which you just dropped into it.</p></li> <li><p><code class="docutils literal notranslate"><span class="pre">Drag</span> <span class="pre">and</span> <span class="pre">drop</span></code> a thumbnail onto the white canvas area in the central pane to create a new viewer window.</p></li> </ul> </li> <li><p>We can synchronize the central pane viewers by adding them both to the same <code class="docutils literal notranslate"><span class="pre">sync</span> <span class="pre">Group</span></code>.</p> <ul> <li><p>Click the <code class="docutils literal notranslate"><span class="pre">sync</span></code> icon <a class="reference internal" href="../../_images/Iviewer13.png"><img alt="image13" src="../../_images/Iviewer13.png" style="width: 0.46875in; height: 0.28125in;" /></a> in the top-left corner and select the first option in the dropdown menu.</p></li> <li><p>Repeat for the other viewer.</p></li> <li><p>Now both Images have the <code class="docutils literal notranslate"><span class="pre">Z/T</span></code> and <code class="docutils literal notranslate"><span class="pre">View</span></code> (zoom and position of viewport) synchronized.</p> <blockquote> <div><img alt="../../_images/Iviewer14.png" src="../../_images/Iviewer14.png" /> </div></blockquote> </li> </ul> </li> <li><p>Click on <code class="docutils literal notranslate"><span class="pre">Info</span></code> tab in iviewer now, and find, in the right-hand pane, the link to <code class="docutils literal notranslate"><span class="pre">Dataset</span></code>: <a class="reference internal" href="../../_images/Iviewer15.png"><img alt="image15" src="../../_images/Iviewer15.png" style="width: 2.91667in; height: 0.29167in;" /></a>. Click on that link. This will bring you back to the webclient.</p></li> </ol> </section> </section> </div> </div> <footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer"> <a href="index.html" class="btn btn-neutral float-left" title="OMERO.iviewer" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a> <a href="iviewer_rois.html" class="btn btn-neutral float-right" title="Work with ROIs in OMERO.iviewer" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a> </div> <hr/> <div role="contentinfo"> <p>© Copyright 2019-2024, Open Microscopy Environment (License: <a href="https://github.com/ome/omero-guides?tab=BSD-2-Clause-1-ov-file#readme">BSD-2</a>).</p> </div> Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>. </footer> </div> </div> </section> </div> <script> jQuery(function () { SphinxRtdTheme.Navigation.enable(true); }); </script> </body> </html>