Class s7sdk.Logger
The Logger is a special component that, like the ParameterManager, is part of the Adobe Experience Viewers HTML5 SDK core and as such
included in the Utils.js. Most other Adobe Experience Viewers HTML5 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 Adobe Experience Viewers HTML5 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 Adobe Experience Viewers HTML5 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:
NONE- Supresses the logging output.SEVERE- Logs exceptions and other fatal errors (any error that may mess up the output or render the viewer unusable).WARNING- Logs image load failures and other errors and alerts.INFO- Logs image load successes.CONFIG- Logs component creation.FINE- Logs all calls to component public APIs.FINER- Logs internal events like pinchToZoom and zoomIn, and warning messages for low level rendering or input handling.FINSET- Logs rendering, mouse handling and other events which occur frequently.
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:
| Modifier | Syntax | Description | Default |
| loglevel | level | Sets the level of log statements to display at runtime. For example, s7sdk.Logger.INFO. | NONE |
| Constructor Attributes | Constructor Name and Description |
|---|---|
| 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 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.
|
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:
- 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 Swatches component.
- 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),
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.).
- 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.
- 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>Logger 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.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", "https://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>
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.