Hey everyone —

Inspired by comments in the two threads about embedding with snapshots and enabling full-screen mode, I started hacking around to come up with some sample code to make a much cleaner interface for viewing gigapan images.

Here are a couple sample pages:
http://www.saracino.com/gigapan-embedlarge/giga…
http://www.saracino.com/gigapan-embedlarge/giga…

I’ve posted the sample code to github — so everyone can download and modify it to suit their needs:

https://github.com/barneyzang/gigapan-embedlarge

Most of this code is based on snooping the output of the gigapan.org website and inspiration from Ronnie Miranda’s post in one of the other threads.

I’ll be the first to admit that this is a complete hack and that it requires a willingness to modify html source files (though, it’s relatively straightforward).

I’ll also be the first to admit that I’m an html/css/js novice, but hopefully there’s enough there to be useful to someone. Please feel free to suggest improvements (or submit changes to github).

— Joe

I’ve updated the sample code to dynamically generate the page + image data using php — it’s no longer an (embarrassingly hack-ish) copy/paste job.

The php code now takes a single parameter corresponding to the gigapan id. For example:
http://www.saracino.com/gigapans/gigapan.large….

The data is parsed one of two ways:
1. An attempt is made to use the “stitcher_notes” field returned in the json data
2. If that is empty (which is common when using 3P stitchers like Autopano), the code looks at the contents of the “Description” field. It assumes there is a block at the end of the description starting with “\—Image Details—” and parses the remaining text as though it were the “Stitcher Notes” attached by the Gigapan stitching application.

Typically, I always make at least one stitching pass using the Gigapan Stitcher. If I later decide to publish/post an image stitched using Autopano I can copy the output of the original Gigapan stitcher pass (found by clicking on the “More Stitch Notes” button) into the contents of the “Description” field to ensure that the data travels with the image (and will be parsed correctly by this code).

Kudos to Jason Buccheim, who’s comments in this thread (http://gigapan.com/forums/14/topics/223) provided further inspiration :)

— Joe

Very clean look, nicely done Joseph!

Hi Joseph
I agree completely with your opinion.
And I will share on my blog a great source for you.
Of course, it has all been completed only on my server.
My brog:
http://uhrp.imagefitter.com/
Thank you.

Hi Joseph,
thank you for taking the time to do this. I don’t have any programing background and at a loss on how to add the code to my web server. is there a 1-2-3 step document on how to implement it on a web server?

Thanks,
Eddie

The quick steps would be:
1. Download the files from the github repository (https://github.com/barneyzang/gigapan-embedlarge, click on the zip-file link).
2. Copy the decompressed files to an accessible location on your web server (minus the README).
3. Link to (or directly address) the gigapan.large.php file with a passed-in parameter corresponding to the gigapan id you’d like to display.
— for example: “”http://yourhost.com/“>http://yourhost.com//gigapan.large.php?id=XXXX” (where XXXX is the id of the gigapn you’d like to display.

This code assumes you have access to a web server with the latest version of php installed (though I’m not aware of any functions that have special version requirements).

Note that the latest version includes a few changes to the way snapshots are displayed along the bottom.

— Joe

Thank you Joseph, works like a charm.

Hi Everyone —

I’ve made a few more changes to the checked in code on github:
1. Support for a map view that displays an overlay of the FOV.
2. Moved most of the support files under a single directory to make installation less cluttered

Here’s an example:
http://saracino.com/gigapan-embedlarge/gigapan…. .
The map toggle is at the bottom right, under the image details.

— Joe

Very clean, and love the toggled google map layer!

Joe, I created the webpage “lastra.net” for my daughter’s photography of Spanish Romanesque sculpture.

I just wanted to let you know that your code made all the difference in the world in how effective the webpage is. It was so easy to use, just like magic.

However, I had a couple of issues. Two of her images did not work. I don’t know what was different about them. The id numbers for them were very long. Unfortunately, I don’t understand how the gigapans are constructed, so I wasn’t able to follow your code too well except for the parts where you parse the description. If you have any suggestions for how I can debug this, let me know. The id’s for the gigapans that didn’t work are:

b66ab511ffdbc1b6d7b3029276c96bbe

and

684e2b826339e5b9010d2034d2fb7488

When the program tries to display the image, the description stuff looks right, but the image itself is black, and a little message is displayed that says “8 images to load”.

Please don’t feel like I am trying to get you to work on these, I’m just hoping you have some idea of how I could work on them.

Thanks,
and thanks again for the program.
Mary

Looking at the IDs, I think the issue may be that the problematic gigapans are marked as “private”. You’ll need to make sure the “Is Private” checkbox is un-checked when editing the gigapan. A new, shorter ID will be generated.

— Joe

Thank you Joe, you were exactly right, now all the images are perfect!!!!!

You’re the greatest!
Mary

Joe – thanks for the work you put into this. It will solve many website problems for me if I can get it to work.

I uploaded the files to my two web accounts (hosted by 1&1.com) and tried it out. I get the following errors on every ID that I try:

On one I get:

Warning: file_get_contents() [function.file-get-contents]: URL file-access is disabled in the server configuration in /homepages/3/d430221224/htdocs/PSC/gigapan.large.php on line 26

Warning: file_get_contents(http://www.gigapan.com/gigapans/33692.json) [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /homepages/3/d430221224/htdocs/PSC/gigapan.large.php on line 26
- view on gigapan.comtaken , x , 0 gigapixels,
Gear:
Aperture:

Warning: Division by zero in /homepages/3/d430221224/htdocs/PSC/gigapan.large.php on line 178
Exposure: 1/0
ISO:
Focal Length (35mm equiv.):

and on the other one I get:

Fatal error: Call to undefined function: json_decode() in /homepages/14/d108112798/htdocs/IOTU2012/gigapan.large.php on line 28

I can use either one to host your code for my website.

Any clue what I did wrong on either of them?

From the errors you’re getting, it looks like the function “file_get_contents” hasn’t been enabled (some providers leave this off as a default security setting).

You’ll probably need to add something like this to your php.ini file:
allow_url_fopen = on;

— Joe

That did it. I got another error regarding the datetime function, but deleting that section of your PHP file solved it. I don’t care about providing that info anyway.

Thanks again!

Hi Joseph, thank you for the all the code and how to do this, I have got it working perfectly. I am trying to display some artwork, and have managed to remove the camera information and location information as that is not relevant.

However I want to be able to show the snapshot info / comments as in the snapshots info I can add hyperlinks to additional information. I am digging through the code but can’t seem to be able to find or do this ?

Is there a parameter that I can enable this ?

It’s a little unclear what behavior you’re trying to achieve, but the best place to start looking is in the javascript that builds the snapshot list:
./gigapan.large/gigapan.embedlarge.js, starting at line 973

This is code that’s almost entirely drawn from the regular gigapan.com pages, and parses the json encoded snapshots for the particular gigapan. The extra info / links should be in the “description” field of each snapshot.

— Joe

Hey Joe, is there any way to make it start in fullscreen mode?

Full screen mode is controlled by the flash-based Gigapan viewer — which is built and maintained by the Gigapan engineering team. There is no public documentation — so it might be possible — but I’m not aware of a way to trigger full-screen mode when the page loads.

— Joe

Hi Joseph, thank you for developing these codes. They are the easiest and simplest to use at the same time have all the features and functionality of the full GigaPan viewer. I particularly like the toggle for Google Maps.

To all users, you can actually further customize Joseph’s codes by choosing only the info you want displayed. For example, here it is applied with the full image size and the full frame viewer, without the snapshots and other info. http://www.ashleydrody.com/gigapixel/gigapixel….

It can also be used in an iframe (stripped down) and is actually much better than GigaPan’s default embed codes.

Hello. Thanks for the great tool. I am getting an error message only with my own Gigapan. Here is the error message: Fatal error: Call to undefined method DateTime::createFromFormat() in /home/content/95/2447795/html/gigapan/gigapan.large.php on line 161

http://www.kedl.com/gigapan/gigapan.large.php?i…

It works if I change the id to another gigapan….

Thanks!

Andre

Looks like the “Stitcher Notes” (or $imageDetails array in the php code) doesn’t have valid ‘Capture time’ data.

I’ve updated the php code to check for invalid values before parsing and the error appears to be fixed. The code has been updated on github and on the original example links above — you should be able to download a fresh copy and get it to work with your gigapan.

— Joe

Wow. Quick answer. It’s works. Many thanks!

Andre

Does this work for wordpress themes and can you write a 1 2 3 how to do this tutorial

I’m not familiar with wordpress themes, so I don’t know the answer your question. The code is intended to be portable (and others have gotten it to work in iframes) so it’s probably possible to make it work — but someone with wordpress experience may have to weigh-in.

— Joe