So far we’ve introduced this series and taken a look at the format of panoramic images both in A360 cloud rendering and in krpano. The next step – before publishing the code, which I’ll do at the beginning of next week – is to take a look at the XML format needed by the krpano viewer.
For simplicity, we’re going to have a single, top-level krpano scene that links to scenes created for the various stereo panos that we’ve downloaded and processed from A360 cloud rendering. This top-level scene is copied from a sample scene provided by krpano, but we’re going to customize its thumbnails and links to point to our newly created sub-scenes.
To get an idea of the scene format at its simplest, here’s a sample XML file that the tool has generated for the “Meeting room” scene:
<krpano>
<scene name='Meeting room'>
<preview url='Meeting room-L.tiles/preview.jpg' />
<image stereo='true' stereolabels='L|R'>
<cube url='Meeting room-%t.tiles/pano_%s.jpg' />
<cube url='Meeting room-%t.tiles/mobile_%s.jpg' devices='iOS' />
</image>
</scene>
</krpano>
The understand what this means, let’s take a look at the files created by the tool.
You can see we have a number of JPG images for our standard and mobile panoramas. The above XML file sits in the folder above the one in which these images are found.
So that’s the way we’re creating sub-scenes, which are pretty simple. The top-level scene is a bit (but not much) more complicated.
The scene itself is going to be copied from a template folder – which will include the various .js modules for the krpano viewer as well as the JPGs for this outer panorama – and we’re going to replace some placeholders in the XML file with custom chunks of code to do what we want.
We’re going to add two chunks of code: the first is really boilerplate – some JavaScript to animate the thumbnails when the gaze cursor hovers over them – while the second is where our custom “hotspots” are defined. Here’s an example definition for our meeting room hotspot:
<!-- Panel 7 -->
<hotspot name="p7" style="panel" ath="110" atv="0" />
<hotspot
name="p7_thumb" style="thumb" zorder="3" ath="110"
atv="0" url="panos/Meeting room/thumb.png" scale="0.3" ox="0" oy="-10"
onclick="changepano( loadpanoscene('%CURRENTXML%/panos/Meeting room/tour.xml',
0, null, MERGE|KEEPVIEW|KEEPMOVING, BLEND(1)); set(webvr.worldscale,0.5); );" />
<hotspot
name="p7_txt" style="thumb" zorder="2" ath="110" atv="0"
url="panos/Meeting room/text.png" scale="0.3" oy="+82" enabled="false" />
This hotspot is basically a panel that includes a circular thumbnail image (which we mentioned, last time) and a custom image with some text containing the name of our panorama. We’re creating this image using code (which, yes, we’ll see next time :-).
Apart from the custom image and the link to the sub-scene we have a custom “ath” attribute value. This is going to define where it appears horizontally in space. In our form I’ve now added a corresponding “angle for thumbnails” item, which will define the overall angle in the scene (from 360 degrees) that will be occupied by our thumbnails. Here’s the updated dialog design:
I’ve set this as 220, so the thumbnails will be spread from -110 to 110 degrees. As this is the last of our 7 thumbnails, it has a value of 110 for each hotspot’s ath attributes.
That was just a quick look at some basic elements of the XML format used by the krpano viewer. In the next post we’ll see the source code for the finished application and talk about directions for future enhancements.