Clicking on Images

[00:00 - 00:07] In the previous module, you learned how to bring multiple images into the viewer and arrange them as you please. Now you'll get into interacting with those images.

[00:08 - 00:13] By default, clicking on the viewer zooms you a little closer to that part of the contents. But what if you want to be more specific?

[00:14 - 00:23] In this lesson, we'll make clicking in the viewer zoom you directly to whatever image you clicked on. For starters, we'll want to disable the default behavior, so our new code doesn 't fight with it.

[00:24 - 00:34] OpenC Dragon has nuanced options for a number of gestures broken down by input device. By default, click to zoom is on for both mouse and pin input, so we'll turn it off for both of them.

[00:35 - 00:46] Give it a try. You'll see that clicking in the viewer no longer does anything. For information on all of the gesture controls, go to the OpenC Dragon options documentation and scroll down to the gesture settings section.

[00:47 - 00:55] Now that we've disabled the default click behavior, we can start getting click events from the viewer and handling them ourselves. We need to add a handler for canvas click events.

[00:56 - 01:05] OpenC Dragon actually emits canvas click anytime the pointing device, mouse, touch, pen. Let's open the viewer, regardless of whether it was a quick click or a longer drag.

[01:06 - 01:12] In this case, we are only interested in clicks, so we can test the events quick property. We need to know where the click was.

[01:13 - 01:24] The event has a position property that's in web coordinates relative to the viewer's element. To find out what image was clicked on, we'll want to convert that position to viewport coordinates, which is how all images are positioned.

[01:25 - 01:34] See the coordinate system section in the introduction to this course for more info on the different coordinate systems. The viewer's viewport has a bunch of conversion functions for the various coordinate systems.

[01:35 - 01:49] Since we're going from the viewer elements coordinates to the viewport coordinates, we'll use viewer element to viewport coordinates. Now that we have the click location in viewport coordinates, it's just a matter of going through all of the images and checking to see if that location is inside their bounds.

[01:50 - 01:59] We already have our handy each image function, so we can use that to go through the images. Once you have an image, you can get its bounds in viewport coordinates via the get bounds method.

[02:00 - 02:13] As mentioned in the arranging the images lesson, we'll want to pass in true so we're getting the current location of the image in case it's animating. The bounds is an open seed dragon wrecked, which has a handy contains point method to let us know if our point is inside it.

[02:14 - 02:22] Being able to know which image is hit is another good general purpose tool, so let's put it all together into a function. Now that we have get hit, we can call it.

[02:23 - 02:32] It's possible the user didn't click on any image, so we have to check if we got one. If we did get one, we can zoom the viewport to that location by grabbing the images bounds and telling the viewport to go there.

[02:33 - 02:40] If the user clicked outside of an image, one nice thing might be to zoom back out to the home state. Run the app and click on an image.

[02:41 - 02:51] It should zoom in on the image looking something like this. Responding to clicks on an image in Open Seedragon is a little more complicated than clicking on regular HTML elements, but now you've learned the basics.

[02:52 - 02:59] Along the way, you've learned a little more about dealing with the different coordinate systems. So far, you've always used the default spring animation.

[03:00 - 03:04] In the next lesson, you'll create a custom animation to move from image to image.