We're Hiring!

Maximize Screen button - left panel options - web

General and open developer discussion about using OMERO APIs from C++, Java, Python, Matlab and more! Please new questions at https://forum.image.sc/tags/omero
Please note:
Historical discussions about OMERO. Please look for and ask new questions at https://forum.image.sc/tags/omero

If you are having trouble with custom code, please provide a link to a public repository, ideally GitHub.

Maximize Screen button - left panel options - web

Postby jwarren » Tue May 24, 2016 3:04 pm

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.
jwarren
 
Posts: 102
Joined: Wed Jul 09, 2014 1:35 pm

Re: Maximize Screen button - left panel options - web

Postby wmoore » Tue May 24, 2016 10:52 pm

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
User avatar
wmoore
Team Member
 
Posts: 674
Joined: Mon May 18, 2009 12:46 pm

Re: Maximize Screen button - left panel options - web

Postby jwarren » Wed May 25, 2016 3:36 pm

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?
jwarren
 
Posts: 102
Joined: Wed Jul 09, 2014 1:35 pm

Re: Maximize Screen button - left panel options - web

Postby wmoore » Thu May 26, 2016 9:33 am

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.
User avatar
wmoore
Team Member
 
Posts: 674
Joined: Mon May 18, 2009 12:46 pm

Re: Maximize Screen button - left panel options - web

Postby jwarren » Thu Jun 02, 2016 4:25 pm

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?
jwarren
 
Posts: 102
Joined: Wed Jul 09, 2014 1:35 pm

Re: Maximize Screen button - left panel options - web

Postby atarkowska » Sun Jun 05, 2016 11:27 am

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
 
Posts: 327
Joined: Mon May 18, 2009 12:44 pm

Re: Maximize Screen button - left panel options - web

Postby atarkowska » Sun Jun 05, 2016 11:33 am

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
atarkowska
 
Posts: 327
Joined: Mon May 18, 2009 12:44 pm

Re: Maximize Screen button - left panel options - web

Postby wmoore » Sun Jun 05, 2016 4:25 pm

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.
User avatar
wmoore
Team Member
 
Posts: 674
Joined: Mon May 18, 2009 12:46 pm

Re: Maximize Screen button - left panel options - web

Postby wmoore » Sun Jun 05, 2016 4:29 pm

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...
User avatar
wmoore
Team Member
 
Posts: 674
Joined: Mon May 18, 2009 12:46 pm

Re: Maximize Screen button - left panel options - web

Postby atarkowska » Sun Jun 05, 2016 5:25 pm

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
atarkowska
 
Posts: 327
Joined: Mon May 18, 2009 12:44 pm

Next

Return to Developer Discussion

Who is online

Users browsing this forum: Bing [Bot] and 1 guest

cron