Oh my… what a mess. The current state of the Linden 360-viewer is for the geeky only. The instructions for setting up to display these images, via web or just on your local computer, is described in a Bitbucket thread: JS 360-snapshot-web-viewer and the SL Wiki.

No problem. Just install Python and set up a simple web server… As Ebbe has said, “Who the f**k installs servers?”

The instructions on both the sites assume you know about web servers and tech. But, all the needed parts are in Bitbucket.

This isn’t as bad as it sounds. I’m just grumpy because it isn’t as easy as I expected. BUT… and this is a big butt… but, this is a work in progress. It is like picking up your new car halfway down the assembly line…no doors, controls, seats… basically unusable for the average SL user. But, actually well done and quite usable for anyone with knowledge of web services.

Whatever, here is how… …and remember. It will get easier. Google does this sort of stuff well. The Lab will get it working in some easy way.

The Camera

Download the Second Life Project 360 Snapshot Viewer version 4.1.2.320965.

Start a snapshot as you normally would. In my case Ctrl-Shift-S. The shot is taken from your current camera position. If you switch to mouse-look, you’ll see pretty much what the camera will see.

The result is a zip file named whatever you name it + .zip. Inside are 6 images and a JSON file. You can edit the images. Just remember software is going to stitch these together to make the panorama like picture. So, all the panorama guidelines apply to these images. This means if you lighten just one of the mages it will look odd in the final display. All images would need to be processed the same way, all lighter  or darker by the same amount.

The JSON file is just an information file. You can edit it with a text editor. It contains the date and time the images were taken, a title, and a URL for the Second Life location of where the picture was taken.

The Server

If you have a web site then you have a server ready to go. I have a bunch. The parent to my blog site is Nalates.net. So, I can use that.

What I need to put there is the files from the Bitbucket. Use the download item in but bucket to get the Zip file. Unzip it and you have a folder with these files:

The files are in a long name folder: callum_linden-360-snapshot-web-viewer-16907f4c6626. I renamed that to sl360 and moved it to my web server. You either know how to do this or you don’t. I’m not going to include a web server management section here. Sorry.

Also, take your zip files from the SL Viewer’s 360 Camera and place them in the same folder. Or sub folders. I put them in the same folder for this example.

In the web page or blog article where you want to display the image, place this code:

<div id="container">
    <iframe src="index.html?shot=torley/Heavenly_Groove_1.zip&preview=1"></iframe>
</div>

A lot has to change. Because I am using a site remote from my blog, I use this code;

<iframe src="http://nalates.net/sl360/index.html?shot=360snap.zip&preview=1"></iframe>

Shot is the file path and name for your images from SL.

I’m not going to explain web paths and literal server paths here. Beyond the scope, as they say. You can however test that you have the path correct by entering it into a web browser.

http://nalates.net/sl360/index.html?shot=360snap.zip&preview=1

You can click that to see my first 360 image taken with the new project viewer.

It took like an hour to figure all this out, get it setup and working. About 30 minutes was cleaning up the Dreamweaver settings in my new computer and getting the new install correctly connecting to my web server.

CSS

The Linden code and CSS is pretty generic. So, I added a bit to my blogs CSS.

.sl360 iframe {
    width: 550px;
    height: 400px;
    background: #66a;
    border: 2px solid #444;
}

Because WordPress has to mess with HTML code, I can’t edit the HTML in a post and then use the Visual Editor. If I do it trashes the HTML I added, like width=”550px”. So, I added a class, hoping it will stick.

<iframe class=”sl360” src=”http…

It should have worked… but, I still have a problem getting the 360 display the correct size… oh well…