Embed an interactive 360° image in the Rich Content Editor

[msgarcia]

• A New Perspective
• Demo
• What You Will Need
• Creating a 360° Image with Street View
• Setup
• Taking Your 360° Photo
• Modifying the Photo for Mobile Device Compatability
• Resizing Your Photo
• Uploading the Photo to imgur
• Using Pannellum & Embedding in Canvas Content
• Final Thoughts

A New Perspective

You no doubt have probably been on Google maps or Facebook, or another website, and found an interactive image, that allows you to look around in 360°. While exploring the content you may have even had the thought,

Well this is all well and good for the tech giants, but what about me? I could use this type of content for so much! I could go to a local art gallery and share the experience with my students! Perhaps I could travel to a foreign country and snap 360° photos for my students and have them explore along with me when their Canvas course starts. Maybe I could go into a science laboratory or out in the field and snap photos of the space so that they could get a better notion of what is involved in my profession.

Well, fear not ambitious innovator, I am here to show you how you could easily embed content such as this in your Canvas course so that your students can get an experience like this! While the process may seem somewhat daunting initially, if you have the free right tools you should be able to get this up and running in no time at all... I should mention that in this rare instance, the right tools and the free tools are one and the same!

Check out the demo below first, and if you like what you see, read on to learn how to make one of your own!

Demo

Check out the demo of what we are going to make in this tutorial!

What You Will Need

Some of these items are items that you will need to download, while others you will just need to be aware of for now.

1. Google Street View App (Free Download for iOS or Android).
2. An image editing tool that will allow us to resize the photo (covered below for each OS).
3. An Imgur account. Sign up for free or Login if you have an existing account.
4. Check out the Javascript library that we will be using, Pannellum. Specifically click on Documentation > Examples. Don't worry too much about this right now, as I will explain how we are going to use it in just a moment.

Once you have/are aware of these three things, you are ready to begin.

Creating a 360° Image with Street View

There is some initial set up that we will need to do with the Street View App before we are ready to get out there and start taking photos.

Setup

1. Make sure you have logged in to a Google account, or create a new one.
2. Tap on the menu icon  in the upper left corner of the app and navigate to Settings. Once there verify that you have enabled/setup the option to Save the photo to an album on your phone (this option may be a little different between iOS and Android).

Taking Your 360° Photo 

Your setup complete, you are now ready to take your 360° photo. This is a fairly easy endeavor. Simply:

1. Find a venue (try a venue with a lot of space. The larger the space, the easier it will be to get cleaner stitching on the photo).
2. Tap on the Camera icon in the lower right.
3. Select Camera from the options that are you are given.
4. A view finder menu will appear with instructions. Follow the instructions to take the first, and then subsequent photos for your 360° image.
   Figure 1. Aligning the camera with the dot will start the 360° image capture process in the app.
   
5. Once you have completed taking all of the photos, the app will "stitch" them together into a 360° photo, and the photo will be saved into an album on your phone. Locate the photo on your phone and get it to your computer so that we can resize it.

Modifying the Photo for Mobile Device Compatability

Resizing Your Photo

Now that we have the photo, we need to resize it so that it will render properly on mobile devices. Specifically, if the largest dimension of the image is > 4096 pixels, we need to shrink it to 4096 pixels while maintaining the aspect ratio.

Find the operating system you are using below, and follow the steps in the linked tutorial to resize the image appropriately.

Windows

1. Right click on your image and choose Open with > Paint to open it in Microsoft Paint.
2. Once opened, click on the Resize button in the "Image" panel of the ribbon.
   
   
   Figure 2. The Resize option in Paint will allow you alter the image's dimensions (Windows).
   
3. When the resize window appears, make sure that the box next to Maintain Aspect Ratio is checked.
4. Click the radio button next to Pixels to select it.
5. Resize the image so that the widest dimension (usually width) is no greater than 4096 pixels. I typically just set the width to 4096 pixels.
6. Save the image.

Mac

1. If Preview is not set as your default image viewing application, right click on the image and choose Open with > Preview.
2. Once in Preview, go to the menu bar at the top of your Mac and click on Tools > Adjust Size.
3. Make sure that the box next to Scale proportionally is checked.
   
   
   Figure 3. The Adjust size option in Preview will allow you alter the image's dimensions (Mac).
   
4. Resize the image so that the widest dimension (usually width) is no greater than 4096 pixels. I typically just set the width to 4096 pixels.
5. Save the image.

Uploading the Photo to imgur

1. Log in to Imgur.
2. Click on New Post in the upper left corner and choose Upload Images from the dropdown menu that appears.
3. Click the Browse button and locate your image, or drag and drop the image into the window that appears to begin the upload.
4. In the page that opens (when the upload begins) click on Post privacy in the lower right, and ensure that you are happy with the privacy setting that is selected. I typically leave images like this set to Private.
5. Wait until your photo has BOTH uploaded and been processed. Once it has hover on your username in the upper right corner of imgur and click on the images option in the dropdown menu that appears.
6. Locate your image in the collection that appears, and click on it.
7. In the window that pops up you should see the image and a plethora of links next to it. Click on Copy next to the Direct Link option.
   
   
   Figure 4. The Direct Link option in imgur is what we will use to render our image in Pannellum.
   
8. This link is the one that we will use with the final piece of this puzzle. For now, if you need to, paste the link somewhere (word doc, Canavs Page, text file, etc), or just leave this window of imgur open, and we can come back to it later.
9. Note: We will need to slightly modify this link when we go to use it or Pannellum will not work properly. All that you need to do is convert the direct url from http://i.imgur.com/UNIQUEIMG.jpg to https://i.imgur.com/UNIQUEIMG.jpg. 

Using Pannellum & Embedding in Canvas Content

We will be using a javascript plugin called Pannellum to help us achieve our embeddable 360° photo, and this photo will, at its most basic level, allow the student to look around and zoom in or out. However, we will be using this tool in its most basic instance. If you are more of an adventurous, or a skilled user of javascript, you can use this tool to build out even more robust widgets that allow the user to interact with pieces of the environment, see an area from multiple points of view, or, you can even create 360° videos! If you would like to see an example of how versatile this tool can be, check out the Pannellum page or you can look at an example that I have built, using their documentation, here.

1. Copy the following code:
   
   

   <p style="border: 1px solid #d7d7d7; position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
       <iframe src="https://cdn.pannellum.org/2.3/pannellum.htm?panorama=YOURIMGURURL" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" width="420" height="315" allowfullscreen="allowfullscreen">
       </iframe>
   </p>‍‍‍‍‍‍‍‍‍

2. Create a new page/assignment/quiz/content in Canvas so that you have your Rich Content Editor open.
3. Click on HTML Editor in the upper left of the RCE so that you can embed the code that you copied in step 1.
4. Paste the copied code from step 1 into the HTML Editor, and then locate the Direct link for the imgur image that you copied in step 7 of the imgur instructions. Copy the direct link url.
5. In the <iframe> src parameter (line 2 of code above), you will notice that there is a string ?panorama=YOURIMGURURL. Highlight YOURIMGURURL and paste over it with the Direct Link url. Remember that your Direct Link url must begin with https NOT http, or it won't work. If it currently is http, just add the 's' onto it.
6. The <iframe> src parameter should now look something like this: src="https://cdn.pannellum.org/2.3/pannellum.html?panorama=https://i.imgur.com/IbvhuaY.jpg" with the only difference between your src parameter and mine being the unique ID (in bold) that signifies your image versus that of mine.
7. Click Save in the content editor and you now see the iframe rendered as it would be for your students.
8. Click on the prompt that tells you to Click to Load Panorama and Pannellum should load your image.
9. Feel free to click and drag in the window to see what it does, and how it works!

Final Thoughts

One addition cool thing about all of this? The iframe maintains functionality in the Canvas mobile app as well!

This video is currently being processed. Please try again in a few minutes.

Figure 5. The <iframe> element retains its functionality even in the Canvas mobile app!

If you or your institution is really looking to build on this, there are a few options that will make the 360° images even better. For one, taking photos with your phone and having them "stitched" together often results in artifacts (ceiling tiles don't line up, breaks in furniture, etc). I would recommend looking into cameras that are built to take 360° pictures and videos, which can range from a ~$200 - $5000. Additionally, you may want to look into the Google Street View website to see what their cameras look like, and to see if you would want to borrow one of them (proposal required).

Additional tip: If you are wanting to use the more robust version of Pannellum in your Canvas courses, it is going to require you to have a secure web server/site where you actually host all of the Pannellum content yourself. Otherwise, Canvas will not render the iframe as it will identify the content as suspicious.