This documentation is for the old version. Go to the latest Graphics Mill docs

Client-Side Object Model (Web Controls)

The classes from Aurigma.GraphicsMill.WebControls provide not only server-side properties, methods, and events. They are inseparably linked with the appropriate JavaScript code which allows to work with these controls on the client side (i.e. without having to run any code on the server). This way most members of these classes are doubled in JavaScript.

We have followed the following convensions:

  • All members are called in the JavaScript-style camel notation, i.e. all the words in the member name are capitalized except of the first one: it is written in the lowercase, e.g. someClassMember().
  • The name of the methods based on the server properties are constructed in the following way:
    • The property reader method has the word get prepended to the appropriate property name, i.e. getPropertyName . For example, getZoom.
    • The property writer method has the word set prepended to the appropriate property name, i.e. setPropertyName . For example, setZoom.
  • The events are represented in the following ways:
    • The method that attaches an event handler has the word add prepended to the appropriate event name, i.e. addEventName . For example, addBitmapChanged.
    • The method that detaches an event handler has the word remove prepended to the appropriate event name, i.e. removeEventName . For example, removeBitmapChanged.
  • Members that accept enumeration as an argument actually accept strings. This string should contain a name of the enumeration member without a namespace prefix. E.g. setZoomMode method can accept such strings as "None", "BestFit", "FitToWidth", and other member names of the ZoomMode enumeration.
  • The members that have some appearance parameters such as colors, line styles, etc. are using HTML-compatible syntax. E.g. colors can be named (red, green, black) or specified in hex in HTML syntax (#FF0000, #00FF00, #000000).

When you need to refer the control instance in the JavaScript, use the ClientID of this control (using the ClientID property). Use <%=control.ClientID%> syntax for that.

Simple code samples demonstrating how to use Graphics Mill for .NET web controls in the JavaScript are shown below.

Syntax Convetion

Properties

JavaScript 
getMyProperty()
setMyProperty(value)

Here is a simple JavaScript which uses setZoom property to change the bitmap viewer zoom:

JavaScript 
<script language="javascript">
function windowOnLoad(){
  var bv=document.getElementById("<%=BitmapViewer1.ClientID%>");
  bv.setZoom(0.5);
}

window.onload=windowOnLoad;
</script>

Methods

JavaScript 
myMethod()

This simple JavaScript demonstrates how to use method erase to clear the selection from the control.

JavaScript 
<script language="javascript"> 
function buttonClick(){
  var r=document.getElementById("<%=RectangleRubberband1.ClientID%>");
  r.erase();  
}
</script>

Events

JavaScript 
addMyEvent(
  handler : Function, 
  destination :  Object
 )
removeMyEvent(
  handler : Function, 
  destination : Object
 )

The code below demonstrates how to add the client-side event handler for the Zoomed event. In this event handler we display an actual zoom value in the drop-down list.

JavaScript 
<script language="javascript">
function bitmapViewer_Zoomed(){
  document.getElementById("inputZoom").value = Math.round(bitmapViewer1.getZoom()*100) + "%";
}

function windowOnLoad(){
  var bv=document.getElementById("<%=BitmapViewer1.ClientID%>");
  bitmapViewer1.addZoomed(bitmapViewer_Zoomed, this);  
}

window.onload=windowOnLoad;
</script>

Object Model

Web Controls Classes

Auxiliary Classes

Web Controls Classes

BitmapViewer Class

Properties

Member Name Client-Side Syntax Description
AutoPostBack
JavaScript 
getAutoPostBack() : Boolean
setAutoPostBack(value: Boolean)
 Gets/sets a value indicating whether a postback to the server occurs automatically when the user zooms or scrolls the bitmap.
Bitmap
JavaScript 
bitmap : Bitmap

Gets/sets a bitmap which is displayed on the control.
N/A
JavaScript 
getExceptionName() : String

When a remote scripting method fails, this method returns the exception name. If the method succeeded, an empty string is returned.

To determine when remote method completes, use StatusChanged event (see addStatusChanged/removeStatusChanged methods below).
N/A
JavaScript 
getExceptionDescription() : String

When a remote scripting method fails, this method returns the exception description. If the method succeeded, empty string returned.

To determine when the remote method is completed, use StatusChanged event (see addStatusChanged/removeStatusChanged methods below).
MaxZoom
JavaScript 
getMaxZoom() : Number

Gets/sets the maximum allowed zoom value.
MinZoom
JavaScript 
getMinZoom() : Number

Gets/sets the minimum allowed zoom value.
Navigator
JavaScript 
getNavigator() : String
setNavigator(value : String)

Gets/sets the navigator control ID.
N/A
JavaScript 
getReturnValue() : String
 When a remote scripting method is completed, this method returns its return value. To determine when the remote method is completed, use StatusChanged event (see addStatusChanged/removeStatusChanged methods below).
Rubberband
JavaScript 
getRubberband() : String
setRubberband(value : String)

Gets/sets the rubberband control ID.
ScrollBarsStyle
JavaScript 
getScrollBarsStyle() : String

Gets/sets a value that specifies when to display the scroll bars.
ScrollBarWidth
JavaScript 
getScrollBarWidth() : Number
 Gets a value that specifies width of a scroll bar .
ScrollingPosition
JavaScript 
getScrollingPosition() : Point
setScrollingPosition(value : Point)

Gets/sets a position of the scroll bars.
N/A
JavaScript 
getStatus() : String

Gets a current bitmap status. It can be one of the following values:

  • "Ready". The remote scripting method has been completed (or was not run yet), and you can freely get return value or exception details.
  • "Busy". The remote scripting method is running (the bitmap state is changing).
  • "Refresh". The viewport updates a portion of image it displays (e.g. when user zoomed or scrolled it). The bitmap state is not changed while status is "Refresh".
Zoom
JavaScript 
getZoom() : Number
setZoom(value : Number)
 Gets/sets the current zoom value.
ZoomMode
JavaScript 
getZoomMode() : String
setZoomMode(value : String)

Gets/sets the zooming behavior of the control (automatic or manual).
ZoomQuality
JavaScript 
getZoomQuality() : Number

Gets/sets the value that specifies a zoom quality.

Methods

Member Name Client-Side Syntax Description
N/A
JavaScript 
bitmapToControlPoint(point : Point)
 Converts X and Y point values from the bitmap-related coordinates to the control-related ones.
N/A
JavaScript 
controlToBitmapPoint(point : Point)
 Converts X and Y point values from the control-related coordinates to the bitmap-related ones.
N/A
JavaScript 
invokeRemoteMethod(
  name : String, 
  args : Object
) : Boolean
 Runs the specified remote method on the server. Read the Remote Scripting Approach topic for more details.
N/A
JavaScript 
delayedRefresh()
 Indicates that the viewport needs to be refreshed. The actual refreshing is applied when the user does not update the viewport state (such as scroll position, zoom value) in one second.
N/A
JavaScript 
refresh()
 Refreshes the viewport immediately.

Events

Member Name Client-Side Syntax Description
Click
JavaScript 
addClick(
  handler : Function,
  destination : Object
)
removeClick(
  handler : Function,
  destination : Object
)

Fires when the image displayed in the control is clicked.
BitmapChanged
JavaScript 
addBitmapChanged(
  handler : Function,
  destination : Object
)
removeBitmapChanged(
  handler : Function,
  destination : Object
)

Fires when the Bitmap property is changed or this bitmap is updated.
Scrolled
JavaScript 
addScrolled(
  handler : Function, 
  destination :  Object
 )
removeScrolled(
  handler : Function, 
  destination : Object
 )

Fires when some scroll bar was moved.
N/A
JavaScript 
addStatusChanged(
  handler : Function,
  destination : Object
)
removeStatusChanged(
  handler : Function,
  destination : Object
)
 Fires when bitmap status (see getStatus method) is updated. Using this method you can determine when the remote scripting method was stopped. To do it, this event handler should analyze the value returned with the getStatus method. If it is "Ready", the remote method has been completed. If it is "Busy", the remote method has been started. If it is "Refresh", the bitmap is not modified, but the viewport is downloading a portion of the image (e.g. when user zoomed or scrolled the image).
Zoomed
JavaScript 
addZoomed(
  handler : Function,
  destination : Object
)
removeZoomed(
  handler : Function,
  destination : Object
)

Fires when the bitmap is zoomed in this BitmapViewer control.

PanNavigator

Methods

Member Name Client-Side Syntax Description
Connect(BitmapViewer)
JavaScript 
connect(bitmapViewerId : String)
 Connects this navigator to the BitmapViewer control.
Connect(BitmapViewer)
JavaScript 
disconnect(bitmapViewerId : String)

Disconnects this navigator from the BitmapViewer control.

ZoomInNavigator

Methods

Server-Side Member Name Client-Side Member Name Description
Connect(BitmapViewer)
JavaScript 
connect(bitmapViewerId : String)
 Connects this navigator to the BitmapViewer control.
Connect(BitmapViewer)
JavaScript 
disconnect(bitmapViewerId : String)

Disconnects this navigator from the BitmapViewer control.

ZoomOutNavigator

Methods

Server-Side Member Name Client-Side Member Name Description
Connect(BitmapViewer)
JavaScript 
connect(bitmapViewerId : String)
 Connects this navigator to the BitmapViewer control.
Connect(BitmapViewer)
JavaScript 
disconnect(bitmapViewerId : String)

Disconnects this navigator from the BitmapViewer control.

ZoomRectangleResponsible

Properties

Server-Side Member Name Client-Side Member Name Description
OutlineColor
JavaScript 
getOutlineColor() : String
setOutlineColor(value : String)

Gets/sets the color of the rectangle outline.
OutlineStyle
JavaScript 
getOutlineStyle() : String
setOutlineStyle(value : String)
 Gets/sets the rectangle outline pen style (solid, dashed, etc).
OutlineWidth
JavaScript 
getOutlineWidth() : Number
setOutlineWidth(value : Number)
 Gets/sets the rectangle outline width.

Methods

Member Name Client-Side Syntax Description
Connect(BitmapViewer)
JavaScript 
connect(bitmapViewerId : String)
 Connects this navigator to the BitmapViewer control.
Connect(BitmapViewer)
JavaScript 
disconnect(bitmapViewerId : String)

Disconnects this navigator from the BitmapViewer control.

RectangleRubberband

Properties

Member Name Client-Side Syntax Description
AutoPostBack
JavaScript 
getAutoPostBack() : Boolean
setAutoPostBack(value : Boolean)

Gets/sets a value indicating whether a postback to the server automatically occurs when the user stops modifying the rectangle.
Erasable
JavaScript 
getErasable() : Boolean
setErasable(value : Boolean)
 Gets/sets a value that specifies whether the rubberband can be erased (discarded) when the user clicks by a mouse out of this rectangle.
GripSize
JavaScript 
getGripSize() : Number
setGripSize(value : Number)
 Gets/sets the grip size.
GripsVisible
JavaScript 
getGripsVisible() : Boolean
setGripsVisible(value : Boolean)
 Gets/sets a value which shows or hides the grips on the rectangle.
IsEmpty
JavaScript 
getIsEmpty() : Boolean
 Gets a value that specifies whether the rubberband rectangle is empty (and therefore whether it is visible).
MaskVisible
JavaScript 
getMaskVisible() : Boolean
setMaskVisible(value : Boolean)

Gets/sets a value which specifies whether to display a mask out of the rectangle.
Movable
JavaScript 
getMovable() : Boolean
setMovable(value : Boolean)

Gets/sets a value which specifies whether the rubberband rectangle can be dragged on the BitmapViewer control.
OutlineColor
JavaScript 
getOutlineColor() : String
setOutlineColor(value : String)

Gets/sets the color of the rectangle outline.
OutlineStyle
JavaScript 
getOutlineStyle() : String
setOutlineStyle(value : String)

Gets/sets the rectangle outline pen style (solid, dashed, etc).
OutlineWidth
JavaScript 
getOutlineWidth() : Number
setOutlineWidth(value : Number)
 Gets/sets the rectangle outline width.
Ratio
JavaScript 
getRatio() : Number
setRatio(value : Number)

Gets/sets the aspect ratio of the rubberband rectangle which should be preserved when ResizeMode is Proportional.
Rectangle
JavaScript 
getRectangle() : Rectangle
setRectangle(value : Rectangle)

Gets/sets a rubberband rectangle.
ResizeMode
JavaScript 
getResizeMode()
setResizeMode(value)
 Gets/sets an allowed resize mode for the rubberband rectangle.

Methods

Member Name Client-Side Syntax Description
Connect(BitmapViewer)
JavaScript 
connect(bitmapViewerId : String)
 Connects this rubberband to the BitmapViewer control.
Connect(BitmapViewer)
JavaScript 
disconnect(bitmapViewerId : String)

Disconnects this rubberband from the BitmapViewer control.
Erase()
JavaScript 
erase()
 Erases (discards) the rubberband from the control.

Events

Member Name Client-Side Syntax Description
RectangleChanged
JavaScript 
addRectangleChanged(
  handler : Function, 
  destination : Object
 )
removeRectangleChanged(
  handler : Function,
  destination : Object
)

Fires when the rubberband rectangle is modified (mouse button is released).
N/A
JavaScript 
addRectangleChanging(
  handler : Function,
  destination : Object
)
removeRectangleChanging(
  handler : Function,
  destination : Object
 )

Fires during the rubberband rectangle modification (before the mouse button is released).

Auxiliary Classed

Bitmap Class

Properties

Member Name Client-Side Syntax Description
BitsPerPixel
JavaScript 
getBitsPerPixel() : Number

Returns the number of bits per pixel.
ColorSpace
JavaScript 
getColorSpace() : String

Indicates color space of the current bitmap.
HasAlpha
JavaScript 
getHasAlpha() : Boolean

Specifies whether current pixel format supports alpha channel (information about opacity of pixels).
Height
JavaScript 
getHeight() : Number

Returns current bitmap height in pixels.
IsCmyk
JavaScript 
getIsCmyk() : Boolean

Indicates if color space of current bitmap is CMYK.
IsEmpty
JavaScript 
getIsEmpty() : Boolean

Indicates if bitmap is empty (no bitmap data loaded).
IsExtended
JavaScript 
getIsExtended() : Boolean

Indicates if current pixel format is extended (i.e. 16 bits per channel).
IsGrayScale
JavaScript 
getIsGrayScale() : Boolean

Indicates if color space of current bitmap is grayscale.
IsIndexed
JavaScript 
getIsIndexed() : Boolean

Indicates if current bitmap is indexed (palette-based).
IsRgb
JavaScript 
getIsRgb() : Boolean

Indicates if color space of current bitmap is RGB.
PixelFormat
JavaScript 
getPixelFormat() : Number

Returns pixel format of the current bitmap.
Width
JavaScript 
getWidth() : Number

Returns current bitmap width in pixels.

Point Class

Properties

Member Name Client-Side Syntax Description
X
JavaScript 
x : Number
 Gets or sets the x-coordinate of this Point.
Y
JavaScript 
y : Number
 Gets or sets the y-coordinate of this Point.

Rectangle Class

Properties

Member Name Client-Side Syntax Description
Height
JavaScript 
height : Number
 Gets or sets the height of this Rectangle structure.
Left
JavaScript 
left : Number

Gets or sets the x-coordinate of the left edge of this Rectangle .
Top
JavaScript 
top : Number

Gets or sets the y-coordinate of the top edge of this Rectangle .
Width
JavaScript 
width : Number
 Gets or sets the width of this Rectangle structure.

Methods

Member Name Client-Side Syntax Description
N/A
JavaScript 
clone() : Rectangle

Creates an exact copy of this Rectangle object.

RgbColor Class

Properties

Member Name Client-Side Syntax Description
A
JavaScript 
a : Number

Returns 8-bit alpha channel value (color opacity).
B
JavaScript 
b : Number

Returns 8-bit blue channel value.
G
JavaScript 
g : Number

Returns 8-bit green channel value.
R
JavaScript 
r : Number

Returns 8-bit red channel value.

CmykColor Class

Properties

Member Name Client-Side Syntax Description
A
JavaScript 
a : Number

Returns 8-bit alpha channel value (color opacity).
C
JavaScript 
c : Number

Returns 8-bit cyan channel value.
K
JavaScript 
k : Number

Returns 8-bit black channel value.
M
JavaScript 
m : Number

Returns 8-bit magenta channel value.
Y
JavaScript 
y : Number

Returns 8-bit yellow channel value.

GrayScaleColor Class

Properties

Member Name Client-Side Syntax Description
A
JavaScript 
a : Number

Returns 8-bit alpha channel value (color opacity).
Gray
JavaScript 
gray : Number

Returns 8-bit luminosity channel value.