by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    jsmal1988
    @jsmal1988
    image.png
    image.png
    so, whole object is passed as 2nd parameter, with property underlying where whole object is passed
    Rainer Simon
    @rsimon
    Can you give me an example of the object you are passing in?
    jsmal1988
    @jsmal1988
    Ok, again I made foolish mistake :( I didn't set selector to target value.
    So instead of:
    object.target.selector.
    I just set object.selector
    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
    but I am afraid I have to pass it only as whole String
    Rainer Simon
    @rsimon
    Great to hear it's working!
    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.
    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.
    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 ?