This example shows how to use image-strips / sprite-sheets
as animated hotspot images.
The images will be animated by dynamically changing the crop setting
(which 'cuts-out' a certain region of the image) by xml action scripting.
The do_crop_animation <action>
in this example has no dependencies and can be easily reused in own examples.
It supports vertical, horizontal and tiled image-strips and loops the images from left-top to right-bottom.
As parameters the pixel-size of one frame and the favored frame-rate need to be set.
This is an example to demonstrate the possibilities of the new WebGL-based blending modes.
The different blending-modes are custom settings for the blend
parameter of the loadpano() / loadscene() actions.
Beside of this the examples shows how to use custom xml structures (the <blendmodes> element is a custom one)
and how to drag layers and to use the scrollarea plugin.
This example rotates images accordingly to the current viewing direction.
The compass elements are build-out of several layers and images - and one of these images
will be rotated when the viewing changes.
Depthmap-Tour of the 'Little Temple of Abu Simbel'
A full-featured demo tour using depthmaps.
It demonstrates how to view a pano dynamically from new perspectives,
e.g. to show wall friezes undistorted.
Additionally the depthmaps allow nice 3D-transitions.
The tour offers automatic- and manually-generated hotspots for navigation.
The depthmaps were generated by the everpano 3D tool,
the tour itself manually designed and coded.
A little helper tool for finding 3D viewpoint and hotspot positions is also included.
The whole tour was fully generated by the everpano 3D tool.
For navigation in the tour the everpano Navigator plugin is used.
That plugin allows easy navigating by automatically finding the pano next to the point where the used had clicked -
and when there is no pano near, a nice 3D-zooming-animation indicates that.
An example for letting the view automatically slightly follow the users mouse-cursor.
E.g. as indicator that this is an interactive image.
As soon the user starts interacting the following will pause and automatically resume later.
This example shows two videoplayer xml scripts - one plays a normal videofile - and the other plays a Youtube video.
During the video playback a darken background layer will cover the pano and the other user interface elements.
In this example a distorted hotspot image that shows a different pano content will be used.
That hotspot will be faded-in when hovering an invisible polygonal hotspot, which acts as 'hit-area' for the
The Corfu tour starting with a Little Planet Intro
The 'Little Planet' view itself is basically only a Stereographic Projection plus looking down.
In krpano a stereographic projection distortion can be enabled by setting the
view.distortion setting to 1.0.
And by animation (tweening) this setting and the viewing direction a nice Little Planet
transition animation can be created.
The default vtourskin.xml
skin already provides a predefined Little Planet Intro script. To enable it only change the
littleplanetintro setting in the tour.xml to true.
This example shows three possibility to visualize the pano image loading progress -
as image-based loop animation (an image-strip with a crop animation),
as loading bar (by changing the size of a layer element)
and as percent text.
It would be possible just to include one of the example xml files to add that kind of loading progress animation
to an own pano or tour.
A multiresolution partial-spherical-pano (with field-of-view of ~156x47 degree) in Rome.
For testing the partial-pano feature a small helper-tool is included for changing
the fov-coverage settings of the pano. This helper-tool can be used for finding the
correct hfov/vfov/voffset settings for a partial-pano when they are unknown.
A multiresolution flat-pano of the Trevi Fountain in Rome (~483 Megapixel).
The flat-pano-projection is a good way to show the full-image-content at once.
Here the same pano as partial-pano: Trevi Fountain Partial Pano (fov 95x66).
Different to the flat-pano-projection this allows an undistorted view at the edges when zoomed-in and
additionally also showing more content because of the different cropping-range in spherical projection.
This examples shows how to calculate a range based on the original pano-image pixel resolution.
Here that will be used to adjust the sharping-radius depending on the actual zoom-level, so the sharping-effect
will be the same one as when sharpening the original image itself.
An example 'tooltip' implementation - by assigning the 'tooltip' style and a 'tooltip' attribute
to an layer or a hotspot, it will automatically show the given tooltip text when the element will be hovered.
Videopano - a fully featured panoramic-video player skin.
This is an example for a panoramic video player.
It provides a simple xml interface for adding several video-quality files.
For using / adding own videos they would be only added once in the videopano.xml file.
The user interfaces provides: play/pause controls, a seeking bar, volume/mute control,
options for changing the quality, the playback rate and the viewing projection
(including a special 'flat' view), fullscreen buttons, gyroscope control and VR support.
The layout and design can be easily adjusted with a few settings in the videointerface.xml.
A demo of the VR-Controller support. It shows how to use them for doing special 'hit-testing' (checking where
a hotspot would get hit when it got aimed by a VR-controller) and how to style and customize the VR controllers.