Maximize Screen button - left panel options - web

[jwarren]

Hi People

I've just noticed a "maximize" button with a monitor type icon in the right hand side of the img_detail view for a very large image we are displaying.

I'd really like to have this available for all our images instead of just a very few? Is there a way I can call this using javascript or set it up as a preference somewhere?

Example page we have in development is here: https://dev.mousephenotype.org/data/ima ... LZ_075_001

Using OMERO 5.1.3 at the moment.

The other thing is that we would really like to be able to customise the left side panel of controls to make it smaller - by using url request parameters to do this would be fine or a global preference I wouldn't mind either.

Jason has mentioned some UI improvements are coming - but any tips that we can do this now our end would be greatly appreciated?

Cheers

Jonathan.

[wmoore]

Hi Jonathan,

The 'Full Screen' functionality is a feature of the PanoJs viewer we use for "Big" tiled images and there isn't really an easy way to replicate it for regular-sized images.
I'll try to think of a way around this...

However, you can manually configure your own viewport with the controls you want.
See http://downloads.openmicroscopy.org/pre ... kshop/#/13
for a simple example as well as the previous and next slides of that presentation as examples of custom created controls.

I just created an example using images from your development server (without any 'left panel' controls)
http://will-moore.github.io/weblabs/image_viewer_demo/
And the code for that is at https://github.com/will-moore/weblabs/b ... index.html

Hopefully that will give you some ideas.
Let us know how you get on.

Regards,

Will

[jwarren]

Great- thanks Will.

This looks promising. Is there a minimal .css file I can use that will display the viewport correctly? When I add the one in the example it decimates our websites and obviously without your css the viewport doesn't render correctly.

My only other solution is to create my own jsp page using your code and then call that from an iframe to isolate the omero css from ours...

I'm interesting in finding out more about the caching urls as this is a big win for us. Using the birds eye url seems to have sped up our thumbnails... is there more documentation on this aspect?

[wmoore]

Hi,

I've updated my example, trying to use minimal css files.
As you'll see in the comments there, the min.css is a concatenation of all the css we use in our full viewer. However, if you only use the viewport and not any other controls (channel sliders, colorpicker, info panels etc) then you can get away with excluding most of these.
You could also remove gs_slider.css if you don't need Z or T sliders?

I should warn you that there's a bit of trial and error here and we don't test this for each release so you'll need to reassess this when you come to upgrade OMERO.

The render_birds_eye_view uses size 96 of thumbnail, which is the size that OMERO caches internally, so it will be faster. It's fine to use render_birds_eye_view, or you could explicitly use size 96 (as I've updated in the example).
The documentation is currently lacking on this I'm afraid. I'll create a ticket to fix that.

Cheers,

Will.

[jwarren]

Thanks Will. This works up to a point at the moment. When we access a large image as given in my examples but then access a smaller image in the same viewport the smaller image won't open in the viewport. It says "loading..." in red and then just doesn't show the image - it also shows in the OMEROweb.logs that the request was made and processed.

Is there a workaround for this?

[atarkowska]

Hi Jonathan,

Do you have live link to the failing image? Did you also try to hard refresh your webbrowser in case something was incorrectly cached?

If not, we will need more details. Could you try to run Development tool or Firebug to check if there is any error?

Ola

[atarkowska]

Did you also check my examples from the presentation for a reference?
All below use OMERO 5.1.4

Image:
- html code: http://users.openmicroscopy.org.uk/~ata ... iewer.html
- jsfiddle: http://jsfiddle.net/aleksandratarkowska/qhqh2583/

Tiled image:
- html code: http://users.openmicroscopy.org.uk/~ata ... image.html
- jsfiddle: http://jsfiddle.net/aleksandratarkowska/MSDPX/

Ola

[wmoore]

Ola, I updated my example at http://will-moore.github.io/weblabs/image_viewer_demo/ to reproduce the bug Jonathan reported. Bug is also in 5.2.3 (nightshade) but I haven't worked out what the problem is yet.
If you click on the "small" image thumbnails for the left viewer, they load into the viewport fine. But after loading the Big image into the viewport, "small" images don't load.

[wmoore]

It seems that the id="viewport-img-tiles" element is not removed or hidden when a small image is loaded after a big image. I'll have a look at a fix for this...

[atarkowska]

Thanks, I see what the problem is. I think load function never been designed/tested against that usecase. You would need to reinitialize the entire viewport and the load new image. Jonathan, we will try to fix in the next release.

Ola