picturae / openseadragonselection Goto Github PK

This selection tool is great - I just learned about openseadragon itself only in the last couple of days. What I now need is as follows: I have an image with many 'boxes' on it - akin to a flow chart. Ideally when the mouse cursor is over a box, the box outline would highlight. Then if the user clicks the mouse, an action is performed: a new tab is opened and loads the page at the address associated with the box, so the user can learn more about the topic in the box.

I'm old, but pretty new WRT javascript and Ajax but I have hacked around a bit. Would this be best to do this as a separate plugin? Or is there a way to set the parameters of this plugin to accomplish something similar?

In any case, thanks for producing this and making it available!

Please see pull request #27 as a possible solution.

In case you haven't seen this and have something to add:

http://stackoverflow.com/questions/34044890/openseadragonselection-toggle-selection-state-dynamically

When I use restrictToImage: true, and start selecting outside the image, dragging into the image, I expect the selection to start at the image border.

But when I drag into the image in a fast movement, the selection starts inside the image, ignoring some pixels over which I dragged fast (maybe because the drag-event is triggered to late and not on every pixel). When I drag slowly, the selection starts correctly direct at the image border.

This seems to be a bug!? Instead of just listening to the drag-event and accept them when they are inside the image, an alternative would be to set the start of the selection automatically to the image borders, when I drag into the image.

Hello, I would like to know if it is possible to change the default option to draw. Is it possible to use ctrl + click instead of just click?

Also, is it possible to, instead of rotating when you start drawing a new rectangle, to start a new selection? Basically, do the same that you do when you are selecting several files/items.

kind regards

so sorry i'm new studying javascript. i still couldn't understand how to use the plugin directly.
T^T
after Include dist/openseadragonselection.js, I only need to add "var selection = viewer.selection(options);" to my code, then "set selection.enable();"
is that correct?(coz i just couldn't get it.T^T)

There is a issue which happens after a image selection has been made.

To reproduce:

1. start chome browser
2. open webpage https://picturae.github.io/openseadragonselection/
3. open chrome developer tools (More tools / Developer tools)
4. developer tools - select the Toogle device toolbar to set tablet touch mode
5. webpage - select the tool selection icon (empty square)
6. create a selection on the image
7. confirm or cancel the selection
8. try to create a new selection (this will not be possible)

It would be great to provide an option to initialise the rectangle with fixed dimensions and maybe even a fixed rotational angle.

Something along the lines of:
width: 200, height: 300, angle: 0, allowResize: true|false

allowResize can be key to allowing the drag functionality to resize using the edges. If this is set to false, the rectangle can be placed onclick, instead of click and drag.

Ran into this problem yesterday while hunting for a solution with this plugin. I'll mostly try to modify the plugin myself for now.

Edit: After thinking it through, I think it makes sense to also provide an option to initialise at a specific coordinate as well.

This plugin is very useful, thanks!
An idea to select the whole viewer element (from the top left corner to the bottom right corner of the currently shown image section) would be the single click.

Then, in the selection mode, it would be:
if you drag the mouse, you select a rectangle
if you click the mouse without drag, you select the whole window.

Is there a reason why not to add this?

Hi,
At the Library of Congress we now allow users to perform clippings on an image using this plugin.
While implementing the plugin I noticed the following bug.
Resizing a selection box after it has been drawn functions incorrectly depending on how you initially draw the box.
If you start at the top left and draw down and to the right then resizing works correctly.
If you draw the selection box in any other way then resizing doesn't work correctly.
-Top, right going down and to the left
-x and width effect the wrong side of the box
-Bottom, right going up and to the left
-x and width effect the wrong side of the box
-y and height effect the wrong side of the box
-Bottom, left going up and to the right
-y and height effect the wrong side of the box

I have already made a fix for this and will submit a pull request

Hi,
I want to be able to init the selection with showConfirmDenyButtons = true and with a button turn this setting to false.
I can't make this change the actual behaviour once the selection is instanciated.
Can you provide a way of doing so? Or am I missing something?

Thanks!

I am still learning to navigate in openseadragon and your selection plugin, is there any built in functionality to convert a openseadragon overlay to a selection?

Currently I create a normal overlay in the onSelection function of a selection, to create an overlay in the area selected. But I want to be able to convert back to the selection, to let the user adjust the selection they previously made. Are there any built in stuff I can use, or do I need to calculate the x,y, width and height properties based on the DOM element myself?

Is it possible to change the Toggle Button's tooltip with something like the following? Seems like it should work, but setting the tooltip does not seem to override the source definition of the tooltip:

selectshun =viewer.selection({
keyboardShortcut: 'q',
onSelection: function(rect) {....},
});
selectshun.toggleButton.tooltip = "Toggle Selection: keybd = q";

The selected image obtained is shifted as shown in images below.

The code I used is as follows:

    element:                 null, // html element to use for overlay
    showSelectionControl:    true, // show button to toggle selection mode
    toggleButton:            null, // dom element to use as toggle button
    showConfirmDenyButtons:  true,
    styleConfirmDenyButtons: true,
    returnPixelCoordinates:  true,
    keyboardShortcut:        'c', // key to toggle selection mode
    rect:                    null, // initial selection as an OpenSeadragon.SelectionRect object
    allowRotation:           true, // turn selection rotation on or off as needed
    startRotated:            false, // alternative method for drawing the selection; useful for rotated crops
    restrictToImage:         true, // true = do not allow any part of the selection to be outside the image
    onSelection:             function(rect) {
                                // ctx = $(".openseadragon-canvas").children()[0].getContext("2d");
                                ctx = viewer.drawer.context;
                                // rect2 = viewer.world.getItemAt(0).getClip(rect);

                                imgData = ctx.getImageData(x=rect.x,y=rect.y,rect.width,rect.height);
                                loadImageToCanvas(imgData);
                                alert(rect + ' Center point: ' + rect.getCenter() + ' Degree rotation: ' + rect.getDegreeRotation());
                                // console.log(rect);
                            },
    navImages:               { // overwrites OpenSeadragon's options
        selection: {
            REST:   'selection_rest.png',
            GROUP:  'selection_grouphover.png',
            HOVER:  'selection_hover.png',
            DOWN:   'selection_pressed.png'
        },
        selectionConfirm: {
            REST:   'selection_confirm_rest.png',
            GROUP:  'selection_confirm_grouphover.png',
            HOVER:  'selection_confirm_hover.png',
            DOWN:   'selection_confirm_pressed.png'
        },
        selectionCancel: {
            REST:   'selection_cancel_rest.png',
            GROUP:  'selection_cancel_grouphover.png',
            HOVER:  'selection_cancel_hover.png',
            DOWN:   'selection_cancel_pressed.png'
        },
    }
});```

Am I doing anything wrong? 

Updated to openseadragon.js version 4.0.0 and now the selection plugin still does not function.
Anyone else have an issue?
Have to continue using OSD version 2.4.2 just so the selection plugin keeps functioning...
The other "select-plugin" is way too complicated, uses npm (what is that?) and I can't use the CSS mods and custom callbacks I can with this plugin.
Any plans to correct this plugin?

When focus is returned to the viewer keyboard events are no longer received.

I have been unable to get the selection plugin to function and, in fact, the main openseadragon stops functioning if I include the selection plugin. Although I am very new to openseadragon, I have a lot of time invested in GigaPan and gigapixel imagery. Perhaps I need to see more examples of how to include the plugin fucntionality. Below is how I have implemented the plugin:

Any suggestions?

<div id="openseadragon1" style="width: 100%; height: 720px;" >
</div>
<div id="note01">Content for  id "note01" Goes Here</div>
<script type="text/javascript" src="openseadragon/openseadragon.min.js"></script>
<script type="text/javascript" src="openseadragon/openseadragon-scalebar.js"></script>
<script type="text/javascript" src="openseadragon/openseadragonselection.js"></script>

<script type="text/javascript">
    var viewer = OpenSeadragon({
        id: "openseadragon1",
        showNavigator: true,
        controlsFadeLength: 650,
        maxZoomLevel: 20,
       maxZoomPixelRatio: Infinity,
       minPixelRatio: 0.25,
       preserveImageSizeOnResize: true,
       placeholderFillStyle: "#AAAAAA",
       tileSources: {
            Image: {
                xmlns:    "http://schemas.microsoft.com/deepzoom/2008",
                Url:      "CasperFm-xbed01/CasperFm-xbed01_files/",
                Format:   "png", 
                Overlap:  "1", 
                TileSize: "254",
                Size: {Height: "14835", Width:  "10955"}
            }
        }
    });

    viewer.scalebar({
        type: OpenSeadragon.ScalebarType.MICROSCOPY,
                pixelsPerMeter: 16000.0,
                minWidth: "75px",

                location: OpenSeadragon.ScalebarLocation.BOTTOM_LEFT,
                xOffset: 5,
                yOffset: 10,
                stayInsideImage: true,
                color: "rgb(50, 50, 50)",
                fontColor: "rgb(75, 75, 75)",
                backgroundColor: "rgba(255, 255, 255, 0.5)",
                fontSize: "medium",
                barThickness: 2
               });
     var selecshun = viewer.selection({
        element:                 null, // html element to use for overlay
        showSelectionControl:    true, // show button to toggle selection mode
        toggleButton:            null, // dom element to use as toggle button
        showConfirmDenyButtons:  true,
        styleConfirmDenyButtons: true,
        returnPixelCoordinates:  true,
        keyboardShortcut:        'c', // key to toggle selection mode
        rect:                    null, // initial selection as an OpenSeadragon.SelectionRect object
        startRotated:            false, // alternative method for drawing the selection; useful for rotated crops
        startRotatedHeight:      0.1, // only used if startRotated=true; value is relative to image height
        restrictToImage:         false, // true = do not allow any part of the selection to be outside the image
        onSelection:             function(rect) {}, // callback
        prefixUrl:             "openseadragon/images/" /// placed image files in this folder! null, // overwrites OpenSeadragon's option
        navImages:  { // overwrites OpenSeadragon's options
            selection: {
                REST:   'selection_rest.png',
                GROUP:  'selection_grouphover.png',
                HOVER:  'selection_hover.png',
                DOWN:   'selection_pressed.png'
            },
            selectionConfirm: {
                REST:   'selection_confirm_rest.png',
                GROUP:  'selection_confirm_grouphover.png',
                HOVER:  'selection_confirm_hover.png',
                DOWN:   'selection_confirm_pressed.png'
            },
            selectionCancel: {
                REST:   'selection_cancel_rest.png',
                GROUP:  'selection_cancel_grouphover.png',
                HOVER:  'selection_cancel_hover.png',
                DOWN:   'selection_cancel_pressed.png'
            },
        }
    });

    selecshun.enable();


</script>

Images for the controls does not exist in the openseadragon project so I am wondering if I can load these .png files from my filesystem. So far, to override the option navImages is not a solution because the plugin still search from openseadragon.github.com domain

Hi,

How can I add new points to an overlay at runtime? And remove a point when user click on existing point as well as drag a point to new position?

sorry, coming again. i still couldn't make it...
the thing is, i've already got a view in my project, and it goes well in basic functions.
then i add openseadragonselection.js to my html, and set selection.enable()(not sure if that's right).
PLZ tell me what should i do next...
For now i don't need to show the RGB & ZoomLevels beside the viewer like the demo does.

Hi,

Thanks for working on this, looks interesting. I'm trying it out and I noticed that there are no images for

selection_hover.png
selection_pressed.png
selection_confirm_rest.png
selection_confirm_hover.png
selection_confirm_grouphover.png
selection_confirm_pressed.png
selection_cancel_rest.png
selection_cancel_grouphover.png
selection_cancel_pressed.png
selection_cancel_hover.png

in the repo. Could you consider posting some?

This could be a very helpful plugin.

Thanks

Hello,
I've noticed that the titles of the two buttons displayed over the selection (confirm/cancel) are always the same, despite being properly initialized with distinct values.

This problem can be observed on the test page (both buttons have th 'Ok' label) : https://picturae.github.io/openseadragonselection/

I am trying to add an overlay after a successful selection. I want the overlay be positioned and sized like the selection.

My thought was to use the Rect object that is being passed to the onSelection function, like so

onSelection: function(rect) {
    viewer.addOverlay({
        element: $('<div class="overlay" style="background-color: red"></div>')[0],
        location: rect
    });
}

It seems that the overlay is being positioned way off screen somewhere, maybe because the rect that is being passed in has values for x, y, width, and height in pixels, and that the addOverlay location option expects the values to be in percentages.

If I instead set the location to

location: new OpenSeadragon.Rect(0.33, 0.75, 0.5, 0.25)

I can hardcode an overlay.

How can I correctly add an overlay to the selected area? Do I need to tell OpenSeadragon to accept pixel values? Or should I somehow convert the values?

And yes, this is my first time working with OpenSeadragon, so I might have missed something very obvious :)

I'd like to respond to the on selection Enable callback (when the user clicks the selection button) , is there an event I can respond to?

Thanks

When you hit the selection button it should stay lit somehow so you know you're in that mode.

Updated to openseadragon.js version 3.0.0 and now the selection plugin does not function.
Anyone else have an issue?

Thanks for this handy plugin, it would be great if it could be published to the npm registry!

As far as I understand, rect object refers to image coordinates. Is there a way to read browser window coordinates instead? (for example to make temporary copy of visible part of image)

Corners should be style-able like handles.

margin, top and left can be specified for handleStyle, but are ignored for cornersStyle.

Hello,

I would like to draw a single line instead of a rectangle, and then get the start/end coordinates of that line.

Is that possible to implement this feature on this plugin with small effort?

I have observed it in my own application as well as in the online demo of the plugin. Tested on a few mobile browsers: chome, opera, samsung internet. It seems to work on Firefox.
Steps to reproduce:

1. Open demo page on a mobile browser (chome, opera, samsung internet): https://picturae.github.io/openseadragonselection/
2. Drag viewport with one finger to move, movement is smooth
3. Enable selection
4. Drag and create a selection. Close the dialog with information.
5. Disable selection
6. Drag viewport with one finger to move, movement is no longer working properly

Hi,

Is it possible to call the draw function in the onSelection callback? If so, how would you do it?

Thank you.

How might one grab the location and coordinates of the rectangle that was created? Are their docs I could be pointed to?
Thanks

People often like to play with a demo before deciding on using a library.

I figured I would ask here first, since you write a class to deal with rotation on the overlay. I have saved all the relevant data from the onSelection callback, including rotation. I'm having issues rendering them back with rotation being applied. For now I just use viewer.addOverlay which I know doesn't consider rotation

Is there an easy way to instantiate a static SelectionOverlay so it will hook all of the onDraw or onHtml methods?

Is there a way to enable selection mode without using your built-in selection control or the keyboard shortcut?

I have a button on my page, completely separate from anything openseadragon-related, and I want to make it so that the button callback initiates "selection mode".

Hello,

Web development beginner, I'm trying to optimize an existing code using openseadragon and jQuery to zoom or print selected picture after a dialogbox.
These two buttons are now ok, but I noticed after zone selecting, if I click outside the zone and move the mouse, box is rotating.
I tryed

var zoomOrPrintSelection = viewer.selection({
        allowRotation:  false,

but without success

How to deactivate this box rotation, please?

Thanks in advance

Hi,

I have some issues using both svg-overlay and openseadragonselection at the same time.

If i do not use the svg-overlay, the selection works fine, but when i enable the svg-overlay i can no longer use the selection.

Any hints on how I can get both svg-overlay and openseadragonselection to work at the same time?

Best Regards
Daniel

Hi, How i can use plugin in React?
If I get right, OpenSeaDregon loads like AMD module, but plugin cant this?