News • Examples • Documentation • Download • Buy • Forum • Contact

Examples Version 1.21 

Animated Hotspots
xml: anihotspots.xml
Image-based animated hotspots.
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. 
Background Sound
xml: backgroundsound.xml
Play a sound as background music.
In this example the soundinterface plugin will be used to extend krpano with support for sounds.
To automatically start and stop the background sound only for the current pano (e.g. when using several scenes) the playback will be controlled by pano-local events.
Additionally a small button is included to pause and resume the sound. 
Blending Demo
xml: blending-demo.xml
WebGL-Blending-Modes Demo
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. 
Chroma Key Mask
xml: example.xml • chromakey_helper.xml
Chromakey
With the chromakey setting a certain color in an image or video can be used as alpha mask.
The typical usage would be Greenscreen or Bluescreen videos.
The example includes a helper script for easily finding the correct settings for the particular image or video. 
Combobox / Dropdown
xml: combobox-examples.xml • combobox.xml
Combobox Plugin Demo
Several example usages of the new combobox.xml plugin. The examples show how to define the combobox elements statically and dynamically and how to customize the design. 
Compare Panos
xml: compare-panos.xml
Compare Panos
Here two krpano layers are used to compare two pano images in any format and in any resolution in multiple ways:
  • Split-screen with a split-slider
  • Side-by-Side or Top-Bottom
  • Overlapping with a blending-slider
And all fully dynamic, animated, flexible and easy to use.
This example basically replaces the older Splitscreen and Slider Blend Cubes examples, which were using other techniques for the comparison (stereo-rendering and hotspots). 
Compass
xml: compass.xml
Compass - show the viewing direction.
This example rotates layer images accordingly to the current viewing direction.
On mobile/tablet devices the gyroscope and magnet sensors (when available) are additionally used, to use the real-world orientation. 
Control Mode Comparison
xml: example.xml
An example for showing the different basic control modes.
Further customization is possible by adjusting the <control> settings. 
Custom Contextmenu
xml: contextmenu.xml
Define a custom right-click / long-press-touch context-menu.
This exampels shows how to define a custom context-menu items - in this case with options to change the control mode and to change the viewing projection.
The example also shows how to include html content (like an image) inside a context menu item. 
Custom Tile-URLs
xml: custom-tile-urls.xml
Custom Tile-URLs
A small tech-demo that shows how to use custom tile-image-urls by using the customParseTilePath API. As example public maps-tiles will be loaded here. 
Cylinder-Grid-Hotspots
xml: cylinder-grid-hotspots.xml
This example shows how to generate and place textfield hotspots on a cylinder surface by using fixed pixel-sizes as offsets (calc_spherical_offset). 
Demotour Apartment
xml: tour.xml • vtourskin.xml • webvr.xml
Demotour: Empty Blue Apartment
This tour was first build using the MAKE VTOUR droplet and then modified manually.
For navigating between the rooms hidden polygonal hotspots are used.
All panos were aligned into the same direction during stitching so that the KEEPVIEW flag can be used to keep the same looking direction when moving through the panos. 
Demotour Corfu
xml: tour.xml • vtourskin.xml • webvr.xml
Demotour: Corfu Holiday Trip
A default tour automatically build using MAKE VTOUR (MULTIRES) droplet and then manually extended with a custom navigation-map build by a scrollarea and an image. 
Demotour Corfu - with Skin selection
xml: skinselect.xml • vtourskin_design_flat_light.xml • vtourskin_design_ultra_light.xml • vtourskin_design_glass.xml • vtourskin_design_117.xml • vtourskin_design_117round.xml • vtourskin_design_black.xml
Different skins designs
This is an example of the corfu tour with the other included skin designs. 
Demotour Winecellar
xml: tour.xml
Demotour: Winecellar
This is a fully manual built tour without a given skin. As navigation a small map with spots and radar cone,and animated hotspots are used. 
Demotour Stereoscopic 3D
xml: tour.xml • stereooffset_helper.xml webvr.xml
Demotour: Stereoscopic 3D Panorama Images
This is a demonstration of several display possiblities for viewing stereoscopic 3D images:
  • Anaglyph - For viewing using Red/Cyan glasses.
  • 3D TV - A Half-Side-by-Side rendering for 3D-Smart-TVs.
  • Side-by-Side - Simple Side-by-Side rendering.
  • WebVR - For viewing using VR headsets.
  • Toggle L/R - Toggle constantly between the left/right images.
Demotour Indian Temple Stereoscopic 3D
xml: tour.xml • stereooffset_helper.xml
A virtual tour of the Indian Meenakshi-Sundareswara Temple with Stereoscopic 3D images.
Tour-navigation by polygonal hotspots.
The images are provided by Aboorvasamy Sureshbabu / view360.in. 
Depthmap Demotour: Little Temple of Abu Simbel
xml: tour.xml • depthmap_navigation.xml • tour_edithelper.xml
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 Tour in Edit-Mode 
Depthmap Demotour: Gravina Apartment
xml: main.xml • main2.xml • project3d.xml
Depthmap-Tour of the 'Gravina Apartment'
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.

Here for more depthmap-testing the same tour also with fully free 3D-movement and pano-navigation by automatic-generated hotspots: Gravina Apartment - Example 2 
Depthmap: Textured 3D-Model / 3D-Measurements
xml: test.xml
image: texture.jpg
Instead of using a panoramic image and projecting it onto a 3D-Model or using a Depthmap-image, it is also possible to load pre-textured 3D-Models.
It would be possible to use the textured 3D-Model multiple times - e.g. once as textured overview/dollhouse and then again for detailed, high-resolution pano images at various places within the same model.
This example shows also the possibility for 3D-Measurements and for Collision-Detection with the 3D-Model when walking around.
The 3D-Model and the texture were generated with the PanoCamAdder Add-on for Blender.
More information about the texture generation.
Thanks to Michael Adam for providing the example data! 
Depthmap: Tuscany - 3D-Model with Multiple Textures and Collision-Detection
xml: tuscany.xml • intro.xml
Tuscany - a tech-demo for:
Based on the 'Oculus World Demo' from the Oculus VR SDK (3D-Model and textures). 
Depthmap-Images
xml: depthmap-images.xml • depthmap_navigation.xml
Example panos with Depthmap-Images
The depthmaps in these examples were created either by the camera itself, by rendering software together with the (also rendered) pano-image or using some stereo-to-depth software from stereo-panos. 
Depthmap-Image Helper Tool
xml: depthmap_helpertool_example.xml • depthmap_helpertool.xml • depthmap_navigation.xml
Depthmap-Image Helper Tool
A small helper tool for finding the correct offset and scale settings for depthmap-images. The values for these settings depends how the depthmap-image was created and mapped. 
Depthmap-Image 24bit RGB Encoding for more Precision
xml: depthmap_precision_compare.xml • depthmap_navigation.xml
A comparison of using different bit-depths for the depthmap-image.
By storing the depthmap as RGB-encoded image it is possible to use 16- or 24-bit (instead of 8-bit from a grayscale image) for the depth-information for more precision when reconstructing the 3D-environment. 
Directional 3D Sound
xml: directional3dsound.xml
Directional 3D Sound
An example of using the Soundinterface Plugin for placing sounds at 3D locations. Look or move around to hear the sounds from different directions. 
Dragable Hotspots
xml: dragable-hotspots.xml
Dragable Hotspots
This example shows a possibility for how to drag the hotspot position. Additional the position of the hotspot will be formatted as xml code and shown via the textfield plugin. 
Dragable Layers
xml: dragable-layers.xml
Dragable Layers
This example shows how to drag <layer> elements and the difference between maskchildren=true (clip children elements) and maskchildren=false (no clipping). 
Fisheye Image
xml: fisheye.xml
image: fisheye.jpg
Example for the direct usage of fisheye images (without stitching or dewarping).
The fisheye image parameters could be determined using PTGUI. See here for more. This could be used with video files or mjpeg live streams (e.g. for dome webcams) as well. 
Floor Hotspots
xml: floor-hotspot-example.xml • floor-hotspot-example-2.xml
Floor Hotspots at the Mouse Position
An example for making a perspective-correct 3D hotspot moving along the floor. This could be used for navigation in the 3D depthmaps panos, but also in normal 2D tours to have there nice 3D looking dynamic hotspots.
More information: 
Flyout Hotspots
xml: flyout-hotspots.xml
Flyout Hotspots
This is an example about the hotspot flying setting. By tweening it from 0.0 to 1.0 a hotspot can move from it's normal position inside the pano to a fixed position on the screen.
The example manages the state of several hotspots. When one hotspot is flying out, the others will automatically fly back in. 
Follow-Mouse
xml: example.xml • followmouse.xml
Follow-Mouse
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. 
Fov-Types
xml: fovtype.xml • combobox.xml
Field-of-view type comparison and fixed screen-size aspects.
The view.fovtype setting defines how the view.fov field-of-view setting relates to the window-size. Here a comparison of the different settings and how they work on different screen-size aspects. 
Google Maps
xml: googlemaps.xml
Google Maps
This is a simple example for how to include the googlemaps plugin and set a spot on it. 
Gyroscope
xml: gyro.xml
Gyroscope
An example to show how to include and to use the gyro2 plugin.
This allows controlling the pano-view using the gyroscope of the device.

Additionally here an example for comparing the different sensors and sensors-modes:
Gyroscope Sensor Mode Comparison 
Hotspot Alphachannel / Transparent Videos
xml: alphachannel.xml
image: alphachannel_sbs.jpg
video: spaceships_tb_alpha.mp4
Hotspot Alphachannel
With the alphachannel setting JPEG-images or videos with an alpha/transparency-channel added as grayscale image to the right or to the bottom can be used.
With that its possible to realsize transparent-videos, which aren't supported yet by the browsers. For an other way for transparent-videos, see also the Chroma Key Mask example. 
Hotspot Canvas
xml: canvas.xml
js: canvas.js
An example for using a HTML Canvas as pano-image or as WebGL-hotspot.
See the canvas.js for details. 
Hotspot Extraction
xml: pool.xml
Example for the tutorial Extract a Distorted Hotspot from any kind of Pano Image (with perfect pixel alignment). 
Image Gallery
xml: imagegallery.xml • thumbbar.xml
A simple Image Gallery
An example for a thumbnail-gallery-bar xml-script with flying-out / zooming images. 
Inline Video Players
xml: inline-video-players-example.xml • video-player.xml • youtube-player.xml
Inline-Video-Players
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. 
Interactive Area
xml: interactive-area.xml
Interactive-Area
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 image hotspot.
Tutorials for making such distorted hotspots: 
Javascript: Add and Remove Panos
Add and remove panos via Javascript
An example for dynamically adding either Flash or HTML5 viewer elements and removing them from the webpage. 
Javascript API Examples
Javascript API Examples
Several examples for using the Javascript API of the krpano viewer. 
Javascript: Synchronize Two Viewers
html: syncscreen.html • xml: pano1.xml • pano2.xml
Synchronize two krpano viewers using the Javascript Interface. 
Layers
xml: all.xml • css-styling.xml • drag-layer.xml • three-column-layout.xml • grid-layout.xml • flowchildren.xml • scalemode.xml • scrollarea-infobox.xml • scrollarea_and_adaptivefrictions.xml • textfield-editable.xml
Layers
Several examples for the new layer features from version 1.21: Examples: 
Little Planet Intro
xml: tour.xml • vtourskin.xml
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. 
Loading Progress
xml: loading-progress-example.xml • loadinganimation.xml • loadingbar.xml • loadingpercenttext.xml
Visualize the loading progress.
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. 
Make-Screenshot API
xml: makescreenshot-api-example.xml
Make screenshots directly with krpano.
An example usage of the makeScreenshot() API. 
Maps Example
xml: maps.xml
Use the krpano viewer embedded as layer inside krpano as viewer for multiresolution maps-tiles. This way no external maps library is required and the map-hotspots and all their interaction can be done using krpano.
For mobile devices a special splitscreen-layout is used.
The map implementation here is also an example for using krpano by Javascript. 
Maps2 Example
xml: maps2.xml
Maps2 - OpenStreetMap tiles / Latitude and Longitude support / Geo-Location
In this second maps example krpano is used as main map-viewer with full lat/lng/zoom support (for the view and for the hotspots) and then when clicking on hotspots another krpano viewer is embedded to show panos and tours at these locations.
This example also shows how to extend krpano with core functionality by Javascript and how to use the Browsers Geo-Location API. 
Minimap-Zoom-Rectangle
xml: eiffeltower_minimap.xml • minimap_zoomrect.xml
Here a small 'map' image in the left-top corner is shown for navigation and showing the current viewing/zooming area.
This is an example for the minimap_zoomrect.xml helper script. For making such map, only the map-image and the xml need to be included. 
Multires: Tokyo - 45 Gigapixel
xml: tokyo.xml • skin.xml • webvr_autozoom.xml
An extremely large pano as example for loading-performance and image-quality.
(with zooming support for VR)
The source image is 300.000 x 150.000 Pixel large (=45 Gigapixel).
For display it was converted to 6 x 95.493 x 95.493 Pixel cube-faces (~55 Gigapixel).
Shot from the Roppongi Hills Mori Tower. Provided by Jeffrey Martin / 360cities.net. 
Multires: 1.4 Petapixel
xml: petapixel.xml
A synthetic 1.4 Petapixel-pano for demonstrating the theoretical size-possibilities. One Petapixel is one million Gigapixel (or 1000 Terapixel).
The pano is a cubical pano with one cube-side-size of 16.777.216 x 16.777.216 pixel. That's equal to a spherical pano in the size of 52.707.178 x 26.353.589 pixel.
To make that test-case as realistic as possible the tile-images are loaded from a server (and there they are dynamically generated on request).
Here additionally also a Partial-Pano test-case (with adjustable hfov/vfov settings). 
Multires: Paris Tour
xml: tour.xml
A Virtual Tour in Paris with very large Multiresolution images (~750 Megapixel per pano).
The images are provided by ecliptique.com. 
Multires: Brooklyn Bridge - 6 Gigapixel
xml: brooklynbridge.xml
A high-resolution (6 Gigapixel) flat pano of the Brooklyn Bridge in New York.
The image is provided by Joergen Geerds / newyorkpanorama.com. 
Multires: Eiffel Tower - 2 Gigapixel
xml: eiffeltower.xml
A high-resolution (2 Gigapixel) flat pano of the Eiffel Tower in Paris.
The image is provided by ecliptique.com. 
Partial-Pano: Rome
xml: partialpano.xml • partialpano_helpertool.xml
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. 
Partial-Pano: St. Peter's Basilica
xml: petersplatzkuppel.xml
A multiresolution partial-spherical-pano (with field-of-view of ~54x13 degree) from the roof of the St. Peter's Basilica in Rome. Linked with hotspots to other panos in the near. 
Partial-Panos: Colosseum
xml: kolosseum_vorne.xml • kolosseum_seite.xml • hotspotstyles.xml
Two multiresolution partial spherical-panos (~156x75 and ~169x54 degree fov) of the Colosseum in Rome.
Here the example with the partialpano_helpertool.xml included for testing the partial-pano feature: Colosseum with Partialpano Helper Tool. 
Partial-Pano: Trevi Fountain
xml: flat.xml • partialpano.xml
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. 
Nadir Logo
xml: nadir-logo.xml
An example for using an image as automatic rotating distorted hotspot to cover the nadir area of the pano (e.g. to hide a tripod). 
Popups Example
xml: popups.xml
Popups with iFrames / HTML / Images and a blurred background
A demo of how to blur the background using the Blur Postprocessing Plugin and how to open several different popups (HTML, Websites, Panos, Videos, Images). 
Postprocessing Plugins Demo
xml: postprocessing_demo.xml
Postprocessing Plugins Demo
A demo of the these Postprocessing Plugins:
  • Light - High-quality exposure and light/shadow control.
  • Blur - High-performance image blurring.
  • Sharpen - An Unsharp-Mask filter for sharpening or local contrast enhancement.
Additionally this demo shows how to implement some controls using the krpano layer and actions system. 
Postprocessing Demo: Zoom-based Sharpening
xml: zoom_based_sharpening.xml
Zoom-based Sharpening
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. 
Slider Blending Cubes (old)
xml: slider.xml
Blend between two panos using a slider.
The two panos were included as hotspots and the blending is done by adjusting their alpha-transparency settings.
Note - this example has mostly been replaced by the new Compare Panos examples, which is more flexiable and easier to use. 
Splitscreen (old)
xml: splitscreen.xml
Splitscreen
Show two panos for comparison. Either side-by-side or split into half-half.
For this example the stereo-support of the krpano viewer is used.
For loading stereo images see here: image.stereo
and for rendering stereo images here: display.stereo
Note - this example has mostly been replaced by the new Compare Panos examples, which is more flexiable and easier to use. 
Snow Plugin Demo
xml: snow.xml • combobox.xml
A demo of the Snow Plugin with several different styles / settings. 
Text-Styles
xml: textstyles.xml
Textstyles
This example shows the usage of the showtext.xml plugin and several different text-styles. As test-targets polygonal hotspots were used. 
Tooltips
xml: tooltips.xml
Tooltips for buttons and hotspots
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. 
Video-Hotspot
xml: videohotspot.xml
Video-Hotspot
A simple example for using the videoplayer plugin as distorted hotspot. 
Video-Panorama
xml: videopano.xml • videointerface.xml • webvr.xml
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. 
WebVR Demo
xml: krpano_vr.xml • contextmenu.xml • webvr.xml • tour.xml
WebVR - The first krpano VR support example.
This example is a small demo for the VR support. It includes an intro scene with and uses hotspots to link to other examples. 
WebVR VR-Controllers
xml: vrcontrollertests.xml • webvr.xml • depthmap_navigation.xml
WebVR - VR-Controllers
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. 
WebVR Drone Attack (Tech-Demo-Game)
xml: drone-attack.xml • pp_hit_effect.js • webvr.xml
WebVR - Drone Attack
A small and simple shooter game as tech-demo for several krpano features.