Annotorious saving data (annotations/coordinate) in database

[ubuntutest]

Hi,
I would like to save the coordinates and the annotations, I can not understand how to do it, but I'm not very experienced with programming.
I have seen several posts including this:
Https://groups.google.com/forum/#!topic/annotorious/BlnboEveCmI
but is a bit old,
Are there easy way to do that or an examples to use? thank you so much

[gunturbudi]

This is the example in my code for Add Update And Delete.
Basically i used 3 handler (onAnnotationCreated, onAnnotationRemoved, onAnnotationUpdated), and send the data via ajax post into backend processing. I don't know if there are a better way to do this.

    anno.addHandler('onAnnotationCreated', function(annotation) {
        var teks = annotation.text;
        var context = annotation.src;
        var x = annotation.shapes[0].geometry.x;
        var y = annotation.shapes[0].geometry.y;
        var width = annotation.shapes[0].geometry.width;
        var height = annotation.shapes[0].geometry.height;
        var id = some_id;
        $.post( '$url_add', { teks:teks,context:context,x:x,y:y,width:width,height:height,id:id})
            .done(function( data ) {
               console.log(data)
            });
        
    });


    anno.addHandler('onAnnotationRemoved', function(annotation) {
        var teks = annotation.text;
        var context = annotation.src;
        var x = annotation.shapes[0].geometry.x;
        var y = annotation.shapes[0].geometry.y;
        var width = annotation.shapes[0].geometry.width;
        var height = annotation.shapes[0].geometry.height;
        var id = some_id;
        $.post( '$url_delete', { teks:teks,context:context,x:x,y:y,width:width,height:height,id:id})
            .done(function( data ) {
               console.log(data)
            });
    });

    anno.addHandler('onAnnotationUpdated', function(annotation) {
        var teks = annotation.text;
        var context = annotation.src;
        var x = annotation.shapes[0].geometry.x;
        var y = annotation.shapes[0].geometry.y;
        var width = annotation.shapes[0].geometry.width;
        var height = annotation.shapes[0].geometry.height;
        var id = some_id;
        $.post( '$url_update', { teks:teks,context:context,x:x,y:y,width:width,height:height,id:id})
            .done(function( data ) {
                console.log(data)
            });
    });

[ibrar06hussain]

but does it get current annotation being edited/added? I mean I have to either use loop as getAnnotation() is not help ful

[FlyingBugs]

is there any id associated with annotation object? I mean how will I come to know which annotation to update in case of onAnnotationUpdated. @gunturbudi

[gtopsis]

@FlyingBugs I iterate my array(which I get from db) searching for a annotation with the same geography. Unfortunately an annotation does not have a unique id

[jaikishangurav]

@gunturbudi I am trying similar thing where I am persisting annotation co-ordinates in database. But for single annotation drawn, 'onAnnotationCreated' event is getting executed arbitrary number of times. Sometimes the event is executed once or thrice or six times for single annotation drawn on image. Did you face any such issue while persisting data in database?

[gtopsis]

@jaikishangurav Did you set the handler inside a controller ?
If so, you need to move it in other place so that it is being called once and not every time the controller is initialized.

[kriptoblak]

If somebody needs the solution to add, edit and delete annotation data in json file. In the zip file you will find index.php, add.php, delete.php and update.php file. (you still need to download the annotorious library). The base code provided by @gunturbudi. Thank you.
example.zip
The code might not be in best practice but it does the job.

[jkp-parker]

If somebody needs the solution to add, edit and delete annotation data in json file. In the zip file you will find index.php, add.php, delete.php and update.php file. (you still need to download the annotorious library). The base code provided by @gunturbudi. Thank you.
example.zip
The code might not be in best practice but it does the job.

Bay-dice i have been using your json files and retrofitting them to SQL, i have the add working fine and the update and delete is bring across the text variable but my id reads blank, there for my SQL query fails?

and idea what i have got wrong.

[kriptoblak]

If somebody needs the solution to add, edit and delete annotation data in json file. In the zip file you will find index.php, add.php, delete.php and update.php file. (you still need to download the annotorious library). The base code provided by @gunturbudi. Thank you.
example.zip
The code might not be in best practice but it does the job.

Bay-dice i have been using your json files and retrofitting them to SQL, i have the add working fine and the update and delete is bring across the text variable but my id reads blank, there for my SQL query fails?

and idea what i have got wrong.

ID is defined in anno.addHandler
var id = $.now();
That is basically a unique timestamp at the time of saving of the annotation.
In add.php you get it with $id = $_POST['id'];

try to add
console.log(id);
under the var id definition and see if you get anything in the console when you submit the annotation.

Also if you are using a database you can have id column with auto increment so you don't need to deal with that in the code.

[iamraju]

Has anyone used Freehand selector and saved coordinates ? I am not being able to make it working.

[deekshaj]

Solution to add, edit and delete annotation data in json file was very helpfull. I need your help in add, edit and delete annotation data in json file for polygon annotation @bay-dice .
Thank you