Add Annotation to Openseadragon

Question

var viewer = OpenSeadragon({
    id: "openseadragon1",
    prefixUrl: "images/openseadragon/",
    showNavigator:  true,
    navigatorPosition:   "BOTTOM_RIGHT",
    tileSources: '/fcgi-bin/iipsrv.fcgi?Deepzoom=<?=$plink?>.jp2.dzi',
    crossOriginPolicy: 'Anonymous',
    zoomInButton:   "zoom-in",
    zoomOutButton:  "zoom-out",
    homeButton:     "home",
    fullPageButton: "full-page"
});

anno.makeAnnotatable(viewer);

$.ajax({
    url: "handlers/H_AnnotationHandler.php",
    data: "case_id=<?=$case_id?>&plink=<?=$plink?>&mode=get",
    type: "post",
    dataType: "json",
    success: function(response) {
        if (!response.error) {
            for (var i=0; i<response.annots.length; i++) {
                console.log(response.annots[i].comment);
                anno.addAnnotation({
                    text: response.annots[i].comment,
                    shapes: [{
                        type: 'rect',
                        geometry: {
                            x: response.annots[i].rect_x,
                            y: response.annots[i].rect_y,
                            width: response.annots[i].rect_w,
                            height: response.annots[i].rect_h
                        }
                    }]
                });
            }
        } else {
            console.log(response.error);
        }
    }
});

I can add annotation live : http://annotorious.github.io/demos/openseadragon-preview.html

After user added the annotation, I store in my database. When the user refresh the page, I am loading saved datas from database using ajax call (H_AnnotationHandler.php). Returning data is true, but I could not draw annotation on jpeg2000 image using anno.addAnnotation, how can I draw it ?

Reference : Add annotations API.

@Gavriel you have almost 1-to-1 demo on the preview page, no need to fiddle this — Maciej Kwas, Jan 25 '16 at 00:46
@MaciejKwas, I don't think so. I could, just as he wrote make an annotation on the demo page, but he's problem is to retrieve it from the DB and call the API to show it again. I wanted to see a "hardcoded" string representing the saved value from the DB with the api calls. — Gavriel, Jan 25 '16 at 06:50
@Gavriel you have a console in your browser and I assure you this is all you need :)) the problem with anno.addAnnotation is that it takes src argument as an image and doesn't take openseadragon module under consideration. I believe it is script design issue, as _modules array is not exposed to public, thus you can't invoke its methods directly. — Maciej Kwas, Jan 25 '16 at 10:50
hi, i can add rectangle using https://openseadragon.github.io/examples/ui-overlays/ with my annotation.js plugins coordinates. But they look different (i mean css). And my database coordinates are true, but anno.addAnnotation does not work for me... — Levent Tulun, Jan 25 '16 at 15:00
@LeventTulun check my edited answer, it solves your problem for now, just add src attribute with proper name. — Maciej Kwas, Jan 26 '16 at 12:49

Maciej Kwas · Accepted Answer · 2016-01-26T12:54:07.280

You are missing src attribute in anno.addAnnotation method, the thing is that I don't really know what value should go there, there is nothing in documentation about that, the only thing I could find in internet is this plugin:

https://github.com/dgutman/OpenSeadragon-Plugins/tree/master/annotationState_Code

You could try that instead.

EDIT

I actually managed to attach event programatically on the demo page, the open sea dragon module there is registered as a dzi://openseadragon/something, knowing this you can invoke the function

anno.addAnnotation({
    src : 'dzi://openseadragon/something',
    text : 'My annotation',
    shapes : [{
        type : 'rect',
        geometry : { x : 0.8, y: 0.8, width : 0.2, height: 0.2 }
    }]
});

from console (or in your code within the ajax-success loop) and it will be added to the image. Yet, the naming method is pretty... well, I found this in the source code:

annotorious.mediatypes.openseadragon.OpenSeadragonModule.prototype.getItemURL = function(item) {
  // TODO implement something decent!
  return 'dzi://openseadragon/something';
}

so be assured that this might change in future.

did you see this in action? I don't think it works: https://jsfiddle.net/peLokacs/4/ — Gavriel, Jan 26 '16 at 13:46
Open demo page provided in question, open up javascript console, paste the code and notice the note. It is that easy. Making fiddle for that is total waste of time — Maciej Kwas, Jan 26 '16 at 13:48

score -1 · Answer 2 · answered Jan 25 '16 at 15:16

-1

Since you didn't share your code I tried to set it up here: https://jsfiddle.net/peLokacs/3/, please do the necessary changes so I can see the annotations. Also I get a "Annotorious does not support this media type in the current version or build configuration." error, If you managed to save the annotations, then you probably know how to fix that too.

var viewer = OpenSeadragon({
    id: "openseadragon-1",
    prefixUrl: "https://neswork.com/javascript/openseadragon-bin-2.1.0/images/",
    //tileSources: "https://openseadragon.github.io/example-images/highsmith/highsmith.dzi",
    tileSources: { type: 'legacy-image-pyramid', levels: [{ url: '0001q.jpg', height: 889, width:  600 }, { url: '0001r.jpg', height: 2201, width: 1485 }, { url: '0001v.jpg', height: 4402, width: 2970 }]},
    showNavigator: true,
});

answered Jan 25 '16 at 15:16

Gavriel

18,880
12
68
105

1

I don't believe if you understood the problem. There were nothing wrong with retrieving data from database, the problem was undocumented method, all you had to do was to find out solution in annotator source codes. – Maciej Kwas Jan 26 '16 at 12:56
I understood that, but why should I waste my time on writing the code to what he claims already achieved. In order to be able to start to test the code one needs the annotation. It would've been much better if he provided code that can be tested and improved, rather than copy&pasting part of it that needs much effort to get to the problem. – Gavriel Jan 26 '16 at 13:41
@Gavriel if i share my code with you, you can not open the image. because image size is 1GB, how can i upload it ? I use openseadragon like your code. – Levent Tulun Jan 27 '16 at 07:34

Add Annotation to Openseadragon

2 Answers2

EDIT