web-client.html

---
layout: default
title: Using OMERO.web
menu-id: l1-web
pdfs:
    - web-client.pdf
---
<p>Using OMERO.web to view and work with image data via a web browser.</p>

<p>You need to use the URL provided by your institute’s OMERO administrator to access the OMERO.web client.</p>

<p>Logging in, you do not have to enter a server name, but otherwise it is the same as for OMERO.insight, using the same username and password.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<ol class="step">

<li><p class="first">The default screen shows your data tree in the left-hand panel.</p>

<p>When data is selected in the tree, the thumbnails are displayed in the center panel, and the metadata and other information in the right-hand panel.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientHome.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientHome.jpg" style="width: 75%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">To view an image in the <span class="bold">Image Viewer</span>, select the image in the data tree and click on the <span class="bold">Launch Full Viewer</span> button.</p>

<p>or double click on the image or thumbnail.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientView.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientView.jpg" style="width: 87.5%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">In the <span class="bold">Image Viewer</span> images can be viewed in <span class="bold">Normal</span>, <span class="bold">Maximum
Intensity</span> or <span class="bold">Split-Channel</span>.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientViewerOptions.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientViewerOptions.jpg" style="width: 80%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">Scroll or step through Z stacks using the slider and controls to the left of the image, and time sequences (T) using the slider and controls below the image.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientViewerSliders.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientViewerSliders.jpg" style="width: 87.5%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">Zoom in and out of the image using the up and down arrows in the text box.</p>

<p>Click the <span class="bold">1:1</span> button to view at true size.</p>

<p>Click the diagonal arrow button to zoom to fit the window.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientViewerZoom.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientViewerZoom.jpg" style="width: 75%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">Click on <span class="bold">Edit</span> to open the <span class="bold">Rendering Details</span> window.</p>

<p>Use the sliders or text boxes to adjust settings for the channels.</p>

<p>Toggle channels and color on and off using the color wells and checkbox.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientViewerRendering.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientViewerRendering.jpg" style="width: 100%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">Click on <span class="bold">Image Information</span> to see the basic information and dimensions of the image.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientViewerInfo.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientViewerInfo.jpg" style="width: 100%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">Click on <span class="bold">Image Link</span> to generate a URL which can be copied and pasted.</p>

<p>This link provides direct access via a web browser to your image, allowing people who are outside your group or not even OMERO users to view your image.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientViewerLink.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientViewerLink.jpg" style="width: 70%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">Click on <span class="bold">Show ROIs</span> to view ROIs on the image and see details in the
pop-up window (only visible if the image has ROIs).</p>

<p>Existing ROIs can be viewed but cannot be edited, and new ROIs cannot be added.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientViewerROI.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientViewerROI.jpg" style="width: 100%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">In the <span class="bold">General</span> tab of the right-hand panel, click on the pencil icon to edit the image name or image description.</p>

<p>Summary details of the image can be seen below the description.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientGeneral1.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientGeneral1.jpg" style="width: 75%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">Click on the <span class="bold">Link</span> button to generate a URL to share the image (as described previously).</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientGeneral2.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientGeneral2.jpg" style="width: 75%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">Click on the + button to add a Tag or Attachment.</p>

<p>You can attach existing tags or files, create and attach new tags or upload and attach files from disks.</p>

<p>Click on <span class="bold">Accept</span> to complete.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientGeneral3.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientGeneral3.jpg" style="width: 100%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">Enter a new comment in the text box and click on the <span class="bold">Add Comment</span> button to save.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientGeneral4.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientGeneral4.jpg" style="width: 70%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">If you belong to more than one group, you can interact with the data of other users in your group.</p>

<p>Click on the drop-down arrow to the right of your name in the bar above the data tree, and select the desired group and user.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientGroups.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientGroups.jpg" style="width: 100%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">You can also share data with other users in different groups by adding it to your <span class="bold">Public</span> list.</p>

<p>Select the image(s) you wish to share.</p>

<p>Click on the <span class="bold">Basket</span> icon in the toolbar.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientShare1.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientShare1.jpg" style="width: 75%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">A red number, representing the number of shared images, will appear in the Basket icon to the right side of the top toolbar.</p>

<p>Click on the numbered <span class="bold">Basket</span> button to view a list of shared items in the basket.</p>

<p>Click on the <span class="bold">Manage Basket</span> button in the drop-down list to view the images.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientShare2.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientShare2.jpg" style="width: 100%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">Select an image and click on the <span class="bold">Globe</span> button in the <span class="bold">Basket</span> window to share it.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientShare3.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientShare3.jpg" style="width: 100%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">In the <span class="bold">Share</span> window add a message and select the members you wish to share the data with.</p>

<p>Click <span class="bold">Accept</span> when you have finished.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientShare4.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientShare4.jpg" style="width: 100%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">Click on the <span class="bold">Public</span> tab of the left-hand panel to view the data shared with you and other users.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientShare5.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientShare5.jpg" style="width: 100%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li>

<li><p class="first">From the OMERO.web client, you can download and run a <span class="bold">Java Web Start</span> version of OMERO.insight.</p>

<p>Using the <span class="bold">Java Web Start</span> OMERO.insight client enables you to import data, edit ROIs and use other functionality not yet supported by the OMERO.web client.</p>

<p><span class="bold">Java Web Start</span> also enables OMERO.insight client to be used on machines where restrictions prevent you from installing new software.</p>

<p>Click on the <span class="bold">Java Web Start</span> button and follow the instructions, accepting the software as “Trusted”.</p>

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<img alt="{{ site.baseurl }}/images/webclientWebStart.jpg" class="align-center" src="{{ site.baseurl }}/images/webclientWebStart.jpg" style="width: 100%;" />

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

</li><!-- end page list item -->

</ol> <!-- end page list -->

<div class="line-block">
<div class="line"><br /></div> <!-- end #line -->
</div> <!-- end #line-block -->

<div class="page-end">
<p>All Tutorial Material is available on line at: <a href="http://help.openmicroscopy.org">www.help.openmicroscopy.org</a></p>
<p>The Main OME website is at: <a href="http://www.openmicroscopy.org">www.openmicroscopy.org</a></p>
</div> <!-- end page-end -->

</li>