The API v1.4.2 is in the form of JavaScript library you include in your own code.
<script src="https://apps.zondavirtual.com/api/ZondaVR360Api.latest.min.js"></script>¶ Initialization
Declare an API variable. This will Initialize the scene, the variable will be used later for all other function calls.
¶ Parameters:
- GUID*: Unique GUID of the VR360+.
- Container*: Reference DOM element. The canvas element for 3d renderings will be added inside the DOM element provided as reference in the initialization. This will prevent the need to provide the DOM element in future calls.
- Preload call back function called when the API is ready to add event listeners and to show panels.
- ViewConfig : Load specific config at launch. True to load saved config from localStorage.
Those marked with* are mandatory.
vr = new ZondaVR360Api({PLAN_GUID},{HTML_CONTAINER},{PRELOAD_FUNCTION},{viewConfig});¶ Sample Scene Demo
Our API, described in this wiki, has no UI/UX behavior. This documentation mentions how to interact with the scene by Javascript calls. It’s possible to use different panels, but they are not adapted for all devices. That said, these panels UI/UX can be redefined by a style sheet (CSS File) or by javascript.
This demo link is an example of using this API in an HTML5 page.
¶ Demo Page: https://apps.zondavirtual.com/demo/vr360+/v1.4.1/index.html
Here is our WebApp developed for different browsers and devices. This WebApp can be embedded in a web page by using an Iframe container. Using this link, no API call or development is required.
¶ Webapp link: https://apps.zondavirtual.com/vr360/index.html?id=[PLAN_GUID]
¶ Initialization example
Basic
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Zonda VR360+ API Demo</title>
<script src="https://apps.zondavirtual.com/api/ZondaVR360Api.latest.min.js"></script>
<script>
var vr = undefined;
function init()
{
vr = new ZondaVR360Api("d87e18db-3def-45ac-adb1-b9d4a6d045bc",document.getElementById("vrContainer"));
}
</script>
</head>
<body onload="init()">
<div id="vrContainer"></div>
</body>
</html>With all Available Panels, Listeners and Ready message return in callback function.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Zonda VR360+ API Demo</title>
<script src="https://apps.zondavirtual.com/api/ZondaVR360Api.latest.min.js"></script>
<script>
var vr = undefined;
function init()
{
vr = new ZondaVR360Api("956975aa-5879-4537-9e25-02f2506cca79",document.getElementById("vrContainer"),message =>
{
if (message == ZONDA.READY)
{
//TODO test display all panels in a container
vr.showPanel(ZONDA.CAMERAS);
vr.showPanel(ZONDA.FLOORPLAN_2D);
vr.showPanel(ZONDA.FLOORS);
vr.showPanel(ZONDA.LOGS);
vr.showPanel(ZONDA.MENU);
vr.showPanel(ZONDA.OPTIONS);
vr.showPanel(ZONDA.ROOMS);
vr.showPanel(ZONDA.ADVANCE_SETTINGS);
vr.addEventListener(ZONDA.CAMERA,listener);
vr.addEventListener(ZONDA.FLOOR,listener);
vr.addEventListener(ZONDA.FINISH,listener);
vr.addEventListener(ZONDA.OPTION,listener);
vr.addEventListener(ZONDA.PACKAGE,listener);
vr.addEventListener(ZONDA.ROOM,listener);
}
else
{
console.log("%c" + message,"color:#ff0000");
}
});
}
function listener(event)
{
console.log(event.target.label + " loaded");
}
</script>
</head>
<body onload="init()">
<div id="vrContainer"></div>
</body>
</html>¶ Message returns ENUM
ZONDA_VR_MESSAGE.READY : Ready to useZONDA_VR_MESSAGE.BAD_PARAMETER : VR360+ parameters are invalid.
Could be the Plan GUID or the container is undefined.
¶ Console Errors:
Review the Plan GUID parameter.
The VR Container is undefined.
The Call Back function is invalid
¶ Available Objects
¶ Camera
- Variables
id: A unique identifier for the camera.integrationId: A unique identifier for integrating the camera into external usage.name/label: The name or label of the selected camera for easy identification.index: The index of the camera in the list.room: Details of the room associated with the camera.defaultRotation: The default rotation angle of the camera, measured in degrees.items: A list of items (finish categories) available for this camera.finishes: A list of finishes associated with the camera that are available for selection.isInterior/isExterior: Flags indicating whether the view is located inside (isInterior) or outside (isExterior).
- Functions
go()/load(): Function to go to the camera
¶ Sample Code
vr.cameras[0];
vr.cameras.search("id","c0");
vr.cameras.search("label","Camera 1");¶ Current View
- Variables
camera: The currently selected camera.cameras: A list of all cameras available in the scene.finishes: A list of finishes associated with the view that are available for selection.finishesSelected: A list of finishes displayed in this view (finishes selected for each available item).floor: The currently selected floor.floors: A list of all floors available in the scene.items: A list of items (categories of finish + options).label: The label of the current plan.options: A list of currently available options.optionsSelected: A list of currently selected options.package: The selected package or scheme.packages: A list of all packages available in the current room.packagesSelected: A list of all packages selected in this view.room: The currently selected room in this view.rooms: A list of rooms associated with the view that are available for selection.isInterior/isExterior: Flags indicating whether the current view is located inside (isInterior) or outside (isExterior).
¶ Sample Code
vr.currentView;¶ Finish
- Variables
id: Unique identifier for the finish.integrationId: A unique identifier for integrating the finish into external usage.envisionProductID: A unique identifier for integrating the finish into Envision Product.name / label: The name of the finish.builtin: Indicates whether the finish is displayed by default (Boolean value).thumbnail: The URL of the thumbnail image.item: The parent of the finish.items: A list of items (categories of finishes and options) where the finish is available.selected: Indicates whether the finish is currently displayed (Boolean value).
Functions
load: Applies this finish.
¶ Sample Code
vr.items[0].finishes[0];
vr.items.search("id","i0").finishes.search("id","ccaetclaiite_o1o4o7");
vr.items.search("label","Cabinets").finishes.search("label","Stone Gray");
vr.items[0].finishes.searchById("50605749").load();
vr.items[0].finishes.find(finish => finish.envisionProductID == "50605749").load();
vr.currentView.items[0].finishes.searchById("50605749").load();
vr.currentView.items[0].finishes.find(finish => finish.envisionProductID == "50605749").load();¶ Floor
- Variables
id: Unique identifier for the floor.integrationId: A unique identifier for integrating the floor into external usage.name / label: The name of the floor.rooms: A list of rooms available associated with the floor.cameras: A list of all cameras available in the floor.
- Functions
go() / load(): Function to go to the floor
¶ Sample Code
vr.floors[0];
vr.floors.search("id","f0");
vr.floors.search("label","Floor 1");¶ Item
“Item” may refer to a category of finishes or options.
- Variables
id: Unique identifier for the Item.integrationId: A unique identifier for integrating the item into external usage.name / label / title: The name of the item.order: Proposed menu order.finishes: A list of finishes associated with the item that are available for selection.isAvailable: Indicates whether the item is available for selection (Boolean value).
¶ Sample Code
vr.items[0];
vr.items.search("id","i0");
vr.items.search("label","Cabinets");¶ Option
- Variables
id: Unique identifier for the option.integrationId: A unique identifier for integrating the option into external usage.name / label: The name of the option.builtin: Indicates whether the option is displayed by default (Boolean value).selected: Indicates whether the option is currently displayed (Boolean value).order: Proposed menu order.category: The parent of the option.categoryName: The parent group name proposed of the option.isAvailable: Indicates whether the option is available for selection (Boolean value).
- Functions
select(value): Function to activate the option (Boolean parameter)
¶ Sample Code
vr.options[0];
vr.options.search("id","o0");
vr.options.search("label","Opt. Pendant Light at Kitchen");¶ Package
“Package” may refer to a scheme or a group of items.
- Variables
id: Unique identifier for the package.integrationId: A unique identifier for integrating the package into external usage.name / label: The name of the option.builtin: Indicates whether the option is displayed by default (Boolean value).thumbnail: The URL of the thumbnail image.items: A list of items (categories of finishes and options) where the finish is available.
- Functions
load(): Function to activate the package using the default finishes.
¶ Sample Code
vr.packages[0];
vr.packages.search("id","p0");
vr.packages.search("label","Base");¶ Plan Information
- Variables
builderNamecommunityNamedisclaimer: Disclaimer text display on the disclaimer panelid: Interactive Floor Plan (IFP) GUIDname / label: Name of the Plan Scene. Same as the IFP name.webappLogo: Default logo display in the webapps
¶ Sample Code
vr.planInfo;¶ Room
- Variables
id: Unique identifier for the room.integrationId: A unique identifier for integrating the room into external usage.name / label: The name of the room.cameras: A list of all cameras available in the scene.finishes: A list of finishes associated with the room that are available for selection.floor: The currently selected floor.packages: A list of all packages available in the room.items: A list of items (categories of finish + options).options: A list of currently available options.defaultCamera: Default camera for the roomisInterior/isExterior: Flags indicating whether the room is located inside (isInterior) or outside (isExterior).isAvailable: Indicates whether the room is available to go (Boolean value).
- Functions
go()/load(): Function to go to the room at the default camera
¶ Sample Code
vr.rooms[0];
vr.rooms.search("id","r0");
vr.rooms.search("label","Balcony");¶ Point of Interest (POI)
- Variables
id: Unique identifier for the POI.label / title: The name of the POI.roomName: Room name attached to the POI.images: A list of information on attached images.- Description
- DisplayOrder
- ImagePath
- Name
- OptionalDescription
- Properties
- Title
description: The description of the POI.packages: A list of all packages available in the room.category: The category attached of the POI.- Color
- Name
options: A list of currently available options.defaultCamera: Default camera for the roomisInterior/isExterior: Flags indicating whether the room is located inside (isInterior) or outside (isExterior).isAvailable: Indicates whether the room is available to go (Boolean value).
¶ Sample Code
vr.pointOfInterests[0];
vr.pointOfInterests.search("label","Aluminum Multi Slide Door System");¶ VR360+ Global Object
apiName / name / version: name and version of the VR360+ API.container: HTML Container of the Plan scene.currentConfigId: Current configuration id string for saving and loading, base64 encrypted.currentConfigJSON: Current configuration information, JSON formated.currentConfigURL: Link to load the current config.currentView: Returns the list of currently selected option like – floor, camera, room, package, items etc.currentViewID: Current configuration id string for saving and loading including the current view information, base64 encrypted.currentConfigURL: Link to load the current config at the current view (specific camera position and rotation).finishes: Returns the list of all finishes available in all Items/Finish Category.floors: Returns the list of floor for that plan.items: Returns the list of item.options: Returns the list of option.packages: Returns the list of package for each available item.planInfo: Returns the plan scene information.rooms: Returns the list of room for that planpointOfInterests: Returns the list of points of interest for that plan.sponsors: Return the list of sponsors.cameras: Return the list of cameras.
¶ Sample Code
vr.cameras;
vr.currentView;
vr.currentViewConfig;
vr.finishes;
vr.floors;
vr.items;
vr.options;
vr.packages;
vr.planInfo;
vr.rooms;¶ Available functions
¶ Show targets in 2D
- vr.showTarget2D(value): Shows target spots on 2D floorplan. Value = true/false
¶ Default value
- Visible if the scene contains only one location, including location zone background.
- Hidden if the scene contains more than one location
¶ Show targets in 3D
- vr.showTarget3D(alpha): Shows target spots on Scenes. Default alpha = 1, Hide alpha = 0 (range = 0 to 1)
¶ Show door target in 3D
- vr.showTargetsDoor3D(alpha): Shows target door in the scenes. Default alpha = 1, Hide alpha = 0 (range = 0 to 1)
¶ Show Point Of Interests
- vr.showPointOfInterests(value): Shows point of interest in the scenes. Value = true/false.
¶ Enable Panning
- vr.enablePanning(value): Allow the camera movement pivots left or right on a horizontal axis. True by default.
¶ Enable Navigation
- vr.enableNavigation(value): Allow to navigate between cameras directly in the 3D scene. True by default.
¶ Enable 2D Navigation
- vr.enable2dNavigation(value): Allow to navigate between cameras directly in the 2D floor plan. True by default.
¶ Enable Zoom
- vr.enableZoom(value): Allow to zoom and change the Field of View of the camera. False by default.
¶ Set Field of View
- vr.setFOV(value): Modify the field of view, between 0.9 and 2, of the camera. 1.2 by default.
¶ Get Image
- vr.getImage(callBack): Create Screenshot of the current view in 1700px/1100px resolution base64 encoded.
¶ Sample Code
vr.getImage(img => console.log(img));
vr.getImage(img => document.body.appendChild(document.createElement("img")).src = img);¶ Download Image
- vr.downloadImage(): Create and download Screenshot of the current view in jpeg 1700px/1100px image.
¶ Clear View Saved
- clearViewSaved : Remove saved view from localStorage.
¶ Sample Code
vr.clearViewSaved();¶ Load View
- loadView(currentViewConfig) : Load specific view.
¶ Sample Code
vr.loadView(true);//Load from local storage
vr.loadView(vr.currentViewConfig);
vr.loadView('{"direction":5.883687289595147,"rotation":{"x":0.28610401462084295,"y":-0.3994980175844394,"z":0},"fov":1.2,"finishes":["ccatblmlla"],"options":["o15"],"package":"Package1","target":"p12"}');¶ Save View
- saveView : Save the current view in localStorage.
¶ Sample Code
vr.saveView();¶ Download JSON String
- downloadJson(fileName) : Convert and download the plan objects to JSON.
¶ Sample Code
vr.downloadJson();
vr.downloadJson("theplan");
vr.exportToJson();//return JSON String
¶ Go To Next/Previous
- goToNextCamera() : Go To the next camera related to the camera index.
- goToPreviousCamera() : Go To the previous camera related to the camera index.
- goToNextLocation() : Go To the next location/room related to the location alphabetic order.
- goToPreviousLocation() : Go to previous location/room related to the location alphabetic order.
¶ Sample Code
vr.goToNextCamera();
vr.goToPreviousCamera();
vr.goToNextLocation();
vr.goToPreviousLocation();¶ Available UX Panel
¶ Panel Variables (Enums)
- ZONDA_VR_PANEL.CAMERAS
- ZONDA_VR_PANEL.FLOORPLAN_2D
- ZONDA_VR_PANEL.FLOORS
- ZONDA_VR_PANEL.LOGS
- ZONDA_VR_PANEL.MENU
- ZONDA_VR_PANEL.OPTIONS
- ZONDA_VR_PANEL.ROOMS
- ZONDA_VR_PANEL.DISCLAIMER
¶ Default CSS Style
.AVPanel
{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
background-color: #FFFFFFAA;
color: black;
}
.AVPanel h1,
.AVPanel summary
{
font-size: 14px;
font-weight: bold;
}¶ Show Floorplan 2D Panel
- showPanel(ZONDA_VR_PANEL.FLOORPLAN_2D,containerHtml): Display the 2D floorplan panel on containerHtml. It will display on Scene container if containerHtml is passed empty.
¶ Sample code
vr.showPanel(ZONDA_VR_PANEL.FLOORPLAN_2D);
vr.showPanel(ZONDA_VR_PANEL.FLOORPLAN,document.getElementById("divFloorplan"));//if container doesn't exist, the panel will display in the VR Container¶ Default CSS Style
#divFloorplan2D
{
width: 250px;
top: 20px;
right: 10px;
}¶ Show Menu Panel
- showPanel(ZONDA_VR_PANEL.MENU,containerHtml): Display the menu panel with packages, finishes on containerHtml. It will display on Scene container if containerHtml is passed empty.
¶ Sample code
vr.showPanel(ZONDA_VR_PANEL.MENU);
vr.showPanel(ZONDA_VR_PANEL.MENU,document.getElementById("divMenu"));//if container doesn't exist, the panel will display in the VR Container¶ Default CSS Style
#divMenu
{
width: auto;
bottom: 10px;
left: initial;
right: 10px;
top: initial;
}
#divMenu input[type=radio] + img.current
{
outline: 2px solid #0075ff;
}
#divMenu img
{
width:80px;
}
#divFinishes
{
padding-left: 20px;
padding-top: 10px;
}
¶ Show Cameras Panel
- showPanel(ZONDA_VR_PANEL.CAMERAS,containerHtml): Display the panel with all cameras of selected room on containerHtml. It will display on Scene container if containerHtml is passed empty.
¶ Sample Code
vr.showPanel(ZONDA_VR_PANEL.CAMERAS);
vr.showPanel(ZONDA_VR_PANEL.CAMERAS,document.getElementById("divCamera"));//if container doesn't exist, the panel will display in the VR Container¶ Default CSS style
#divCameras
{
min-width: 100px;
top: 10px;
left: 200px;
}¶ Show Options Panel
- showPanel(ZONDA_VR_PANEL.OPTIONS,containerHtml): Display the panel with all options available on containerHtml. It will display on Scene container if containerHtml is passed empty.
¶ Sample Code
vr.showPanel(ZONDA_VR_PANEL.OPTIONS);
vr.showPanel(ZONDA_VR_PANEL.OPTIONS,document.getElementById("divOptions"));//if container doesn't exist, the panel will display in the VR Container¶ Default CSS Style
#divOptions
{
min-width: 100px;
top: 50px;
left: 200px;
}
¶ Show Floors Panel
- showPanel(ZONDA_VR_PANEL.FLOORS,containerHtml): Display the panel with all available floors on containerHtml. It will display on Scene container if containerHtml is passed empty.
¶ Sample Code
vr.showPanel(ZONDA_VR_PANEL.FLOORS);
vr.showPanel(ZONDA_VR_PANEL.FLOORS,document.getElementById("divFloors"));//if container doesn't exist, the panel will display in the VR Container¶ Default CSS Style
#divFloors
{
width: 100px;
top: 10px;
left: 10px;
}
¶ Show Rooms Panel
- showPanel(ZONDA_VR_PANEL.ROOMS,containerHtml): Display the panel with all rooms of selected floor on containerHtml. It will display on Scene container if containerHtml is passed empty.
¶ Sample Code
vr.showPanel(ZONDA_VR_PANEL.ROOMS);
vr.showPanel(ZONDA_VR_PANEL.ROOMS,document.getElementById("divRooms"));//if container doesn't exist, the panel will display in the VR Container¶ Default CSS Style
#divRooms
{
min-width: 100px;
top: 60px;
left: 10px;
}
¶ Show Logs Panel
- showPanel(ZONDA_VR_PANEL.LOGS,containerHtml): Display the panel with logs on containerHtml. It will display on Scene container if containerHtml is passed empty.
¶ Sample Code
vr.showPanel(ZONDA_VR_PANEL.LOGS);
vr.showPanel(ZONDA_VR_PANEL.LOGS,document.getElementById("divLogs"));//if container doesn't exist, the panel will display in the VR Container¶ Default CSS Style
#divlogs
{
max-width: 400px;
min-width: 200px;
bottom: 10px;
left: 300px;
}¶ Show Advance Settings Panel
- showPanel(ZONDA_VR_PANEL.ADVANCE_SETTINGS,containerHtml): Display the panel with advance VR settings on containerHtml. It will display on Scene container if containerHtml is passed empty.
¶ Show Disclaimer Panel
- showPanel(ZONDA_VR_PANEL.DISCLAIMER,containerHtml): Display the panel with VR360+ disclaimer text.
¶ Default disclaimer
¶ Copy Current View Url To Clipboard
- copyViewUrlToClipboard(): The container scene must be focused
¶ Save Current View
- saveView(): The container scene must be focused
¶ Clear/Delete Saved View
- clearViewSaved(): The container scene must be focused
¶ Available UX Events
¶ Events Variables (Enums)
- ZONDA_VR_LISTENER.CAMERA
- ZONDA_VR_LISTENER.ERROR_MESSAGE
- ZONDA_VR_LISTENER.FINISH
- ZONDA_VR_LISTENER.FLOOR
- ZONDA_VR_LISTENER.IMAGE_DOWNLOADED
- ZONDA_VR_LISTENER.IMAGE_GENERATED
- ZONDA_VR_LISTENER.OPTION
- ZONDA_VR_LISTENER.PACKAGE
- ZONDA_VR_LISTENER.POINT_OF_INTEREST_CLICKED
- ZONDA_VR_LISTENER.POINT_OF_INTEREST_UPDATED
- ZONDA_VR_LISTENER.READY_TO_USE
- ZONDA_VR_LISTENER.ROOM
- ZONDA_VR_LISTENER.VIEW_CONFIG_LOADED
- ZONDA_VR_LISTENER.VIEW_DELETED_FROM_COOKIES
- ZONDA_VR_LISTENER.VIEW_SAVED_IN_COOKIES
- ZONDA_VR_LISTENER.VIEW_URL_GENERATED
- ZONDA_VR_LISTENER.VIEW_SAVED_IN_COOKIES
- ZONDA_VR_LISTENER.VIEW_DELETED_FROM_COOKIES
¶ Sample Code
vr.addEventListener(ZONDA_VR_LISTENER.CAMERA,() => console.log(event.target.label + " loaded"));¶ Version History
- 1.4.2
- Added event variables for save view and delete saved view
- Added the sponsors object under the global variables
- 1.4.1
- Add Point of Interests
- Update Current View objects available : menus, group, selected list
- General bugs fixed
- General performance improvements
- More option logics
- New features : download image
- Rename Alpha to Zonda
- 1.3.0
- Load scene by VR360+ ID instead Plan GUID and Preset parameter
- 1.2.4
- API initialisation
- Replace CallBack function to Event Listener READY_TO_USE
- Add Preload call back function instead Scene ready to use
- VR objects
- Plan Information
- items by camera
- All finishes in global object
- List items associated with parent instead to show all items available
- Current string of the current view to load
- New VR Functions
- Save View
- Load View
- Get current View Config
- Clear view saved
- Download Json
- Go To
- Next/Previous Camera
- Next/Previous Location
- Panels
- Disclaimer Panel
- Options Panel : Options by category
- API initialisation
- 1.2.3
- Current View
- Scene Rotation
- Sync available items on Option selected
- Download image
- Generate image
- IntegrationId variable
- Option object : select function
- Panel Advance : Display all VR settings availaibe
- New Settings
- Enable Panning
- Enable Navigation
- Enable 2D Navigation
- Enable Zoom
- Set Field of View
- New Settings
- Performance improvment + few issues fixed
- Current View
- 1.2.2
- Initial Release