thatcher / openseadragon

This project has moved to its new github organization at github.com/openseadragon, please join us!
http://openseadragon,github.com/
37 stars 14 forks source link

add ClassName to tiles/canvas objects to allow dynamic image filters #28

Closed dgutman closed 11 years ago

dgutman commented 11 years ago

This should be straightforward, I'm just not sure where exactlty in the code base I would need to add this..

Would like to simply add a

Class="layer01" (and as things go forward layer02, layer03, etc...) to the div and/or img tag and or canvas where the tilers are stored.. I really there's some variation in how these tiles are painted / rendered depending on the browser... but if I can at least have a specific tag/ID I can lock onto, I can start experimenting..

I now have a working implementation (will generate pull request when I can properly attach the filters).

I have applied a variety of image filters using SVG (and also have done this using other methods) that allow contrast, brightness, hue, balance, as well as complete color remapping to be done on the fly.... currently this only works in Chrome (I purposely am using Chrome tags to apply these effects, although the majority of them are also supported in other browsers)....

Currently I am applying the filter to the entire #container DIV where the openseadragon renders everything, so it's coloring the buttons/background as well.... if I could instead hook directly into only the images, it would obviously not look as ridiculous. The SVG filters wind up being extremely quick-- and besides brightness/contrass-- you can basically apply a color Matrix and recolor an image -- the "red" image below is actually a grey scale image I am dynamically turning red...

Screenshot 2013-02-03 at 11 02 28 AM

same image colored blue...

Screenshot 2013-02-03 at 11 10 00 AM

iangilman commented 11 years ago

I think @thatcher would be best able to add this support. Once it's in, @dgutman, will you be putting this image filter support together as another OpenSeadragon plugin?

dgutman commented 11 years ago

that would be the plan--- yeah

yeah probably separate repo/plugin--- would basically just be a javascript file to include after seadragon to enable filtering...

may need some input from you or @thatcher about some of the technical stuff in terms of rendering via canvas or via image, etc... but at least I can start the basic framework to enable this functionality and can be added to as needed for various browsers...

On Mon, Feb 4, 2013 at 1:11 PM, iangilman notifications@github.com wrote:

I think @thatcher https://github.com/thatcher would be best able to add this support. Once it's in, @dgutman https://github.com/dgutman, will you be putting this image filter support together as another OpenSeadragon plugin?

— Reply to this email directly or view it on GitHubhttps://github.com/thatcher/openseadragon/issues/28#issuecomment-13090419.

David A Gutman, M.D. Ph.D. Assistant Professor of Biomedical Informatics Senior Research Scientist, Center for Comprehensive Informatics Emory University School of Medicine

iangilman commented 11 years ago

Sounds great... we can have a little directory of plugins on the website or something, to point to it (and others people create).

dgutman commented 11 years ago

Great.... Hopefully Chris can chime to help identify where in the code adding the class labels would go... Since the multilayer code is apparently in the works per his recent posts it should fit somewhere in those changes... On Feb 5, 2013 7:38 PM, "iangilman" notifications@github.com wrote:

Sounds great... we can have a little directory of plugins on the website or something, to point to it (and others people create).

— Reply to this email directly or view it on GitHubhttps://github.com/thatcher/openseadragon/issues/28#issuecomment-13160918.

thatcher commented 11 years ago

Ive started working out the details of the multiple drawers for layers so I'll try to get this in at the same time. I'm making good progress pulling in the seajax-utils as well, got the osm and tms tile sources working, and raphealjs hooks are in progress. ill ping you when Ive got something you can play with, might need to be tweeked over a couple iterations.

dgutman commented 11 years ago

great! I am probably going to try and edit the seajax-utils.js this weekend and try and replace the calls that seem to be breaking it... what branch are you keeping your dev code in?

On Fri, Feb 8, 2013 at 9:50 AM, Chris Thatcher notifications@github.comwrote:

Ive started working out the details of the multiple drawers for layers so I'll try to get this in at the same time. I'm making good progress pulling in the seajax-utils as well, got the osm and tms tile sources working, and raphealjs hooks are in progress. ill ping you when Ive got something you can play with, might need to be tweeked over a couple iterations.

— Reply to this email directly or view it on GitHubhttps://github.com/thatcher/openseadragon/issues/28#issuecomment-13293320.

David A Gutman, M.D. Ph.D. Assistant Professor of Biomedical Informatics Senior Research Scientist, Center for Comprehensive Informatics Emory University School of Medicine

thatcher commented 11 years ago

Im the worst kind of git developer, i develop in master ;) Once we move to the new repo and organization I wont be carrying that bad habit forward.

Ive got an example in for you now here for using overlays to achieve your end goal. The second example shows how to achieve the overlay with class name and id and even using image pixel coordinates to keep it simple.

http://thatcher.github.com/openseadragon/examples/ui-overlays/

feel free to reopen this if it isnt good enough to get you started.