annotorious / annotorious-openseadragon Goto Github PK
View Code? Open in Web Editor NEWAn OpenSeadragon plugin for annotating high-res zoomable images
Home Page: https://annotorious.github.io
License: BSD 3-Clause "New" or "Revised" License
An OpenSeadragon plugin for annotating high-res zoomable images
Home Page: https://annotorious.github.io
License: BSD 3-Clause "New" or "Revised" License
Sync with latest API changes in Annotorious standard
Similar to the one that comes with OpenSeadragon, but taking an annotation (id) as an argument. Also take an immediate
argument (and forward to OSD).
Can the events mouseEnterAnnotation(annotation, e) and mouseLeaveAnnotation(annotation, e) be make public.
It looks like touch navigation breaks when starting a touch gesture on an annotation. Once this was done once, touch navigation remains broken! As long as you just select an annotation (with a single tap), or do pan/pinch gestures outside of annotation shapes, things work just fine.
Note: this is almost certainly related to OSD's weird ways of handling touch/mouse events, and might (hopefully) go away with the release of OSD 3.0, for which event handling was thoroughly revised.
Outside of readOnly mode, I am able to create, edit, and delete annotations with no issues, but as soon as I set readOnly
to true and attempt to create an annotation, this happens:
Also, when I am logging anno.readOnly
I am getting that it is undefined even though I am setting it on the previous line.
Here is my init code:
var perms = drupalSettings.recogito_integration.permissions;
var user_data = drupalSettings.recogito_integration.user_data;
var readOnly1 = (!perms['recogito create annotations'] &&
!perms['recogito edit annotations'] &&
!perms['recogito delete annotations'] &&
!perms['recogito edit own annotations'] &&
!perms['recogito delete own annotations']);
var image_anno = OpenSeadragon.Annotorious(viewer);
image_anno.readOnly = (readOnly1 || window.location.search !== "?mode=annotation");
image_anno.disableEditor = image_anno.readOnly;
image_anno.setAuthInfo({'id': user_data.id, 'displayName': user_data.displayName});
var page_url = window.location.pathname;
jQuery.ajax({
type: "GET",
url: "/recogito_integration/get",
dataType: 'json',
headers: {
'pageurl': page_url,
},
success: function (data) {
console.log(data);
for (annotation in data) {
w3c = convert_annotation_w3c(data[annotation]);
if(w3c.type != "Annotation")
{
image_anno.addAnnotation(w3c);
}
}
},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
image_anno.on('selectAnnotation', function (annotation) {
highlightAnnotatedContent(annotation);
});
image_anno.on('createAnnotation', function (annotation) {
console.log("createAnnotation: " + typeof annotation);
create_annotation(annotation);
});
image_anno.on('updateAnnotation', function (annotation, previous) {
console.log(annotation);
console.log(previous);
update_annotation(annotation, previous);
});
image_anno.on('deleteAnnotation', function (annotation) {
delete_annotation(annotation);
});
It's technically a pointless operation anyway. But the API should just ignore the call without throwing an error.
Annotorious really needs proper tests. jest-puppeteer was recommended as a good option for testing browser interaction workflows. See
https://pptr.dev/#?product=Puppeteer&version=v8.0.0&show=api-class-mouse
for mouse move examples.
If anyone wants to help out with this, do let me know!
Is it possible add another event to start an annotation?
To start an annotation it is now required hold the shift key. For a not expert user it can be not easy to use.
So it can be helpful add an event listener to start the tracking on click on a DOM element with a certain id.
For example, in OSDAnnotationLayer.js, add the following lines:
document.getElementById("annotorious-start-selection").addEventListener("click", () => { this.mouseTracker.setTracking(true); });
Would it be possible to get a thumbnail of the image within the bounds of the annotations rectangle? This could then be saved and used to show an index of the available annotations for example.
The image data would be posted back in the created event as 64bit data string?
This might be achievable via open seadraggon all ready??
Looks like this could be pretty much (im)ported 1:1 from standard Annotorious, just requires similar plumbing as in the selectShape method of AnnotationLayer.js.
When you create an annotation through the UI, the new annotation is assigned an id, this takes the form #GUID.
Is the # part of some standard that needs to be there? I'll have to strip this out in order to save the annotation to a database with a column type of GUID.
Looks like I can add annotation without the #, so it's just an issue through the UI created ones.
How can we add annotation with style options such as line colour, width etc.
Looked at Web Annotation Model and came up with this
var annotation = [
{
"type": "Annotation",
"stylesheet": {
"type": "CssStylesheet",
"value": ".red { color: red }"
},
"body": [{ "type": "TextualBody", "value": "Logo", "purpose": "commenting" }],
"target": { "selector": { "type": "FragmentSelector", "conformsTo": "http://www.w3.org/TR/media-frags/", "value": "xywh=pixel:4529.12646484375,1530.34130859375,871.17236328125,131.33251953125" }, "styleClass": "red" },
"@context": "http://www.w3.org/ns/anno.jsonld", "id": "#3e4502d0-923a-11ea-95ff-25ef2ceeaad8"
}]
but it did not display annotation in a red colour.
There is a bug after the polygon drawing while clicking the cancel button on the editor panel. I draw a polygon then the editor panel appears and when I click the cancel button the editor panel disappears but the polygon does not. The polygon still appears even if clicking the cancel button. The same steps work while drawing a rectangle, but it doesn't work by drawing a polygon.
Could you fix this bug, please?
(tested with chrome browser)
Can you create an unselectAnnotation event, so we can change control state of the previously selected annotation. i.e. unhighlight an annotation that was previously highlighted through the selectAnnotation event.
I see headless mode (and disableEditor) allows for just the drawing aspect of the plugin... is there a way to disable the draw and the editor programatically? End goal here is to allow users to toggle annotorious on and off as needed.
Good day,
I have integrated the annotrious-openseadragon into my project and overall it's working quite well! Although I noticed that when the application goes into full screen mode, all of the annotations seem to disappear. Any thoughts on why this is happening and how to remedy? I am using a bleeding edge head revision of the base annotrious library because I require the annotation editability so that may be a factor.
Again, thanks for all the great work! This project saved my bacon!
Thanks!
Brian
See this twitter thread: OpenSeadragon exposes the IIIF source URI somewhere inside the IIIFTileSource. Annotorious can simply check whether the current source is IIIF, and use the ID attribute (or always use the ID attribute in case there is one.)
We need to figure out what's needed to support annotation of a multi-tilesource setup. The key question to answer is how to get proper image coordinates.
While trying to get all the current annotations in the selectAnnotation
event handler, the following error is thrown:
OpenSeadragonAnnotator.jsx:241 Uncaught (in promise) TypeError: Cannot read property 'clone' of undefined
at OpenSeadragonAnnotator.jsx:241
at Array.map (<anonymous>)
at p.getAnnotations (OpenSeadragonAnnotator.jsx:241)
at e.getAnnotations (index.js:131)
at (index):101
at n.emit (index.js:36)
at Object.onAnnotationSelected (index.js:73)
at p.<anonymous> (OpenSeadragonAnnotator.jsx:83)
at index.js:271
at Array.some (<anonymous>)
Could you please share the openseadragon-annotorious.js file? I found a minified js file called openseadragon-annotorious.min.js, but it is hard to understand even if I make the file unminified.
Just like in standard Annotorious. Should by mostly a bit of extra plumbing.
The recent release made the bundle importable via NPM. In order to make this happen, it was necessary to import the MouseTracker
and Point
classes from the openseadragon
NPM package.
The problem now, is that the annotorious-openseadragon
build bundles all of OpenSeadragon into the distribution. Not a problem per se, but it inflates the size of the plugin to >500kB. I wonder what the best way would be to import just MouseTracker
and Point
, and not all of OpenSeadragon.
There does not appear to be a .destroy() method. Subsequent .init() methods seem to work though, so switch between different images with .init() works, but previous versions have had .destroy() method.
Standard Annotorious now has touch support. Port the feature to the OSD plugin.
Can we prevent the default Editor/CommentWidget from showing.
Something like
var anno = AnnotoriousOSD.init(openSeadragonViewer, { showEditor: true/false } );
Then using the selectAnnotation and createAnnotation events a dev can popup there own Editor.
i'm playing with webview to make a desktop app with annotorius that persists annotations locally into an sqlite file.
i will publish in github soon, meanwhile 👇
the problem: i'm opening new canvases from IIIF manifest with viewer.open(), but when changing the tile the annotation layer persists. i'm wondering if can be useful an api method to clear all annotations (not actually the current destroy()
method)
this new clear()
method could be sticked inside osd open event.
or maybe i can use anno.getAnnotations()
and then looping and remove every annotation?
PS/ right now .getAnnotations() seems missing
o.annotationLayer.getAnnotations is not a function. (In 'o.annotationLayer.getAnnotations()', 'o.annotationLayer.getAnnotations' is undefined)
Seadragon supports displaying multiple images using "sequenceMode". When this is enabled Seadragon allows one instance of the viewer to display multiple images. Annotorious seems to place the annotation on the canvas without regard to the intended image. As the image changes in Seadragon, the original annotation stays.
Can there be a selectAnnotation method.
var selectedAnnotation = anno.selectAnnotation('#GUID');
Pass annotation id to select, return annotation object if found.
Added recently to Annotorious standard version. A bit of plumbing is needed to make it work in OSD, too.
I switched from using "plain" plugin to the openseadragon plugin and it seems like the formatter callback is not called, in the plain plugin i used this callback to add a class to thr annotation g element
Is it a bug ?
Thanks
Port latest fixes included in Annotorious 2.3.2.
Would it be possible to implement a kind of a point-undo-functionality? for example clicking right?
Similar to the one that comes with OpenSeadragon, but taking an annotation (id) as an argument. Also take an immediate
argument (and forward to OSD).
Some corner points are stored multiple times in the SVG polygon.
If you cancel an annotation through the UI, it leaves the draw rect on the canvas.
To reproduce ~ Draw new annotation, Editor Shows, Press Cancel button, annotation remains on screen.
Allow apps to toggle readonly mode at runtime (not just init time). Some plugins will need this.
I'm trying to use the plug-in.
I'm calling:
var anno = OpenSeadragon.Annotorious(myViewer);
This creates an object
Afterwards, I call:
anno.loadAnnotations('annotations.w3c.json');
But this Promise object remains pending
I don't see any icons to use for annotation.
I'm missing something and would really appreciate some guidance.
Regards
Allow apps to toggle headless mode at runtime (not just init time). Some plugins will need this.
Would it be possible to pass a padding value with the fitBound method.
anno.fitBounds(annotation.id, false, 20);
where 20 is 20px.
All the other functionality just released works beautifully!!
This was recently fixed in standard Annotorious:
annotorious/annotorious@a452e35
Repeat steps here, too.
Need to figure out what‘s going on there. Currently doesn’t work at all. Z-index is only one part of the issue.
For some reason, vite produces a significantly larger bundle (600+kB vs. ~400kB).
I'm getting an error message when I delete an annotation.
openseadragon-annotorious.min.js:1 Uncaught ReferenceError: annotation is not defined
at Object.onAnnotationDeleted (openseadragon-annotorious.min.js:1)
at Object.u [as click] (openseadragon-annotorious.min.js:1)
at HTMLButtonElement.b (openseadragon-annotorious.min.js:1)
Port bugfix from Annotorious 2.3.2.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.