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
    I develope in Angular so I used npm command to install packages
    Rainer Simon
    @rsimon
    The error messages sound like you were using the Annotorious standard version (which doesn't work with OpenSeadragon).
    Ah, got it. Hm, I haven't figured out yet how to use the OpenSeadragon plugin via npm, to be honest. Is there a way to use the script? Are you importing the OpenSeadragon library via NPM? Or is this also imported via script in the host page?
    jsmal1988
    @jsmal1988
    OpenSeaDragon and Annotorious are imported via npm
    I found npm version of Annotarious-OpenSeaDragon, https://www.npmjs.com/package/@recogito/annotorious-openseadragon but I am not sure if it's compatible with Angular
    Rainer Simon
    @rsimon
    @recogito/annotorious won’t work. It’s for normal images only. It simply won’t work with OpenSeadragon. Potentially, @recogito/annotorious-openseadragon would be the right module to use. But... I think it won‘t work at the moment. Most importantly because the module exports sourced code, not the built distribution.
    Sorry, I didn‘t cover the case of npm import yet. (Because the OpenSeadragon doesn‘t really mention it either. So I naively thought there might not be an npm-published version at all.)
    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??