With the release of PTViewer 2.8 beta5, it is now possible to create your own dynamic menus for PTViewer using nothing but static hotspots. With the previous versions you could almost create dynamic menus, but not quite. You can now create menus that can appear and disappear at the click of a button and have buttons that have rollover images too.
Throughout this tutorial I will provide code snippets, and have example pages of each step so that you can see what each step should look like. You can download all the images I use by right clicking and choosing "save as" here (be warned, I'm no graphics artist). So with all this you should be able to re-create any of these steps yourself.
So where to start, well how about a simple button with a rollover image created from two static hotspots. The button at this stage will do nothing when clicked, but we will continue to build functionality onto it. So here are the two lines from the applet that define the static hotspots for the button.
<param name="shotspot0" value="x0
y268 q i'OpenMenu.gif'">
<param name="shotspot1" value="x0 y268 a63 b300 p
i'OpenMenu-RollOver.gif' u'ptviewer:'">
The first line defines the view of the button that is always visible (this is done with the "q" parameter), while the second line defines the popup image (this is done with the "p" parameter) that is displayed when the mouse is over the button. On both lines the x and y parameters define the top left corner of the image and button area, while on the second line the a and b parameters define the lower right corner of the button area. The second line also has the "u" parameter which defines what to do if the button is clicked.
To see the example page for step 1, click here.
Next lets make it that when you click the "Open Menu" button another button appears that allows you to start auto rotating the panorama, so here are the five lines from the applet that define the static hotspots for the buttons.
<param name="shotspot0"
value="x0 y268 q i'OpenMenu.gif'">
<param name="shotspot1" value="x0 y268 a63 b300 p
i'OpenMenu-RollOver.gif'
u'ptviewer:DrawSHSImage(2);DrawSHSPopup(3);'">
<param name="shotspot2" value="x0 y268
i'AutoRotate.gif'">
<param name="shotspot3" value="x64 y268 a127 b300
i'AutoRotate-RollOver.gif' u'startAutoPan(1, 0, 0, 30);'">
<param name="shsEnableVisibleOnly"
value="true">
As you can see the first two lines are almost identical to the previous example apart from the addition of commands that are processed when the button is clicked. These commands make the "Auto Rotate" button appear. The first command makes the 3rd static hotspot always visible (this is the equivalent to the "q" parameter), while the second makes the 4th static hotspot visible when the mouse is over the button (this is the equivalent to the "p" parameter). The next two define the "Auto Rotate" button, they are similar in format to the first two lines with the exception of the "p" and "q" parameters. This means that by default this button is not displayed. The command that is associated with the clicking of this button is to start auto rotating the panorama. The fifth line tells PTViewer that if a static hotspot is not displayed, then it is disabled. This means to start with that the "Auto Rotate" button is disabled.
To see the example page for step 2, click here.
It is great that we have now managed to open this simple single button menu, but currently there is no way to close the menu after starting the auto rotation. So next we'll add a close menu button to do this. The following eight lines define the static hotspots for the buttons.
<param name="shotspot0" value="x0
y268 q i'OpenMenu.gif'">
<param name="shotspot1" value="x0 y268 a63 b300 p
i'OpenMenu-RollOver.gif'
u'ptviewer:DrawSHSImage(2,4);DrawSHSPopup(3,5);HideSHSImage(0,1)'">
<param name="shotspot2" value="x64 y268 i'AutoRotate.gif'">
<param name="shotspot3" value="x64 y268 a127 b300
i'AutoRotate-RollOver.gif' u'ptviewer:startAutoPan(0.5,0,1,30);'">
<param name="shotspot4" value="x0 y268 i'CloseMenu.gif'">
<param name="shotspot5" value="x0 y268 a63 b300
i'CloseMenu-RollOver.gif'
u'ptviewer:DrawSHSImage(0);DrawSHSPopup(1);HideSHSImage(2-5);'">
<param name="shsEnableVisibleOnly" value="true">
<param name="shsStopAutoPanOnClick" value="false">
As before this example builds on the previous examples. There are now more commands that are run when the open menu button is clicked. Not only do we show the "Auto Rotate" button, but also show the "Close Menu" button and hide the "Open Menu" button. It is here you start to see a change in the format of these static hotspot commands. Previously it was only possible to affect a single static hotspot at a time, but now you can use list of numbers, number ranges or a combination of both separated by commas. The setup of the "Auto Rotate" button is the same as before with the "Close Menu" much like the other two. The commands that are run when the "Close Menu" is clicked show the "Open Menu" button while hiding the "Auto Rotate" and "Close Menu" buttons. As before we have the parameter that tells PTViewer that hidden static hotspots are disabled but this time we also have the parameter that tells PTViewer not to stop any auto rotation when a static hotspot is clicked. If we didn't the auto rotation that we had just started would stop when we closed the menu.
To see the example page for step 3, click here.
With this final example you now have the knowledge to create a far more complex menu by adding additional buttons that provide extra functionality. It's all just a matter of creating more static hotspots that you show and hide where needed. I hope that you find this tutorial useful, and I look forward to seeing your menus. For those of you interested, the panorama was taken on the top of British Camp, an iron age hill fort at the southern end of the Malvern Hills, Worcestershire, England.
Bob Bilsland.
www.panoramasunlimited.com