Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    sinamcr7
    @sinamcr7
    hi, is there any option to hide all annotations on image?
    3 replies
    Erol Simsir
    @erolsmsr58

    I'm trying to use the Annotorious Selector Pack and Toolbar plugins in a Typescript/React app. I've managed to make the base Annatorious library work by declaring it as a module as follows:

    declare module "@recogito/annotorious";

    However, I now want to use plugins such as the Annatorious Selector Pack and Toolbar, but no idea how to make that work. The docs only show CDN examples and nothing with imports. Annotorious.SelectorPack(anno) currently throws an error saying "SelectorPack is not a function". How can I make these plugins work within Typescript?

    6 replies
    bruno messias
    @devmessias
    Is possible to update the config after create the annotorious instance?
    Rainer Simon
    @rsimon
    @devmessias you can only change a specific set of props. See "instance fields" here: https://recogito.github.io/annotorious/api-docs/annotorious/
    sinamcr7
    @sinamcr7
    hi, is there any chance to implement a line tool in Annotorious?
    4 replies
    Mahmoud Bekheet
    @M-Bekheet

    Hi, is there a method to update the comment textarea when a rectangle is created for the first time?

    I am generating ocr on the image's text and I want it to be added when I select it with a rectangle

    Mahmoud Bekheet
    @M-Bekheet
    In other words, Can I change the annotation body from code when the editor is visible? I tried anno.updateSelected() but it didn't work or I may be missing something
    Rainer Simon
    @rsimon
    @M-Bekheet yes, you can change the annotation bodies programmatically. Can you post your code? I assume it might be a timing issue in your case. (You might be calling updateSelected at a time where there is no selected annotation yet?)
    9 replies
    The process should be something like that (off the top of my head - didn't test this now...)
     anno.on('createSelection', async function(selection) {
        selection.body = [{
          type: 'TextualBody',
          value: 'My programmatic comment'
        }];
    
        anno.updateSelected(selection);
      });
    Mahmoud Bekheet
    @M-Bekheet

    @rsimon I created a github repo for it. It's a React app, but you can check the snippets I am talking about at these specific 2 lines of code:

    https://github.com/M-Bekheet/Image-Annotation/blob/'main'/src/hooks/useOCR.js#L28
    https://github.com/M-Bekheet/Image-Annotation/blob/'main'/src/App.js#L65

    Mahmoud Bekheet
    @M-Bekheet
    @rsimon It worked. No need to check the above code. Thank you again :)
    Rainer Simon
    @rsimon
    @M-Bekheet excellent! :+1:
    Erol Simsir
    @erolsmsr58

    I'm currently using a formatter to change the colour of shapes. I do this by returning a simple string from my formatter function. The color can change according to React state. The problem I now have, however, is that the class name returned from my formatter is appended to all annotations. I only want the class to be appended to the latest created annotation, not all of them. How can I achieve this? My implementation currently looks like this:

    const [anno, setAnno] = useState<typeof Annotorious>();
    const [annoColorClass, setAnnoColorClass] = useState<string>("anno-orange");
    
    useEffect(() => {
        let annotorious: typeof Annotorious | null = null;
    
        if (imgRef.current) {
            annotorious = new Annotorious({
                image: imgRef.current,
                readOnly: false,
                allowEmpty: true,
                disableEditor: true
            });
        }
    
        setAnno(annotorious);
    }, []);
    
    const annoFormatter = (): string => {
        return annoColorClass;
    };
    
    useEffect(() => {
        if (anno) {
            anno.formatters = [...anno.formatters, annoFormatter];
        }
    }, [anno, annoColorClass]);
    
    // buttons in the render call setAnnoColorClass to change the selected color

    The problem is that the first annotation correctly gets the selected color class, for example anno-orange. However, when I select the color red I want the existing annotation to only have the previously appended anno-orange class and the newly created annotation to have the selected red color class anno-red. Problem is anno-red gets appended to all existing annotation elements and the styles start conflicting with each other. How can I solve this?

    Rainer Simon
    @rsimon
    Do I understand correctly that you're essentially trying to store a specific color as a property of the annotation? If the color is a property of the annotation, the cleaner way would be to store the color in an annotation body. E.g. whenever a new annotation gets created, you could update it with a body { purpose: 'coloring', color: annoColorClass }. Then you could use a single formatter which takes the annotation's color body value and returns that as a CSS class.
    In general: formatters are meant to apply a particular style based on the contents of the annotation. Might be a bit of a tricky concept at first. There are two tutorials that explain the basics here: https://observablehq.com/@rsimon/writing-annotorious-formatters-pt-1 and here https://observablehq.com/@rsimon/writing-annotorious-formatters-pt-2. Hope this helps!
    Erol Simsir
    @erolsmsr58
    I understand, thanks for explaining. However, how can I apply any attributes, classes or styles to only one particular annotation? I think I need to use the annotation id, however I do not exactly understand how to do that. Is there a common way this stuff is being done?
    Rainer Simon
    @rsimon
    If it's really one particular annotation, I'd really store this piece of information ("the annotation is red") as a body. It is a piece of "payload" of the annotation after all, so the body is really where that's supposed to be stored. The fact that you need an extra bit of code (the formatter) to translate the body value into a CSS style is a bit of a detour, agreed. But essentially that separation is by design.
    If you want to tie color to annotation ID, you'd need to hack that around/outside of Annotorious. You could get the annotation SVG shape with something like document.querySelector('.a9s-annotation[id="<annotation-id>"]') and then apply CSS styles. But you'll have to keep track of your annotation-to-color association outside of Annotorious; and it's pretty messy to do in React. Storing the color as a body would definitely be the cleaner solution.
    Erol Simsir
    @erolsmsr58
    Okay thank you. One more question. How can I allow users to create an annotation without having to click outside the annotation to exit the edit mode? So I want to drag a rectangle and create one, and when I let go I would like the annotation to be created, instead of having to first click outside the annotation. How can this be done?
    Rainer Simon
    @rsimon
    That means you are not making use of the editor popup, right (headless mode)? You can programmatically save the annotation right after the selection completes. Using something like
    anno.on('createSelection', function(selection) {
         // Modify bodies, if necessary
          selection.body = {
            value: 'some value',
            purpose: 'some purpose'
          };
    
         // Updates and saves immediately
          anno.updateSelected(selection, true);
    });
    3 replies
    You can see this in action on the project website in this guide here: https://recogito.github.io/guides/headless-mode/
    Ava
    @avaboussy
    Hi All! Has anyone used Annotorious with Omeka? There's an old plugin what runs with 0.6.4, and I'm trying to update it to work with 2.7.7 but I'm having issues + was wondering if anyone else has looked at it!
    Rainer Simon
    @rsimon
    @avaboussy the Omeka plugin has a backend component for storing annotations if I remember correctly. Annotorious v0.x had a different, proprietary data model. (Annotorious v2.x uses the W3C standard.) Unfortunately that means the Omeka plugin would need a bit of a redesign to work with Annotorious V2. I asked the Omeka team about it, bit they were reluctant to make the effort. Maybe if enough people chip in on the Github issue here, they'll consider it: omeka/plugin-ExhibitImageAnnotation#13 (I'd love to see an upgraded version myself!)
    Rainer Simon
    @rsimon
    Hi all, just a quick update that I've re-enabled sponsoring for Annotorious and AnnotoriousOSD. If you would like to support my work, you can now fund me via Patreon: https://www.patreon.com/rainersimon ❤️
    EmKarr
    @EmKarr
    Dear Rainer, I am experiencing problems with "disableSelect" in OpenSeadragon Annotorious 2.7.7. If "disableSelect = true" is given as a parameter in the Annotorious constructor, it seems to be ignored. Setting it later ("anno.disableSelect = true;") works, but results in an error if the canvas is clicked outside an annotation (Uncaught TypeError: this.hoveredShape is undefined, Ah OSDAnnotationLayer.js:293). With "disableSelect=false" the error does not occur. Do you have any idea about this? Thx, Michael
    EmKarr
    @EmKarr
    I also have another rather strange problem which a little bit hard to explain. Small annotations on very large images (hundreds of gigapixels) are displayed, but do not receive mouse events until they reach a certain size by zooming (I am not talking about annotations being too small to be displayed, they are clearly visible at the initial zoom level). However, even though the annotations do not receive any events, e.g. clicks are not reported to the canvas and the canvas looses focus until it is clicked outside the annotation. Also, the mouseLeaveAnnotation-event is not fired for a neighboring, larger annotation (which otherwise works as supposed) if the mouse is moved from that annotation to the smaller one, but works if the mouse is moved to a canvas region without annotation. After zooming in until the annotation reaches a certain size, everything works fine, also if I zoom out again so that the annotation is small again. The error is reproducible with Firefox 103.0.2 (Win10), but does not appear e.g. in Chrome. OpenSeadragon is v 3.1.0. Any help with this would be very much appreciated, as is your continuous work on annotorious. Best, Michael
    Rainer Simon
    @rsimon
    Hi @EmKarr, concerning the first issue: yikes - indeed. That's a bug. I could already find & fix that. Won't happen in the next release anymore.
    For the second issue: do you happen to have an online demo? In the OpenSeadragon version, all mouse interactions and hit detection is handled via a spatial index search. I suspect that this might be caused by rounding errors. Are you using the normal display setting or gigapixelMode?
    It worries me a bit that this happens only in Firefox. I found that FF definitely has a few weird quirks in their SVG implementation. If you have an online demo, that would be super helpful. If not, I'll try to reproduce myself later.
    EmKarr
    @EmKarr
    Hi Rainer, yes, ther is an online demo, but since the stuff still is in development, access is restricted. Can I contact you on a more private channel to provide the access credentials? Also, the gigapixelMode does not work at all in my setup, annotation outlines will not be scaled or panned along with the canvas.
    2 replies
    EmKarr
    @EmKarr
    Dear Rainer, as already reported via email was not Annotorious which caused the above mentioned problem of small annotations not receiving events, but I cound the culprit (and blame myself ;-) ). This issue is solved now.
    EmKarr
    @EmKarr
    But I came across another problem with the OSD plug-in on iOS devices (tested on an iPad with Safari, Chrome and Firefox). Here somehow processing of touch gestures is broken. Basically, "pinch to zoom" is executed only once, sometimes twice, and after that the "canvas-pinch" event is never fired again. Something similar happens with the "drag to pan" gesture, this also works only once or twice as expected (syncing the dragging distance with the panning distance), but after that panning is stalled or only works with quick "flicks". With the simple example given on your Annotorious Github page everyhing works as expected, but not with my complicated setup. Without Annotorious everything works fine, nevertheless I would prefer to stick to it, so it would be great if you could help me with this issue. Best, Michael.
    Rainer Simon
    @rsimon
    I think I've seen similar behavior (under Chrome?) on Linux, on a touch-capable laptop. Bad news is, I was never fully able to reproduce it; and I don't have an iOS device available for testing. If anyone else can chip in with thoughts, ideas, reproducible online samples, etc. I'd really appreciate it. Meanwhile: @EmKarr would you mind creating an issue for this on the issue tracker? And perhaps also cross-post to the OpenSeadragon support forum? They might have further ideas. (It must have something to do with the OSD MouseTracker behavior. Perhaps someone from the OSD team has seen similar problems under different circumstances.)
    pramod butte
    @pramodBLS_gitlab
    can you annotate an SVG image (by D3 or plotly)?
    Rainer Simon
    @rsimon
    @pramodBLS_gitlab not in a useful way, I'm afraid. You could theoretically instantiate Annotorious on the SVG element (I think - but haven't tried). But it would treat the element as if it were an image and record shape coordinates relative to the pixel width/height of the SVG element on the screen. This means you'd not only loose any explicit connection between the SVG image and the annotations. It also means things will break as soon as you display the SVG in a different size.
    pramod butte
    @pramodBLS_gitlab
    @rsimon Thank you for you reponse. I have a some heatmaps drawn with plotly, which uses D3.js. does annotorius tract image based on the actual pixel of the image?… how doew it tract the image… based on size of the image and extrapolating the pixel based on the actual pixel?. as long as as it is able to use <svg> instead of <img> I may be able to track the pixels. Thanks
    Rainer Simon
    @rsimon
    Annotorious uses the naturalWidth and naturalHeight attributes of the element (= original size of the image), but will fall back to width and height, which means you'll get coordinates according to the screen pixel size of the SVG element. But there might be other gotchas. You'd need to try.
    pramod butte
    @pramodBLS_gitlab
    @rsimon ok thank you … appreciated
    sinamcr7
    @sinamcr7
    @rsimon hi sir, any news about adding line tool into annotorious selector pack?
    Rainer Simon
    @rsimon
    @sinamcr7 not yet. The current line tool isn't yet fully compatible with the OpenSeadragon plugin. But it looks like I'll be needing/using this for a project in September. I can probably merge & finalize this with the next few weeks (fingers crossed).
    ajcreations195
    @ajcreations195:matrix.org
    [m]
    when I'm importing @recognito/annotorious in angular application , it says like could not find a declaration file for module '@recogito/annotorious'. 'C:/angular/imageproof/node_modules/@recogito/annotorious/dist/annotorious.min.js' implicitly has an 'any' type.
    Rainer Simon
    @rsimon
    Hi @ajcreations195:matrix.org that's not an Angular problem as such, but actually a general TypeScript problem. Unfortunately, there are no TS type definitions available for Annotorious yet. The message above is a warning only, right? You should be able to use Annotorious, although without the added typing support?
    See also the issue on the GitHub tracker here for discussion: recogito/annotorious#204
    Daniel Stoekl
    @dstoekl
    Hi @rsimon! As you know we are using reco/anno in eScriptorium. Is there any chance to creating an option to visualize textual annotation by mouse-over in addition to clicking?
    4 replies
    sinamcr7
    @sinamcr7
    Hi, is there any option to type area and perimeter next to annotation in annotorious-osd?
    Rainer Simon
    @rsimon
    You could modify the ShapeLabels plugin to do this. The plugin adds the first tag of an annotation as a label. If you modify the code, you could parse out the shape and compute area etc.
    Architrixs
    @Architrixs
    Hey @rsimon, I wanted to have the shape labels as individual elements, so I could drag them and place them where-ever, Where I should start looking in the code to do this.
    10 replies
    Lars Willighagen
    @larsgw
    Hello, is it possible to display creators, creation/modification dates, and/or licenses in read-only mode in the OpenSeadragon plugin? Either with widgets or some other way?
    Lars Willighagen
    @larsgw
    I see now, widgets do work in read-only mode but Annotorious doesn't seem to expose the creator etc. info to the widget.
    4 replies
    Rainer Simon
    @rsimon
    image.png