HTML5 Viewer SDK API Documentation 

Namespaces


Class Index

Classes in s7sdk

Class s7sdk.Logger

The Logger is a special component that, like the ParameterManager, is part of the HTML5 Viewers SDK core and as such included in the Utils.js. Most other HTML5 Viewers SDK components are loaded dynamically instead.

The Logger is a useful debugging utility. When enabled, the Logger provides information and data about various SDK events and operations at runtime. It can easily be enabled in any desktop or mobile Web browser. The Logger is especially useful for mobile debugging, as mobile Web browsers tend to offer fewer development and debugging tools than their desktop counterparts.

The Logger functions similarly to the JavaScript console.log() function supported by most modern Web browsers. When enabled, the Logger outputs text strings to a Web browser's built-in console window.

To enable the Logger: Open a Scene7 SDK Viewer in a Web browser, display the browser's console window, add ?loglevel=config to the end of the URL, and refresh the page. When the logger is enabled, various messages will be output to the browser console window related to internal SDK events as your viewer loads and runs.

The Scene7 SDK components each provide a variety of built-in log statements based on their internal workings and functionality. There are 7 levels of logging detail supported by the Logger. A developer may only be interested in logging critical events such as warnings or errors. Alternately, a developer may choose to view every log statement the SDK can provide. To set the log level, simply replace the word config in the url of the viewer you are debugging with the log level you prefer. The following options are available:

In addition to the native log statements supported by the SDK components, a developer can use the Logger to output their own custom log messages at runtime. Please refer to the documentation for the static Logger.log() method below for more information.

Modifiers supported by the Logger:

ModifierSyntaxDescriptionDefault
loglevellevelSets the level of log statements to display at runtime. For example, s7sdk.Logger.INFO.NONE

Class Summary
Constructor Attributes Constructor Name and Description
 
Field Summary
Field Attributes Field Name and Description
<static>  
s7sdk.Logger.CONFIG
Defines the value of the type property of CONFIG.
<static>  
s7sdk.Logger.FINE
Defines the value of the type property of FINE.
<static>  
s7sdk.Logger.FINER
Defines the value of the type property of FINER.
<static>  
s7sdk.Logger.FINEST
Defines the value of the type property of FINEST.
<static>  
s7sdk.Logger.INFO
Defines the value of the type property of INFO.
<static>  
s7sdk.Logger.NONE
Defines the value of the type property of NONE.
<static>  
s7sdk.Logger.SEVERE
Defines the value of the type property of SEVERE.
<static>  
s7sdk.Logger.WARNING
Defines the value of the type property of WARNING.
Method Summary
Method Attributes Method Name and Description
<static>  
s7sdk.Logger.log(logLevel, message, arguments)
Outputs a string to the browser debug console at runtime if the specified loglevel is enabled.
Class Detail
s7sdk.Logger()
Example Code

This example demonstrates how to use the Logger to debug a simple viewer. In this example a Container object, a ZoomView object, and a Swatches object are created. Every time a user clicks a swatch, the ZoomView loads and displays the appropriate image asset related to the selected swatch. A user can enable the SDK Logger by opening the viewer page in a browser, adding "?loglevel=info" at the end of the URL, and refreshing the page. Every time a swatch is clicked, a log statement will display in the Logger popup indicating the index of the swatch, and the item that will load in the ZoomView component. Aleternatively, the logging can be enabled by specifing the modifier in the viewer code, by adding params.push("loglevel","info") in the init section. 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 Swatches component.
  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. The selectSwatch() function is called on the Swatches object to designate which swatch the viewer should display first. 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. A handler function is defined to respond to the component event listeners added in the initViewer() function. Please note the call to s7sdk.Logger.log() method - this will output the index of a swatch and it's related asset when clicked.
  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="user-scalable=no, height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <title>Logger 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.set.Swatches'); s7sdk.Util.lib.include('s7sdk.common.Container'); </script> <style type="text/css" media="screen"> html,body { width:100%; height:100%; } .s7swatches { bottom: 10px; left: 10px; height: 150px; width: 300px; border: 1px; border-color:#cccccc; background-color: rgba(200, 200, 200, 0.5); } .s7swatches .s7thumb { } .s7swatches .s7thumb[state="default"] { } .s7swatches .s7thumb[state="selected"] { box-shadow: inset 0px 0px 0px 2px #3366CC; -webkit-box-shadow: inset 0px 0px 0px 2px #3366CC; } </style> </head> <body style="margin: 0 0;overflow:hidden;"> <script language="JavaScript" type="text/javascript"> var params, container, zoomView, swatches, container; // 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/ImageSet-Views-Sample"); // Create the Container component object container = new s7sdk.common.Container(null, params, "s7container"); // Create the ZoomView component object to display the asset associated with the swatch zoomView = new s7sdk.image.ZoomView(container, params, "myZoomView"); zoomView.resize(container.getWidth(),container.getHeight()); // Create the Swatches component object swatches = new s7sdk.set.Swatches(container, params,"mySwatches"); // Select the first swatch swatches.selectSwatch(0, true); // Add an event listener for swatch selection events swatches.addEventListener(s7sdk.event.AssetEvent.SWATCH_SELECTED_EVENT, onSwatchSelected, false) } // Define an event handler function to update the ZoomView image when a new swatch is selected function onSwatchSelected(event){ // For debugging, log a statement to verify the swatch clicked and asset to load. s7sdk.Logger.log(s7sdk.Logger.INFO, "Swatch index: %0 -- asset: %1", event.s7event.frame, event.s7event.asset); // Load the new asset into the ZoomView component object zoomView.setItem(event.s7event.asset); } // 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>
Field Detail
<static> s7sdk.Logger.CONFIG
Defines the value of the type property of CONFIG. Use this level to log component creation.

<static> s7sdk.Logger.FINE
Defines the value of the type property of FINE. Use this level to log all calls to component public APIs.

<static> s7sdk.Logger.FINER
Defines the value of the type property of FINER. Use this level to log internal events like pinchToZoom and zoomIn, and warning messages for low level rendering or input handling.

<static> s7sdk.Logger.FINEST
Defines the value of the type property of FINEST. Use this level to log rendering, mouse handling and other events which occur frequently.

<static> s7sdk.Logger.INFO
Defines the value of the type property of INFO. Use this level to log image load successes.

<static> s7sdk.Logger.NONE
Defines the value of the type property of NONE. Use this level to supress log messages.

<static> s7sdk.Logger.SEVERE
Defines the value of the type property of SEVERE. Use this level to log exceptions and other fatal errors (any error that may mess up the output or render the viewer unusable).

<static> s7sdk.Logger.WARNING
Defines the value of the type property of WARNING. Use this level to log image load failures and other errors and alerts.
Method Detail
<static> s7sdk.Logger.log(logLevel, message, arguments)
Outputs a string to the browser debug console at runtime if the specified loglevel is enabled.

Following the message argument, any number of additional arguments can be provided to the log method, separated by commas. The Logger will execute string replacement on the message string, inserting the arguments into the message string in the order they are provided to the method. To designate a string in the message to be replaced by an argument, use the token %N, where N is an integer starting from 0. For example:

s7sdk.Logger.log(s7sdk.Logger.FINE, "My debug message. arg 1: %0 - arg 2: %1 - arg 3: %2", var0, var1, var2);

Parameters:
{String} logLevel
The level of logging to output this trace at. For example: s7sdk.Logger.INFO.
{String} message
The text string to trace in the log console.
{Comma delimited list} arguments
A comma-delimited set of values to be inserted into the message string via token-based text replacement.

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