Class s7sdk.image.PanoramicView

The PanoramicView is an image viewing component that displays a spherical panoramic image served by Adobe Image Serving.

The user can drag to pan a spherical panoramic image using a mouse on a desktop system. When served on a touch device, moving the device will pan the image if VR rendering has been enabled (vrrender=true), otherwise, user can drag to pan the image the same way as on the desktop.

The vrRender modifier can be used to serve the image in virtual reality mode.

Customizing Behavior Using Modifiers

Modifiers change PanoramicView default behavior. They are passed to the component by the ParameterManager instance specified in the constructor.

The following modifiers are supported:

Modifier	Syntax	Description	Default
serverurl	isRootPath	The Adobe Image Serving root path. If no domain is specified, the domain from which the page is served is applied instead. Standard URI path resolution applies.	/is/image/
asset	image	The Adobe Image Serving catalog/image ID of the image to display.
vrrender	true\|false	Specifies if virtual reality rendering mode is enabled	false
fmt	jpg\|jpeg\|png\|png-alpha\|gif\|gif-alpha	Specifies the image format used by the component for loading images from Image Server. If the specified format ends with "-alpha", the component renders images as transparent. For all other image formats, the component treats images as opaque. Note that the component has a transparent background by default. Therefore, to make it opaque set the `background-color` CSS property to `desired_color`	jpeg
autorotate	0\|1	When the modifier is "1" (or not specified and left by default), component's auto-rotation is used.	1

Localized Symbols

PanoramicView also has text symbols that you can localize either in a preset or in the viewer page though the mechanisms provided by the ParameterManager. For more information on localization consult the ParameterManager API documentation and Adobe Experience Viewers HTML5 SDK User Guide.

Symbol	Description
`PanoramicView.ROLE_DESCRIPTION`	Define a localized "aria-roledescription" of `PanoramicView`
`PanoramicView.USAGE_HINT`	Define a localized text for "aria-describedby" of `PanoramicView`
`PanoramicView.TRACK_DEVICE_ORIENTATION`	Define a localized text for the button label which prompts the user to enable device orientation tracking on iOS systems of `PanoramicView`

Defining the Appearance using CSS

You can define the appearance of the PanoramicView component using CSS rules. All Adobe Experience Viewers HTML5 SDK components use class selectors for styling. You can define the appearance of the PanoramicView component using the .s7panoramicview class selector. The styles associated with this class selector are applied to all instances of the PanoramicView component. You can style particular instances by prefixing the class rule with the instance #id. For example, styling rules for #myComp.s7panoramicview are applied only to the particular PanoramicView instance.

Class Summary
Constructor Attributes	Constructor Name and Description
	s7sdk.image.PanoramicView(container, settings, compId)

Field Summary
Field Attributes	Field Name and Description
	getAsset read-only The asset that is currently displayed in the viewer.

Method Summary
Method Attributes	Method Name and Description
	addEventListener(type, handler, useCapture) Adds an event listener to the instance of the `PanoramicView` component.
	autoRotatePause() Pauses auto-rotate.
	autoRotateResume() Resumes the auto-rotate if it is configured using `autorotate` modifier but was paused with `autoRotatePause()` call.
	dispose() Dispose is used to remove itself and all sub-elements from the DOM
	getHeight() Returns the current inner height of the component.
	getPov() Returns the current point of view of the camera in virtual sphere.
	getWidth() Returns the current inner width of the component.
	loadImage(url) Compute the image request based on the source image and the component size.
	resize(width, height) Sets the PanoramicView to the specified width and height.
	setAsset(assetName) Changes the currently active asset/set.
	setCSS(classname, property, value) Sets a particular CSS class and property on a component
	setItem(item) Sets the current item displayed by the component.
	setModifier(modObj) Sets 1-N # of modifiers for the component.
	setPov(pov) Sets the point of view of the camera in virtual sphere.
	setVRRender(vrRender) Set the value of vrRender, false for 360 mode, true for virtual reality mode

Class Detail

s7sdk.image.PanoramicView(container, settings, compId)

Example Code
This example demonstrates how to use the PanoramicView component in a simple viewer. In this example a Container object
is created.

The code below does the following:

The Adobe Experience Viewers HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
CSS Styles are defined in the document head to control the appearance of the PanoramicView and button components.
The s7sdk.Util.init() method is called to initialize the SDK.
A ParameterManager object is created to handle component modifiers for the viewer.
An initViewer() function is defined. This function initializes a couple of modifiers (hard coded for example purposes),
then creates the component objects required for this simple example. The initViewer() function also adds event listeners
that designate functions to handle relevant component events (which might be dispatched by the components as a result of
changes in a component's state, etc.).
Handler functions are defined to respond to the component event listeners added in the initViewer() function.
An event listener is added to the ParameterManager object that designates the initViewer() function as the handler
to call when the Adobe Experience Viewers HTML5 SDK is loaded and ready.
Finally, the init() method is called on the ParameterManager object to start the viewer.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width" />

        <title>PanoramicView Component</title>

        <!-- To run this example locally you need to replace this with an absolute
        SDK path.  For more information check the Adobe Experience Viewers HTML5 SDK User Guide or
        the examples included in the package.
        -->
        <script language="javascript" type="text/javascript"
                src="../js/s7sdk/utils/Utils.js"></script>
        <script language="javascript" type="text/javascript">
            s7sdk.Util.lib.include('s7sdk.image.PanoramicView');
            s7sdk.Util.lib.include('s7sdk.common.Container');
        </script>
        <style type="text/css" media="screen">
            html,body {
                width: 100%;
                height: 100%;
            }
            body {
                margin: 0px;
                padding: 0px;
            }	
            .s7panoramicview {
                top: 0px;
                left: 0px;
                width: 700px;
                height: 350px;
            }
        </style>
    </head>
    <body>
        <div id="s7container"></div>

        <script language="JavaScript" type="text/javascript">
            var params, container, panoramicView;

            // Initialize the SDK
            s7sdk.Util.init();

            // Create ParameterManager instance to handles modifiers		
            params = new s7sdk.ParameterManager();
                
            // Define the function that initializes the viewer
            function initViewer(){
                // Set hardcoded modifiers (not required when values are specified on the url)
                params.push("serverurl", "https://s7d1.scene7.com/is/image");
                params.push("asset", "Scene7SharedAssets/PanoramicImage-Sample");

                // Create the Container component object
                container = new s7sdk.Container(null, params, "s7container");

                // Create the PanoramicView component object
                panoramicView = new s7sdk.image.PanoramicView( container, params, "panoramicview");

            }

            // The ParameterManager will dispatch SDK_READY when all modifiers have been processed
            // and it is safe to initialize the viewer		
            params.addEventListener(s7sdk.Event.SDK_READY, initViewer, false);

            // Now it is safe to process the modifiers, the callbacks have been defined
            // this will trigger the SDK_READY event
            params.init();
        </script>

    </body>
</html>

Default styles for PanoramicView:

.s7panoramicview {
	width: 600px;
	height: 300px;
	position:absolute;
	background-color:transparent;
	user-select:none;
	-moz-user-select:-moz-none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	text-align: left;
 }
.s7panoramicview img {
	max-width:none;
	max-height:none;
 }
.s7panoramicview .s7trackdeviceorientationbutton {
	position : 'absolute';
	bottom : '90px';
	padding : '12px 6px';
	border : '1px solid #fff';
	background : 'rgba(0,0,0,0.1)';
	color : '#fff';
	font : 'normal 13px sans-serif';
	textAlign : 'center';
	outline : 'none';
	zIndex : '999';
	cursor : 'pointer';
	left : 'calc(50% - 100px)';
	width : '200px';
}

Parameters:
{String|Container} container: The reference to Container instance or the ID of the parent DOM element to which the component is added as a child
{s7sdk.ParameterManager} settings: A parameter manager instance that represents the desired configuration.
{String} compId: An optional parameter that specifies the ID of the components DOM element

Field Detail

{String} getAsset

read-only The asset that is currently displayed in the viewer.

Method Detail

addEventListener(type, handler, useCapture)

Adds an event listener to the instance of the PanoramicView component. The handler function receives a DOM event object of type Event. The object contains a property s7event, which references the associated custom event object, for example s7sdk.event.StatusEvent.NOTF_ASSET_METADATA_READY.

The events supported by the component are:

s7sdk.event.AssetEvent.ASSET_CHANGED - Dispatched when the currently displayed image changes. s7sdk.event.AssetEvent

s7sdk.event.ControlComponentEvent.NOTF_CONTROLCOMPONENT_CSSUPDATED - Dispatched when the setCSS API of the component has been called. s7sdk.event.ControlComponentEvent

s7sdk.event.ControlComponentEvent.NOTF_CONTROLCOMPONENT_MODIFIERUPDATED - Dispatched when the setModifier API of the component has been called. s7sdk.event.ControlComponentEvent

s7sdk.event.ResizeEvent.COMPONENT_RESIZE - Dispatched when the component has been resized. s7sdk.event.ResizeEvent

s7sdk.event.StatusEvent.NOTF_ASSET_METADATA_READY - Dispatched when component receives asset metadata. If the component is initialized with setItem() it dispatches instantly inside that API call. Otherwise if the component loads req=set on its own, this event is sent when component has received and parsed req=set. s7sdk.event.StatusEvent

s7sdk.event.StatusEvent.NOTF_VIEW_READY - Dispatched when component has rendered the view with image data. s7sdk.event.StatusEvent

s7sdk.event.PovEvent.NOTF_POV_CHANGE - Dispatched when component when a POV (PointOfView) changes because of auto rotation, end user interaction or setPov() API call. s7sdk.event.PovEvent

Parameters:
{String} type: Event name, for example s7sdk.event.StatusEvent.NOTF_ASSET_METADATA_READY.
{Function} handler: Function to be called when the event gets dispatched.
{Boolean} useCapture: Register capture phase.

autoRotatePause()

Pauses auto-rotate.

autoRotateResume()

Resumes the auto-rotate if it is configured using autorotate modifier but was paused with autoRotatePause() call. This method has no effect if auto-rotate was not enabled in the component settings.

dispose()

Dispose is used to remove itself and all sub-elements from the DOM

{Number} getHeight()

Returns the current inner height of the component.

Returns:: {Number} the inner height of the component, in pixels.

{s7sdk.PovDesc} getPov()

Returns the current point of view of the camera in virtual sphere.

Returns:: {s7sdk.PovDesc} current point of view.

{Number} getWidth()

Returns the current inner width of the component.

Returns:: {Number} the inner width of the component, in pixels.

loadImage(url)

Compute the image request based on the source image and the component size. Load image only if the computed request is different the previous request.

Parameters:
url: Optional image URL for computing the image request

resize(width, height)

Sets the PanoramicView to the specified width and height.

Parameters:
{Number} width: - The width of the component, in pixels.
{Number} height: - The height of the component, in pixels.

setAsset(assetName)

Changes the currently active asset/set. The component invalidates and rebuilds using the existing serverurl and the new asset after retrieving the asset/set definition from Adobe Image Serving. Unless the asset has not been set already, this call generates a SWAP tracking event that is managed by the TrackingManager component. Preferred way of changing the displayed image though is by simply calling setItem() API.

Parameters:
{String} assetName: - The catalog ID of the asset/set.

See:: s7sdk.TrackingManager

setCSS(classname, property, value)

Sets a particular CSS class and property on a component

Parameters:
{String} classname: The CSS classname to use for this style. i.e. .s7panoramicview
{String} property: The CSS property that is being set. i.e. background-color
{String} value: The CSS property value being set. i.e. #FF0000

setItem(item)

Sets the current item displayed by the component. The item must be a decedent of type ItemDesc. An exception is thrown if the item does not reference a parent set, or is not descendant of type ItemDesc. Calling this method will dispatch the AssetEvent.ASSET_CHANGED event.

Parameters:
item: {s7sdk.ItemDesc} The set item to select.

See:: s7sdk.ItemDesc; s7sdk.event.AssetEvent

setModifier(modObj)

Sets 1-N # of modifiers for the component.

Parameters:
{Object} modObj: A simple JSON object with name:value pairs of valid modifiers for a particular component

setPov(pov)

Sets the point of view of the camera in virtual sphere.

Parameters:
{s7sdk.PovDesc} pov: current point of view.

setVRRender(vrRender)

Set the value of vrRender, false for 360 mode, true for virtual reality mode

Parameters:
vrRender: True to enable virtual reality mode, default to false

Namespaces

Classes in s7sdk.image

Class s7sdk.image.PanoramicView