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
    First: I‘ll try to publish an updated version of the plugin to NPM later today, which exports the proper bundled distribution. This should at least make it possible to integrate in principle. How & if that will work with Angular I frankly don‘t know (because I have no experience with Angular.) I assume you might need to do some kind of wrapping.
    If you manage to do it, can you let me know how? I‘d love to include this into our documentation.
    Rainer Simon
    @rsimon
    This one properly exports the distribution bundle, and should be usable via npm in principle.
    The way to initialize should be Annotorious(viewer, config) (see https://recogito.github.io/annotorious/api-docs/osd-plugin/ for details)
    And I think for the import, you'll have to use import * as Annotorious from '@recogito/annotorious-openseadragon
    But as I said, I've never used it myself that way so far. Do let me know if you can make it work. I'd love to improve the docs with what you find out.
    Rainer Simon
    @rsimon
    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.
    jsmal1988
    @jsmal1988
    image.png

    @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.
    Rainer Simon
    @rsimon
    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.
    jsmal1988
    @jsmal1988
    Hi there, I have question about populating annotations from DB. When I create annotation I save id to DB. And when viewer component is loaded I want to populate saved annotations.
    image.png
    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:
    Rainer Simon
    @rsimon
    Restoring annotations should work like that. Use .addAnnotation with a single annotation object, or .setAnnotations with an array. If that doesn't work: is there any output on the error console?
    jsmal1988
    @jsmal1988
    image.png
    when I use .addAnnotation or setAnnotations I get this error for each item:
    jsmal1988
    @jsmal1988
    to function FE at 15297 I get passed fallowing parameters:
    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