Add Separate Annotations

Anonymous
2012-07-07
2012-10-06
  • Anonymous - 2012-07-07

    Dear Ruven,

    Thanks a lot for your great job,the project is cool!

    I am now working on a Biomedical Image Viewer Project which will be
    customizing the IIPmooviewer for biomedical use. One of the thing I am
    currently doing is to add a separate SVG annotation layer on top of the
    IIPmooviewer.
    Unlike your approach of displaying the boundary css of the annotations, I
    added a separate layer on top of the iipmooviewer.canvas and wish to display
    and draw the svg images on that layer.
    https://github.com/Lincolnnus/Image-
    Viewer/blob/master/js/annotation.js

    https://github.com/Lincolnnus/Image-
    Viewer/blob/master/view3.html

    However, there are several problems I encountered. Firstly, the iipmooviewer
    object itself defines the functions such as ZoomIn/ZoomOut and Scroll when the
    object is firstly constructed. The svg annotation is another separate object.
    The size of the annotation is dependent on the iipmooviewer. wid/hei and
    iipmooviewer.view.w/h. Every time a ZoomIn/ZoomOut/Scroll(requestImages)
    function is triggered, the showAnnotation function will have to be called
    again to display the svg images correctly.
    I guess it would be too bad an idea to override every function inside the
    iipmooviewer object. But I cannot think of other better ways to make that
    work. Do you have any ideas?

    Another question is about the drag/drop(or the moveTo function). As I see from
    the code, dragging is allowed inside the $("canvas") element and after
    scrolling the image will be moved to the specific location.

    At the beginning, I think every coordinate in the $("canvas") element is
    relevant to the relative position of the canvas layer and the viewing
    size(iipmooviewer.view.w/h) but it should be irrelevant to the starting
    position of the iipmooviewer.view.x/y. However, when I draw svgs inside the
    $("canvas"), the starting position --iipmooviewer.view.x/y of the viewing box
    is also relevant to the svg positions. That's so wired. Do you have any idea
    how the coordinate system changes after the moveTo is called? Thanks in
    advance.

     
  • Anonymous - 2012-07-10

    I guess I didn't explain the second question clearly. Here is the screenshot
    of the annotation box. The red box is the annotation box rendered from svg
    while the transparent box is the original annotation box which should be the
    correct outcome.

    I think it is the problem of SVG which is not html but xhtml and it gets
    problem with the coordinate system when the viewport is larger than the screen
    size(http://www.w3.org/TR/SVG/coords.html). I'll try more to fix that.

    For the first question, I tried to edit the code directly in the
    iipmooviewer-2.0.js createAnnotations function which turns out to be working.

     
  • Ruven

    Ruven - 2012-07-10

    I notice you're using an older version of the viewer. I have the latest code
    on github: https://github.com/ruven/iipmooviewer. Some of the annotation code has changed since, so you should
    perhaps try building your version from that.

    And apart from SVG annotations, what else are you looking to add to your
    version?

     
  • Anonymous - 2012-07-24

    Thank you Ruven. I should have checked your reply earlier.
    I added a HTML5 canvas module which allows the doctors to draw markups on the
    images and then write annotations.
    One example can be viewed via this link http://170.140.138.125/bio/view5.html
    ?/usr/share/iip/3.tif.

    However, these markups are created on a separate layer on top of the
    iipmooviewer.canvas layer, thus some of the functionalists like dragging and
    dbclick zoomIn are not accessible. I guess I shall inject the SVG annotations
    in the iipmooviewer.canvas layer, but it doesn't work after trying for many
    times:( Do you have any suggestions?

    If you have any suggestions on creating some new functions, I will help write
    some, too. Thanks.

     
  • Ruven

    Ruven - 2012-07-24

    However, these markups are created on a separate layer on top of the
    iipmooviewer.canvas layer, thus some of the functionalists like dragging and
    dbclick zoomIn are not accessible. I guess I shall inject the SVG annotations
    in the iipmooviewer.canvas layer, but it doesn't work after trying for many
    times:( Do you have any suggestions?

    It should work - SVG can receive events just like other HTML entities. Perhaps
    you'll need to attach the mouse events to the SVG container also?

     
  • Anonymous - 2012-07-24

    Thanks Ruven.

    Yes, it works. I refer to http://stackoverflow.com/questions/3642035/, SVGs cannot be appended(in Jquery)
    or injected(in mootools). I created a div tag where I set the html attribute
    as a svg image, then append the whole div tag in the iipmooviewer.canvas, it
    works good. http://170.140.138.125/bio/view5.html?/usr/share/iip/3.tif

    However, my format of storing the annotation data is slightly different from
    yours as I'm adding tools like polyline tool and pencil tool to draw complex
    markups. My code is a bit messy, but it works fine cooperating with your
    iipmooviewer2.0. Thanks for your nice project. It creates values to many other
    industries, too!

     
  • Ruven

    Ruven - 2012-07-24

    Very nice!

    It would be cool if you could make your code more or less compatible with the
    main version, so that we could eventually merge in your SVG code or have SVG
    as an optional module.

    My annotation code is now independent of the main iipmooviewer code in a
    separate file annotations.js. If you keep your version compatible with this,
    it could be a good way to make things modular. Did you need to modify the main
    iipmooviewer js to get yours to work?

     
  • Anonymous - 2012-07-26

    Thanks Ruven.

    I modified the createAnnotation function to recreate the annotations when
    actions like ZoomIn() are triggered. The main js code in iipmooviewer.js needs
    not to change. I guess that's modular:-) I will need to tidy my code a little
    bit since it's a bit messy at this moment. I would love to contribute the code
    to your project when most of things work in the mid-August if you are
    interested:-)

     
  • Ruven

    Ruven - 2012-07-26

    I would love to contribute the code to your project when most of things work
    in the mid-August if you are interested:-)

    Yes definitely. Thanks!

     
  • Anonymous - 2012-08-07

    Dear Ruven,
    I cleared up my codes and updated the annotation creation module. You may test
    it here:
    http://170.140.138.125/bio/view.html.

    For now, there are five drawing tools: Rectangle tool, Ellipse tool,polyline
    tool, pencil tool and measurement tool. You will need to move the mouse to
    somewhere near the iip icon on the top left corner to trigger the tool bar.
    The code is now modular. The two major functions-drawMarkups and
    createAnnotations are both written here:http://170.140.138.125/bio/js/annotat
    ion4.js.

    You may wish to customize the saveAnnotations function which will be saving
    the annotation data to the server. They can be saved to databases or files,
    this is one example to save the annotation data to file via a php script.
    https://github.com/Lincolnnus/Image-
    Viewer/blob/master/api/annot2.php

    If you have any question, please feel free to let me know. Thanks.
    Shall I push to your github or else?

     
  • Anonymous - 2012-08-15

    Dear Ruven,

    My mentor said that he would like to wait until late October to file the SVG
    annotation module to the IIPMooviewer project when the Bio-Medical project
    gets finished. I'll continue polishing&modulating my codes. Sorry for the
    inconvenience.

    All the Best,
    Shao

     
  • Ruven

    Ruven - 2012-08-16

    No worries. You're doing a good job so far!

     


Anonymous

Cancel  Add attachments





Get latest updates about Open Source Projects, Conferences and News.

Sign up for the SourceForge newsletter:





No, thanks