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 layers.
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.
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.
Custom Contextmenu
xml:
contextmenu.xml
An example for customizing the 'right-click / long-touch'
contextmenu.
- Define custom items, either with simple texts or even with
html-content like images or with links to certain actions as sub-menus.
- In this example custom items for changing the control mode
and for changing the viewing projection are added.
- This example also shows how to customize the contextmenu with CSS classes.
Demotour Apartment
xml:
tour.xml •
vtourskin.xml •
webvr.xml
This tour was first build using the MAKE VTOUR droplet and then modified manually.
For navigating between the rooms hidden polygonal hotspots are used.
Additionally there a visible text hotspots with information.
In VR mode these text hotspots are used for navigation.
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 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.
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 is manually designed and coded.
A little helper tool (tour_edithelper.xml) for finding 3D viewpoint and hotspot positions is included.
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.
Draggable Hotspots
xml:
dragable-hotspots.xml
Draggable 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.
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.
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.
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 API Examples
Source:
js-api-examples.html
Javascript API Examples
Several examples for using the
Javascript API of the krpano viewer:
- How to use krpano directly from and with Javascript.
- How to load xml files or xml strings.
- How to load image directly without any xml involved.
- How to load 3D-models and navigate in them.
- How to change the view.
- How to add and edit hotspots.
- How to add plugins.
Layers: Grid-Layout
xml:
grid-layout.xml
An layout example for a dynamic grid layout:
- The sizes of the layers around will be determined by their content.
- The middle layer will adjust itself to use the remaining space.
- The main pano-viewing 'area' is also automatically adjusted to be inside the
middle layer area (to avoid an off-center view of the pano image).
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.
Maps: krpano Maps Plugin
xml:
krpanomaps-example.xml
In this example a GeoJSON file is loaded to automatically generate a polygonal hotspot as country shape,
and a JSON database file to dynamically generate hotspots.
Additionally there are dragable markers that allow measuring distances on the map.
Maps: krpano as Map-Viewer Example 1
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.
Maps: krpano as Map-Viewer Example 2
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.
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).
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: 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).
Postprocessing: 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.
ThreeJS: Environment Maps
xml:
threejs_envmap.xml
Environment Maps
- With Environment Maps the 3D Models can use Reflections and Ambient Lighting
and based on the Colors of the surrounding environment.
- This immediately improves the seamless integration of the 3D Model into the scene.
- For normal 2D panos and the krpano <preview>
pano image can be automatically used as environment map.
ThreeJS: Tuscany (Renderer Comparison)
xml:
threejs_tuscany.xml
A comparison between the krpano and ThreeJS renderers.
- Both renderers are using the same OBJ+MTL textured 3D Model.
- The krpano renderer should be typically the faster one (in terms of loading, decoding, rendering and raycasting/hittesting performance).
This should be especially noticable in VR devices or on slower systems.
- The ThreeJS renderer on the other hand can therefore optionally use lights and shadows and
supports more 3D file formats (glb, gltf).
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-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.