Loading the Images
Load the images into the viewer
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the OpenSeadradon Deep Dive course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to OpenSeadradon Deep Dive, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:11] In module 3, you build a pipeline that generated DZI files, as well as a JSON file with information about all the files. Now you'll take the sample viewer from module 2 and add those images to it.
[00:12 - 00:20] For starters, we'll load the image-data.json and use that to build our tileSources option. Start with the code from module 2 lesson 2.
[00:21 - 00:29] We'll need to fetch the JSON, which means our code now needs to be asynchronous . We can do that by making an async function and calling it right away, like so.
[00:30 - 00:39] We'll use the browser's fetch API to grab the file. Once we get the response, we can use its JSON function to convert the JSON text into an object we can use.
[00:40 - 00:52] Once we have the image-data in a readable format, we can go through and make a set of tile sources with it, like so. Note that we are just using the DZI URLs as tile sources rather than the object structures shown in module 2.
[00:53 - 01:04] There are many different ways to specify tile sources, and these are just a couple. Since we were using non-tiled images in module 2, we had to specify them using the type image structure.
[01:05 - 01:16] With DZI, OpenSeadragon knows how to open the DZI file and read the info from it, which is generally the easiest thing to do. You can, however, also specify a DZI tile source directly as an object, like so .
[01:17 - 01:26] Note that this is all the information from the DZI file. This can be handy if you have a lot of DZI files and you want to save yourself a round trip to the server for each one.
[01:27 - 01:37] You can load all of the data from them in a single call to the server and specify the tile sources that way. Anyway, we don't need that extra control, so we'll just stick with the simplicity of using the URLs.
[01:38 - 01:40] Here we load them into the viewer. Go ahead and run it.
[01:41 - 01:48] Remember to use your local server as discussed in module 3 lesson 2. Opening the HTML file directly in your browser won't work.
[01:49 - 01:59] You should see all the images you converted lined up in a single row. It's laid out like this because we're using the collection mode option with collection rows 1, as discussed in module 3 lesson 2.
[02:00 - 02:07] You're now loading all your converted images into the viewer. In the next lesson, we'll get into the multi-image API so you can arrange them, however you want.