HTML5 Viewer SDK API Documentation 


Class Index

Classes in s7sdk.common

Class s7sdk.common.ZoomInButton

Extends s7sdk.common.Button.

You can associate the ZoomInButton with a ZoomView component to zoom in the viewer. This component uses a plus sign as the default icon.

This component does not currently read any modifiers.

Defining Appearance using CSS

The CSS class for styling the ZoomInButton is .s7zoominbutton. This button has the following four states: up, over, down and disabled. You can style these states by adding the state attribute selector to the CSS class. It is recommended that you define common CSS under the main class and define only the necessary distinctions when you use attribute selectors.

CSS ClassAttribute SelectorDescription
.s7zoominbuttonstate=[up|over|down|disabled]Define the appearance of ZoomInButton for each state.
.s7tooltip(None)A global class selector that defines appearance for the tooltips. To disable tooltips set the display style to none.

Localized Symbols

ZoomInButton also has text symbols that you can localize either in a preset or in the viewer page though the mechanisms provided by the ParameterManager. For more information on localization consult the ParameterManager API documentation and HTML5 Viewers SDK User Guide.

ZoomInButton.TOOLTIPDefine a localized tooltip of ZoomInButton

Class Summary
Constructor Attributes Constructor Name and Description
s7sdk.common.ZoomInButton(container, settings, compId)
Methods borrowed from class s7sdk.common.Button:
activate, addEventListener, blur, deactivate, dispose, focus, getHeight, getWidth, resize, setCSS, setLabel
Class Detail
s7sdk.common.ZoomInButton(container, settings, compId)
Example Code

This example demonstrates how to use the ZoomInButton component in a simple viewer. In this example a Container object, a ZoomView object, a ZoomInButton object, and a ZoomOutButton object, and a ZoomResetButton 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 any of the zoom buttons, the ZoomView object zooms the image in or out as appropriate. 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. 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>ZoomView 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.common.Container'); s7sdk.Util.lib.include('s7sdk.common.Button'); </script> <style type="text/css" media="screen"> html,body { width: 100%; height: 100%; } body { margin: 0px; padding: 0px; } .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; } .s7zoomresetbutton { position: absolute; top: 375px; left: 127px; width: 25px; height: 25px; z-index: 5000; } </style> </head> <body> <div id="s7container"></div> <script language="JavaScript" type="text/javascript"> var params, container, zoomView, zoomInButton, zoomOutButton, zoomResetButton; // 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", ""); 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"); // Create the ZoomInButton component object zoomInButton = new s7sdk.common.ZoomInButton(container, params, "zoomInButton"); // Create the ZoomOutButton component object zoomOutButton = new s7sdk.common.ZoomOutButton(container, params, "zoomOutButton"); // Create the ZoomResetButton component object zoomResetButton = new s7sdk.common.ZoomResetButton(container, params, "zoomResetButton"); // Add an event listener for zoom capability state changes zoomView.addEventListener(s7sdk.event.CapabilityStateEvent.NOTF_ZOOM_CAPABILITY_STATE, onZoomStateChange); // Add event listeners for all zoom button click events zoomInButton.addEventListener("click", onZoomIn); zoomOutButton.addEventListener("click", onZoomOut); zoomResetButton.addEventListener("click", onZoomReset); } // 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(); } if(event.s7event.state.hasCapability(s7sdk.ZoomCapabilityState.ZOOM_RESET)){ zoomResetButton.activate(); }else{ zoomResetButton.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(); } // Define an event handler function to reset the ZoomView zoom level function onZoomReset(event) { zoomView.zoomReset(); } // 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 ZoomInButton:

.s7zoominbutton {
.s7zoominbutton[state='up'] {
.s7zoominbutton[state='over'] {
.s7zoominbutton[state='down'] {
.s7zoominbutton[state='disabled'] {
.s7tooltip {
	background-color:rgb(224, 224, 224);
	font-family:Helvetica, sans-serif;
	border:1px solid rgb(191,191,191);
{String|Container} container
The reference to Container instance, ControlBar instance or the ID of the parent DOM element to which the component is added as a child
{s7sdk.ParameterManager} settings
ParameterManager as settings.
{String} compId
A unique ID for this component.

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