HTML5 Viewer SDK API Documentation 

Namespaces


Class Index

Classes in s7sdk

Class s7sdk.VisibilityManager

The VisibilityManager is a static manager component that manages the visibility of all its attached components based on the click event of a reference component. The attached components are shown and hidden whenever the user taps within the reference component area.

The VisibilityManager functions with any object that implements the following methods: show() and hide(). VisibilityManager invokes these methods whenever it is appropriate.

Class Summary
Constructor Attributes Constructor Name and Description
 
Method Summary
Method Attributes Method Name and Description
 
attach(obj)
Attach component to the visibility manager.
 
detach(obj)
Detach component from the visibility manager.
 
Detach all components from the visibility manager.
 
Disposes the component.
 
reference(obj)
Class Detail
s7sdk.VisibilityManager()
Example Code

This example demonstrates how to use the VisibilityManager component in a simple viewer. In this example a Container object, a ZoomView object, a ZoomInButton object, and a ZoomOutButton object are created. When a user interacts with the ZoomView object causing it to zoom in or out on the image, the zoom buttons become enabled or disabled as appropriate for the current zoom level of the image. When a user clicks either of the zoom buttons, the ZoomView object zooms the image in or out. Note that the VisibilityManager gives the user the ability to show or hide the zoom buttons by clicking the image once. A single click will make the buttons disappear. The next single click will make them reappear. The code below does the following:

  1. The Scene7 HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
  2. CSS Styles are defined in the document head to control the appearance of the ZoomView and button components.
  3. The s7sdk.Util.init() method is called to initialize the SDK.
  4. A ParameterManager object is created to handle component modifiers for the viewer.
  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. Note that the ZoomView object is set as a reference for the VisibilityManager, and that the zoom buttons and ZoomView iconEffectVisivility are attached as well. 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. Handler functions are defined to respond to the component event listeners added in the initViewer() function.
  7. An event listener is added to the ParameterManager object that designates the initViewer() function as the handler to call when the Scene7 SDK is loaded and ready.
  8. 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>VisibilityManager Example</title> <!-- To run this example locally you need to replace this with an absolute SDK path. For more information check the HTML5 Viewers 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.ZoomView'); s7sdk.Util.lib.include('s7sdk.common.Container'); s7sdk.Util.lib.include('s7sdk.common.Button'); </script> <style type="text/css" media="screen"> .s7zoomview { top: 0px; left: 0px; height: 400px; width: 280px; } .s7zoominbutton{ position: absolute; top: 375px; left: 10px; width: 25px; height: 25px; z-index: 5000; } .s7zoomoutbutton { position: absolute; top: 375px; left: 250px; width: 25px; height: 25px; z-index: 5000; } </style> </head> <body> <script language="JavaScript" type="text/javascript"> var params, container, zoomView, zoomInButton, zoomOutButton, visibilityManager; // 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", "http://s7d1.scene7.com/is/image"); params.push("asset", "demo/bedroom.tif"); // Create the Container component object container = new s7sdk.Container(null, params, "s7container"); // Create the ZoomView component object zoomView = new s7sdk.image.ZoomView( container, params, "zoomView"); zoomInButton = new s7sdk.common.ZoomInButton(container, params, "zoomInButton"); zoomOutButton = new s7sdk.common.ZoomOutButton(container, params, "zoomOutButton"); // Create VisibilityManager component object visibilityManager = new s7sdk.VisibilityManager(); visibilityManager.reference(zoomView); //use zoomView object as a reference visibilityManager.attach(zoomInButton); visibilityManager.attach(zoomOutButton); visibilityManager.attach(zoomView.iconEffectVisibility); // Add event listener for zoom capability state changes zoomView.addEventListener(s7sdk.event.CapabilityStateEvent.NOTF_ZOOM_CAPABILITY_STATE, onZoomStateChange); // Add an event listener for zoom button click events zoomInButton.addEventListener("click", onZoomIn, false); zoomOutButton.addEventListener("click", onZoomOut, false); } // Define an event handler function to enable/disable the zoom buttons when the ZoomView state changes function onZoomStateChange(event){ if(event.s7event.state.hasCapability(s7sdk.ZoomCapabilityState.ZOOM_IN)){ zoomInButton.activate(); }else{ zoomInButton.deactivate(); } if(event.s7event.state.hasCapability(s7sdk.ZoomCapabilityState.ZOOM_OUT)){ zoomOutButton.activate(); }else{ zoomOutButton.deactivate(); } } // Define an event handler function to update the ZoomView when zoomIn is clicked function onZoomIn(event){ zoomView.zoomIn(); } // Define an event handler function to update the ZoomView when zoomOut is clicked function onZoomOut(event){ zoomView.zoomOut(); } // 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>
See:
s7sdk.common.Button hide
s7sdk.common.Button show
s7sdk.set.SpinView iconEffectVisibility
Method Detail
attach(obj)
Attach component to the visibility manager. The call is ignored if the component was already attached to visibility manager.
Parameters:
{Object} obj
An object to attach to this visibility manager.

detach(obj)
Detach component from the visibility manager. The call is ignored if the component is not attached to visibility manager.
Parameters:
{Object} obj
An object to detach from this visibility manager.

detachAll()
Detach all components from the visibility manager.

dispose()
Disposes the component.

reference(obj)
Parameters:
{Object} obj
A reference object that is used by this component as a reference for click event.

Documentation generated by JsDoc Toolkit 2.4.0 on Thu Oct 15 2020 11:59:14 GMT-0000 (UTC)