Adding a cap image

In this article, you will see how to add a cap image to a panoramic scene. You will also see how to make the cap image clickable and how to link to external pages.

Cap image

The concept of a cap image started out as a novel way to hide tripod legs in the nadir of a panoramic image. Nowadays, they are often used as a way to add branding to a panoramic scene. Cap image are often added to the panoramic image itself using eg Panotools. In SPi-V, you can add a cap image dynamically. The advantage of this approach is that the image can give feedback that it is clickable by using a mouseover effect.

Adding such an element in SPi-V is pretty straight forward once you understand how multiple panoelement nodes can be used in a single scene:

    <panoelement id="capelement" type="flat" tilt="-90" hfov="10" >
      <image id="capimage">
        <layer class="base"  type="bitmap" src="cap-base.png" />
      </image>
    </panoelement>

Note that even though this panoelement has a flat projection, you are free to combine it with panoelements with other projection types.

Making it clickable

If we want to be able to click the cap image to have an external page display, you need to add a behavior node to the panoelement:

    <panoelement id="capelement" type="flat" tilt="-90" hfov="10" >

      <image id="capimage">
        <layer class="base"  type="bitmap" src="cap-base.png" />
      </image>

      <behavior id="capbehavior">
        <action event="click" type="getURL" 
          url="http://fieldofview.nl" target="_blank" />
      </behavior>
    </panoelement>

A behavior node is referenced similarly to an image node; in this case the behavior node is inlined as a child to the panoelement. See the behavior node specification for more information on different events and action types.

You now have a cap image that opens a webpage in a new browser window. If you watch carefully, you will even see the mouse pointer change to a pointing finger if you hover over the cap image. To make the cap image a bit more inviting to click on, you can add a mouseover effect to the panoelement. This can be done by adding two additional layers to the cap image node.

    <panoelement id="capelement" type="flat" tilt="-90" hfov="10" >
      <image id="capimage">
        <layer class="base"  type="bitmap" src="cap-base.png" />
        <layer class="hover" type="bitmap" src="cap-over.png" />
        <layer class="press" type="bitmap" src="cap-press.png" />
      </image>
      ...

You don't have to specify the press image, but it adds a nice touch.

Completed XML document

<?xml version="1.0"?>
<tour>
  <scene id="cap-scene">
    <meta>
      <title>Cap image test</title>
      <description>This scene contains a panoramic image 
        and a clickable cap image.</description>
    </meta>

    <panoelement id="panorama" type="cubic" >
      <image id="cubicimage">
        <layer type="bitmap" src="cubic.jpg" />
      </image>
    </panoelement>

    <panoelement id="capelement" type="flat" tilt="-90" hfov="10" >

      <image id="capimage">
        <layer class="base"  type="bitmap" src="cap-base.png" />
        <layer class="hover" type="bitmap" src="cap-over.png" />
        <layer class="press" type="bitmap" src="cap-down.png" />
      </image>

      <behavior id="capbehavior">
        <action event="click" type="getURL" 
          url="http://fieldofview.nl" target="_blank" />
      </behavior>

    </panoelement>
  </scene>
</tour>