Adobe Experience Viewers HTML5 SDK API Documentation 

Namespaces

Class Index

Classes in s7sdk.image

Class s7sdk.image.NavigationView

The NavigationView is an image viewing component that displays a thumbnail image served by Adobe Image Serving. It provides an alternative mechanism for panning. It also shows which part of the image is currently zoomed in by means of a highlight rectangle that corresponds to the currently visible portion of the image.

Every time a user moves the highlight rectangle a notfZoomPan event is sent that is typically used by ZoomView component to pan the image. You can set the currently displayed highlight rectangle by explicitly calling setViewPort method.

Customizing Behavior Using Modifiers

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

The following modifiers are supported:

ModifierSyntaxDescriptionDefault
serverurlisRootPathThe 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/
assetimageThe Adobe Image Serving catalog/image ID of the image to display.
iscommandvalueThe Adobe Image Serving command string that is applied to the image when requesting image data. If specified in the URL, all occurrences of '&' and '=' must be HTTP-encoded as %26 and %3D, respectively.
resizable0|1Turn auto-resize logic on and off. When on, the component automatically adjusts its size to match the size of the source image.0
fmtjpg|jpeg|png|png-alpha|gif|gif-alphaSpecifies the image format used by the component for loading images from Image Server. The image format is any value supported by Image Server and the client browser. If the image format ends with "-alpha", the component renders images as transparent. For all other image format values the component treats images as opaque.jpeg

Defining the Appearance using CSS

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

The styling of the sub-elements using class selectors like .s7navigationview 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 .s7navigationview .s7highlight. For more information on component styling see the Adobe Experience Viewers HTML5 SDK User Guide and the default styles section.

CSS ClassAttribute SelectorDescription
.s7navigationview(None)Represents the main body of the NavigationView component.
.s7highlight(None)Represents the navigation highlight box.

Class Summary
Constructor Attributes Constructor Name and Description
 
s7sdk.image.NavigationView(container, settings, compId)
Method Summary
Method Attributes Method Name and Description
 
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the NavigationView component.
 
dispose()
Dispose is the public API for a user to remove itself and all sub-elements from the DOM
 
getAsset()
The asset that is currently displayed in the component.
 
getHeight()
Returns the current inner height of the component.
 
getWidth()
Returns the current inner width of the component.
 
resize(w, h)
Resize the NavigationView.
 
setAsset(assetName)
Changes the currently active asset.
 
setCSS(classname, property, value)
Sets a particular CSS class and property on a component
 
setImage(asset)
Deprecated.
 
setItem(item)
Sets the current item displayed by the component.
 
setModifier(modObj)
Sets 1-N # of modifiers for the component.
 
setViewPort(viewPort)
Set the current navigation rectangle.
Class Detail
s7sdk.image.NavigationView(container, settings, compId) 
Example Code

This example demonstrates how to use the NavigationView component in a simple viewer. In this example a Container object,
a ZoomView object, and a NavigationView object are created. Whenever a user zooms in, zooms out, or pans the image displayed
in the ZoomView object, the NavigationView object updates the highlight rectangle to indicate the currently visible portion
of the overall image. Whenever a user repositions the highlight rectangle in the NavigationView object, the ZoomView object
repositions the image to display the highlighted image area.

The code below does the following:

    

  1. The Adobe Experience Viewers HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
    2. 

  2. CSS Styles are defined in the document head to control the appearance of the NavigationView component.
    3. 

  3. A ParameterManager object is created to handle component modifiers for the viewer.
    4. 

  4. The s7sdk.Util.init() method is called to initialize the SDK.
    5. 

  5. 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
user interactions, changes in a component's state, etc.).
    6. 

  6. Handler functions are defined to respond to the component event listeners added in the initViewer() function.
    7. 

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

  8. Finally, the init() method is called on the ParameterManager object to start the viewer.
    9. 


<!DOCTYPE html>
<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>NavigationView 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.NavigationView');
            s7sdk.Util.lib.include('s7sdk.image.ZoomView');
            s7sdk.Util.lib.include('s7sdk.common.Container');
        </script>

        <style>
            html,body {
                width:100%;
                height:100%;
            }
            body {
                padding:0;
                margin:0;
                font-size:12px;
                background: #FFFFFF;
                overflow: hidden;
            }	
            .s7navigationview {
                background-color: transparent;
                width: 128px;
                height: 128px;
                border: solid 1px;
                border-color: black;
            }
            .s7navigationview .s7highlight {
                border: solid 2px;
                border-color: green;
            }
        </style>

    </head>
    <body>

        <div id="s7container"></div>
        <script type="text/javascript" language="JavaScript">
            var params, container, zoomView, navView;

            // 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", "demo/bedroom.tif");

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

                 // Create the ZoomView component object
                zoomView = new s7sdk.image.ZoomView(container, params);
				zoomView.resize(container.getWidth(),container.getHeight());

                 // Create the NavigationView component object
                navView = new s7sdk.image.NavigationView(container, params);

                // Add an event listener for ZoomView asset change events
                zoomView.addEventListener(s7sdk.event.AssetEvent.ASSET_CHANGED, onAssetChange, false);

                // Add an event listener for ZoomView zoom events
                zoomView.addEventListener(s7sdk.event.ZoomRgnEvent.NOTF_ZOOM_NRGN, onZoomChange, true);

                // Add an event listener for NavigationView pan events
                navView.addEventListener(s7sdk.event.ZoomPanEvent.NOTF_ZOOM_NPAN, onNavChange, true);
            }

            // Define an event handler function to update the NavigationView when the asset changes
            function onAssetChange(event){
                if(navView){
                    navView.setItem(event.s7event.asset);
                }
            }

            // Define an event handler function to update the NavigationView each time the ZoomView
            // changes its viewable region
            function onZoomChange(event){
                navView.setViewPort(event.s7event.zoomRgn);
            }

            // Define an event handler function to update the ZoomView each time the NavigationView
            // highlight changes position
            function onNavChange(event){
               zoomView.zoomNPan(event.s7event.dx, event.s7event.dy);
            }

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

.s7navigationview {
	width:128px;
	height:128px;
	background-color:#FFFFFF;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
 }
.s7navigationview .s7highlight {
	border:solid 1px;
	color:#ff0000;
 }
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
See:
s7sdk.ParameterManager
Method Detail
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the NavigationView 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 ZoomPanEvent.

The events supported by the component are:

  • s7sdk.event.ZoomPanEvent.NOTF_ZOOM_NPAN - Dispatched whenever the user pans the view port. s7sdk.event.ZoomPanEvent
    • Parameters:
    {String} type
    Event name, for example s7sdk.event.ZoomPanEvent.NOTF_ZOOM_NPAN.
    {Function} handler
    Function to be called when the event gets dispatched.
    {Boolean} useCapture
    Register capture phase.
    dispose()
    Dispose is the public API for a user to remove itself and all sub-elements from the DOM
    {String} getAsset()
    The asset that is currently displayed in the component.
    {Number} getHeight()
    Returns the current inner height of the component.
    Returns:
    {Number} the inner height of the component, in pixels.
    {Number} getWidth()
    Returns the current inner width of the component.
    Returns:
    {Number} the inner width of the component, in pixels.
    resize(w, h)
    Resize the NavigationView.
    Parameters:
    {Number} w
    Width in pixels.
    {Number} h
    Height in pixels.
    setAsset(assetName)
    Changes the currently active asset. The component invalidates and rebuilds using the existing serverurl and the new asset after retrieving the asset 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. .s7navigationview
    {String} property
    The CSS property that is being set. i.e. background-color
    {String} value
    The CSS property value being set. i.e. #FF0000
    setImage(asset)
    Deprecated. Change the image that is displayed in the component. Now use setItem() or setAsset() API.
    Parameters:
    {String} asset
    Dynamic Media Classic asset or image identifier.
    setItem(item)
    Sets the current item displayed by the component. The item must be a decedent of type ItemDesc.
    Parameters:
    item
    {s7sdk.ItemDesc} The set item to select.
    See:
    s7sdk.ItemDesc
    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
    setViewPort(viewPort)
    Set the current navigation rectangle.
    Parameters:
    {Rectangle} viewPort
    The area around which to draw the highlight frame.
    Documentation generated by JsDoc Toolkit 2.4.0 on Wed May 15 2024 09:55:08 GMT-0000 (UTC)