OpenSeadragon Deep Dive
In this course, you'll learn how to prepare and present huge images on the web using OpenSeadragon zooming technology. This course is for web developers who want to create truly unique web front-ends – with a focus on implementing immersive experiences with high-resolution images and interactive overlays using OpenSeadragon and Node.js.
- 5.0 / 5 (1 ratings)
- Published
- Updated
51 mins
13 Videos
Ian Gilman is the creator and maintainer of OpenSeadragon. Born to an artist and a scientist, he fell in love with art, technology, and storytelling at an early age. He's been writing dynamic software on teams big and small for several decades, and teaching programming for nearly as long. While working at Microsoft, he wrote the original version of what would become OpenSeadragon and worked to get it open-sourced. Since then, the technology has blossomed, taking on a life of its own. Ian continues to lead the OpenSeadragon community, welcoming and mentoring users and contributors from across the globe. He's passionate about open web technologies, lively user interfaces, and feedback loops of all shapes and sizes.
01Remote
You can take the course from anywhere in the world, as long as you have a computer and an internet connection.
02Self-Paced
Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.
03Community
Join a vibrant community of other students who are also learning with OpenSeadragon Deep Dive. Ask questions, get feedback and collaborate with others to take your skills to the next level.
04Structured
Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.
Transform huge images into immersive experiences
The key concepts behind OpenSeadragon, including tile pyramids and viewport coordinates.
How to collect huge images and convert them into a format suitable for efficient display,using the VIPS command line tool.
How to build a pipeline for converting large numbers of images, using Node.js.
How to display all of the images together in the same viewer.
How to arrange the images however you want, and how to animate between arrangements.
User interaction with the images, including custom animated movement between images, using Tween.js.
Adding overlays with additional information and links, using the OpenSeadragon HTML Overlay plugin.
High-resolution imagery is all around us. Once the domain of high-end photography, now even our phones have many megapixels. OpenSeadragon is the premier tool for displaying these images on the web. Other tools exist, but they are either focused on geographic data, or they lack versatility and polish. OpenSeadragon has a lively community and is used throughout the world by artists, libraries, museums, medical/scientific institutions, etc.
With OpenSeadragon, you can display images too big to view on the screen, or even too big to send all at once, and seamlessly transition from low resolution to high resolution with no extra coding. OpenSeadragon works across devices, from tiny phone screens to giant wall displays.
By its very nature (allowing the user to zoom into ultra-high resolution images), OpenSeadragon has a number of very powerful concepts that may not be intuitive at first (tile pyramids, multiple coordinate systems, etc.). This course will give you a solid working understanding of those concepts. We will then dive further into many of the advanced techniques possible with OpenSeadragon to take your app to the next level. Throughout, we will work with real, functioning apps that you will build from start to finish.
This course is taught by Ian Gilman, the creator and maintainer of OpenSeadragon.
Our students work at
Sample Course Lessons
Course Syllabus and Content
Introduction
2 Lessons
Introduction to This Course
Introduction to OpenSeadragon
Viewer Basics
3 Lessons 5 Minutes
Creating a basic viewer
Take a look at two modes that help you arrange multiple images
Some exercises to help you practice what you have learned
Tiled Images
5 Lessons 16 Minutes
Look at what to do when your image is huge
Loading the DZI file into your OpenSeadragon viewer
How to automate the process
Build a pipeline that generates DZI files for you, as well as a data file containing information about all of those files
Some exercises to help you practice what you have learned
Multi-Image
4 Lessons 11 Minutes
Load the images into the viewer
Arrange the images in a trim and proper way
Add another arrangement and a toggle button to switch between both
Some exercises to help you practice what you have learned
Navigation
3 Lessons 10 Minutes
Make clicking in the viewer zoom you directly to whatever image you clicked on
Write a custom animation that moves smoothly from one image to another, zooming out in the middle for a nice overview
Some exercises to help you practice what you have learned
Overlays
4 Lessons 7 Minutes
Add text overlays to the images to show additional information
Track the mouse movement to hide and show the text overlays on hover
Some exercises to help you practice what you have learned
Congratulations and next steps
Subscribe for a Free Lesson
By subscribing to the newline newsletter, you will also receive weekly, hands-on tutorials and updates on upcoming courses in your inbox.
What Students are Saying
Meet the Course Instructor
Purchase the course today
One-Time Purchase
OpenSeadragon Deep Dive
- Discord Community Access
- Full Transcripts
- Project Completion Guarantee
- Lifetime Access
newline Pro Subscription
$18/MO
Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More
Billed annually or $40/mo billed monthly. Free to cancel anytime.
- Discord Community Access
- Full Transcripts
- Project Completion Guarantee
- Lifetime Access
Plus:
- Unlimited access to 60+ newline Books, Guides and Courses
- Interactive, Live Project Demos for Every newline Book, Guide and Course
- Complete Project Source Code for Every newline Book, Guide and Course
- Best Value 🏆
Frequently Asked Questions
Who is this course for?
This course is for JavaScript developers who want to present extremely high resolution images on the web.
