Where communities thrive


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

    Hi ! I am trying to instantiate an Annotorious (2.1.5) and listening new shape draw events like this :

          this.annotorious = new Annotorious({
            image: document.getElementById('myImageId'),
            readOnly: false,
            headless : true
          });
          this.annotorious.on('createSelection', function(target) {
            console.log(target);
          });

    But the target is always undefined. Any suggestions on how to fix this ? Thanks

    Rainer Simon
    @rsimon
    Ouch I think I might have introduced a regression bug here. Would you mind switching back to v2.1.4? It should work there (and will definitely work again in v2.1.6).
    choje
    @choje
    Same behavior with the v2.1.4, but it works with the v2.1.2 ! Thank you @rsimon
    AlaEmrani
    @AlaEmrani
    Hi,
    I'm trying to add Point annotation with OpenSeaDragon image by holding shift+duoble click, but Annotorious blocks other addHandler with holding shift. Is there any way to add Point annotation?
    Rainer Simon
    @rsimon
    Holding SHIFT activates the current drawing tool. To implement this in a clean way, you'd need to implement an extra Point annotation tool here. This would also allow you to handle things like make the point moveable when the annotation is selected, provide the frame to serialize points to/from WebAnnotation, and make point annotation available for both "normal" Annotorious and the OpenSeadragon plugin.
    I think you can probably attach your own handler with addHandler in addition to the standard tool-activation handler. But not sure how that would interfere with the rest of the tool. If you're going to attempt the implementation of the full-fledged point annotation tool, do let me know. I'm interested in that myself, and happy to help out/review. In principle, I think you should be able to just copy the code from the rectangle annotation tool, and then simplify that, to just do point selection.
    AlaEmrani
    @AlaEmrani
    Thank you @rsimon
    I'm going to implement point annotation tool, can you help with bringing some insight about changing rectangle tool? changes must be at all 3 classes?
    Rainer Simon
    @rsimon
    Yes. RubberbandRectTool is the main "entry point" class, which implements the tool interface. RubberbandRect handles the mouse drawing during the selection stage (= when the user creates a new rectangle). EditableRect handles drawing and mouse interaction for the editable shape (=when the user selects an existing rectangle, and moves or resizes it).
    AlaEmrani
    @AlaEmrani
    @rsimon thanks for this, how can I test my implementation of point annotation? where should I call RubberbandPointTool for example?
    Maria
    @Mariya89
    Hello! Is there some example of .json file with polygon and rect annotations? Thank you.
    Rainer Simon
    @rsimon
    @AlaEmrani if you look into the AnnotationLayer classes, the tools are initialized in the constructor. For testing, you could e.g. set your point tool implementation as the default here: https://github.com/recogito/annotorious/blob/master/src/tools/DrawingTools.js#L32
    Giovanni Caprio
    @giovannicaprio
    Screenshot 2021-01-08 at 15.46.40.png
    Hey Guys. I am having some trouble trying to create the editable annotation size like in this example here
    The issue is that mine do not create with the dot feature, so I cannot resize my boxes
    Screenshot 2021-01-08 at 15.48.14.png
    I download the last version and linked in my page using the .js class
    Giovanni Caprio
    @giovannicaprio
    Does any one had the same issue?
    Rainer Simon
    @rsimon
    What happens when you click the annotation? Is selection not working? Does the error console say anything?
    Giovanni Caprio
    @giovannicaprio
    It enables me to move the annotation, but not to resize it.
    No errors in the console
    Rainer Simon
    @rsimon
    The screenshot doesn't show the popup? What are your init settings? Are you using headless mode?
    Maria
    @Mariya89
    Hello! Is there some demo of annotorio and openseadragon using? I have problem with its joint work: when image are zooming annootations change their places.
    Rainer Simon
    @rsimon
    Did you try the standard instructions at https://recogito.github.io/annotorious/getting-started/osd-plugin/? This seems to work fine in Chrome and FF.
    <html>
      <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious-openseadragon@latest/dist/annotorious.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/openseadragon.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-openseadragon@latest/dist/openseadragon-annotorious.min.js"></script>
        <style>
          html, body, #osd {
            padding:0;
            margin:0;
            width:100%;
            height:100%;
          }
        </style>
      </head
    
      <body>
        <div id="osd"></div>
        <script>
          window.onload = function() {
            var viewer = OpenSeadragon({
              id: "osd",
              tileSources: {
                type: "image",
                url: "https://github.com/recogito/annotorious-openseadragon/raw/master/public/1280px-Hallstatt.jpg"
              }
            });
    
            // Initialize the Annotorious plugin
            var anno = OpenSeadragon.Annotorious(viewer);
    
            // Attach handlers to listen to events
            anno.on('createAnnotation', function(a) {
              // Do something
            });
          }
        </script>
      </body>
    </html>
    Pasting the full example above (just tried this). If that doesn't work: which platform/browser are you using? Are you applying any special stylesheets etc.? Are you embedding in an HTML page or using via a bundler (npm install)?
    Giovanni Caprio
    @giovannicaprio
    It worked S2
    Actually I also deleted and downloaded it all again. Thank yu, guys
    tatturamqwerty
    @tatturamqwerty
    Hi, Is there any way to display annotations when user shift to fullscreen?
    Rainer Simon
    @rsimon
    Do you mean for the OpenSeadragon plugin (i.e. when the user clicks the OpenSeadragon fullscreen icon)? This should be working for the latest release v2.2.0. If not, there might be some external CSS interfering. Do you have a code sample/jsfiddle online that has the problem?
    Xuyun Zeng
    @xuyunzeng

    Did the sample code from https://recogito.github.io/guides/using-firebase-for-storage/ work for anyone? It didn't for me. It came down to an error with return query.docs[0];

    Specifically, the problems come from the events updateAnnotation and deleteAnnotation, which call on the findByID function.

    Might be because I am using 8.2.2 version of Firebase's SDK. However, I used Firebase's docs to update some of the code and it works now. Could share it if anyone else is having the same problem.

    tatturamqwerty
    @tatturamqwerty
    @rsimon Thank you.. I will check this.
    Rainer Simon
    @rsimon
    @xuyunzeng ah - indeed. The docs are always lagging behind... On the one hand: there's now an official plugin for Firebase storage, which (I think) is already up to date with the current version of the Firebase SDK: https://github.com/recogito/recogito-client-plugins/tree/main/packages/storage-firebase
    On the other hand: yes, it would be great if you could share the fix in the current doc - I'd really appreciate that. Would you be willing to send this as pull request, fixing the current Website documentation? The source code for the website is here: https://github.com/recogito/project-website-source. The documentation with the Firebase code, specifically, is in this markdown file: https://github.com/recogito/project-website-source/blob/master/content/guides/using-firebase-for-storage.md
    In the longer run, I'll need to update the project website with information about the plugins (which are fairly new). But for now, fixing the current docs will be have to suffice :-)
    Xuyun Zeng
    @xuyunzeng
    The website seems to be down... Link: https://recogito.github.io/annotorious/
    Xuyun Zeng
    @xuyunzeng
    I am new to open source and programming so let me see how I can do a pull request.
    Xuyun Zeng
    @xuyunzeng

    Anyway, here's the code I modified:

    async function findById(documentID) {
    const query = db.collection("annotations");
    const snapshot = await query.where("id", "==", documentID).get();
    if (snapshot.empty) {
    console.log("No matching documents.");
    return;
    }
    let docNumber; // to get doc.id out of forEach to be returnable, used for update and delete to refer to the right document in the db
    snapshot.forEach((doc) => {
    console.log(doc.id);
    docNumber = doc.id;
    });
    return docNumber;
    }

    anno.on("updateAnnotation", async function (annotation, previous) {
    let docNumber = await findById(previous.id);
    const docRef = db.collection("annotations").doc(docNumber);
    const updateData = await docRef.update(annotation);
    });

    anno.on("deleteAnnotation", async function (annotation) {
    const res = await db
    .collection("annotations")
    .doc(await findById(annotation.id))
    .delete();
    });

    Rainer Simon
    @rsimon
    Weird... I didn't think GitHub pages could ever be down ;-) (I recently renamed the main branch in the repo. Seems that this caused the site to go down. Fixed now - thanks for spotting!)
    Thanks for sharing the code. Do let me know if you want to send the PR. Otherwise I'll update myself later.
    Xuyun Zeng
    @xuyunzeng

    I don't know how to do a pull request so it might be better if you updated the code, Rainer. Anyway, I am satisfied with most of the code but there's one part which I hope someone can find a better way:

    let docNumber; // to get doc.id out of forEach to be returnable, used for update and delete to refer to the right document in the db
    snapshot.forEach((doc) => {
    console.log(doc.id);
    docNumber = doc.id;
    });
    return docNumber;
    }

    My dissatisfaction with this part is that I can't find a way to get the ID without putting it in a forEach method. I tried snapshot[0] but that led to nowhere. I also can't return doc.id inside a forEach loop so I had to create the docNumber var. Seems pretty inefficient...

    Rainer Simon
    @rsimon
    Hi @xuyunzeng, I just tested, and it seems the latest Firebase Storage Plugin. It does access the docs array normally. See here: https://github.com/recogito/recogito-client-plugins/blob/main/packages/storage-firebase/src/index.js#L14
    The website documentation has a bug, however: it creates a query object and then runs the query to retrieve a querySnapshot response. Then, however, it accesses query[0] whereas it should access queryResponse[0]. I think that's what caused the problem originally.
    I fixed the docs now.
    Xuyun Zeng
    @xuyunzeng
    I am really glad that you found a quick fix!
    ddankwerth
    @ddankwerth
    I cant work out why on certain installation of the OSD plugin i get the a9n-handle at the corner and at others i don't, it it related to the css?
    Rainer Simon
    @rsimon
    Hm, is it possible that handles work on Chrome, but not on Firefox? If so, it would be this issue: recogito/annotorious#74 I fixed this yesterday on the main branch, but the current published release still has it.
    Can you check whether external CSS applies any changes to the handles? A CSS scale transform would shift the location of the handle (in the current published release.)
    ddankwerth
    @ddankwerth
    Found it , my bad, had multiple versions... Thanks