annotorious / annotorious-v1

Project has moved to http://github.com/annotorious/annotorious
https://annotorious.com
MIT License
593 stars 142 forks source link

Annotorious saving data (annotations/coordinate) in database #178

Open ubuntutest opened 7 years ago

ubuntutest commented 7 years ago

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 commented 7 years ago

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 commented 6 years ago

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

FlyingBugs commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

deekshaj commented 5 years ago

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