neoPano
360º Panorama viewer.
Based on:
Sample Apps:
https://visualneo.com/tutorials/neopano
https://visualneo.com/tutorials/neopano2
https://novonordisklab.com
Description
The neoPano plugin for VisualNEO Web enables the integration of interactive 360° panorama views, allowing users to explore immersive scenes with zoom, rotation, and navigable hotspots. This plugin is perfect for applications like virtual tours, real estate previews, and educational tools. Here’s a summary of its main functionalities and applications:
Initializing a Panorama View: The neoPanoInitialize command sets up a 360° equirectangular image in a specified container, allowing users to look around the scene with optional auto-rotate and debug modes.
- Command: neoPanoInitialize
- Syntax: neoPanoInitialize "objId" "imagePath" setAutoLoad setAutoRotate setDebug
- objId: The ID of the container for the panorama view.
- imagePath: Path to the equirectangular panorama image.
- setAutoLoad: Automatically load the image (true or false).
- setAutoRotate: Auto-rotation speed (0 for static).
- setDebug: Enable debug mode for hotspot placement.
Example:
neoPanoInitialize "panoContainer" "path/to/panorama.jpg" true 0 false
This setup displays the panorama image, with no auto-rotation and debug mode off.
Advanced Initialization Options: For cube map panoramas (separate images for each side of a scene), neoPanoInitializeFullOptionsCubic offers full customization. You can define the right, left, front, back, top, and bottom images, as well as control settings like zoom, keyboard controls, and more.
Hotspot and Event Management: Hotspots allow interaction within the panorama by marking clickable points that trigger actions. Use neoPanoAddHotSpot to add a hotspot and neoPanoAddEvent to manage events on the panorama.
- Commands:
- neoPanoAddHotSpot: Adds an interactive hotspot at specific coordinates.
- neoPanoAddEvent: Subscribes to events (e.g., user clicks) within the panorama.
Example for Hotspot:
neoPanoAddHotSpot "panoContainer" "hotspot1" 30 -45 "ExploreRoom"
This command adds a hotspot that triggers the ExploreRoom subroutine when clicked.
Practical Applications
The neoPano plugin is ideal for:
- Virtual Tours: Offering a 360° tour of real estate, museums, or campuses.
- Educational Simulations and games: Allowing users to explore environments in science or history applications.
- Interactive Presentations: Enabling detailed explorations of spaces or objects for professional demos.
With flexible customization for image types and advanced controls, the neoPano plugin empowers VisualNEO Web developers to create engaging, panoramic experiences.
neoPanoInitialize
|
Purpose: |
Initialize neoPano (equireactangular map) |
|
Category: |
neoPano |
|
Syntax: |
neoPanoInitialize "objId" imagePath setAutoLoad setAutoRotate setDebug
objId Select a Container object imagePath Equirectangular panorama image setAutoLoad Auto load? setAutoRotate Auto rotate speed (0 = static) setDebug HotSpot debug (help for locating hotspots) |
neoPanoInitializeFullOptions
|
Purpose: |
Initialize neoPano with full options (equireactangular map) |
|
Category: |
neoPano |
|
Syntax: |
neoPanoInitializeFullOptions "objId" imagePath setAutoLoad setAutoRotate setshowZoomCtrl setkeyboardZoom setmouseZoom setdraggable setdisableKeyboardCtrl setshowFullscreenCtrl setshowControls setpitch setyaw sethfov setminYaw setmaxYaw setminPitch setmaxPitch setminHfov setmaxHfov setcompass setDebug
objId Select a Container object imagePath Equirectangular panorama image setAutoLoad Auto load? setAutoRotate Auto rotate speed (0 = static) setshowZoomCtrl Show Zoom Controls setkeyboardZoom Keyboard Zoom setmouseZoom Mouse Zoom setdraggable Draggable setdisableKeyboardCtrl Disable Keyboard Ctrl setshowFullscreenCtrl Show Fullscreen Control setshowControls Show Controls setpitch Initial Pitch (-90 to 90) Default: 0 setyaw Initial Yaw (-180 to 180) Default: 0 sethfov Initial Field of View (50 to 120) Default: 100 setminYaw Min Yaw (Default: -180) setmaxYaw Max Yaw (Default: 180) setminPitch Min Pitch (Default: -90) setmaxPitch Max Pitch (Default: 90) setminHfov Min Horizontal Field of View (Default: 50) setmaxHfov Max Horizontal Field of View (Default: 120) setcompass Show compass setDebug HotSpot debug (help for locating hotspots) |
neoPanoInitializeCubic
|
Purpose: |
Initialize neoPano (cube map) |
|
Category: |
neoPano |
|
Syntax: |
neoPanoInitializeCubic "objId" RightImage LeftImage FrontImage BackImage BottomImage TopImage setAutoLoad setAutoRotate setDebug
objId Select a Container object RightImage Right image LeftImage Left image FrontImage Front image BackImage Back image BottomImage Bottom image TopImage Top image setAutoLoad Auto load? setAutoRotate Auto rotate speed (0 = static) setDebug HotSpot debug (help for locating hotspots) |
neoPanoInitializeFullOptionsCubic
|
Purpose: |
Initialize neoPano with full options (cube map) |
|
Category: |
neoPano |
|
Syntax: |
neoPanoInitializeFullOptionsCubic "objId" RightImage LeftImage FrontImage BackImage BottomImage TopImage setAutoLoad setAutoRotate setshowZoomCtrl setkeyboardZoom setmouseZoom setdraggable setdisableKeyboardCtrl setshowFullscreenCtrl setshowControls setpitch setyaw sethfov setminYaw setmaxYaw setminPitch setmaxPitch setminHfov setmaxHfov setcompass setDebug
objId Select a Container object RightImage Right image LeftImage Left image FrontImage Front image BackImage Back image BottomImage Bottom image TopImage Top image setAutoLoad Auto load? setAutoRotate Auto rotate speed (0 = static) setshowZoomCtrl Show Zoom Controls setkeyboardZoom Keyboard Zoom setmouseZoom Mouse Zoom setdraggable Draggable setdisableKeyboardCtrl Disable Keyboard Ctrl setshowFullscreenCtrl Show Fullscreen Control setshowControls Show Controls setpitch Initial Pitch (-90 to 90) Default: 0 setyaw Initial Yaw (-180 to 180) Default: 0 sethfov Initial Field of View (50 to 120) Default: 100 setminYaw Min Yaw (Default: -180) setmaxYaw Max Yaw (Default: 180) setminPitch Min Pitch (Default: -90) setmaxPitch Max Pitch (Default: 90) setminHfov Min Horizontal Field of View (Default: 50) setmaxHfov Max Horizontal Field of View (Default: 120) setcompass Show compass setDebug HotSpot debug (help for locating hotspots) |
neoPanoAddHotSpot
|
Purpose: |
Add a HotSpot |
|
Category: |
neoPano |
|
Syntax: |
neoPanoAddHotSpot "objId" "theId" thePitch theYaw "theText" theSubroutine "theData" "theClass"
objId Select a Container object theId HotSpot id (optional) thePitch Pitch theYaw Yaw theText Text content theSubroutine Onclick subroutine (optional) theData Data to send to the subroutine as SECOND argument (optional) theClass Custom CSS class (optional) |
neoPanoAddSceneChangeHotSpot
|
Purpose: |
Add a Scene change HotSpot |
|
Category: |
neoPano |
|
Syntax: |
neoPanoAddSceneChangeHotSpot "objId" "theId" "theSceneId" thePitch theYaw "theText" "theClass"
objId Select a Container object theId HotSpot id (optional) theSceneId Scene Id thePitch Pitch theYaw Yaw theText Text content theClass Custom CSS class (optional) |
neoPanoRemoveHotSpot
|
Purpose: |
Remove a hot spot. |
|
Category: |
neoPano |
|
Syntax: |
neoPanoRemoveHotSpot "objId" "theId"
objId Select a Container object theId HotSpot id |
neoPanoGetPitch
|
Purpose: |
Returns the pitch of the center of the view in degrees. |
|
Category: |
neoPano |
|
Syntax: |
neoPanoGetPitch "objId" [returnVar]
objId Select a Container object returnVar Variable to store result |
neoPanoGetYaw
|
Purpose: |
Returns the yaw of the center of the view in degrees. |
|
Category: |
neoPano |
|
Syntax: |
neoPanoGetYaw "objId" [returnVar]
objId Select a Container object returnVar Variable to store result |
neoPanoGetHfov
|
Purpose: |
Returns the horizontal field of view. |
|
Category: |
neoPano |
|
Syntax: |
neoPanoGetHfov "objId" [returnVar]
objId Select a Container object returnVar Variable to store result |
neoPanoLookAt
|
Purpose: |
Set a new view. Any parameters not specified remain the same. |
|
Category: |
neoPano |
|
Syntax: |
neoPanoLookAt "objId" thePitch theYaw theHfov theTime
objId Select a Container object thePitch Pitch angle in degrees theYaw Yaw angle in degrees theHfov Horizontal field of view (zoom) 50 - 120 theTime Animation time in milliseconds |
neoPanoStartAutoRotate
|
Purpose: |
Start auto rotation |
|
Category: |
neoPano |
|
Syntax: |
neoPanoStartAutoRotate "objId" speed
objId Select a Container object speed Speed |
neoPanoStopAutoRotate
|
Purpose: |
Stop auto rotation |
|
Category: |
neoPano |
|
Syntax: |
neoPanoStopAutoRotate "objId"
objId Select a Container object |
neoPanoStopMovement
|
Purpose: |
Stops all movement. |
|
Category: |
neoPano |
|
Syntax: |
neoPanoStopMovement "objId"
objId Select a Container object |
neoPanoDestroy
|
Purpose: |
Destroy renderer. |
|
Category: |
neoPano |
|
Syntax: |
neoPanoDestroy "objId"
objId Select a Container object |
neoPanoToggleFullScreen
|
Purpose: |
Toggle fullscreen. |
|
Category: |
neoPano |
|
Syntax: |
neoPanoToggleFullScreen "objId"
objId Select a Container object |
neoPanoAddEvent
|
Purpose: |
Subscribe listener to specified event. |
|
Category: |
neoPano |
|
Syntax: |
neoPanoAddEvent "objId" theEvent theSubroutine
objId Select a Container object theEvent Select an event theSubroutine Select a subroutine to execute |
neoPanoRemoveEvent
|
Purpose: |
Remove an event listener. |
|
Category: |
neoPano |
|
Syntax: |
neoPanoRemoveEvent "objId" theEvent theSubroutine
objId Select a Container object theEvent Select an event theSubroutine Select a subroutine to stop executing |
neoPanoMouseEventToCoords
|
Purpose: |
Calculate panorama pitch and yaw from location of mouse event. |
|
Category: |
neoPano |
|
Syntax: |
neoPanoMouseEventToCoords "objId" theEvent [returnPitch] [returnYaw]
objId Select a Container object theEvent Select an event returnPitch Variable to store returned Pitch returnYaw Variable to store returned Yaw |
neoPanoLoadScene
|
Purpose: |
Change scene being viewed (First one Id = first) |
|
Category: |
neoPano |
|
Syntax: |
neoPanoLoadScene "objId" "sceneId"
objId Select a Container object sceneId Scene Id (use 'first' for the initial one) |
neoPanoLoadScenePositioned
|
Purpose: |
Change scene being viewed in a given position. |
|
Category: |
neoPano |
|
Syntax: |
neoPanoLoadScenePositioned "objId" "sceneId" pitch yaw hfov
objId Select a Container object sceneId Scene Id (use 'first' for the initial one) pitch Initial pitch yaw Initial yaw hfov Initial Horizontal Field of View (hfov) |
nePanoGetScene
|
Purpose: |
Get Id of current scene. |
|
Category: |
neoPano |
|
Syntax: |
nePanoGetScene "objId" [returnVar]
objId Select a Container object returnVar Variable to store scene name |
neoPanoAddScene
|
Purpose: |
Add a new scene. |
|
Category: |
neoPano |
|
Syntax: |
neoPanoAddScene "objId" "sceneId" imagePath setAutoLoad setAutoRotate setDebug
objId Select a Container object sceneId Scene Id imagePath Equirectangular panorama image setAutoLoad Auto load? setAutoRotate Auto rotate speed (0 = static) setDebug HotSpot debug (help for locating hotspots) |
neoPanoAddSceneFullOptions
|
Purpose: |
Add a new scene with full options (equireactangular map) |
|
Category: |
neoPano |
|
Syntax: |
neoPanoAddSceneFullOptions "objId" "sceneId" imagePath setAutoLoad setAutoRotate setshowZoomCtrl setkeyboardZoom setmouseZoom setdraggable setdisableKeyboardCtrl setshowFullscreenCtrl setshowControls setpitch setyaw sethfov setminYaw setmaxYaw setminPitch setmaxPitch setminHfov setmaxHfov setcompass setDebug
objId Select a Container object sceneId Scene Id imagePath Equirectangular panorama image setAutoLoad Auto load? setAutoRotate Auto rotate speed (0 = static) setshowZoomCtrl Show Zoom Controls setkeyboardZoom Keyboard Zoom setmouseZoom Mouse Zoom setdraggable Draggable setdisableKeyboardCtrl Disable Keyboard Ctrl setshowFullscreenCtrl Show Fullscreen Control setshowControls Show Controls setpitch Initial Pitch (-90 to 90) Default: 0 setyaw Initial Yaw (-180 to 180) Default: 0 sethfov Initial Field of View (50 to 120) Default: 100 setminYaw Min Yaw (Default: -180) setmaxYaw Max Yaw (Default: 180) setminPitch Min Pitch (Default: -90) setmaxPitch Max Pitch (Default: 90) setminHfov Min Horizontal Field of View (Default: 50) setmaxHfov Max Horizontal Field of View (Default: 120) setcompass Show compass setDebug HotSpot debug (help for locating hotspots) |
neoPanoAddSceneCubic
|
Purpose: |
Add a new scene (cube map) |
|
Category: |
neoPano |
|
Syntax: |
neoPanoAddSceneCubic "objId" "sceneId" RightImage LeftImage FrontImage BackImage BottomImage TopImage setAutoLoad setAutoRotate setDebug
objId Select a Container object sceneId Scene Id RightImage Right image LeftImage Left image FrontImage Front image BackImage Back image BottomImage Bottom image TopImage Top image setAutoLoad Auto load? setAutoRotate Auto rotate speed (0 = static) setDebug HotSpot debug (help for locating hotspots) |
neoPanoAddSceneFullOptionsCubic
|
Purpose: |
Initialize neoPano with full options (cube map) |
|
Category: |
neoPano |
|
Syntax: |
neoPanoAddSceneFullOptionsCubic "objId" "sceneId" RightImage LeftImage FrontImage BackImage BottomImage TopImage setAutoLoad setAutoRotate setshowZoomCtrl setkeyboardZoom setmouseZoom setdraggable setdisableKeyboardCtrl setshowFullscreenCtrl setshowControls setpitch setyaw sethfov setminYaw setmaxYaw setminPitch setmaxPitch setminHfov setmaxHfov setcompass setDebug
objId Select a Container object sceneId Scene Id RightImage Right image LeftImage Left image FrontImage Front image BackImage Back image BottomImage Bottom image TopImage Top image setAutoLoad Auto load? setAutoRotate Auto rotate speed (0 = static) setshowZoomCtrl Show Zoom Controls setkeyboardZoom Keyboard Zoom setmouseZoom Mouse Zoom setdraggable Draggable setdisableKeyboardCtrl Disable Keyboard Ctrl setshowFullscreenCtrl Show Fullscreen Control setshowControls Show Controls setpitch Initial Pitch (-90 to 90) Default: 0 setyaw Initial Yaw (-180 to 180) Default: 0 sethfov Initial Field of View (50 to 120) Default: 100 setminYaw Min Yaw (Default: -180) setmaxYaw Max Yaw (Default: 180) setminPitch Min Pitch (Default: -90) setmaxPitch Max Pitch (Default: 90) setminHfov Min Horizontal Field of View (Default: 50) setmaxHfov Max Horizontal Field of View (Default: 120) setcompass Show compass setDebug HotSpot debug (help for locating hotspots) |
nePanoRemoveScene
|
Purpose: |
Remove a scene |
|
Category: |
neoPano |
|
Syntax: |
nePanoRemoveScene "objId" "sceneId"
objId Select a Container object sceneId Scene Id |
neoPanoHideLoadingBox
|
Category: |
neoPano |
|
Syntax: |
neoPanoHideLoadingBox
|
neoPanoShowLoadingBox
|
Category: |
neoPano |
|
Syntax: |
neoPanoShowLoadingBox "objectId"
objectId Select a Container object |
Created with the Personal Edition of HelpNDoc: Streamline Your Documentation Creation with a Help Authoring Tool