JSFiddle - React, Tailwind, and code Playground

by Aleksandra Tarkowska

HTML

<script src="https://learning.openmicroscopy.org/dundee/static/omeroweb.viewer.min.js"></script>
<link rel="stylesheet" href="https://learning.openmicroscopy.org/dundee/static/omeroweb.viewer.min.css">
<h1>Title: <span id="image-name"></span></h1>

    <label for="viewport-scalebar">Scalebar</label>
    <input id="viewport-scalebar" type="checkbox" disabled/>

    <button id="viewport-show-rois" title="Show ROIs">Show ROIs</button>
    <button id="viewport-hide-rois" title="Hide ROIs">Hide ROIs</button>

<div id="viewport" class="viewport"></div>

CSS

.viewport {
    height: 350px;
    width: 450px;
    padding: 10px;
}

JavaScript

$(document).ready(function () {
    $.ajaxSettings.cache = false;
});

var viewport;

var show_rois = function() {
    var theT = viewport.getTPos();
    var theZ = viewport.getZPos();

    if (!viewport.viewportimg.get(0).show_rois) {
        var options = {'width':viewport.loadedImg.size.width, 
                       'height':viewport.loadedImg.size.height,
                       'json_url':'https://learning.openmicroscopy.org/dundee/webgateway/get_rois_json/'+viewport.loadedImg.id};
        if (viewport.loadedImg.tiles) {
            options['tiles'] = true;
        }

        viewport.viewportimg.roi_display(options);
        viewport.viewportimg.get(0).setRoiZoom(viewport.viewportimg.get(0).getZoom());
    }

    // loads ROIs (if needed) and shows. 
    viewport.viewportimg.get(0).show_rois(theZ, theT);

}

var refresh_rois = function () {
    // re-plots the ROIs (if currently shown) for new Z and T position
    if (viewport.viewportimg.get(0).refresh_rois) {
        var theT = viewport.getTPos();
        var theZ = viewport.getZPos();
        viewport.viewportimg.get(0).refresh_rois(theZ, theT);
    }
}

var hide_rois = function() {
    // hides the display of ROIs.
    if (viewport.viewportimg.get(0).hide_rois) {
        viewport.viewportimg.get(0).hide_rois();
    }
}

var show_scalebar = function () {
  if (!viewport.viewportimg.get(0).show_scalebar) {
  // if the Scalebar plugin has not been initialised (method not available...) init and load Scalebar...
      var options = {'pixSizeX': viewport.getPixelSizes().x,
                     'imageWidth': viewport.getSizes().width};
      if (viewport.loadedImg.tiles) {
          options['tiles'] = true;
      }
      viewport.viewportimg.scalebar_display(options);
  }

  viewport.viewportimg.get(0).setScalebarZoom(viewport.getZoom()/100 );
  viewport.viewportimg.get(0).show_scalebar();

}

var hide_scalebar = function () {
    viewport.viewportimg.get(0).hide_scalebar();
}

var _imageLoad = function (ev,...