Atalasoft DotImage 6.0 Send comments on this topic.
ClientSide Scripting in ASP.NET
See Also
Programming with DotImage > Viewing Images > ASP.NET Webform Controls > ClientSide Scripting in ASP.NET

Glossary Item Box

The DotImage WebImageViewer, WebThumbnailViewer, and WebAnnotationViewer ServerControls support client side scripting for manipulation without post backs.  You can access nearly all properties and methods of the control via client side JavaScript. 

Basic Syntax

To make the transition from a server oriented control to a client oriented control easier, the client side versions of the WebImageViewer, WebThumbnailViewer, and WebAnnotationViewer controls use almost identical syntax to the server side code that you would need to accomplish similar tasks on the server side.

Public Functions

All public functions and global variables that are included within WebImageViewer.js, WebThumbnailViewer.js, WebAnnotationViewer.js, ClientTools.js, and Enums.js are prefixed with the word atala.  This makes it unlikely that any another components used on the same page will have a similar function names.

OnPageLoad and using atalaInitClientScript

The WebImageViewer, WebThumbnailViewer, and WebAnnotationViewer use the window.onload event to initialize the client side components of the control.  This is necessary because as the page loads, elements can move depending on how long images or objects take to load, and whether or not the size attributes of those objects are defined.

You can use atalaInitClientScript to run code in the OnLoad event. This function queues up each string sent to it and tries to execute it as JavaScript code.  This allows you to execute multiple scripts OnLoad. This function is located in ClientTools.js, and is required by the all DotImage WebControls.

Here is a general example that pops up an alert when the page is done loading.

Example

HTML Copy Code
<!-- You will need a reference to ClientTools.js before this snippet.
 -- This reference is automatically added to the page inline with the Atalasoft WebControls,
 -- so placing this snippet below one of these controls will be sufficient. -->
<script language="javascript" type="text/javascript">
atalaInitClientScript("OnPageLoad()");
function OnPageLoad()
{
 alert("Page is finished loading.");
}
</script>

Objects

Every WebImageViewer, WebThumbnailViewer, and WebAnnotationViewer control on the page is accessed by the ClientID generated by ASP.NET.  Therefore WebImageViewer1 on your WebForm can be accessed in JavaScript using the same name.

Placing the WebImageViewer, WebThumbnailViewer, and WebAnnotationViewer controls inside a container control such as a ContentPlaceHolder or a UserControl,  changed the ClientID. You may need to take this into account when accessing methods on the client side. 

The example below shows how you can get the ClientID inline on an aspx page.

Example 

HTML Copy Code
<asp:content ID="Content1" contentplaceholderid="_mainContent" runat="server"><cc1:WebImageViewer ID="WebImageViewer1" runat="server" Width="500px" Height="460px" />

<script type="text/javascript"> var myViewer;

atalaInitClientScript("OnPageLoad()"); function OnPageLoad() {  myViewer = <%= WebImageViewer1.ClientID %>;  myViewer.RemoteInvoked = Invalidate; }

// This function forces the WebImageViewer to update all visible tiles, as // it may not know that the image has changed on the server side. function Invalidate() {  myViewer.Update(); }

// This function calls a RemoteInvokable function on the server side, and // passes in an integer indicating which page to open. function GoToPage(n) {  var vals = new Array();  vals.push(n);      myViewer.RemoteInvoke('GoToPage', vals); }</script></asp:content>

Properties

All properties for a given object are named the same as they are in the server code (unless otherwise noted on the table below). They are prefixed with the words get and set, and require parentheses to get the return values.

The following example sets mySize to an atalaSize object representing the size of WebImageViewer1's selection and sets the width of WebImageViewer2.

Example

JavaScript Copy Code
var mySize = WebImageViewer1.getSelection().getSize();

WebImageViewer2.setWidth('400px');

Events

All the event handlers for the Atalasoft WebControls can be used by creating your own function and setting the event to that function, or by using atalaEventAdd.  These examples pop up an alert box every time the ScrollPosition is changed. Both of the methods shown below are valid.

The ZoomChanged event handler on the WebAnnotationViewer cannot be set to without breaking the automatic annotation zooming. Method 3 is the only method that works in this situation.

Method 1

JavaScript Copy Code
// First Method
atalaInitClientScript("OnPageLoad()");
function OnPageLoad()
{
  WebImageViewer1.ScrollPositionChanged = myPositionChanged;
}

function myPositionChanged()
{
  alert("ScrollPosition Changed!");
}

Method 2

JavaScript Copy Code
// Second Method
atalaInitClientScript("OnPageLoad()");
function OnPageLoad()
{
  WebImageViewer1.ScrollPositionChanged = function(){ alert("ScrollPosition Changed!"); };
}

Method 3

JavaScript Copy Code
// Third Method
// This method allows you to add multiple handlers to the same event
atalaInitClientScript("OnPageLoad()");
function OnPageLoad()
{
  atalaEventAdd(this, WebImageViewer1, 'ScrollPositionChanged', myPositionChanged);
  atalaEventAdd(this, WebImageViewer1, 'ScrollPositionChanged', myUpdate);
}

function myPositionChanged()
{
  alert("ScrollPosition Changed!");
}

function myUpdate()
{
  alert("myUpdate!");
}

atalaWebImageViewer

Although this function is public, it is not intended for users to create WebImageViewers on the client side directly.

Properties

Server Name JavaScript Syntax Description
N/A ID() : string Gets the server control identifier generated by ASP.NET.
N/A Form() : object Gets the form object that the Web server control is on.
AntialiasDisplay getAntialiasDisplay() : int
setAntialiasDisplay(value : int)		 Gets or sets the quality of the scaled image.

Expected input: int from 0-3, 0:None 1:ScaleToGray 2:ReductionOnly 3:Full
AutoZoom getAutoZoom() : int
setAutoZoom(value : int)		 Gets or sets a value indicating how the image should be zoomed as the control is resized or the image size changes.

Expected input: int from 0-5, 0:None 1:BestFit 2:BestFitShrinkOnly 3:FitToWidth 4:FitToHeight 5:FitToImage
BackColor getBackColor() : string
setBackColor(value : string)		 Gets or sets the background color of the Web server control.

Expected input: string representing a hex value or exact color name: '#ACFF00'
BorderColor getBorderColor() : string
setBorderColor(value : string)		 Gets or sets the border color of the Web server control.

Expected input: string representing a hex value or exact color name: '#ACFF00'
BorderStyle getBorderStyle() : string
setBorderStyle(value : string)		 Gets or sets the border style used for this Web server control.

Expected input: string representing Style: '1px solid #FF9900'
BorderWidth getBorderWidth() : int
setBorderWidth(value : int)		 Gets or sets the border width of the Web server control.
BrowserFormat getBrowserFormat() : int Gets the format of the images created for browser output.
CachePath getCachePath() : string Gets the file path used for the file cache as specified in the Web.config file.
Caption getCaption() : string
setCaption(value : string)		 Gets or sets a string used for creating a caption under the Web server control.  HTML syntax is allowed.
Centered getCentered() : bool
setCentered(value : bool)		 Gets or sets a value indicating if the image is centered when the image is smaller than the Web server control.
Font getFont() : string
setFont(value : string)		 Gets or sets the font name associated with the Web server control.

Expected input: string representing font name: 'Verdana'
ForeColor getForeColor() : string
setForeColor(value : string)		 Gets or sets the foreground color (typically the color of the text) of the Web server control.

Expected input: string representing a hex value or exact color name: '#ACFF00'
Height getHeight() : int
setHeight(value : int)		 Gets or sets the height of the Web server control in pixels.
ImageDisplayOrder getImageDisplayOrder() : int Gets the order that tiles are loaded.
ImagePosition getScrollPosition() : atalaPoint
setScrollPosition(value : atalaPoint)		 Gets or sets the upper left image position in relation to the upper left corner of the Web server control.
MouseTool getMouseToolLeft() : int
getMouseToolRight() : int
setMouseTool(left: int, right: int)		 Gets or sets the behavior of the mouse when interacting with the viewable area.
PathToResources getPathToResources() : string Gets the virtual path to where the image, script, and cursor files are located. 
N/A getReturnValue() : var Get the return value populated by the last RemoteInvoke.
ScrollBarVisibility getScrollBarVisibility() : int Gets the visibility of the scrollbars.
Selection getSelection() : Selection Gets the Selection object of this Web server control.
TileSize getTileSize() : atalaSize Gets the height and width of the tiles in pixels.
TitleBar getTitleBar() : string
setTitleBar(value : string)		 Gets or sets a string used for a creating a title bar above the Web server control.  HTML syntax is allowed.
ViewPortSize getViewPortSize() : atalaSize Gets the size of the viewable area, excluding scroll bars.
Visibility getVisibility() : string
setVisibility(value : string)		 Gets or sets a value that indicates whether the Web server control is hidden or visible on the page.

Expected input: string that is either "hidden" or "visible"
Width getWidth() : int
setWidth(value : int)		 Gets or sets the width of the Web server control in pixels.
Zoom getZoom() : float
setZoom(value : float)		 Gets or sets the zoom level of the image in this Web server control.
ZoomInOutPercentage getZoomInOutPercentage() : int
setZoomInOutPercentage(value : int)		 Gets or sets the percentage used to increase or decrease the zoom level when the zoom MouseTools are used.

Events

Server Name JavaScript Syntax Description
N/A AntialiasDisplayChanged = function Fires when the AntialiasDisplay property has changed.
N/A AutoZoomChanged = function Fires when the AutoZoom property has changed.
N/A BackColorChanged  = function Fires when the BackColor property has changed.
N/A BorderColorChanged = function Fires when the BorderColor property has changed.
N/A BorderStyleChanged  = function Fires when the BorderStyle property has changed.
N/A BorderWidthChanged = function Fires when the BorderWidth property has changed.
N/A CaptionChanged = function Fires when the Caption property has changed.
CenteredChanged CenteredChanged = function Fires when the Centered property has changed.
N/A FontChanged = function Fires when the Font property has changed.
N/A ForeColorChanged = function Fires when the ForeColor property has changed.
ImageChanged ImageChanged = function Fires when the Image has changed.
N/A ImageSizeChanged = function Fires when the Image changes size.
N/A MouseToolChanged  = function Fires when the MouseTool property has changed.
RemoteInvoked RemoteInvoked = function Fires when the RemoteInvoke function is called.
ImagePositionChanged ScrollPositionChanged = function Fires when the ScrollPosition has changed
SelectionChanged SelectionChanged = function Fires when the Selection has changed.
N/A SizeChanged = function Fires when the Size property has changed.
N/A TitleBarChanged = function Fires when the TitleBar property has changed.
N/A VisibilityChanged = function Fires when the Visibility property has changed.
N/A ZoomChanged = function Fires when the Zoom property has changed.
N/A ZoomInOutPercentageChanged = function Fires when the ZoomInOutPercentage property has changed.

MMouse Events

 Note: All of these events pertain to the underlying image only.
N/A Clicked = function Fires when the image is clicked.
N/A DoubleClicked = function Fires when the image is double clicked.
N/A MouseDown = function Fires when a mouse button is pressed down on the image.
N/A MouseDownLeft = function Fires when the when the left mouse button is pressed down
N/A MouseDownRight = function Fires when the when the right mouse button is pressed down.
N/A MouseMove = function Fires when the mouse cursor moves over the image.
N/A MouseOut = function Fires when the mouse cursor leaves the image area.
N/A MouseOver = function Fires when the mouse cursor enters the image area.
N/A MouseUp = function Fires when a mouse button is released on the image.
N/A RightClicked = function Fires when the image is right clicked.

Methods

Server Name JavaScript Syntax Description
OpenUrl OpenUrl(value : string) Opens an image into the WebImageViewer control from a URL or virtual path.
N/A PauseRefresh() Pauses UI updates for this control until ResumeRefresh is called.  Pauses and Refreshes are nestable.  The update happens when an equal number of ResumeRefresh and PauseRefresh calls are made.
Print Print() Prints the current image using javascript client code.
N/A ResumeRefresh() Resumes paused UI updates for this control.  Pauses and Refreshes are nestable.  The update happens when an equal number of ResumeRefresh and PauseRefresh calls are made.
Redo Redo() Re-does an undo.
Invoke RemoteInvoke(mthd : string, args : Array) Remotely invokes a method with the array of arguments.
Undo Undo() Reverts the image back to the previously cached image.
Update Update() Forces the current image to be cached and updates the viewable area.

atalaWebThumbnailViewer

Although this function is public, it is not intended for users to create WebThumbnailViewers on the client side directly.

Properties

Server Name JavaScript Syntax Description
AllowMultiSelect getAllowMultiSelect() : bool
 Gets a value that allows multiple thumbs to be selected using the shift or ctrl keys
BackColor getBackColor() : string
setBackColor(value: string)		 Gets or sets the background color of the Web server control.

Expected input: string representing a hex value or exact color name: '#ACFF00'
BorderColor getBorderColor() : string
setBorderColor(value: string)		 Gets or sets the border color of the Web server control.

Expected input: string representing a hex value or exact color name: '#ACFF00'
BorderStyle getBorderStyle() : string
setBorderStyle(value: string)		 Gets or sets the border style used for this Web server control.

Expected input: string representing Style: '1px solid #FF9900'
BorderWidth getBorderWidth() : int
setBorderWidth(value: int)		 Gets or sets the border width of the Web server control.
BrowserFormat getBrowserFormat : int Gets the format of the images created for browser output.
CachePath getCachePath() : string Gets the file path used for the file cache as specified in the Web.config file.
Caption getCaption() : string
setCaption(value: string)		 Gets or sets a string used for creating a caption under the Web server control.  HTML syntax is allowed.
Centered getCentered() : bool
setCentered(value: bool)		 Gets or sets a value indicating if the image is centered when the image is smaller than the Web server control.
Count getCount() : int Gets the number of thumbnails.
Columns getColumns() : int Gets the number of columns requested on the server side (0 means auto)
FlowDirection getFlowDirection() : int Gets the FlowDirection enumeration for how the thumbnails are laid out.
Font getFont() : string
setFont(value: string)		 Gets or sets the font name associated with the Web server control.

Expected input: string representing font name: 'verdana'
ForeColor getForeColor() : string
setForeColor(value: string)		 Gets or sets the foreground color (typically the color of the text) of the Web server control.

Expected input: string representing a hex value or exact color name: '#ACFF00'
Height getHeight() : int
setHeight(value: int)		 Gets or sets the height of the Web server control in pixels.
ImageDisplayOrder getImageDisplayOrder() : int Gets the order that tiles are loaded.
Layout getLayout() : int Gets the Layout set on the server.
PathToResources getPathToResources() : string Gets the virtual path to where the image, script, and cursor files are located. 
Rows getRows() : int Gets the number of rows requested on the server side (0 means auto)
ScrollPosition getScrollPosition() : atalaPoint
setScrollPosition		 Gets or sets the upper left image position in relation to the upper left corner of the Web server control.
ScrollBarVisibility getScrollBarVisibility() : bool Gets the visibility of the scrollbars.
SearchPattern getSearchPattern() : string
setSearchPattern(value: string)		 Gets or sets a semi-colon separated list of file search patterns for loading images from a directory.
SelectedIndex getSelectedIndex() : int Gets the index of the selected thumbnail.  If AllowMultiSelect is true, it has the index of the most recently selected thumb.
SelectedIndexes getSelectedIndexes(): Array Gets an array of integers which are the indexes selected in the thumbnail control.  If AllowMultiSelect is false, this array will have an length of 1, and contain the same index as SeletedIndex.  If AllowMultiSelect is true, it will have a list of all of the selected thumbs in the order they were selected.
ThumbPadding getThumbPadding() : int Gets the number of pixels around each thumbnail.
ThumbSize getThumbSize() : atalaSize Gets the size of each thumbnail.
ThumbSpacing getThumbSpacing() : int Gets the number of pixels between thumbs.
TitleBar getTitleBar() : string
setTitleBar(value: string)		 Gets or sets a string used for a creating a title bar above the Web server control.  HTML syntax is allowed.
Url getUrl() : string
 Gets the URL representing the current image.
ViewerID getViewerID() : string Gets the ID of the WebImageViewer associated with this control.
ViewPortSize getViewPortSize() : atalaSize Gets the size of the viewport minus the scrollbars.
Visibility getVisibility() : string
setVisibility(value: string)		 Gets or sets a value that indicates whether the Web server control is hidden or visible on the page.

Expected input: string that is either "hidden" or "visible"
Width getWidth() : int
setWidth(value: int)		 Gets or sets the width of the Web server control in pixels.

Events 

Server Name JavaScript Syntax Description
N/A BackColorChanged = function() Fired when the BackColor property changes.
N/A BorderColorChanged = function() Fired when the BorderColor property changes.
N/A BorderStyleChanged = function() Fired when the BorderStyle property changes.
N/A BorderWidthChanged = function() Fired when the BorderWidth property changes.
N/A CaptionChanged = function() Fired when the Caption property changes.
CenteredChanged CenteredChanged = function() Fired when the Centered property changes.
N/A CountChanged = function() Fired when the number of thumbnails changes.
N/A FontChanged = function() Fired when the Font property changes.
N/A ForeColorChanged = function() Fired when the ForeColor property changes.
ImagePositionChanged ScrollPositionChanged = function() Fired when the scroll position changes.
N/A SelectedIndexChanged = function Fired when the selected thumbnail changes.
N/A SizeChanged = function() Fired when the size changes.
N/A TitleBarChanged = function() Fired when the title bar changes.
N/A UrlChanged = function() Fired when the URL changes.
N/A VisibilityChanged = function() Fired when the Visibility property changes.

Methods 

Server Name JavaScript Syntax Description
OpenUrl OpenUrl(url: string, searchPattern: string) Opens a URL.  If the URL is an image, searchPattern should not be passed.  If the URL is a directory, pass a searchPattern to use to match files (Use "*.*" to match all files).

searchPattern expected input: string with semi-colon delimited search patterns (ex: "*.*", "*.tif;*.jpg". "*.gif")
N/A PauseRefresh() Pauses UI updates for this control until ResumeRefresh is called.  Pauses and Refreshes are nestable.  The update happens when an equal number of ResumeRefresh and PauseRefresh calls are made.
N/A ResumeRefresh() Resumes paused UI updates for this control.  Pauses and Refreshes are nestable.  The update happens when an equal number of ResumeRefresh and PauseRefresh calls are made.
SelectedIndex SelectThumb(index: int) Selects the thumbnail at the corresponding index (starting at 0)
N/A Update() Forces the control to update thumbnails.
N/A UpdateThumb(index: int) Forces the control to update the thumbnail at the corresponding index (starting at 0)


atalaWebAnnotationViewer

Although this function is public, it is not intended for users to create WebAnnotationViewers on the client side directly.

Properties

Server Name JavaScript Syntax Description
N/A ID() : string Gets the server control identifier generated by ASP.NET.
N/A Form() : object Gets the form object that the Web server control is on.
Annotations[index] getAnnotation(index : int): atalaAnnotation
getAnnotation(layerindex : int, index : int) : atalaAnnotation		 Gets the atalaAnnotation object at the given layer and item indexes, respectively.
Annotations getAnnotations() : Array Returns an array of annotations that are on every layer in this control.
N/A getAnnotationDataUrl() : string Returns the url used to store the cached data file.
AntialiasDisplay getAntialiasDisplay() : int
setAntialiasDisplay(value : int)		 Gets or sets the quality of the scaled image and annotations.

Expected input: int from 0-3, 0:None 1:ScaleToGray 2:ReductionOnly 3:Full
AutoZoom getAutoZoom() : int
setAutoZoom(value : int)		 Gets or sets a value indicating how the image should be zoomed as the control is resized or the image size changes.

Expected input: int from 0-5, 0:None 1:BestFit 2:BestFitShrinkOnly 3:FitToWidth 4:FitToHeight 5:FitToImage
BackColor getBackColor() : string
setBackColor(value : string)		 Gets or sets the background color of the Web server control.

Expected input: string representing a hex value or exact color name: '#ACFF00'
BorderColor getBorderColor() : string
setBorderColor(value : string)		 Gets or sets the border color of the Web server control.

Expected input: string representing a hex value or exact color name: '#ACFF00'
BorderStyle getBorderStyle() : string
setBorderStyle(value : string)		 Gets or sets the border style used for this Web server control.

Expected input: string representing Style: '1px solid #FF9900'
BorderWidth getBorderWidth() : int
setBorderWidth(value : int)		 Gets or sets the border width of the Web server control.
BrowserFormat getBrowserFormat() : int Gets the format of the images created for browser output.
CachePath getCachePath() : string Gets the file path used for the file cache as specified in the Web.config file.
Caption getCaption() : string
setCaption(value : string)		 Gets or sets a string used for creating a caption under the Web server control.  HTML syntax is allowed.
Centered getCentered() : bool
setCentered(value : bool)		 Gets or sets a value indicating if the image is centered when the image is smaller than the Web server control.
CurrentLayer getCurrentLayer() : atalaLayer
setCurrentLayer(value: atalaLayer)
setCurrentLayer(value: int)		 Gets or sets the current active layer in the control. This is primarily used to indicate which layer mouse events are handled on.
Font getFont() : string
setFont(value : string)		 Gets or sets the font name associated with the Web server control.

Expected input: string representing font name: 'verdana'
ForeColor getForeColor() : string
setForeColor(value : string)		 Gets or sets the foreground color (typically the color of the text) of the Web server control.

Expected input: string representing a hex value or exact color name: '#ACFF00'
Height getHeight() : int
setHeight(value : int)		 Gets or sets the height of the Web server control in pixels.
ImageDisplayOrder getImageDisplayOrder() : int Gets the order that tiles are loaded.
getInteractMode(): int
setInteractMode(value : int)		 Expected input: int from 0-2, 0:None 1:View 2:Edit
getLayers() : Array Returns an array of atalaLayer objects contained in this control.
ImagePosition getScrollPosition() : atalaPoint
setScrollPosition(value : atalaPoint)		 Gets or sets the upper left image position in relation to the upper left corner of the Web server control.
MouseTool getMouseToolLeft() : int
getMouseToolRight() : int
setMouseTool(left : int, right : int)		 Gets or sets the behavior of the mouse when interacting with the viewable area.
PathToResources getPathToResources() : string Gets the virtual path to where the image, script, and cursor files are located. 
N/A getReturnValue() : var Get the return value populated by the last RemoteInvoke.
ScrollBarVisibility getScrollBarVisibility() : int Gets the visibility of the scrollbars.
Selection getSelection() : Selection Gets the Selection object of this Web server control.
getSelectedAnnotations() : Array Returns an array of annotations that have the Selected property set to true.
TileSize getTileSize() : atalaSize Gets the height and width of the tiles in pixels.
TitleBar getTitleBar() : string
setTitleBar(value : string)		 Gets or sets a string used for a creating a title bar above the Web server control.  HTML syntax is allowed.
ViewPortSize getViewPortSize() : atalaSize Gets the size of the viewable area, excluding scroll bars.
Visibility getVisibility() : string
setVisibility(value : string)		 Gets or sets a value that indicates whether the Web server control is hidden or visible on the page.

Expected input: string that is either "hidden" or "visible"
Width getWidth() : int
setWidth(value : int)		 Gets or sets the width of the Web server control in pixels.
Zoom getZoom() : float
setZoom(value : float)		 Gets or sets the zoom level of the image in this Web server control.
ZoomInOutPercentage getZoomInOutPercentage() : int
setZoomInOutPercentage(value : int)		 Gets or sets the percentage used to increase or decrease the zoom level when the zoom MouseTools are used.

Events

Server Name JavaScript Syntax Description
N/A AntialiasDisplayChanged = function Fires when the AntialiasDisplay property has changed.
N/A AutoZoomChanged = function Fires when the AutoZoom property has changed.
N/A BackColorChanged  = function Fires when the BackColor property has changed.
N/A BorderColorChanged = function Fires when the BorderColor property has changed.
N/A BorderStyleChanged  = function Fires when the BorderStyle property has changed.
N/A BorderWidthChanged = function Fires when the BorderWidth property has changed.
N/A CaptionChanged = function Fires when the Caption property has changed.
CenteredChanged CenteredChanged = function Fires when the Centered property has changed.
N/A FontChanged = function Fires when the Font property has changed.
N/A ForeColorChanged = function Fires when the ForeColor property has changed.
ImageChanged ImageChanged = function Fires when the Image has changed.
N/A ImageSizeChanged = function Fires when the Image changes size.
N/A MouseToolChanged  = function Fires when the MouseTool property has changed.
RemoteInvoked RemoteInvoked = function Fires when the RemoteInvoke function is called.
ImagePositionChange ScrollPositionChanged = function Fires when the ScrollPosition has changed
SelectionChanged SelectionChanged = function Fires when the Selection has changed.
N/A SizeChanged = function Fires when the Size property has changed.
N/A TitleBarChanged = function Fires when the TitleBar property has changed.
N/A VisibilityChanged = function Fires when the Visibility property has changed.
N/A ZoomChanged = function Fires when the Zoom property has changed.
N/A ZoomInOutPercentageChanged = function Fires when the ZoomInOutPercentage property has changed.

Mouse Events

 Note: All of these events pertain to the underlying image only.
N/A Clicked = function Fires when the image is clicked.
N/A DoubleClicked = function Fires when the image is double clicked.
N/A MouseDown = function Fires when a mouse button is pressed down on the image.
N/A MouseDownLeft = function Fires when the left mouse button is pressed down
N/A MouseDownRight = function Fires when the right mouse button is pressed down.
N/A MouseMove = function Fires when the mouse cursor moves over the image.
N/A MouseOut = function Fires when the mouse cursor leaves the image area.
N/A MouseOver = function Fires when the mouse cursor enters the image area.
N/A MouseUp = function Fires when a mouse button is released on the image.
N/A RightClicked = function Fires when the image is right clicked.

Annotation Events

 Note: These events only pertain to the underlying atalaAnnotation objects.
N/A AnnotationChanged = function(e) Fires when an atalaAnnotation has changed.
N/A AnnotationChanging = function(e) Fires while an atalaAnnotation is changing.
N/A AnnotationClicked = function(e) Fires when an atalaAnnotation is clicked with the left mouse button..
N/A AnnotationCreated = function(e) Fires when an atalaAnnotation is created with the mouse.
N/A AnnotationDoubleClicked = function(e) Fires when an atalaAnnotation is double-clicked with the left mouse button..
N/A AnnotationMouseDown = function(e) Fires when a mouse button is pressed down on an atalaAnnotation.
N/A AnnotationMouseDownLeft = function(e) Fires when the left mouse button is pressed down on an atalaAnnotation.
N/A AnnotationMouseDownRight = function(e) Fires when the right mouse button is pressed down on an atalaAnnotation.
N/A AnnotationMouseMove = function(e) Fires when the mouse cursor moves over an atalaAnnotation.
N/A AnnotationMouseOut = function(e) Fires when the mouse cursor leaves an atalaAnnotation's area.
N/A AnnotationMouseOver = function(e) Fires when the mouse cursor enters an atalaAnnotation's area.
N/A AnnotationMouseUp = function(e) Fires when a mouse button is released on an atalaAnnotation.
N/A AnnotationRightClicked = function(e) Fires when an atalaAnnotation is right clicked.
N/A AnnotationsChanged = function(e) Fires when the z-order of atalaAnnotations has changed.

Layer Events

 Note: These events only pertain to the underlying atalaLayer objects.
N/A CurrentLayerChanged = function(e) Fires when the current atalaLayer object has been changed to a different atalaLayer.
N/A LayerChanged = function(e) Fires when an atalaLayer has changed.
N/A LayersChanged = function (e) Fires when the z-order of atalaLayers has changed.

Methods

Server Name JavaScript Syntax Description
OpenUrl OpenUrl(value : string) Opens an image into the WebImageViewer control from a URL or virtual path.
N/A PauseRefresh() Pauses UI updates for this control until ResumeRefresh is called.  Pauses and Refreshes are nestable.  The update happens when an equal number of ResumeRefresh and PauseRefresh calls are made.
Print Print() Prints the current image using javascript client code.
Redo Redo() Re-does an undo.
Invoke RemoteInvoke(mthd : string, args : Array) Remotely invokes a method with the array of arguments.
N/A ResumeRefresh() Resumes paused UI updates for this control.  Pauses and Refreshes are nestable.  The update happens when an equal number of ResumeRefresh and PauseRefresh calls are made.
Undo Undo() Reverts the image back to the previously cached image.
Update Update() Forces the current image to be cached and updates the viewable area.

Annotation Methods

  
Annotations.Layers.Add AddLayer(value: atalaLayer) : bool Adds the given layer to this control. Returns true on success, false otherwise.
Annotations.Layers.Clear Clear() Clears all annotations and all layers contained in this control.
N/A CountAnnotations() : int Returns the total count of all annotations on all layers in this control.
Annotations.Layers.Count CountLayers() : int Returns the count of all layers in this control.
N/A CreateAnnotation(value: string) : atalaAnnotation Creates and returns an atalaAnnotation from the object type string specified.  The string must represent an object type that inherits from Atalasoft.Annotate.AnnotationData on the server side.
N/A CreateLayer() : atalaLayer Creates and returns an atalaLayer object.
N/A DeleteAnnotation(value: int) : bool Deletes the atalaAnnotation at the given z-index from the CurrentLayer. Returns true on success, false otherwise.
N/A DeselectAll() Sets the Selected property of all annotations on all layers to false, and hides the grips for them all.
Annotations.CurrentLayer.Insert InsertAnnotation(value: atalaAnnotation, value: int) : bool Inserts the given atalaAnnotation into the CurrentLayer, at the given z-index, and automatically removes it from it's previous parent object (if any). Returns true on success, false otherwise.
LoadAnnotationDataUrl LoadAnnotations(value: string) Loads annotation data from a URL or virtual path..
N/A SelectAll() Sets the Selected property of all annotations on all layers to true, and shows the grips for them all.

atalaLayer

This object represents the client side JavaScript version of an Atalasoft.Annotations.LayerAnnotation object.

Properties

Server Name JavaScript Syntax Description
LayerAnnotation.Items getAnnotations() : Array Returns an array of annotations that are contained in this layer.
N/A getLayerIndex() : int Returns an integer that corresponds with the array index of this layer.
LayerAnnotation.Visible getVisibility() : string
setVisibility(value : string)		 Gets or sets a value that indicates whether the layer and child elements are hidden or visible in the control.

Expected input: string that is either "hidden" or "visible"

Methods

Server Name JavaScript Syntax Description
LayerAnnotation.Items.Add Add() : bool Adds the given atalaAnnotation to the annotation array at the top most z-order. Returns true if the add succeeded, false otherwise.
N/A Delete() : bool Deletes the atalaAnnotation at the given index, and disposes of DOM objects. Returns true on success, false on failure.
LayerAnnotation.Items.Insert Insert() : bool Inserts the given atalaAnnotation into the annotation array at the given index. Returns true if the insert succeeded, false otherwise.

Events

Server Name JavaScript Syntax Description
N/A Changed = function(e) Fires when the layer has changed.
N/A ItemsChanged = function(e) Fires when child annotations have changed z-order.

atalaAnnotation

This object represents the client side JavaScript version of an Atalasoft.Annotations.AnnotationUI object.

Properties

Server Name JavaScript Syntax Description
AnnotationUI.AspectRatio getAspectRatio() : float
setAspectRatio(value : float)		 Gets or sets a value that indicates the aspect ratio of this annotation.  A value of zero will not maintain any aspect ratio.
N/A setEditorHtml(value : string) Sets the innerHTML of the DOM object that is used to edit the annotation.
N/A getEditorObject() : object Gets the DOM object that is used to edit the annotation.
AnnotationUI.Height getHeight() : int
setHeight(value : int)		 Gets or sets the height of the annotation.
AnnotationUI.Movable getMovable() : bool
setMovable(value : bool)		 Gets or sets a value that indicates whether the annotation can be moved with the mouse.
getParent() : atalaLayer Gets the parent object of this annotation.
AnnotationUI.Position getPosition() : atalaPoint
setPosition(value : atalaPoint)		 Gets or sets the position of the annotation.
getRectangle() : atalaRectangle
setRectangle(value : atalaRectangle)		 Gets or sets the size and position of this annotation.
AnnotationUI.Resizable getResizable() : bool
setResizable(value : bool)		 Gets or sets a value that indicates whether the annotation can be resized with the mouse.
getSize() : atalaSize
setSize(value : atalaSize)		 Gets or sets the size of this annotation.
AnnotationUI.Selected getSelected() : bool
setSelected(value : bool)		 Gets or sets a value that indicates whether the annotation is selected.
AnnotationUI.Tooltip getToolTip() : string
setToolTip(value : string)		 Gets or sets the tooltip that is displayed when the mouse is moved over this annotation. 
getType() : string Gets the AnnotationData type for this annotation.
AnnotationUI.Visible getVisibility() : string
setVisibility(value : string)		 Gets or sets a value that indicates whether the annotation is hidden or visible.

Expected input: string that is either "hidden" or "visible"
AnnotationUI.Width getWidth() : int
setWidth(value : int)		 Gets or sets the width of the annotation.
N/A getZIndex() : int Gets the z-index of this annotation.

Methods

Server Name JavaScript Syntax Description
N/A HideEditor() Hides the editor for this annotation, if there is one.
N/A ShowEditor() Shows the editor for this annotation, if there is one.
N/A Synchronize() Synchronizes the annotation bounds with underlying data.  This should only be used if the data object is being changed directly.
N/A Update() Forces the annotation to get a new image from the server.

Events

Server Name JavaScript Syntax Description
N/A Changed = function(e) Fires when the annotation has finished being modified.
N/A Changing = function(e) Fires while the annotation is being modified through mouse movement.
N/A Clicked = function(e) Fires when the annotation is clicked.
N/A DoubleClicked = function(e) Fires when the annotation is double clicked.
N/A MouseDown = function(e) Fires when a mouse button is pressed down on the annotation.
N/A MouseDownLeft = function(e) Fires when the left mouse button is pressed down on the annotation.
N/A MouseDownRight = function(e) Fires when the right mouse button is pressed down on the annotation.
N/A MouseMove = function(e) Fires when the mouse cursor moves over the annotation.
N/A MouseOut = function(e) Fires when the mouse cursor leaves the annotation area.
N/A MouseOver = function(e) Fires when the mouse cursor enters the annotation area.
N/A MouseUp = function(e) Fires when a mouse button is released on the annotation.
N/A RightClicked = function(e) Fires when the annotation is right clicked.
N/A Selected = function(e) Fires when the annotation is selected.

Selection

The Selection object is internal to the atalaWebImageViewer class.

Properties

Server Name JavaScript Syntax Description
Animated getAnimated() : bool
setAnimated(value : bool)		 Gets or sets a value that indicates whether the selection will animate or not.
AutoPostBack getAutoPostBack() : bool
setAutoPostBack(value : bool)		 Gets or sets a value that indicates whether the selection will automatically post back when it has changed on the client side.
BackColor getBackColor() : string
setBackColor(value : string)		 Gets or sets a string that represents the color behind the dashed line.
ForeColor getForeColor() : string
setForeColor(value : string)		 Gets or sets a string that represents the color of the dashed line.
Height getHeight() : int
setHeight(value : int)		 Gets or sets the height of the selection.
Movable getMovable() : bool
setMovable(value : bool)		 Gets or sets a value that indicates whether the selection can be moved after it is drawn.
MultiColor getMultiColor() : bool
setMultiColor(value : bool)		 Gets or sets a value indicating if the selection is a solid or dashed line.
Position getPosition() : atalaPoint
setPosition(value : atalaPoint)		 Gets or sets the position of the selection.
Resizable getResizable() : bool
setResizable(value : bool)		 Gets or sets a value that indicating whether the selection can resize after it is drawn.
ShowGrips getShowGrips() : bool
setShowGrips(value : bool)		 Gets or sets a value that indicating whether the grips of the selection are visible.
ShowTooltip getShowTooltip() : bool
setShowTooltip(value : bool)		 Gets or sets a value that indicating whether the tooltip is drawn while the selection is drawn.
Size getSize() : atalaSize
setSize(value : atalaSize)		 Gets or sets the size of the selection.
Visibility getVisibility() : string
setVisibility(value : string)

Gets or sets a value indicating if the selection is hidden or visible.

Width getWidth() : int
setWidth(value : int)		 Gets or sets the width of the selection.

Events

Server Name JavaScript Syntax Description
N/A Changing = function Fires while the selection is being modified through mouse movement.
RubberBandChanged Changed = function Fires when the selection has finished being modified.

 

atalaPoint

This object mimics the System.Drawing.Point in syntax, for use on the client side.

Constructor

Server Name JavaScript Syntax Description
N/A atalaPoint(x : int, y : int) Creates a new atalaPoint given the coordinates.

Properties

Server Name JavaScript Syntax Description
N/A X = int Gets or sets the X coordinate for this atalaPoint.
N/A Y = int Gets or sets the Y coordinate for this atalaPoint.

 

atalaSize

This object mimics the System.Drawing.Size in syntax, for use on the client side.

Constructor

Server Name JavaScript Syntax Description
N/A atalaSize(width: int, height : int) Creates a new atalaSize given the height and width.

Properties

Server Name JavaScript Syntax Description
N/A Height = int Gets or sets the height of this atalaSize.
N/A Width = int Gets or sets the width of this atalaSize.

 

atalaRectangle

This object mimics  System.Drawing.Rectangle in syntax, for use on the client side.

Constructor

Server Name JavaScript Syntax Description
N/A atalaRectangle(x : int, y : int, width : int, height : int) Creates a new atalaRectangle given the height, width, and coordinates.

Properties

Server Name JavaScript Syntax Description
N/A X = int Gets or sets the X coordinate for this atalaRectangle.
N/A Y = int Gets or sets the Y coordinate for this atalaRectangle.
N/A Height = int Gets or sets the height of this atalaRectangle.
N/A Width = int Gets or sets the width of this atalaRectangle.

See Also