Maximize Screen button - left panel options - web

[jwarren]

Thanks Ola and Will for putting in the time to find the exact issue here.

I hope this will be my last question on this thread - how do I reset or re-initialise the viewport?
I've tried all the obvious ways I can think of but nothing seems to allow me to remove the viewport and create another in an effective way to replace the large image? I couldn't find any documented way to do this.

Thanks

Joanthan.

[wmoore]

Hi Jonathan,

I committed a workaround to the example above:
https://github.com/will-moore/weblabs/c ... 5f92fd69e4
It's a bit ugly but seems to work OK.

Ola also has a fix for the original bug in a PR at https://github.com/openmicroscopy/openm ... pull/4695/
If you feel comfortable applying those changes to your own OMERO server then that may provide you an alternative to the above workaround.

I'm afraid you will have to assess both of these approaches and satisfy yourself that they are suitable for your own use.
Apologies that we don't routinely test the repeated use of viewport.load(id) in production, or we might have caught this bug sooner.
We'll try to address that.

Regards,

Will.

[jwarren]

Thanks again Will. I'm afraid I may not be too popular with you guys soon as I've found another bug with the small viewer (not the larger plugin one). In your example viewer you can see it using these two ids:
viewport.load(18271);
viewport2.load(17867);

The left viewport controls will now control the right viewport image as well as it's own. Swapping the constructors order will then result in the right viewport controlling the left viewport.

Is there a build script for the omeroweb.viewer.min.js or all the js scripts so I can apply the new patches and minify on my older server version?

Thanks

Jonathan.

[jwarren]

I should also add that the linked viewer functionality/bug is something we REALLY want. But just not by default in this way.

[atarkowska]

Could you show us your example? We cannot reproduce the issue.

did you name them viewport and viewport2?

Code: Select all

                var $parent = $("#viewport").parent();
                // Remove viewport container since the DOM element contains refs to old viewer...
                $("#viewport").remove();
                // ...recreate new component in it's place...
                $parent.append("<div id='viewport' class='viewport'></div>");

Code: Select all

                var $parent = $("#viewport2").parent();
                // Remove viewport container since the DOM element contains refs to old viewer...
                $("#viewport2").remove();
                // ...recreate new component in it's place...
                $parent.append("<div id='viewport2' class='viewport'></div>");

Ola

[jwarren]

You will need to get rid of a couple of jsp tags but here it is:

Code: Select all

  <script>
    $(function(){
        /* Prepare the left viewport */
        var viewport = $.WeblitzViewport($("#viewport"), "https://wwwdev.ebi.ac.uk/mi/media/omero/webgateway/", {
            'mediaroot': "https://wwwdev.ebi.ac.uk/mi/media/static/"
        });
        /* Load the selected image into the viewport */
        viewport.load(18271);


        // Alternative for testing non-big image viewer
        // viewport = $.WeblitzViewport($("#viewport"), "https://learning.openmicroscopy.org/dundee/webgateway/", {
        //         'mediaroot': "https://learning.openmicroscopy.org/dundee/static/"
        //     });
        // viewport.load(1296);


        /* Prepare right viewport */
        var viewport2 = $.WeblitzViewport($("#viewport2"), "https://wwwdev.ebi.ac.uk/mi/media/omero/webgateway/", {
            'mediaroot': "https://wwwdev.ebi.ac.uk/mi/media/static/"
        });
        /* Load the selected image into the viewport */
        viewport2.load(17867);

        $(".thumb").click(function(){
            var iid = $(this).attr('data-id');
            iid = parseInt(iid);
            viewport.load(iid);
        });

        $(".thumb2").click(function(){
            var iid = $(this).attr('data-id');
            iid = parseInt(iid);
            viewport2.load(iid);
        });
    });
    </script>
   
    <style type="text/css">
    .viewport {
        height: 400px;
        width: 500px;
    }
    .thumbList {
        width: 500px;
        float: left;
        margin: 20px;
    }
    </style>
   
</jsp:attribute>
<jsp:body>

<div class="thumbList" style="float:left">
        <div id="viewport" class="viewport"></div>
    </div>
    <div class="thumbList" style="float:left">
        <div id="viewport2" class="viewport"></div>
    </div>

    <div style="clear: both; height:40px"></div>
   
    <div class="thumbList">
        <img class="thumb" data-id="86973" src="https://wwwdev.ebi.ac.uk/mi/media/omero/webgateway/render_thumbnail/86973/96/"/>

        <img class="thumb" data-id="87133" src="https://wwwdev.ebi.ac.uk/mi/media/omero/webgateway/render_thumbnail/87133/96/"/>

        <img class="thumb" data-id="86976" src="https://wwwdev.ebi.ac.uk/mi/media/omero/webgateway/render_thumbnail/86976/96/"/>
    </div>
    <div class="thumbList">
        <img class="thumb2" data-id="87044" src="https://wwwdev.ebi.ac.uk/mi/media/omero/webgateway/render_thumbnail/87044/96/"/>

        <img class="thumb2" data-id="87015" src="https://wwwdev.ebi.ac.uk/mi/media/omero/webgateway/render_thumbnail/87015/96/"/>

        <img class="thumb2" data-id="86899" src="https://wwwdev.ebi.ac.uk/mi/media/omero/webgateway/render_thumbnail/86899/96/"/>
    </div>
</jsp:body>


[jwarren]

https://github.com/mpi2/PhenotypeData/b ... icTest.jsp

[wmoore]

Hi Jonathan,

I can't find any bug in the latest code you pasted - works for me.
But it looks like you haven't added the bug workaround to that code (resetting the viewport) as in Ola's code above.

I updated my code to use the reset viewport fix for both viewport and viewport2.
See http://will-moore.github.io/weblabs/image_viewer_demo/
Do you see any bug with that example?
If not, then you just have to be careful of when to use viewport vv viewport2.

Hope that helps,

Will.

[jwarren]

Hi Will. You won't see the bug with that example as one image is small and one is large so uses the large plugin. If you swap both to small images you will see the left controls for 1:1 and + and - will control the right hand panel as well.

[jwarren]

Is there a script to minify the js? I would rather do the proper fix than reload the whole viewport every time as speed is something we would ideally like.