Web workshop - Paris 2015

Outline

What's new in OMERO.web?
The OMERO.web framework
Creating an OMERO.web app
Example apps
- OMERO.gallery
- OMERO.figure

What's new in OMERO.web?

Search UI Demo on youtube
Map annotations
Preview panel
Image viewer
Robot Framework Selenium tests
OMERO.figure 1.1

Robot Framework
Selenium Tests


# E.g. Run rdef tests on Chrome:

$ ./build.py -f components/tests/ui/build.xml web-chrome -DTEST=rdef_test.txt

Robot Framework
Selenium Tests

Daily Test Results

OMERO API

Uses ICE (ZeroC) for remote API access

OMERO.web framework

OMERO.web documentation

webgateway API

Json data: e.g. Image json webgateway/imgData/<imageId>/

Image rendering: webgateway/render_image/<imageId>/<z>/<t>/

See WebGateway documentation

Create an OMERO.web app

OMERO.web uses the Django framework to support apps
Apps can be installed onto existing OMERO.web deployments
See OMERO.web developer docs | Creating an app documentation

Show a Dataset of images


  # urls.py
  url( r'^dataset/(?P<datasetId>[0-9]+)/$', views.dataset ),
                    
  # views.py
  @login_required()
  def dataset(request, datasetId, conn=None, **kwargs):
    ds = conn.getObject("Dataset", datasetId)
    return render(request, "dataset.html", {"dataset": ds})


  <!-- dataset.html -->
  <html><body>

    <h1>{{ dataset.getName }}</h1>

    {% for i in dataset.listChildren %}
      <img src="{% url 'webgateway.views.render_thumbnail' i.id %}" />
      {{ i.getName }}
    {% endfor %}

  </body></html>

See Creating an app documentation

App examples

Ship with OMERO.web:
- webgateway | webclient | webadmin
External sites:
- Stowers ODR | Sysgro (pombe) | JCB DataViewer
OME projects:
- OMERO.figure | OMERO.webtagging
Examples & Prototypes:
- webtest | OMERO.gallery

Webclient plugins

Hooks to bring app content into webclient (center & right)
See webclient plugin docs

Webclient plugins

webtest examples included in OMERO.web:


$ bin/omero config append omero.web.ui.right_plugins
        '["ROIs", "webtest/webclient_plugins/right_plugin.rois.js.html", "image_roi_tab"]'

Example: OMERO.gallery

Created as an example 'public gallery' app
Provides basic Group -> Project -> Dataset -> Image browsing
Uses bootstrap css framework
- Supports mobile, including phones
- Easy to customize
Example: Liverpool CCI OMERO gallery From Raphaël Lévy's lab.

OMERO.figure

http://will-moore.github.io/figure/

Services used by OMERO.figure

OMERO.figure tech

Backbone.js
- model
- events
- view
- templating
- router
Bootstrap - css, icons, js
Mousetrap - Keyboard bindings
Raphael - Drag handles etc
Reportlab - PDF generation

Summary

Apps available to install:
- webtest | OMERO.gallery
- OMERO.figure | OMERO.webtagging
Or write your own!

Apps for Extending OMERO.web

OME Paris 2015

Outline

What's new in OMERO.web?

Robot Framework
Selenium Tests

Robot Framework
Selenium Tests

OMERO API

OMERO.web framework

webgateway API

Create an OMERO.web app

Show a Dataset of images

App examples

Webclient plugins

Webclient plugins

Example: OMERO.gallery

OMERO.figure

Services used by OMERO.figure

OMERO.figure tech

Summary

Thank you

Any Questions?

Apps for Extending OMERO.web

OME Paris 2015

Outline

What's new in OMERO.web?

Robot FrameworkSelenium Tests

Robot FrameworkSelenium Tests

OMERO API

OMERO.web framework

webgateway API

Create an OMERO.web app

Show a Dataset of images

App examples

Webclient plugins

Webclient plugins

Example: OMERO.gallery

OMERO.figure

Services used by OMERO.figure

OMERO.figure tech

Summary

Thank you

Any Questions?

Robot Framework
Selenium Tests

Robot Framework
Selenium Tests