Working with GizmoVR via JS

Basics

<script type="text/javascript" src="https://static.gizmovr.com/api/latest/gizmovr.js"></script>

There are two ways to use the API when using from a regular browser and from the GizmoVR browser

Use in standard browser mode

Launching a site in GizmoVR from a standard browser

GizmovrApi.openSite({url: 'https://sample.gizmovr.com/vr/'})

If the GizmoVR app is already installed, GizmoVR will be launched and https://sample.gizmovr.com/vr/ will open in it

If the app is not installed, the app installation dialog will be displayed

The demo: https://test-api1.gizmovr.com/

To launch a video from the GizmoVR app

GizmovrApi.openVideo({url: 'https://sample.gizmovr.com/videoinfo'})

Also, if there is no application, the installation dialog will be opened

At https://sample.gizmovr.com/videoinfo json structure with data for the video player can be found. The format is described in the "Data Format for VR Player” section

The demo: https://test-api1.gizmovr.com/video/

Use in VR mode

When using the GizmoVR API from the GizmoVR app

When using the js API, various methods are available. They are described in the "JS API Methods” section

Multiple viewports layout

Markup of multiple viewports using javascript

var layout = window.GizmovrLayout;
layout.setFovAngle(135);
layout.setSize(1000, 768);
layout.setGeometry(layout.GEOMETRY_CURVED);
layout.setPageSize(512, 512);

var rect = layout.createRect(0, 80, 100, 150);
var coords = layout.createCoords(0, 80);
layout.addViewport('left', rect, coords, layout.GEOMETRY_CURVED, 0);

rect = layout.createRect(150, 80, 100, 150);
coords = layout.createCoords(450, 80);
layout.addViewport('center', rect, coords, layout.GEOMETRY_CURVED, 0);

rect = layout.createRect(300, 80, 100, 150);
coords = layout.createCoords(900, 80);
layout.addViewport('right', rect, coords, layout.GEOMETRY_CURVED, 0);

window.GizmovrApi.setLayout(layout);

In this example a layout with dimensions of 1000x768 pixels is created from the original HTML page with dimensions of 512x512 pixels and CURVED geometry

3 viewports are added, and sent to the layout
For a detailed description of methods and their parameters, see "JS API Methods”

The demo: https://test-api1.gizmovr.com/demo1/js/

JS API methods

GizmovrApi.openSite(params)

Method for opening a site in the app

params - json structure

{
   url: 'https://sample.gizmovr.com/videoinfo'
}

url - the site address that will be opened in the GizmoVR app

The demo: https://test-api1.gizmovr.com/

GizmovrApi.openVideo(params)

This method will open the video in a separate layout, the settings of the current one will be ignored

params - json structure

{
   url: 'https://sample.gizmovr.com/videoinfo'
}

url - address with a json video description structure that is described in the "Data Format for VR Player” section

An example of the structure can be found at https://sample.gizmovr.com/videoinfo/

GizmovrApi.setMedia(media)

This method opens the video with the current layout settings media - json structure

{
   url: 'https://sample.gizmovr.com/videoinfo'
}

url - address with a json video description structure that is described in the "Data Format for VR Player” section

An example of the structure can be found at https://sample.gizmovr.com/videoinfo/

GizmovrApi.setCustomDialog(callback)

The method sets a function to call the installation dialog if the application is not installed. By default, the GizmoVR dialog is used

GizmovrApi.on(name, callback)

This method sets the callback function to be called each time the name event occurs

The list of events that you can subscribe to is described in the “Events" section

GizmovrApi.once(name, callback)

This method sets the callback function to be called only once when the name event occurs

The list of events that you can subscribe to is described in the “Events" section

GizmovrApi.off(name)

This method removes all previously installed callback functions for the name event

The list of events is described in the “Events" section”

GizmovrApi.emit(name, payload = null)

The method calls all callback functions set for the name event

GizmovrApi.setLayout(layout)

This method sets the layout for the current page layout - the GizmovrLayout object described below

GizmovrLayout.setFovAngle(angle)

This method sets the FOV angle for the current layout

GizmovrLayout.setSize(width, height)

This method sets the timeout size in pixels

GizmovrLayout.setPageSize(width, height)

This method sets the size of the original HTML page in pixels, which will be used as a texture for the final layout

GizmovrLayout.setGeometry(geometry)

The method sets the layout geometry, GizmovrLayout.GEOMETRY_CURVED or GizmovrLayout.GEOMETRY_FLAT

GizmovrLayout.addViewPort(id, pageRect, destCoords, geometry, order)

This method adds a viewport to the layout

id - the unique ID of the viewport
pageRect - structure describing the source frame
- left - the left position in pixels
- top - the top position in pixels
- width - the width in pixels
- height - the height in pixels
destCoords - structure of the viewport position on the layout
- left - viewport position on the left in pixels
- top - the top position of the viewport in pixels
geometry - the geometry of the GizmovrLayout viewport.GEOMETRY_CURVED or GizmovrLayout.GEOMETRY_FLAT
order - the order of the viewport display

GizmovrLayout.getViewport(id)

The method returns viewport by id

GizmovrLayout.createRect(left, top, width, height)

Helper method for creating a rect structure

GizmovrLayout.createCoords(left, top)

Helper method for creating a coords structure