News Examples Documentation Download Buy Forum Contact
NOTE: This page is from an older version, see the latest version here.

Examples Version 1.19-pr16

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 codes.
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.
backgroundsound
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. That plugin needs to get loaded once and then there are actions available for playing sound.
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 in version 1.19. 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.
combobox
xml: combobox-examples.xmlcombobox.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.
compass
xml: compass.xml
Compass - show the viewing direction.
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.
custom-contextmenu
xml: contextmenu.xml
Define a custom right-click / long-press-touch context-menu.
This exampels shows to define a custom context-menu items - in this case here 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 the context menu item (but this works only in the HTML5 viewer).
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.xmlvtourskin.xmlwebvr.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 the same way during stitching and with that and by using the KEEPVIEW flag it's possible to keep the same looking direction when moving through the panos.
demotour-corfu
xml: tour.xmlvtourskin.xmlwebvr.xml
Demotour: Corfu Holiday Trip
This is a tour made fully automatically with the MAKE VTOUR (MULTIRES) droplet (but to save download space in the package, the multires images were removed and replaced by the smaller single-res images).
The input images in this example were geo-tagged - and with that the map and the map-spots were automatically enabled and added.
demotour-kuchlerhaus
xml: tour.xmlcontextmenu.xml
Demotour: Kuchlerhaus
This is a mainly custom made tour. The images itself were build by using the MAKE VTOUR droplet, but the skin and the hotspots are custom made xml code.
demotour-stereoscopic
xml: tour.xmlwebvr.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-winecellar
xml: tour.xml
Demotour: Winecellar
This is a fully manually built tour (where the images itself were generated using the droplets of course) without a given skin. As navigation a small map with spots, where the active one shows a radar cone, and animated hotspots in the panos are used.
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.
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.
fovtype
xml: fovtype.xmlcombobox.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.
googlemaps
xml: googlemaps.xml
Google Maps
This is a simple example for how to include the googlemaps plugin and set a spot on it.
In Flash there is no Google Maps API available anymore - there the bingmaps plugin will be used instead. Note - the Bing Maps API requires an API key for using.
gyro
xml: gyro.xml
Gyroscope
This example shows how to include and to use the gyro2 plugin. This allows controlling the pano view by gyroscope of the device.
Note - the gyroscope works only on mobile and tablet devices.
image-gallery
xml: imagegallery.xmlthumbbar.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.xmlvideo-player.xmlyoutube-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.
js-add-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.
js-api-examples
Javascript API Examples
Several examples for using the Javascript API of the krpano viewer.
loading-progress
xml: loading-progress-example.xmlloadinganimation.xmlloadingbar.xmlloadingpercenttext.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.
makescreenshot-api
xml: makescreenshot-api-example.xml
Make screenshots directly with krpano
An example usage of the makeScreenshot() API.
nadir-logo
xml: nadir-logo.xml
Nadir-Logo
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).
slider-blend-cubes
xml: slider.xml
Blend between two panos via a slider.
The two panos were included as hotspots and the blending is done by adjusting their alpha-transparency settings.
The slider is build out of images and some xml script code.
snow
xml: snow.xmlcombobox.xml
Snow
A demo of the Snow Plugin with several different styles / settings.
splitscreen
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
textstyles
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.
videohotspot
xml: videohotspot.xml
Video-Hotspot
A simple example for using the videoplayer plugin as distorted hotspot.
videopano
xml: videopano.xmlvideointerface.xmlwebvr.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
xml: krpano_vr.xmlcontextmenu.xmlwebvr.xmltour.xmltour.xml
WebVR - the krpano VR support example.
This example is a demo for the VR support. It includes an intro scene with and uses hotspots to link to other examples.