Zoom and scale display element

[malclocke]

I am wondering if the following is possible, or if it is on the development roadmap?

I would like to display an image zoomed on load, with the canvas scaled to the appropriate width to display the whole image.

So for example, if my fits array is 32x32, I'd like to display it zoomed times 4 on a canvas / webgl element that is 128x128px.

[kapadia]

Hi, I've added an example of how to do this in the library's current state. I'll keep this issue open until the functionality is added to the api. Hope this helps!

https://github.com/astrojs/webfits/blob/master/examples/webgl-magnify-image.html

[malclocke]

Thanks Amit, that is perfect!

[vertighel]

Hello Amit,
the zoom behaviour via mouse wheel follows the ds9 convention (zoom out on mouse wheel "in"). Is it for a specific reason, or is it possible to invert it to follow the behavour of common image applications?

[kapadia]

Davide, there is no reason the zoom was inverted. You're right, best to stick with the behavior of other image and mapping applications. The library has been updated.

8478584

Thanks!

[vertighel]

Thanks to you, I am finally trying to use the webfits library.
I profit for one question: how to set up the initial position in the
canvas and the initial zoom (for example to fit a little canvas scaling
a big image?

Thank you and I hope to contribute soon.
Cheers
Davide

Il 15/03/2013 23:07, Amit Kapadia ha scritto:

Davide, there is no reason the zoom was inverted. You're right, best to
stick with the behavior of other image and mapping applications. The
library has been updated.

8478584
8478584

Thanks!

—
Reply to this email directly or view it on GitHub
#5 (comment).

[kapadia]

Davide, for now there is not a simple method to invoke that functionality. For now please see

https://github.com/astrojs/webfits/blob/master/examples/webgl-magnify-image.html

for an example. I'll add that functionality shortly.

[kapadia]

mainly, these lines:
https://github.com/astrojs/webfits/blob/master/examples/webgl-magnify-image.html#L45-L47

[vertighel]

I have another question:

what is the best way to draw a circle or an element on the fits?

In the canvas example, adding:

var canvas = d3.select("canvas");
ctx = canvas.node().getContext("2d");
console.log(ctx)
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.strokeStyle = 'green';
ctx.fillStyle = 'red';
ctx.fill();

at the end of the createVisualization() function returns correcty the
circle, but moving the image the circle disappear.

Instead, in the webgl example, adding:

var canvas = d3.select("experimental-webgl");
ctx = ...

or

var canvas = d3.select("webgl");
ctx = ...

produce respectively the error:

 #<WebGLRenderingContext> has no method 'beginPath'

or

Cannot call method 'beginPath' of null

I am sorry for all these questions, but I am almost ready to publish on
github some d3.js + astrojs examples

Cheers,
Davide

Il 16/03/2013 02:47, Amit Kapadia ha scritto:

mainly, these lines:
https://github.com/astrojs/webfits/blob/master/examples/webgl-magnify-image.html#L45-L47

—
Reply to this email directly or view it on GitHub
#5 (comment).

[kapadia]

Davide, add another canvas that lies over the FITS image. Draw all annotations on the top canvas, while leaving the bottom one for the FITS image. You will have to keep all transformations (e.g. panning and zooming) in synchronized between the two canvases.

If you call setupControls() on the webfits object, all mouse interactions will no longer work because the annotation canvas does not pass these events to the webfits canvas. You can resolve this by doing something like:

topcanvas.onmousemove = function(e) {
  // Pass the event to the webfits canvas
  webfits.canvas.onmousemove(e);
}

This is a common use case, so if you find a nice way to do this, please let me know. Hope that helps!

[vertighel]

hello Amit,
here you can find a little gists with my overlay test using d3.js:

http://bl.ocks.org/vertighel/5193613

the drag behavior works well, but the zoom behavior is bugged. I am
trying to fix it and I also asked help on

http://stackoverflow.com/questions/15491356/canvas-image-and-svg-overlay-with-webfits-js-and-d3-js

Cheers,
Davide

PS: do you have any preferential address for mail exchanges?

Il 17/03/2013 01:52, Amit Kapadia ha scritto:

Davide, add another canvas that lies over the FITS image. Draw all
annotations on the top canvas, while leaving the bottom one for the FITS
image. You will have to keep all transformations (e.g. panning and
zooming) in synchronized between the two canvases.

If you call |setupControls()| on the webfits object, all mouse
interactions will no longer work because the annotation canvas does not
pass these events to the webfits canvas. You can resolve this by doing
something like:

|topcanvas.onmousemove = function(e) {
// Pass the event to the webfits canvas
webfits.canvas.onmousemove(e);
}
|

This is a common use case, so if you find a nice way to do this, please
let me know. Hope that helps!

—
Reply to this email directly or view it on GitHub
#5 (comment).