search

ericmandel / js9

astronomical image display everywhere
https://js9.si.edu
Other
124 stars 51 forks source link

Simple pan / zoom example image #13

Closed cdeil closed 8 years ago

cdeil commented 8 years ago

@ericmandel - Is is possible / easy to build something like this with JS9? http://aladin.u-strasbg.fr/AladinLite/doc/API/examples/marker-creation/

I.e. an image that can be panned / zoomed in a simple / nice way? (but otherwise no cruft, i.e. no menu, controls, ...)

What JS / web technology is JS9 using to draw the images? All in Canvas? Using any other JS library or directly? (I couldn't find that info in the docs ... maybe worth adding or putting it more prominently?)

(The issue with Aladin lite is that it can't load simple FITS file, but requires conversion to HIPS as far as I know.)

ericmandel commented 8 years ago

Yes, pretty easy. See: http://js9.si.edu/js9/js9cat.html for examples of how to display catalogs layers, including tooltips, etc. Obviously, the underlying image can be panned, zoomed, etc. Catalog support and other programmatic control is described in the public API at http://js9.si.edu/js9/help/publicapi.html.

The Web page design is completely up to you, and is based on which JS9 divs you add to it. See: http://js9.si.edu/js9/js9bespoke.html or click through a talk I gave using a Web page: http://js9.si.edu/js9/headtalk.html, which is an experiment in creating live demos.

JS9 uses the HTML5 canvas and a host of other technology, including jquery, fabric.js (2D graphics), and empscripten (C to Javascript for cfitsio support). But the HTML5 canvas is the heart of the implementation. Browser developers are making the canvas and javascript faster and faster, and I'm just following their lead.

cdeil commented 8 years ago

@ericmandel - Maybe I just don't get it .... how can I pan?

E.g. at http://visiomatic.iap.fr/pleiades/ I can left-click and drag on my Macbook touchpad and on my iPad I can touch the image and drag. Zooming works via the typical Macbook / iPad guestures to zoom there.

I can't get pan / zoom to work this way with JS9. Possible?

ericmandel commented 8 years ago

Sorry, I did not implement panning and zooming using gestures, though it could be done. I think the panner widget gives a much better interface, since it has both an overview and fine control over where you pan to. I just want to your example page and immediately found myself zoomed in way too far, not sure how that happened. Very frustrating for me.

But if that is what is needed ... it is possible.

cdeil commented 8 years ago

@ericmandel - I agree that the panner widget can be nicer.

But for the site I want to build (displaying a survey image and overlayed catalogs like here) for public relations I think gesture-based panning / zomming is a must. Everyone knows it from Google maps or how image panning / zooming works in desktop image viewers (e.g. open an large PNG in Apple or Windows).

It's so frustrating ... there's ~ 5 astro web image viewer projects (JS9, Aladin lite, and each one has some of the features I need / want. For JS9 I guess the top features I'm missing are gesture-based zoom / pan and tiled image display from a static web server like Aladin Lite or Leaflet does it.

ericmandel commented 8 years ago

Panning and zooming in response to mouse or touch is not hard, but it does conflict with mouse/touch-based contrast/bias and position/value display, both of which would have to be turned off in zoom/pan mode. I guess DS9 already does this in the Edit menu for the pointer ... that has to be thought about ...

How serious are you about using JS9? I could implement touch-based zoom/pan, but I wouldn't want put off other work unless you are serious. Not sure what to advise here ...

And ... I don't know what tiled image display is. You can have multiple instances of JS9 on a single page ... but that is probably not what you want.

cdeil commented 8 years ago

How serious are you about using JS9?

I've been looking at options today. Based on what is there now and the feedback by @ebertin in https://github.com/astromatic/visiomatic/pull/5#issuecomment-168992829 I'm inclined to use Visiomatic.

So don't implement this zoom / pan in JS9 just because I asked for it!

Although: isn't the pan / zoom behaviour I'm asking for also what ds9 does? I.e. it's what most astronomers expect that have used ds9 and are now looking at JS9?

I don't know what tiled image display is.

I mean this method to tile large images: https://en.wikipedia.org/wiki/Tiled_web_map

I found some examples how to prepare tiles for http://leafletjs.com/ :

For Visiomatic tiles can be prepared with STILS and for Aladin Lite HIPS tiles can be produced with Aladin as a command line tool. For my current application I have ~ 10 MB 32-bit float survey images which can be nicely represented as ~ 1 MB PNG images, i.e. tiling isn't really needed, though.

ericmandel commented 8 years ago

I certainly would implement touch-based zoom/pan sooner if we were going to work together. But, as things stand, I'll put it on my list and it will get done in the natural course of events. Tiling, now that I understand what you mean, would also fall into this same implementation arena, since the point is that you pan the currently displayed image and possibly ask for another one from the server.

Feel free to close this issue if you are satisfied.

cdeil commented 8 years ago

@ericmandel - Up to you if you want to close this issue or keep it open as a feature request.

ericmandel commented 8 years ago

Good idea!

ericmandel commented 8 years ago

@cdeil The "natural course of events" (see above) having taken place, I implemented gesture-based pan and zoom in JS9 as part of a generalization of gesture actions. An description can be found at http://js9.si.edu/js9/plugins/help/mousetouch.html ... basically, Web page designers can decide on the default set of actions, but users can change them at run-time.

The code is updated into GitHub, but also is installed in the main JS9 web page http://js9.si.edu for more immediately play. Just bring up the Mouse Touch plugin in the View menu and change the actions on the fly.

cdeil commented 8 years ago

@ericmandel - Thanks!

Everything works on my Macbook and IPad.

Are the defaults for the demos on http://js9.si.edu/ up for debate?

Should we close this issue?

ericmandel commented 8 years ago

@cdeil Everything is up for debate, of course ...

Why mousetouchZoom: false? Are there any drawbacks to having this on by default?

I made scrollZoom false because if it was true, I worried that users would then naturally expectthe primary mouse down/move to initiate pan, mimicking the two actions in Google maps. Since the default for primary mouse down/move is contrast/bias and not pan, I thought this would be confusing.

And ... I didn't want to make primary mouse down/move initiate a pan by default, because too many images fit entirely into the display, i.e., no panning (unlike Google maps, which can always pan). That would make the default action a no-op.

On my Macbook to pan I use two finger. On my IPad it's three fingers. That's a bit unintuitive. Can't it work the same on both by default? (one's a touchscreen, the other a touchpad)

Hmmm ... on my Mac, I use two fingers down plus another one moving to initiate pan, which seems the same number as the ipad. Are you doing something different, with only two fingers and not three?

The problem, as I see, it is that the mouse can move over the display with no buttons pressed and a human can move one finger over the trackpad with no buttons pressed, but the ipad requires at least one finger touch. In turn, the mouse and trackpad can press one finger and move another, which would correspond to two finger movement on the ipad.

Are you interacting differently with your trackpad? Perhaps there is a trackpad setting you and I have set differently?

ericmandel commented 8 years ago

@cdeil I just added the mouse/touch gesture options to the Prefs plugin. This means, for example, that you can go to the js9 web site, open the Prefs plugin, click the displays tab, choose the actions you want to be the defaults, and save. Now whenever you visit that page, your options will be configured properly. That should help some, regardless of how we end up setting the defaults ...

ericmandel commented 8 years ago

@cdeil Thanks for your help, I'll close this and you can open a new issue for anything else that arises.

cdeil commented 8 years ago

Why mousetouchZoom: false? Are there any drawbacks to having this on by default?

I made scrollZoom false because if it was true, I worried that users would then naturally expectthe primary mouse down/move to initiate pan, mimicking the two actions in Google maps. Since the default for primary mouse down/move is contrast/bias and not pan, I thought this would be confusing.

And ... I didn't want to make primary mouse down/move initiate a pan by default, because too many images fit entirely into the display, i.e., no panning (unlike Google maps, which can always pan). That would make the default action a no-op.

That makes perfect sense. I mostly work with survey images and always want the Google maps behaviour. Thanks for implementing this and making it configurable in a nice way!!!