Namespaces

• s7sdk
• s7sdk.common
• s7sdk.event
• s7sdk.favorites
• s7sdk.image
• s7sdk.info
• s7sdk.model
• s7sdk.model.SelectorModel
• s7sdk.search
• s7sdk.set
• s7sdk.share
• s7sdk.Util
• s7sdk.video

Classes in s7sdk.set

• s7sdk.set.CallToAction
• s7sdk.set.CarouselView
• s7sdk.set.InteractiveSwatches
• s7sdk.set.InteractiveThumbnailGridView
• s7sdk.set.MediaSet
• s7sdk.set.PageScrubber
• s7sdk.set.PageView
• s7sdk.set.SetIndicator
• s7sdk.set.SpinView
• s7sdk.set.Swatches
• s7sdk.set.Swatches2
• s7sdk.set.TableOfContents
• s7sdk.set.ThumbnailGridView

Class s7sdk.set.SpinView

The SpinView is an image viewing component that displays a spin set served by Adobe Image Serving. You can create the illusion of a rotating object by displaying images taken from different angles that make up a spin set. You can spin around the view by either calling moveFrame() API from JavaScript or by dragging the image when current frame is fully zoomed out, otherwise drag will pan the zoomed in image.

You can also zoom into the currently displayed frame by either double-clicking/tapping on it or by calling zoomIn() API from JavaScript. You can adjust which user action is associated with a zooming action through the use of doubleclick and singleclick modifiers. On the devices that support pinch gestures, pinching in and out zooms in and out the current frame. If the image is zoomed in, a dragging gesture pans the image. If the image is fully zoomed out, a dragging gesture results in frame change, resulting in a spinning of the view.

The auto-spin feature can be turned on using autospin modifier. It is possible to control auto spin speed, number of rotations and direction. In order to achieve the best auto spin experience it is recommended to preload all frames by setting maxloadradius to -1; note however that this will result in increased load time and higher bandwidth usage.

The SpinView component supports two dimensional Spin Sets including sets with incomplete rows. The SpinView component handles incomplete sets by centering each row of frames.

The spin set to be displayed by the component can be set by either using the setMediaSet() API or using the asset modifier directly. However if you are specifying inline sets as a list of asset IDs/names then you must use the MediaSet component and setMediaSet() API. Each inline set should include a comma separated list of assets (in the form company/asset). If it is a 2d Spin Set, each row should be enclosed in curly braces and also separated by commas. For instance, a 3 item spin set could be specified like:

demo/p01,demo/p02,demo/p03

A 2D SpinSet with 2 rows and 2 columns would be specified similarly:

{demo/p01,demo/p02},{demo/p03,demo/p04}

If you are using the SpinView directly, the set passed to the asset modifier must be fully defined in the Dynamic Media Classic and identifiable by the catalog/set id.

Customizing Behavior Using Modifiers

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

The following modifiers are supported:

Defining the Appearance using CSS

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

The styling of the sub-elements using class selectors like .s7iconeffect for example, must be specified in the form of the descendant class selectors, that is, they must follow the main class selector separated by a space, such as .s7spinview .s7iconeffect. For more information on component styling see the Adobe Experience Viewers HTML5 SDK User Guide and the default styles section.

Localized Symbols

SpinView 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.

Example Code
This example demonstrates how to use the SpinView component in a simple viewer. In this example a Container object,
a SpinView object, and two pan button objects are created. Every time a user clicks on a pan button, the moveFrame()
method is called on the SpinView object to simulate spinning the image in the given direction. Notice that the pan
buttons have been repurposed for use as rotate buttons in this example, and the buttons' default tooltip text has
been changed to reflect their functionality.

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 SpinView 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),
and sets new strings to be displayed as tooltips by the button components when a user interacts with them. It 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
user interactions, 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="user-scalable=no,height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0"/>
        
        <title>SpinView Example</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.common.Button');
            s7sdk.Util.lib.include('s7sdk.common.Container');
            s7sdk.Util.lib.include('s7sdk.set.SpinView');
        </script>
        
        <style type="text/css" media="screen">
            .s7spinview {
                height: 300px;
                width: 300px;
            }
            .s7panleftbutton {
                position: absolute;
                top: 137px;
                left: 0px;
            }
            .s7panrightbutton {
                position: absolute;
                top: 137px;
                left: 287px;
            }
        </style>
        
    </head>
    <body style="margin: 0 0;overflow:hidden;">    

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

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

            // Create ParameterManager instance to handles modifiers		
            params = new s7sdk.ParameterManager();

            // Assign new localized values for SYMBOLS defined by the
            // PanLeftButton and PanRightButton components.
            params.setLocalizedTexts({
                "en":{
                    "PanRightButton.TOOLTIP":"Spin East",
                    "PanLeftButton.TOOLTIP":"Spin West"
                     },
                defaultLocale: "en"
                });

            // 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", "sample/spinner");

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

                // Note: Any component supporting the setMediaSet API can be driven
                //       by the MediaSet component.
                // Create the SpinView component object
                spinView = new s7sdk.set.SpinView(container, params, "spinView");

                // Create the PanRightButton component object
                panRightButton = new s7sdk.common.PanRightButton(container, params, "panRightButton");

                // Create the PanLeftButton component object
                panLeftButton = new s7sdk.common.PanLeftButton(container, params, "panLeftButton");

                // Add event listeners for pan button click events
                panLeftButton.addEventListener("click", onPanLeft, true);
                panRightButton.addEventListener("click", onPanRight, true);
            }

            // Define an event handler function to rotate the SpinView left (West)
            function onPanLeft(event){
                spinView.moveFrame(s7sdk.Enum.SPIN_DIRECTION.WEST);
            }

            // Define an event handler function to rotate the SpinView right (East)
            function onPanRight(event){
                spinView.moveFrame(s7sdk.Enum.SPIN_DIRECTION.EAST);
            }

            // 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 SpinView:

.s7spinview {
	background-color:#ffffff;
	position:absolute;
	width:400px;
	height:400px;
	user-select:none;
	-moz-user-select:-moz-none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	opacity:1;
	text-align:left;
 }
.s7spinview img {
	max-width:none;
	max-height:none;
 }
.s7spinview .s7iconeffect {
	width:120px;
	height:120px;
	-webkit-transform:translateZ(0px);
	background-repeat:no-repeat;
	background-position:center;
 }
.s7spinview .s7iconeffect[state='spin_1D'] {
	background-image:url(images/sdk/spinicon.png);
 }
.s7spinview .s7iconeffect[state='spin_2D'] {
	background-image:url(images/sdk/spinicon_2D.png);
 }

Parameters:

{String} type

Event name, for example s7sdk.event.CapabilityStateEvent.NOTF_ZOOM_CAPABILITY_STATE.

{Function} handler

Function to be called when the event gets dispatched.

{Boolean} useCapture

Register capture phase.

See:

s7sdk.SpinCapabilityState

Returns:

{s7sdk.SpinCapabilityState} The current capabilities of the SpinView instance.

See:

s7sdk.SpinCapabilityState

Returns:

int Current 0-based index of the displayed frame.

Returns:

{int} Total number of frames in the spin set.

Returns:

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

Returns:

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

Returns:

{Number} Percentage zoom level.

Parameters:

{Point2D} inPt

Point in top resolution image coordinates.

See:

s7sdk.Point2D

Parameters:

{s7sdk.Enum.SPIN_DIRECTION} direction

Direction to move to.

See:

s7sdk.Enum.SPIN_DIRECTION

Parameters:

{Number} w

The width of the component, in pixels.

{Number} h

The height of the component, in pixels.

Parameters:

{String} asset

- The catalog ID of the spin set.

See:

s7sdk.TrackingManager

Parameters:

{String} classname

The CSS classname to use for this style. i.e. .s7spinview

{String} property

The CSS property that is being set. i.e. background-color

{String} value

The CSS property value being set. i.e. #FF0000

Parameters:

val

The 0-based index of the frame to switch to.

Parameters:

mediaSet

{s7sdk.MediaSetDesc} Set from which to extract the frames.

See:

s7sdk.MediaSetDesc

s7sdk.MediaSet

Parameters:

{Object} modObj

A simple JSON object with name:value pairs of valid modifiers for a particular component

Parameters:

{Object} dx

If dx is greater than 0 the image is moved to the right; if dx is less than 0 the image is moved to the left.

{Object} dy

If dy is greater than 0 the image is moved down; if dy less than 0 the image is moved up.

Parameters:

{Rectangle} rgn

The image region in normalized image coordinates where 0,0 represents the top left corner and 1,1 represents the bottom right corner of the image.

Parameters:

{Rectangle} rgn

Image region to zoom into in image top resolution coordinates.