by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Rainer Simon
    @rsimon

    When you initialize Annotorious on your page, you can also use

    anno.setAuthInfo({ 'id':'http://recogito.example.com', 'displayName': 'rainer' });

    and then Annotorious will add the creator and created properties to annotations that are created in the UI.

    Rodolfo
    @RodolfoPena
    Hello guys, thanks for this space. If somone can help me. I'm trying to removeAnnotation() but I need to reload the page. There is someone who has faced the same issue? Thanks in advance. I'm using a simple Rails app.
    Rainer Simon
    @rsimon
    Hi @RodolfoPena, I'm not sure I understand the question. You need to remove a specific annotation? What do you mean by "you need to reload the page". Is your question about server-side storage of annotations?
    Rodolfo
    @RodolfoPena
    @rsimon thank you. I want to remove the rectangle from an annotation. But when I add some annotation, I have to reload the page before doing that. Here is how I'm implementing my first annotation app. Any feedback would be of great help.
    <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>
    Rodolfo
    @RodolfoPena
    I can create and remove. But I can remove, only after reload the page. Otherwise, I can remove it from the database.
    Rainer Simon
    @rsimon
    If you want to remove an annotation programmatically, you need to know it's ID. (You can call removeAnnotation either with the annotation itself as an argument, or just the ID.)
    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.
    Rodolfo
    @RodolfoPena
    I can remove an annotation, my problem is that I need to reload te page before.
    Rainer Simon
    @rsimon
    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?
    Rainer Simon
    @rsimon
    I think it might have something to do with that. Are you setting that element ID somehow? And it's empty if there are no annotations on page load?
    Rodolfo
    @RodolfoPena
    I have a label model with a json attribute (the annotation) . When I clic on '.remove-annotation' I get the annotation via ajax call. Then I remove the annotation. My problem is that I can just remove it from the database
    When I reload the page, the remove function works for me. I really appreciate your help and amiability.
    Rainer Simon
    @rsimon
    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.)
    Nick Medrano
    @dosstx
    @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.
    Nick Medrano
    @dosstx
    I am going to use the same idea to prevent user from editing another user's comment. Any tips would be helpful. Thanks
    Rainer Simon
    @rsimon
    Hi @dosstx , that's actually an area where Annotorious has no good solution yet. So I guess I'm looking for examples, use cases & requirements what people need around that.
    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.)
    Nick Medrano
    @dosstx
    thank you very much, that was helpful. One step at a time for me....will keep you posted!
    Rainer Simon
    @rsimon
    Great, thanks!
    Nick Medrano
    @dosstx
    @rsimon Unfortunately I am struggling with the first question. I don't know if I can post some code for you somewhere to look at?
    Rainer Simon
    @rsimon
    Can you create a Gist on GitHub & post a link here?
    Nick Medrano
    @dosstx

    @rsimon In regards to the question of letting a user only move his own annotation: Use case: I am creating an app where people can submit photos and then annotate them (for example," what snake is this?" . A user can draw a box around the snake's head and point out details of the type etc) . I don't want other users to move another user's annotation . I got the code to work like so:

        mouseEnterAnnotation() {
          this.anno.on('mouseEnterAnnotation', annotation => {
            // console.log(annotation, event)
            if (this.userProfile.userId == annotation.body[0].creator.id) {
              console.log('same author, let him move or edit this annotation')
            } else {
              console.log('not same author, do not let him movie or edit this annotation')
              this.anno.addAnnotation(annotation, true)
            }
          })
        }

    However, issue is that when a user hovers over another user's annotation, the pop up box for the annotation is disabled.. How to fix?

    Rainer Simon
    @rsimon
    Wait, you have this the wrong way around. This code checks only once the user enters. And then after entering re-adds the annotation. Instead, you should only add the annotations once, when you load the page. And then either in read or readonly mode. There's no need to do anything inside an event handler.
    I'm on mobile phone now. But can provide a code sample later.
    Nick Medrano
    @dosstx
    Thanks! Will wait for your sample. No rush, thank you
    Nick Medrano
    @dosstx
    Here is how I am "loading" the annotations on page start:
          try {
            const querySnapshot = await db
              .collection('annotations')
              .where('target.source', '==', this.photo.url)
              .get()
            const annotations = await querySnapshot.docs.map(doc => doc.data())
            if (!annotations.length) {
              console.log('no anntotations available! Add some!')
            } else {
              this.anno.setAnnotations(annotations)
            }
          } catch (error) {
            console.log(error)
          }
    Rainer Simon
    @rsimon
    Almost there! Don‘t use setAnnotations. This adds all annotations in editable mode. Instead, loop through the annotations, check whether you want it editable or not, and then add each annotation individually. Something like this:
    annotations.forEach(function(a) {
      const isCreateByCurrentUser = ... // check
      anno.addAnnotation(a, !isCreatedByCurrentUser);
    });
    Nick Medrano
    @dosstx
    Thanks, @rsimon . I sent you a DM with my code that works for preventing user from moving another user's annotaiton. Now, I need to determine UI to prevent a user from editing another user's comments. I think currently it may be good enough to only allow the same user to edit and move his own annotation and don't allow other users to edit. But, it would be awesome if another user can add a reply without being allowed to delete, move or edit the original author's comments and box. I could see an issue where nefarious users could cause trouble.
    Rainer Simon
    @rsimon
    Thanks, yes looks good!
    Indeed, I totally agree with you. There needs to be a mode where users can't edit the existing annotation, but still add a reply. I need to think about a good way to handle this from the API perspective. Probably some kind of "rules configuration" I guess.
    Sajal Dulal
    @sajald77
    Hello, Is there any way, there is typescript support for recogiot/annotorious ?Anything like @types/recogito__annotorious-openseadragon ?
    Rainer Simon
    @rsimon
    Not yet I'm afraid
    Sajal Dulal
    @sajald77
    Thanks.
    Sajal Dulal
    @sajald77
    Hello, I was implementing this with a react project.
    Is there a way to, use our own Editor for the annotation popup ?
    Rainer Simon
    @rsimon
    That's still a bit tricky because documentation isn't there yet, and the code would benefit from some refactoring to make this easier. But, yes, that possible.
    I'd recommend simply forking the source code project for now, if that's ok for you.
    I'd suggest keeping the editor (which is just an empty container anyway) and develop your own "widget" components. I started documenting this here: https://recogito.github.io/guides/creating-custom-widgets/
    If you look at the comment widget code, you can see how things work, and how the state of the component is related to the annotation data structure: https://github.com/recogito/recogito-client-core/blob/master/src/editor/widgets/comment/CommentWidget.jsx
    Let me know if this helps to get you started. Don't hesitate to get in touch any time. I'm really interested in making things easier to customize in the future.
    Sajal Dulal
    @sajald77

    Thank you @rsimon .
    I tried following the guides.
    I successfully ran https://github.com/recogito/annotorious-openseadragon in development mode.
    Linking local @recogito/recogito-client-core project to the above.
    Right now, I only changed the button names, for proof of concept. It did change in the development server.
    However, after I built the project, and added inside my current react project.
    The changes didn't seem to reflect.

    Do you have any idea around this? Or did I miss something?

    Rainer Simon
    @rsimon
    Did you run npm run build in your annotorious-openseadragon project? How did you link your fork of annotorious-openseadragon to your React project? I think I'd suggest using the same approach, i.e. running npm link inside your annotorious-openseadragon, and then inside your React project npm link @recogito/annotorious-openseadragon so that it points to your local copy.
    Maybe a small gotcha: once you run npm install in a project, all links seem to get lost (at least this happend to me). Therefore, be sure to always run npm link @recogito/annotorious-openseadragon again in your React project, after you have run npm install.
    Akhileswar V
    @app789
    Hi, I am using recogito/annotorious in Angular application. The application only uses the annotorious.min.js file. Is it possible to customize this file to meet my needs?
    Actually I need to add a custom event to text-editor component. Can I use my custom event like the "createAnnotation" event?