• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization Gallery panorama viewer integration -- beta release!

Need some help with your New SmugMug Site?

Dgrin Challenges

They're back! Our latest series of Dgrin Challenges, the OOYCZ Challenges (Out of Your Comfort Zone), is a series of challenges to help you improve your photography by stepping out of your comfort zone and trying something new. Our challenge leader says "Consider it like a photography class with no diplomas.". Get started with OOYCZ by reading the Challenge Guide.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Looking for a little challenge? The Dgrin Mini-Challenges are a great way to challenge yourself. Take a moment to look through past winners and find the current Mini Challenge here.

From Around the Net

Enjoy a few of our favorite articles from around the 'net. If you have something you think we should see, post it here and we'll have a look.

Journeys

Landscapes

Sports

 
Thread Tools Display Modes
Page 1  of  2
1 2
Old Oct-27-2011, 02:39 PM
#1
Lamah is offline Lamah OP
Software developer
Lamah's Avatar
Panorama viewer for SmugMug galleries
I've shot so many panoramas over the years, but these are basically impossible to view in SmugMug as it doesn't support a panorama viewer. The alternative is to upload my panoramas to an external website and link to that from SmugMug. But this is ugly (as I'm definitely no designer), hard to maintain, and requires the extra expense of a third-party webhost. As a result, I haven't been able to share my panoramas.

So over the last few weeks, I've been building a JavaScript add-on which allows you to seamlessly embed PTGui, SaladoPlayer, or Microsoft Deep Zoom panoramas into your SmugMug galleries. This add-on requires NO off-site hosting of your own to work, I am hosting the few files required for it on my own server for everybody to use.

This is a beta release, this plugin has not had extensive testing yet. Please try it out and give me some feedback! There are a few steps involved in getting it to work, so bear with me...


Preparing your site's settings

In your control panel, go to the "Settings" tab and check that "feeds" are set to "enabled". This is required for the panorama viewer to be able to find the source images for your panoramas. As a side-effect, that causes this icon to appear on your homepage and gallery:



If, like me, you find that feed link useless and ugly, you can hide it by adding this to your CSS on your Advanced Customization page:
Code:
#feeds { display:none; }
To add the panorama viewer to your site, add this code to your Head Tag on your Advanced Customization page:
Code:
<script type="text/javascript" src="http://s3.sherlockphotography.org/smugmug/panorama/v1/ptgui/viewer.js"></script>
<script type="text/javascript" src="http://s3.sherlockphotography.org/smugmug/panorama/v1/seadragon/seadragon-min.js"></script>
<script type="text/javascript" src="http://s3.sherlockphotography.org/smugmug/panorama/v1/panorama.js"></script>
If you're not using PTGui, you can remove the first line of that code for faster loading. If you're not going to use Microsoft Deep Zoom, remove the second line.


Preparing your galleries

These panorama viewers break your panorama up into many smaller images, so you'll need to create a new gallery to hold those fragments for each panorama that you make. I like to title these galleries with a prefix like "Panorama: John Bull Gully", so that I remember that it is a gallery of panorama parts. In the settings for this panorama-parts gallery, make sure that "filenames" is set to "yes", "privacy" is set to "unlisted", and "largest size" is set to "original". You can save these settings as a Quick Setting to speed up this process in future!

You need to know the ID for your panorama-parts gallery, this can be found in your browser's address bar when you're viewing the gallery:



It's the part after the / of the gallery name, but before the # mark, in this case it is "19744646_gQ5Hn2". Make a note of this ID.


Preparing your panorama

The method for preparing your panorama is different for each of the three viewers (PTGui, SaladoPlayer, and Deep Zoom), so here's a section explaining each approach:

PTGui
PTGui (ptgui.com) is a commercial panorama stitching package which includes the ability to publish a panorama to a website. It includes a panorama viewer which can display panoramas using either HTML5 or Flash. It's designed to view panoramas which approach 360 degrees x 180 degrees in size (panoramas which cover less area are padded with blank space and so are relatively inefficient). The PTGui viewer runs very smoothly with lower-resolution panoramas, but gets memory hungry with more detailed panoramas as it loads the entire panorama into memory at once. On the plus side, after it loads in, PTGui always displays the highest-quality version of your panorama.

PTGui's JavaScript and Flash viewer have both been modified to work on SmugMug. Big thanks to the team at PTGui for giving permission to make this modification!

Your panorama should use the equirectangular projection for best results. In PTGui's Panorama Editor, set the projection to equirectangular and frame your panorama as you like. Make a note of the horizontal field of view shown in the status bar (in degrees):



Once you've stitched (and edited) your panorama, click on the "tools" menu, then "publish to website". Add in the panorama file you stitched, set the projection to equirectangular, and fill in the horizontal field of view that you remembered from earlier:



Save this template file to your computer in a useful place:

http://s3.sherlockphotography.org/sm...a_template.htm

In PTGui, tick the "Use Custom Template" box on the right hand side, then click the Browse... button and select the .htm file you just downloaded.

Now click the Convert button. PTGui will create a series of 15 JPEG images for your panorama, plus an HTML file which describes them. Upload these images to the SmugMug panorama-parts gallery that you prepared earlier. Open the HTML file in a text editor like notepad, you'll see something like this:
Code:
My panorama's title<span class='my-panorama' title='{
  gallery: "fill your gallery ID in here",
  pano: "mypan_",
  format: "14faces",
  pan: 0,
  minpan: -180,
  maxpan: 180,
  tilt:0,
  mintilt: -39.77504448549261,
  maxtilt: 39.77504448549261,
  fov: 90,
  minfov: 10,
  maxfov: 120,
  autorotatespeed: 5,
  autorotatedelay: 10,
  maxiosdimension: 567,
  showfullscreenbutton_flash: 1,
  showfullscreenbutton_html: 1,
  enablegyroscope: 1
}'></span>
Write the ID of the panorama-parts gallery that you found earlier into the "gallery" space, so you'll end up with something like:
Code:
My panorama's title<span class='my-panorama' title='{
  gallery:"19744646_gQ5Hn2",
  pano: "mypan_",
  format: "14faces",
  pan: 0,
  minpan: -180,
  maxpan: 180,
  tilt:0,
  mintilt: -39.77504448549261,
  maxtilt: 39.77504448549261,
  fov: 90,
  minfov: 10,
  maxfov: 120,
  autorotatespeed: 5,
  autorotatedelay: 10,
  maxiosdimension: 567,
  showfullscreenbutton_flash: 1,
  showfullscreenbutton_html: 1,
  enablegyroscope: 1
}'></span>
Now you can use this panorama descriptor to add the panorama to your public gallery, check out the next major section.

SaladoPlayer
SaladoPlayer (panozoma.com) is Open Source software for viewing panoramas within a webpage using Flash. It's designed to view panoramas which approach 360 degrees x 180 degrees in size (panoramas which cover less area are padded with blank space and so are relatively inefficient). This is a high-performance panorama viewer, with low memory usage and fast loading times. It achieves this by storing scaled-down versions of your panorama to display when the view is zoomed out, with increasingly higher magnification images available as you zoom in (you may be familiar with this effect from Google Maps). This is the recommended viewer to use for high-resolution, immersive panoramas.

SaladoPlayer has been modified for use on SmugMug. If you're a programmer, you can check out the modified sourcecode for SaladoPlayer, which is based on SaladoPlayer 1.3.2.

SaladoPlayer requires you to first stitch your panorama in equirectangular format, with a 360 degree horizontal field of view and a 180 degree vertical field of view. This panorama must be converted using a tool called SaladoConverter into the SaladoPlayer format ready for upload. You can download SaladoConverter for SmugMug here (sourcecode for programmers).

SaladoConverter requires Java to be installed on your computer. If you don't have Java installed yet, then you can install it from http://www.java.com/ .

Run SaladoConverter by double-clicking on "saladoconverter.jar". In the window that appears, click "add" to add your equirectangular panorama for processing. In the drop-down box at the bottom, set the action to "Equirectangular to SmugMug cubic panorama", and choose an output folder by clicking the "output" button. Then click the "run" button to start processing:



SaladoConverter creates a folder full of panorama fragments, and a text file:



Upload those images the panorama-parts gallery you created earlier. Open up the text file, you'll see something like this:
Code:
<span class='my-panorama' title='{
  pano:"mypan_",
  gallery:"fill your gallery ID in here",
  format:"deepzoomcubic",
  tileSize:512,
  tileOverlap:1,
  width:4608,
  height:4608
}'></span>
Write the ID of the panorama-parts gallery that you found earlier into the "gallery" space, so you'll end up with something like:
Code:
<span class='my-panorama' title='{
  pano:"mypan_",
  gallery:"19744646_gQ5Hn2",
  format:"deepzoomcubic",
  tileSize:512,
  tileOverlap:1,
  width:4608,
  height:4608
}'></span>
Now you can use this panorama descriptor to add the panorama to your public gallery, check out the next major section.

Microsoft Deep Zoom
Microsoft Deep Zoom (http://zoom.it) is a technology which allows a single high-resolution image to be zoomed and panned around using a JavaScript viewer. This is suitable for panoramas which cover a small range of angles, like panoramas which cover less than 180 degrees horizontally (so that the distortion provided by immersive panorama viewers isn't required). It's also useful for displaying single very-high resolution photos.

Panoramas must be converted with a tool like SaladoConverter into the deep zoom format ready for upload. You can download SaladoConverter for SmugMug here (sourcecode for programmers).

SaladoConverter requires Java to be installed on your computer, if you don't have Java installed then you can install it from http://www.java.com/ .

Run SaladoConverter by double-clicking on "saladoconverter.jar". In the window that appears, click "add" to add your panorama image for processing. In the drop-down box at the bottom, set the action to "Single image to SmugMug zoom", and choose an output folder by clicking the "output" button. Then click the "run" button to start processing:



SaladoConverter creates a folder full of panorama fragments, and a text file:



Upload those images the panorama-parts gallery you created earlier:



Open up the text file, you'll see something like this:
Code:
<span class='my-panorama' title='{
  pano:"mypan_",
  gallery:"fill your gallery ID in here",
  format:"deepzoom",
  tileSize:512,
  tileOverlap:1,
  width:4608,
  height:4608
}'></span>
Write the ID of the panorama-parts gallery that you found earlier into the "gallery" space:
Code:
<span class='my-panorama' title='{
  pano:"mypan_",
  gallery:"19744646_gQ5Hn2",
  format:"deepzoom",
  tileSize:512,
  tileOverlap:1,
  width:4608,
  height:4608
}'></span>
Now you can use this panorama descriptor to add the panorama to your public gallery, check out the next section.


Adding the panorama to your user-visible gallery

From the previous steps, you should now have a hidden gallery full of parts of your panorama, and a panorama descriptor (enclosed by <span> tags). Now you can use that descriptor to publish your panorama in your user-visible galleries.

Create an image which will represent your panorama. I suggest cropping your panorama for this image so that the aspect ratio is much closer to the monitor's aspect ratio. You might also add a symbol on top of the image which suggests that users click on it to view the panorama. Add this image to your user-viewable gallery where you want your panorama to appear.

In the caption of the image, add the panorama descriptor, like so:
Code:
My super cool panorama! <span class='my-panorama' title='{
  pano:"mypan_",
  gallery:"19744646_gQ5Hn2",
  format:"salado",
  tileSize:512,
  tileOverlap:1,
  width:4608,
  height:4608
}'></span>
The "span" tag prevents the descriptor from actually being visible in your caption. Once you've saved the caption and reloaded the page, you're done! In your gallery, the image you created will be displayed:



When visitors click on the panorama to view it in SmugMug's lightbox, the panorama viewer will load automatically:




Live demo

You can see a live demo of all three panorama viewers working on my SmugMug gallery!


Tweaking the result

PTGui
PTGui's Publish to Website dialog box has a range of options you can tweak to alter the finished result, check out the help file for more details.

SaladoPlayer
SaladoPlayer has been modified to use the same configuration format as PTGui. You can configure it by manually adding parameters to the panorama descriptor in your image's caption. Here's the options which are derived from those in the SaladoPlayer documentation.

minpan - Range: -180 to 0 degrees, default: -180. The furtherest that the camera can pan left, for panoramas which don't span the full 360 horizontal degrees.
maxpan - Range: 0 to 180 degrees, default: 180. The furtherest that the camera can pan right.
mintilt - Range: -90 to 0 degrees, default: -90. The furtherest that the camera can tilt down, for panoramas which don't span the full 180 vertical degrees.
maxtilt - Range: 0 to 90 degrees, default: 90. The furtherest that the camera can tilt up.

pan - Range: -180 to 180 degrees, default: 0. The initial pan of the camera.
tilt - Range: -90 to 90 degrees, default: 0. The initial tilt of the camera.

fov - Range: 0.1 to 179.9 degrees, default: 90. The field of view of the camera.
minfov - Range: 0.1 to 179.9 degrees, default: 30. The minimum field of view of the camera.
maxfov - Range: 0.1 to 179.9 degrees, default: 120. The maximum field of view of the camera.

autorotatedelay - In seconds, default: 30. If the user is idle for this amount of time, start automatically rotating the panorama.
autorotatespeed - In degrees per second, default: 3. The speed of autorotation, or 0 to disable autorotation entirely.

mousedrag - True or false, default: false. Set to true if you want to drag the panorama with the mouse instead of the regular drag-spin action.
buttons - default: ["out", "in", "fullscreen"]. This is a list of the toolbar buttons to display. Possible buttons are "left", "right", "up", "down", "in", "out", "fullscreen", "drag", "autorotation". Use buttons: [] to disable the toolbar completely.

Microsoft Deep Zoom
There aren't yet any options for this viewer, please let me know what you'd like to be able to change! Some possible options are described in the
Microsoft documentation.

Shared settings
viewbutton - default: false. Set to true to display a "click to view panorama" button on top of your panoramas in your gallery.

If you want to provide a custom image for the "click to view panorama" button, use the address of the image as "viewbutton", and provide "viewbutton_width" and "viewbutton_height" with the width and height of the button image. For example:
Code:
viewbutton: "http://s3.sherlockphotography.org/smugmug/panorama/v1/viewbutton.png",
viewbutton_width: 361,
viewbutton_height: 74
You can make any of your settings the global default that will apply to every panorama on your website (unless a specific panorama overrides the setting in its own descriptor). Just add a section like this to your Top JavaScript:
Code:
panorama_global_settings = {
	buttons: ["fullscreen"],
	viewbutton: true,
	mousedrag: true,
	autorotatedelay: 10
};
Hosting this on your own server

This plugin uses files hosted on my Amazon S3 account. Do you want to have more control over the plugin files? If you have your own webserver, you can host the files needed for this plugin there instead. Download this zip and unpack it:

http://s3.sherlockphotography.org/sm...ugpanorama.zip

In the file panorama.js, edit the line that sets "resource_location" to point to the place where you will store the files on your own server, and change the src of your <script> tags to point there too. Then upload the contents of the zip file there.


Known issues

Clicking "view details" when a panorama is being viewed causes large alignment and spacing problems at the moment, I'm working on improving it.

If you're converting a large image with SaladoConverter, it may run out of memory. You will need to increase the memory limit in SaladoConverter's settings. For example, a 100 megapixel image requires about 1500MB of memory to convert to a cubic panorama. If SaladoConverter fails to start after changing the memory limit, the limit was too high, you'll need to delete the "settings.properties" file to reset the settings back to the defaults. If you're merging a REALLY big panorama, you'll need to install a 64-bit version of Java so that you can set the memory limit higher than 2000MB.

Last edited by Lamah; Aug-01-2013 at 11:34 PM. Reason: Add new release of SaladoPlayer source
Old Oct-28-2011, 05:22 AM
#2
LJ2b2c is offline LJ2b2c
Major grins
Great work. Thanks for sharing. I may have to give this a try!
__________________
http://millerpics.smugmug.com/
Old Nov-23-2011, 05:13 AM
#3
rla1022 is offline rla1022
Big grins
Panorama ooc from Sony
How would one use these features with an ooc panorama from a Sony wx9 or. Sony nex 5n. Both produce panoramas with out the need of additional software. Very cool techniques.


Randy
Old Nov-23-2011, 01:09 PM
#4
Lamah is offline Lamah OP
Software developer
Lamah's Avatar
Unfortunately, the Sony Sweep Panorama feature shoots cylindrical-projection panoramas which don't cover a very large field of view. Both PTGui and SaladoPlayer are designed to display 360x180 degree equirectangular panoramas, and while converting a cylindrical panorama to this format is possible, it would be extremely inefficient (probably requiring a gigapixel temporary file which would crash any of the panorama software that I've used so far).

You can use the Microsoft Deep Zoom option instead, which basically displays the panorama as a zoomable, pannable flat image. Here's an example of that viewer in use. It doesn't quite provide the same immersive feel as the other viewers.

Ideally, I'd add an integration for a viewer which supported cylindrical panoramas out of the box. I'll have a look around and see what I can find.

EDIT: I had a look around, there aren't many good options for displaying cylindrical panoramas (most viewers seem to convert them to 360x180 degree equirectangular images first). Could you post a full resolution panorama that you want to display? I can work out if it's practical to convert it to equirectangular format.

Last edited by Lamah; Nov-23-2011 at 01:56 PM.
Old Jul-11-2012, 11:12 AM
#5
fstraker is offline fstraker
Beginner grinner
Thanks for taking the time to work this out and document! Exactly what I need too.
I tried to implement it, it wouldn't work for me. I have the feeling that the stuff in HeadTag isn't really active. At least I couldn't locate it in a Firebug trace. I guess it should show up somewhere.
I set the tile gallery according to your specs: filenames=yes, size=original, unlisted. Are there any settings requirements for the gallery which "invokes" the viewer?
Old Jul-11-2012, 02:10 PM
#6
Lamah is offline Lamah OP
Software developer
Lamah's Avatar
Nah, that's it for the gallery requirements. Can you post a link to your panorama parts gallery? (and the gallery you hope to display the panorama in).

You might want to try saving the code into your head tag again, sometimes SmugMug just refreshes the page and doesn't save anything (with an error message that is easily missed).

Looking at your galleries, I can't wait to see these panoramas in a panorama viewer :)

Last edited by Lamah; Jul-11-2012 at 02:52 PM.
Old Jul-13-2012, 02:56 PM
#7
fstraker is offline fstraker
Beginner grinner
Quote:
Originally Posted by Lamah View Post
Nah, that's it for the gallery requirements. Can you post a link to your panorama parts gallery? (and the gallery you hope to display the panorama in).

You might want to try saving the code into your head tag again, sometimes SmugMug just refreshes the page and doesn't save anything (with an error message that is easily missed).

Looking at your galleries, I can't wait to see these panoramas in a panorama viewer :)
Thanks for your answer - I found the issue!
I am using Lightroom to upload my images. I put the descriptor part <span . . . > in the LR caption field for my "placeholder" image. For whatever reason the "=" character gets changed in a "0" character during the upload process. I need to look into that later because I really would like to stick to that workflow.

Anyway a big "Thanks" to you for the integration and here is a link to my experimental gallery
http://photo.looktouch.net/Other/Viewer-Test/24150392_mDdRHc#!i=1963288265&k=kXq56Hs

more to come, I will keep you posted!

I'll try the DeepZoom as well for non-spherical stuff.
Old Jul-13-2012, 08:57 PM
#8
Lamah is offline Lamah OP
Software developer
Lamah's Avatar
Looks great!

Hm, I actually use Lightroom to publish my panoramas too, though I haven't published any recently. I wonder if they broke something. I'll test it out and see if I can send them a useful support request.

EDIT: I gave it a go and it actually published fine for me. I have SmugMug plugin version 1.0.4.8, how about you? (File -> Plug in manager)
Old Jul-17-2012, 06:40 AM
#9
fstraker is offline fstraker
Beginner grinner
must have been my mistake
Thanks! I do like it too

Actually I couldn't really reproduce my trouble, must have been user error . However I found a different minor issue with LR:
I use plugin 1.0.4.8 (latest) and set it to sync LR-title + LR-caption into SM-caption. I put the span stuff into LR-caption and the real title into LR-title. This syncs OK, the span-ed text is not visible on the web page, everything fine. But the viewer would not start. Only if I edit the caption field on smugmug (there is a linebreak inserted between LR-title tex and LR-caption text) to remove the linebreak it works! It also works if I actually put it back in again!!! But not from the start. There's some control character interference, maybe different mappings (UTF-x etc.) going on. My guess.

Anyway this is no problem, I just put the span-ed text also in the title and it all works perfectly!
Old Jul-17-2012, 07:18 AM
#10
fstraker is offline fstraker
Beginner grinner
Quote:
Originally Posted by Lamah View Post

Hosting this on your own server

This plugin uses files hosted on my Amazon S3 account. Do you want to save me some hosting costs, or just have more control over the plugin files? If you have your own webserver, you can host the files needed for this plugin there instead. Download this zip and unpack it:

http://s3.sherlockphotography.org/sm...ugpanorama.zip

In the file panorama.js, edit the line that sets "resource_location" to point to the place where you will store the files on your own server, and change the src of your <script> tags to point there too. Then upload the contents of the zip file there.

I did move the stuff on my own server and it works.
Comment: in your zip package the seadragon viewer file name is seadragon-min.js. In your Head Tag customization the file name is seadragon-dev.js. I changed the filename in the zip to match. That helps

You might want to do this as well in your archive.
Old Jul-17-2012, 09:28 AM
#11
fstraker is offline fstraker
Beginner grinner
Let PTGui Converter (almost) create the pano descriptor
Quote:
Originally Posted by Lamah View Post

Once you've stitched (and edited) your panorama, click on the "tools" menu, then "publish to website". Add in the panorama file you stitched, set the projection to equirectangular, and fill in the horizontal field of view that you remembered from earlier:



PTGui will create a series of 15 JPEG images for your panorama, plus an HTML file which describes them. Upload these images to the SmugMug panorama-parts gallery that you prepared earlier. Open the HTML file in a text editor and find this section:
Code:
viewer.setVars({
  pano: "mypan_",
  format: "14faces",
  pan: 0,
  minpan: -180,
  maxpan: 180,
  tilt:0,
  mintilt: -39.77504448549261,
  maxtilt: 39.77504448549261,
  fov: 90,
  minfov: 10,
  maxfov: 120,
  autorotatespeed: 5,
  autorotatedelay: 10,
  maxiosdimension: 567,
  showfullscreenbutton_flash: 1,
  showfullscreenbutton_html: 1,
  enablegyroscope: 1
});
Add a line which has the gallery ID you found from your address bar earlier, and edit the code which is outside curly braces so that it looks like this:
Code:
<span class='my-panorama' title='{
  pano: "mypan_",
  gallery: "19744646_gQ5Hn2",
  format: "14faces",
  pan: 0,
  minpan: -180,
  maxpan: 180,
  tilt:0,
  mintilt: -39.77504448549261,
  maxtilt: 39.77504448549261,
  fov: 90,
  minfov: 10,
  maxfov: 120,
  autorotatespeed: 5,
  autorotatedelay: 10,
  maxiosdimension: 567,
  showfullscreenbutton_flash: 1,
  showfullscreenbutton_html: 1,
  enablegyroscope: 1
}'></span>
Now you can use this descriptor to add the panorama to your public gallery, check out the next major section.
I was looking for a way to simplify things, especially when you process many panoramas. PTGui Converter has a useful feature "Use custom template" which helps us here to 99% automate the creation of the panorama descriptor.

0) Preparation - Create a file with this content
Code:
{{TITLE}}</br>{{DESCRIPTION}}
<span class='my-panorama' title='{
  gallery: "GALLERY_ID",
{{PARAMS}}
}'></span>
For the sake of this example I use the name LTspan.htm. That's the custom template which we'll use. This step is needed just once as a preparation. Later we reuses the file.

1) Run the PTGui converter.
Follow the original post plus enable the "Use custom template" checkbox and browse to LTspan.htm

2) Convert as usual

3) Fix the descriptor file
Open the PTGui generated descriptor htm file in an editor and it will look like this
Code:
Forest at Würenlingen, Aargau, Switzerland</br>Grenzpunkt!
<span class='my-panorama' title='{
  gallery: "GALLERY_ID",
  pano: "WürenlForst24mm_",
  format: "14faces",
  pan: 0,
  minpan: -180,
  maxpan: 180,
  tilt:0,
  mintilt: -74.88000000000001,
  maxtilt: 74.88000000000001,
  fov: 90,
  minfov: 5,
  maxfov: 120,
  autorotatespeed: 3,
  autorotatedelay: 15,
  maxiosdimension: 567,
  showfullscreenbutton_flash: 1,
  showfullscreenbutton_html: 1,
  enablegyroscope: 1
}'></span>
Now this looks already very close to what we need!! Way closer than we get with the standard template for "usual" web display. Two things remain to be done.

3a) Switch the order of the "gallery:" and the "pano:" tags around. In a good editor like Notepad++ this is a single keyboard shortcut Ctrl-Shift-down arrow.
3b) Replace GALLERY_ID with the ID of your tiles gallery, save file and select all text, usually Ctrl-A.

4) Create Caption
Copy the clipboard into the caption field of your image which is supposed to invoke the viewer.

That's it! A neat little trick that saves a bit of fiddling with curly braces, especially for guys not used to programming. If anybody has a cool trick up it's sleeve to automate 3) and 4) let the forum know!

Last edited by fstraker; Jul-18-2012 at 01:03 AM. Reason: clarification
Old Jul-17-2012, 03:19 PM
#12
Lamah is offline Lamah OP
Software developer
Lamah's Avatar
Quote:
Originally Posted by fstraker View Post
I was looking for a way to simplify things, especially when you process many panoramas. PTGui Converter has a useful feature "Use custom template" which helps us here to 99% automate the creation of the panorama descriptor.
That's great, thanks! I'll update the main post with these instructions when I can find the time. The order of gallery and pano actually shouldn't matter so this will make it even easier.
Old Jul-20-2012, 06:19 AM
#13
fstraker is offline fstraker
Beginner grinner
Usability improvements?
Two questions:

1) Minimize user confusion when panning
seadragon: mouse move to the left moves the image to the left (the window moves to the right)
PTGui: mouse move to the left moves the image to the right (the window moves to the left)

Can this be reversed in either one viewer (or their wrappers)? It would improve the user experience.

2) PTGui viewer zoom control (I use the mouse wheel)
It is very difficult to use. I see a great time lag compared with too high sensitivity. So basically you are zoomed out or at max zoom. I played a bit the mouse control panel but that didn't help really.
Any suggestions?
Old Jul-20-2012, 04:47 PM
#14
Lamah is offline Lamah OP
Software developer
Lamah's Avatar
Quote:
Originally Posted by fstraker View Post
I did move the stuff on my own server and it works.
Comment: in your zip package the seadragon viewer file name is seadragon-min.js. In your Head Tag customization the file name is seadragon-dev.js. I changed the filename in the zip to match. That helps

You might want to do this as well in your archive.
Whoops, the correct file is actually the -min.js (it's compressed for slightly faster loading for end-users), I've updated the main post now.

Quote:
Originally Posted by fstraker View Post
1) Minimize user confusion when panning
seadragon: mouse move to the left moves the image to the left (the window moves to the right)
PTGui: mouse move to the left moves the image to the right (the window moves to the left)

Can this be reversed in either one viewer (or their wrappers)? It would improve the user experience.
It seems that PanoSalado supports the same behaviour as Seadragon, so I'll add an option for that!

Quote:
2) PTGui viewer zoom control (I use the mouse wheel)
It is very difficult to use. I see a great time lag compared with too high sensitivity. So basically you are zoomed out or at max zoom. I played a bit the mouse control panel but that didn't help really.
Any suggestions?
Hm, this is likely a problem with PTGui's viewer and the commands that your mouse sends (it works fine for my mouse). This is very difficult for me to modify as I don't have the PTGui viewer sourcecode, so you'd need to open a support request with PTGui to get this fixed. If you do report this problem to them, please verify it against the unmodified viewer (not the SmugMug embedding). Which web browser / platform do you use? If it's due to the operating system you're using, then it's something that I can test out here.

If you're feeling adventurous, try out the SaladoPlayer viewer instead, the performance is radically better than PTGui, particularly for high resolution panoramas. Does this SaladoPlayer panorama work better for you?

Last edited by Lamah; Jul-21-2012 at 02:05 AM.
Old Jul-21-2012, 12:08 AM
#15
Lamah is offline Lamah OP
Software developer
Lamah's Avatar
I've now added support for dragging the panorama in the same way as Seadragon using the SaladoPlayer viewer, just add mouseDrag:true to your list of options in your panorama description.

I've also added support for viewing panoramas fullscreen using SaladoPlayer!
Old Jul-21-2012, 09:42 PM
#16
Lamah is offline Lamah OP
Software developer
Lamah's Avatar
I've added a new setting "viewbutton". Setting this to true causes a "click to view panorama" button to be displayed on top of the panorama images in your gallery:



I've now added the ability to set panorama settings globally, so you could, for example, have every panorama default to using mousedrag and show the click button by adding this to your Top JavaScript:

Code:
panorama_global_settings = {
    mousedrag: true,
    viewbutton: true
};
Old Jul-31-2012, 10:25 AM
#17
fstraker is offline fstraker
Beginner grinner
Which panorama viewer is the right one for you?
Of course this depends on your "killer" requirements. I have been experimenting with all three viewers and will give you a summary evaluation. I am using a

1) NEC PA271W monitor with 2560 x 1440 resolution for post processing and visual inspection and
2) Samsung Galaxy S3 Android phone for mobile access.

So bear with me if you observe different quality / behavior on different devices.

PTGUI viewer
pro: no bells and whistles, simple to use, no config options that I am aware of. Reasonable smooth panning movement on big screen (auto start after loading), silk smooth zooming/panning on the S3. Tile converter is integrated in PTGui which is my pano workhorse sw, accepts any image aspect ratio, fullscreen mode uses entire screen
con: lack of config options (for power users), difficult zoom control: has quite a time lag and way too sensitive for me. I tried to fix this with mouse control panel tweaking, but no luck.
issue: On the monitor zooming in causes a white screen which can't be "zoomed out" from. Need to close the viewer and reload. It's quite a nuisance, unfortunately On the S3 I have not seen this happening.

Salado viewer
pro: many configuration options (see here). Not sure if all are supported at this time by Lamah's wrapper. Reasonable smooth panning movement (auto start after loading), with "mousedrag" property activated panning control is consistent with the other viewers. Fullscreen mode uses entire screen
con: insists on 2:1 image ratio. Many of my panos have ratios of 10..15:1. For my use case it's a serious drawback. Of course I could just generate that additional pixels but wasting all that storage and, later, bandwidth just to clip 80% with maxTilt / minTilt setting seems a huge waste of resources. Converter is separate (just to mention, not a big deal really)
issue: On the S3 panning works smoothly but no zooming is possible.

MS Deep Zoom (Seadragon Viewer)
pro: many configuration options (see here). Not sure if all are supported at this time by Lamah's wrapper. IMHO the best look and feel with respect to controls (time lag, sensitivity). Accepts any image aspect ratio.
con: The initial view shows the entire panorama (aka fits the "long" side of the image on the screen) and a lot of black background. I would like to have the short side fitted and no background shown. Actually there is a property to achieve exactly this but I couldn't get it to work. Later I found a ticket at the openseadragon site requesting an enhancement. So there is hope. No auto-panning (animation) on load or when image is zoomed. Fullscreen mode is only fullscreen within the browser window. You need to browse in fullscreen mode to really cover the screen. Converter is separate (just to mention, not a big deal really)
issue: On the S3 zooming works smoothly but no panning is possible.

In general
If you are using the "Custom template" feature (see my earlier post) of the PTGui converter, and Lamah's adapted "Salado for smugmug" converter from his post all three viewers do not require any additional editing of the generated panorama descriptors *except*, of course, pasting the gallery ID of your tiles.

On the S3 I can display 30Mpx worth of tiles nicely. Actually I didn't expect this to work, was a nice surprise. The same image with 60Mpx resolution will start to load and then shut down the browser after about 5s. I guess the 800MB or so of device RAM are just not sufficient. I didn't pinpoint the exact Mpx threshold. But 30 seems pretty cool and will anyway max out the display.

There is no perfect solution. Most likely you need to compromise. I am now using PTGui viewer as my standard. Seadragon looks tempting. I will probably re-evaluate when I found a way around the cons.
__________________
Looktouch Photography http://photo.looktoouch.net

Last edited by fstraker; Jul-31-2012 at 11:17 AM. Reason: style, clarity, typos
Old Jul-31-2012, 01:00 PM
#18
Lamah is offline Lamah OP
Software developer
Lamah's Avatar
Actually if you check out PTGui's generated jpegs, you should find that it pads skinny panoramas out with black space in the same fashion as SaladoPlayer. This from the help file:

Quote:
It is recommended to use the Publish to Website tool only for panoramas wider than 180 degrees: internally the panorama is converted to a full 360° x 180° representation; a lot of space is wasted if the viewable part of the panorama is only a small fraction.
Luckily black images compress extremely well, and in the case of SaladoPlayer, if you don't pan to make the black region visible, it is never downloaded by the viewer. Actually I should be able to modify SaladoConverter so that fully black images are deleted and you don't need to upload them to SmugMug any more.

Last edited by Lamah; Jul-31-2012 at 01:19 PM.
Old Aug-04-2012, 10:55 AM
#19
fstraker is offline fstraker
Beginner grinner
Oh I see (RTFM again ). I was not aware about that. So the only difference is that PTGui does the padding behind the scene and Salado expects the input is already padded.
__________________
Looktouch Photography http://photo.looktoouch.net
Old Oct-15-2012, 05:28 AM
#20
wickerman is offline wickerman
Beginner grinner
Hi
I can't seem to get the panorama to launch - When I click on 'Click to view panorama' I get:

" Could not access http://wickerman.smugmug.com/photos/.../i-Vnrnm2C.jpg due to security restrictions.
Error: SecurityError: Error #2123
Flash applet: http://s3.sherlockphotography.org/sm...gui/viewer.swf
Keep in mind that a Flash applet can only access content stored on the same website. If necessary you can change the security settings for your computer here:
http://www.macromedia.com/support/do...manager04.html "

Any help would be much appreciated
Thanks
Page 1  of  2
1 2
Tell The World!  
Similar Threads Thread Starter Forum Replies Last Post
Is it possible to have galleries AND categories on the home page? jfriend Legacy SmugMug Customization 3 Jun-27-2008 05:43 AM
RandRenderer - Smugmug Gallery Viewer Silik SmugMug APIs, Hacks & Tricks 2 Dec-16-2007 04:23 AM
Panorama Viewer CSS Hack Andy Legacy SmugMug Customization 9 Feb-08-2006 06:12 AM
Backprinting @ smugmug K.Van SmugMug Support 62 Apr-05-2005 12:11 PM
Specifying gallery style for viewer msim2020 SmugMug Support 7 Mar-07-2005 01:22 PM


Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump