emigre / openseadragon-annotations Goto Github PK

Trying to initialize the annotation plugin as described in the current documentation, using
const annotations = new OpenSeadragon.Annotations({ viewer });
generates an error

However, when I use viewer.initializeAnnotations(); as in previous versions of the documentation, the plugin loads and initializes without an error.

When I drew lines displayed on openseadragon using openslide, the position of lines I drew is not the mouse position.
why?

Hi,
I'm trying to use the annotations.js.
I am deploying it from my main html file like this:

I need to create annotation per viewer.
I'm doing it like this:
myAeeay.push(new OpenSeadragon.Annotations({viewre_}))
I get an error saying that Annotations is undefined.
What am I missing?
Really thanks for any help and guidance

vue.esm.js?3153:591 [Vue warn]: Error in mounted hook: "Error: The OpenSeadragon Annotations plugin is already running"

found in

---> at src\pages\reading\reading.vue
at src\App.vue

how can i use this function ?
thank you!!!!!

when i npm install openseadragon-annotations
and i use import "openseadragon-annotations/dist/openseadragon-annotations.js";
its error!! the error is Uncaught TypeError: Super expression must either be null or a function, not undefined
how should i do?
i really want to know!!!
And i use VUE.js in my project...
help me!!!! please
thanks so much!!!

Hi,
See your document on github,openseadragon-annotations,
Write a demo, but now there are some problems need to ask you, when the rendering of the picture covered the entire layer, click the mouse to draw a circle, the coordinates of the location of the mouse will move with the mouse to draw the desired graphics , But when the rendering of the bottom of the picture is not covered with the entire screen, the drawing will be wrong, the positioning of the coordinates will be a serious shift. The more the lower right corner, the more powerful shift.

Your code demo, no problem is because your bottom rendering of the picture is a whole, if it is very small, or the picture erected to show, it may also report this error.

(Error example), red left arrow part, this area, if this area and the picture zoom to a certain proportion, it is not Will have this problem (the correct part of the link:).

The following video demo section, (video-1) example is to render the picture and the browser zoom to A certain proportion of the correct drawing of the example, so the operation, the coordinates and the line part of the error.

(Video-2) , it will be offset.

I would like to achieve the mouse click down when the drawing will move with my mouse to move, not the underlying rendering of the size of the picture and occupy the size of the screen to change the offset position of the drawing~

I try to see your source code, try for several days, or failed to solve this problem, would like to ask you, you can help solve the next thing, or provide a very important idea, very grateful ~ very important ~ Thank you ~

Look forward to your sincere reply

Is that doable?

The image loads and the annotations show up when I draw them, and when I move the canvas around it all works perfectly, but when I zoom in, the annotation get squished horizontally and distorts separately from the image. I'm not sure how to fix it?

Why might this be happening?

Failed to compile.

./node_modules/openseadragon-annotations/src/components/Annotations.js
Module parse failed: Unexpected token (98:8)
You may need an appropriate loader to handle this file type.
|       'svg',
|       {
|         ...svgProperties,
|         style: svgStyles,
|         onMouseDown: this.handleMouseDown.bind(this),
 @ ./node_modules/openseadragon-annotations/src/main.js 3:0-51
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/SuperView.vue
 @ ./src/components/SuperView.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

In the README it mentions that one can use a package manager, which implies that it is possible to use it without. I am unable to accomplish just that.

I tried including the main.js and others, failing with
Uncaught SyntaxError: Unexpected token import
It would be great if there was a demo or one line on how to use it without a package manager.

When I zoom in on an image the old drawings don't get resized, so they're too wide

thank you !

I have added openseadragon-annotations fro my angular project and added
"../node_modules/openseadragon/build/openseadragon/openseadragon.js",
"../node_modules/openseadragon-annotations/dist/openseadragon-annotations.js"
under scripts and
var viewer = OpenSeadragon({
id: 'viewer',
showNavigator: true,
tileSources: {
Image: {
xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
Url: 'http://content.zoomhub.net/dzis/TDbz_files/',
Format: 'jpg',
Overlap: '1',
TileSize: '254',
ServerFormat: 'Default',
Size: {
Height: '4409',
Width: '7793'
}
}
}
});

const annotations = new OpenSeadragon.Annotations({ viewer });
It was givving the error:
Uncaught TypeError: openseadragon_1.OpenSeadragon is not a function
looking for help..

Thank you very much for the nice plugin, I want to know in the plug-in, the lower left corner of the button to activate brush when invoked the openseadragon which methods, because the mouse to click the default of openseadragon will enlarge the picture, I think the custom button to click on the button to activate the canvas brush effect, how to do?

I'm trying to change the cursor style based on mode, and tried to achieve this by setting annotations.overlay.style.cursor. The cursor successfully changes for the svg overlay on the viewport, however the cursosr reverts back whenever the viewer changes zoom. Any insight on how to go about this?

Hi,
I am trying to disable drag and resize of the annotation. Can you help to give insight how to disable drag and resize on the annotation.

Uncaught TypeError: this.viewer.areAnnotationsActive is not a function

Hello,

Thank you for this cool plugin. Currently, I am working on an application to load annotation that was generated offline (with the same structure of annotation drawn manually, see attached image).

The annotation file is 30 Mb size and saved as text file, with a total number of <path> tags in <svg> equals to 50000, and number of points of each <path> varies between [3, 300]. Loading this annotation is performed as:
this.viewer.annotations.set(heavyAnnotation); after cleaning the previous annotation if any using this.viewer.annotations.clean();
heavyAnnotation is an array of elements, each element is an array of length 2, filled as following: ["path", {class: 'myClass', d: 'M37.528 49.5528L37.524 49.5556L37.518 .... z'}].
Loading the annotation in done in 7-10 secs, which consists of downloading and parsing. The loading time is understood, but the navigation (move or zoom) is getting heavy and the unreactive, around [1-2] sec from scroll-event to the end of loading the annotation. One trick that I use currently is to hide the annotation on start-animation re-show it on finish-animation.
The image itself is huge 125984x72104. However, with openseadragon plugin the navigation is still acceptable and reactive. Only, when re-rendering the annotation on (animation) I got this issue and only with huge number of <path> tags in the annotation.
I understand that loading huge is lengthy process, and I wonder whether I can enhance the reactivity (zoom and move) with the annotation. Is it possible to only render the annotation portion that is visible? Also, is there any event to notify us when the annotation is viewed completely? All ideas and suggestions are welcome.

Thank you,

Greetings and thanks for this nice plugin!
I have run into issues trying to annotate using the OSD with a reference image strip

 var viewer = OpenSeadragon({
        id: "openseadragon1",
        prefixUrl: "/userContent/lib/openseadragon-2.2.1/images/",
        sequenceMode: true,
        showReferenceStrip: true,
        referenceStripScroll: 'horizontal',
        viewportMargins:{bottom:120},
	tileSources:  [tilesArray]                            
    });
     viewer.initializeAnnotations();

I can always annotate the first image fine, but once I move on to the next image it stops working. The mouse just pans the image instead of annotating. Is a viewer with a reference strip supported?

Attaching an example below. Thanks again for your open source work!

What could be possibly done to fix that ?

require('./bootstrap');
$.OpenSeadragon = require('openseadragon');
require('openseadragon-annotations');

                var viewer = OpenSeadragon({

///
followed by
viewer.initializeAnnotations();
// const annotations = new OpenSeadragon.Annotations({viewer});

ERROR in ./node_modules/openseadragon-annotations/src/main.js
Module not found: Error: Can't resolve 'OpenSeadragon' in '/home/vagrant/dview/portal/node_modules/openseadragon-annotations/src'
@ ./node_modules/openseadragon-annotations/src/main.js 1:0-67
@ ./resources/js/document-edit.js
@ multi ./resources/js/document-edit.js

ERROR in ./node_modules/openseadragon-annotations/src/controls/Control.js
Module not found: Error: Can't resolve 'OpenSeadragon' in '/home/vagrant/dview/portal/node_modules/openseadragon-annotations/src/controls'
@ ./node_modules/openseadragon-annotations/src/controls/Control.js 1:0-47
@ ./node_modules/openseadragon-annotations/src/controls/Move.js
@ ./node_modules/openseadragon-annotations/src/controls/index.js
@ ./node_modules/openseadragon-annotations/src/main.js
@ ./resources/js/document-edit.js
@ multi ./resources/js/document-edit.js

ERROR in ./node_modules/openseadragon-annotations/src/store/Store.js
Module not found: Error: Can't resolve 'OpenSeadragon' in '/home/vagrant/dview/portal/node_modules/openseadragon-annotations/src/store'
@ ./node_modules/openseadragon-annotations/src/store/Store.js 1:0-54
@ ./node_modules/openseadragon-annotations/src/main.js
@ ./resources/js/document-edit.js
@ multi ./resources/js/document-edit.js

ERROR in ./node_modules/openseadragon-annotations/src/components/Annotations.js
Module parse failed: Unexpected token (98:8)
You may need an appropriate loader to handle this file type.
| 'svg',
| {
| ...svgProperties,
| style: svgStyles,
| onMouseDown: this.handleMouseDown.bind(this),
@ ./node_modules/openseadragon-annotations/src/main.js 3:0-51
@ ./resources/js/document-edit.js
@ multi ./resources/js/document-edit.js

When I move my mouse slowly the path created seems to jump to the upper left corner

In Opera 38 and FF 47 on W7 64

When I zoom in and start drawing, the resulting SVG path has stroke-width 0.5 so it's YUGE

You may need an appropriate loader to handle this file type.
| 'svg',
| {
| ...svgProperties,
| style: svgStyles,
| onMouseDown: this.handleMouseDown.bind(this),

sorry ! i can't use it

Tired of trying.After npm installed 2 deps,still the viewer.initializeAnnotations seems no use.
How fix it?

when we rotate image, will rotate appropriately, but when we try to draw it considers coordinated to its initial rendering position.

hello，i used this plugin with the way you provided but it did not work.can you help me?

I want to draw shapes programmatically and change the color of the stroke. Is there any documentation about all methods exposed to me? My initial thought is I would call annotations.get(), push that array of arrays and pass the new index to annotations.set() to set the name and info to fill the object that describes the shape(location, height, width etc). Does this seem reasonable? Where is the object in the source code that describes the annotation, or what are it's members? Is it possible to change the color of the stroke?
Thank you