Hi, just a quick update: there were a few more issues to sort out. But I managed to get the plugin to work as an NPM import now. The most recent release it 2.0.5. See https://github.com/recogito/annotorious-openseadragon/releases/tag/v2.0.5 for a code snippet.
@rsimon Thanks for update and instructions about implementing into code.
I saw on your examples that images are full width and height and there is no problem with selecting area. In my case when I click on some place on image with pressed <SHIFT> then it starts painting annotation, but in moved area:
Do you have any idea why it happes?
Ok nvm, I was working on someone's code and didn't realized it was css f*cked up.
Yes, external CSS can sometimes mess things up. If you have a specific case, do feel free to open an issue on https://github.com/recogito/annotorious-openseadragon. In some cases, it's possible to "isolate" Annotorious against those issues.
What I tried was to use .addAnnotation, setAnnotations but without success. I passed js object with same structure as I get when I save object:
when I use .addAnnotation or setAnnotations I get this error for each item:
so, whole object is passed as 2nd parameter, with property underlying where whole object is passed
I just passed few seconds ago standard object, (not Jsoned) and it works!
but I have one more question to you, because right now content of div with annotation comment is just simple text. I am talking about div with class .r6o-widget comment > r6o-editable-text
because what i wanted to pass is not onyl text but also author and date
because what i wanted to pass is not onyl text but also author and date
but I am afraid I have to pass it only as whole String
Yes, that's right. The comment is just a simple string for now. (I'm planning to support markdown later.) However, if you want to add username and create/modify timestamp: no need to hack this in via the comment message. There are special metadata fields for this.
Check the
.setAuthInfo API method: https://recogito.github.io/annotorious/api-docs/annotorious/#setauthinfo
If you pass in an annotation body that has the following fields
created: "2020-05-18T09:39:47.582Z",
creator: {
id: "http://recogito.example.com/rainer",
name: "rainer"
}
That will be displayed as an extra "mini-widget" below the comment.
<script>
$( document ).ready(function() {
(function() {
var anno = Annotorious.init({
image: 'image', // image element or ID
headless: true
});
anno.applyTemplate({
"type": "TextualBody",
"purpose": "tagging",
"value": "annotation-label"
});
// Load annotations
anno.loadAnnotations('<%= observation_get_annotations_path(@observation.id) %>');
// Create annotation
anno.on('createAnnotation', function(annotation) {
$.ajax({
type: 'POST',
url: "/labels/",
data: {
label: {
observation_id: <%= @observation.id %>,
annotation: annotation
}
},
success: function(data) {
}
});
});
// Remove Annotation
$(".labels-container").on("click", ".remove-annotation", function () {
var label_id = parseInt($(this).attr('id'));
$.ajax({
type: 'POST',
url: '/labels/get_annotation',
data: {
label:{
label_id: label_id,
}
},
success: function(data){
anno.removeAnnotation(data);
}
});
});
})()
})
</script>
When the user creates an annotation, Annotorious automatically assigns an ID. You can grab it in the
createAnnotation handler function. annotation.id. How and where you store the IDs is basically up to you.
I don't quite understand how you want your remove annotation function to work. Right now, you seem to pull the ID from the button element? That doesn't have anything to do with the annotation. Seems like you are fetching the annotation from the server based on the ID of the button, and then you remove it??
What's the .remove-annotation element, and where does it get it's ID attribute from?
When I reload the page, the remove function works for me. I really appreciate your help and amiability.
When the annotation is created, you store it in the DB. But you're not recording the ID anywhere on the client. So, where would the ID come from when you're trying to delete. Again: I have no idea where the ID gets set to the with .remove-annotation (or why you are doing it this way). But: remove can't work if you don't know the annotation ID. Seeing only these few fragments means I can't say what exactly is going on in your app. But be sure to understand what's going on with the ID of the .remove-annotation HTML element. That's definitely where the problem lies. (I.e outside of Annotorious.)
@rsimon or anyone, any advice on the workflow code for preventing another user from moving a user's annotation box? What event/method do you think should be used ? Also, I am using Firebase auth() service to handle user state, so I can probably also compare the user's id from the annotation creator field with his own, but want to be sure first I'm on the right track. Thanks.
For the first question: that's at least something you can work around. I recommend exactly the way you suggest: when loading annotations into Recogito, don't load via
.loadAnnotations, but fetch them yourself, then loop through them and check the creator field. If it's != the current user, you can add the annotation with the readOnlyoption set.
anno.addAnnotation({...} ,true);
This will render the annotation in read-only mode, while the rest of the UI keeps working as normal.
The second question isn't possible yet. The annotation is either completely read-only, or completely editable. I guess in the long run, there should be some way to provide a "rule set" of what should, and what should not be allowed. (E.g. should users be able to move another users shape or not, should an annotation be completely readonly, or should replies be allowed etc.)