HTML5 Viewer SDK API Documentation 

Namespaces


Class Index

Classes in s7sdk.image

Class s7sdk.image.HotSpotEffect

The HotSpotEffect component is an effects component designed to add functionality to the ZoomView and SpinView components. The HotSpotEffect uses zoom target data retrieved from Scene7 Image Serving to highlight certain areas of the image which associated with zoom target areas.

The hotspots are only visible when the image is in the initial zoom state also called the reset state. When the user touches a particular hotspot, the icon is highlighted according to CSS settings. Tapping on the hotspot zooms the image into the region defined by the zoom target represented by the hotspot.

Defining Appearance using CSS

You can define the appearance of the HotSpotEffect component by using CSS rules. All HTML5 Viewer SDK components use class selectors for styling. You can style the body of the HotSpotEffect component by using the .s7hotspoteffect class selector. The styles associated with this class selector are applied to all instances of the HotSpotEffect component. Style particular instances by prefixing the class rule with the instance #ID. For example, styling rules for #myComp.s7hotspoteffect are applied only to the particular HotSpotEffect instance. For more information on component styling see the HTML5 Viewer SDK User Guide and the examples in this document.

CSS ClassAttribute SelectorDescription
.s7hotspoteffect(None)Represents the main element of the HotSpotEffect component.
.s7hotspotoverlaystate=[default|active]Defines the appearance of the zoom target overlays.

Class Summary
Constructor Attributes Constructor Name and Description
 
s7sdk.image.HotSpotEffect(containerId, settings, compId)
Method Summary
Method Attributes Method Name and Description
 
setCSS(classname, property, value)
Sets a particular CSS class and property on a component
Class Detail
s7sdk.image.HotSpotEffect(containerId, settings, compId)
Example Code

This example demonstrates how to use the HotSpotEffect component in a simple viewer. In this example a Container object, a ZoomView object, and a HotSpotEffect object are created. The HotSpotEffect places 2 clickable circle buttons on the image displayed in the ZoomView. When a user clicks a hotspot, the ZoomView zooms the image in on that area. Notice that the HotSpotEffect object is attached to the ZoomView object via an argument in the HotSpotEffect's constructor. 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. The s7sdk.Util.init() method is called to initialize the SDK.
  3. A ParameterManager object is created to handle component modifiers for the viewer.
  4. 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.
  5. 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.
  6. 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>HotSpotEffect Component</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.image.HotSpotEffect'); s7sdk.Util.lib.include('s7sdk.common.Container'); </script> <style type="text/css" media="screen"> html,body { width: 100%; height: 100%; } body { padding: 0px; margin: 0px; font-size: 12px; background: #FFFFFF; overflow: hidden; } </style> </head> <body> <script language="JavaScript" type="text/javascript"> var params, zoomView, container, hotSpotEffect; // 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", "Scene7SharedAssets/Backpack_B"); // 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"); zoomView.resize(container.getWidth(),container.getHeight()); // Create the HotSpotEffect component object hotSpotEffect = new s7sdk.image.HotSpotEffect("zoomView", params, "hotSpotEffect"); } // 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 HotSpotEffect:

.s7hotspoteffect .s7hotspotoverlay {
	height: 50px;
	width: 50px;	
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(images/sdk/hotspots_overlay_icon.png);
	cursor: pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.s7hotspoteffect .s7hotspotoverlay[state="default"] {
	opacity: 0.6;
}
.s7hotspoteffect .s7hotspotoverlay[state="active"] {
	opacity: 1;
}
Parameters:
{String} containerId
Does not apply to HotSpotEffect.
{s7sdk.ParameterManager} settings
A parameter manager object representing the desired configuration.
{String} compId
Does not apply to HotSpotEffect.
See:
s7sdk.TargetDesc
Method Detail
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. .s7hotspoteffect
{String} property
The CSS property that is being set. i.e. background-position
{String} value
The CSS property value being set. i.e. center

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