HTML Overlays

[00:00 - 00:06] In the previous modules, you have built a viewer with multiple images arranged just how you like them. Now it's time to decorate them with some additional information.

[00:07 - 00:16] To install the HTML overlay plugin, attach its script to your HTML after the OpenC Dragon script. For this tutorial, we can just use it off of GitHub like so.

[00:17 - 00:24] But for production, you'll probably want to include it directly in your project . Once it's installed, it adds an HTML overlay function to the viewer class.

[00:25 - 01:29] You activate it by calling that, and it returns an object with a couple of functions you can call to utilize it. For our purposes, the function we're interested in is element, which returns the HTML element that you can attach your overlays to. Even though it's just a regular HTML element, keep in mind that it's scaled to match the viewport coordinates of the viewer. If you recall, when we arranged the images, we set them to be 1000 units in size, their height for row mode, or their width for masonry mode. We'll need to keep that in mind as we position our elements inside of it. Note that when you call HTML overlay, you can pass an options object with a scale property to adjust the overlay coordinates without changing the viewport coordinates. For instance, if our viewport had images sized one unit, but you didn't want to specify your font sizes as 0.1px, you could call viewer.html overlay scale 100 and use something more like 10px for your font size. Remember, it's all relative. For starters, let's just drop some text in the scene. Go ahead and run it. You'll have to zoom in on the first image, but you'll see the words "Hello World" in black in the upper left corner of that image.

[01:30 - 01:46] Success! We probably want to give it a bit of styling though. You can add this to your JavaScript, and then you can drop this class in domain.css. Now when you run it, the text should be much more visible. But really, what we want is for each image to have its own overlay that shows the title of that image.

[01:47 - 02:56] For this, we'll need to know where each of the images are and which name goes with which. We already have the image data that we're loading in. We'll want it in more places, so let's add a global variable for it at the top. And in our main function, after we load image data, we can use it to reference the images array. Now we can create one overlay per image. This is also a good time to connect the OSD tiled image objects with our image records. We'll need to wait until the open event, so all of the images are loaded. Inside the handler function, we can loop through the images like so. So we've added the tiled image to the image rack and then created an overlay with the image's name and added that to the image rack as well. Now that we have these new overlays, we can get rid of the test overlay you created before. Go ahead and run. You should see all sorts of overlays jumbled on top of each other. This is because we haven't yet told them where their images lie. We'll have to do that every time we rearrange the images so we can stick it inside of our update layout function. We can put this at the end of that function. As you can see, we're going through the image racks and getting the bounds for each tiled image and then just setting the overlays positioning to match. If you run it, you can see now each of the images has its own name attached.

[02:57 - 03:49] Let's clean up the styling a little, mostly getting rid of the positioning, which the JavaScript will overwrite and adding a little text shadow so it stands out better. Looking good, we can also add a link to the images page on Wikipedia. We can add this to the each image inside the open event handler and add this to the CSS so they don't look too ugly. The links will be jammed up against the names, but you can fix that by adding a space to overlay. text content before adding the link. Give it a run and try those links. You've installed your first OpenC Dragon plugin. There are lots of plugins available and they add all sorts of capabilities to OpenC Dragon. You've learned how to add HTML elements as overlays and how to position and style them so they work well in the zooming world. Thinking in terms of zooming takes a change of perspective, but it can be very powerful. In the next lesson, you'll combine the overlays with the mouse handling you learned in the previous module to implement hovers.