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

Remote Scripting Approach (AJAX Controls)

AJAX Controls of the Graphics Mill for .NET provides very convenient and powerful feature - possibility to invoke server code directly from the JavaScript. It enables you to run this code without page reload. Undoubtedly, it greatly reduces your efforts of creating interactive and user-friendly web interface.

The remote scripting mechanism of the Graphics Mill for .NET consists of two parts: server method and JavaScript code.

The server code you are going to invoke from the JavaScript should satisfy the following conditions:
- It should be a method of the container where the BitmapViewer is lying (a page or a parent control).
- It should be marked with the RemoteScriptingMethodAttribute attribute.
- It can have any number of arguments, but they can have only the following types:
  - System.String;
  - System.Int32;
  - System.Byte;
  - System.Single;
  - System.Double;
  - System.Boolean;
  - Aurigma.GraphicsMill.RgbColor, Aurigma.GraphicsMill.CmykColor, or Aurigma.GraphicsMill.GrayScaleColor;
  - One-dimensional array of any of these types except of color types.
At the client side you should use the members of the JavaScript class BitmapViewer, in particular:
- invokeRemoteMethod() - runs the remote method with specified name. Arguments are retrieved in the array. The first element of the array is passed into the first argument, the second element - into the second one, etc. Number of array items should be the same as a number of arguments.
- statusChanged - attaches and detaches the event handler which enables you to determine when the bitmap status changed (and therefore determine when the operation completes).
- status - the status of the bitmap. When it equals to "Ready", it means that the bitmap is ready to be used. In particular, you can use it in the statusChanged event handler to determine when the operation completes.
- returnValue - the value returned from the remote method (if any).
- exceptionDescription - if the remote method fails, it contains the exception description.

Now let's consider the following code sample. It demonstrates how to drop a shadow with adjustable offset and blur radius at the image. To do it, we add a server method AddShadow, mark it with the RemoteScriptingMethodAttribute attribute, and call it when the button Add Shadow is clicked. The offset and blur radius are selected from drop down lists and sent to server.

ASP.NET Visual Basic

<%@ Page Language="VB" AutoEventWireup="true"%>
<%@ Register TagPrefix="aur" Assembly="Aurigma.GraphicsMill.AjaxControls" 
    Namespace="Aurigma.GraphicsMill.AjaxControls" %>

<script type="text/VB" runat="server">

	Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        BitmapViewer1.Bitmap.Load(Server.MapPath("TestImages/cat.jpg"))
	    BitmapViewer1.ViewportAlignment = Aurigma.GraphicsMill.AjaxControls.ViewportAlignment.CenterCenter
	End Sub

     <Aurigma.GraphicsMill.AjaxControls.RemoteScriptingMethod> _
     Public Sub AddShadow(offset As Integer, radius As Integer)
	   'Convert to format with alpha channel
         If Not BitmapViewer1.Bitmap.HasAlpha Then
             BitmapViewer1.Bitmap.Channels.AddAlpha(1)
         End If

	   'Drop a shadow with preset blur redius and offset
	   BitmapViewer1.Bitmap.Transforms.Shadow(Aurigma.GraphicsMill.RgbColor.Black, offset, offset, radius, True)
        
         'Flatten alpha channel
         BitmapViewer1.Bitmap.Channels.DiscardAlpha(Aurigma.GraphicsMill.RgbColor.White)
     End Sub

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Remote Scripting</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server" ID="ScriptManager1" />

        <table cellpadding="10">
            <tr valign="top">
                <td>
                    <aur:BitmapViewer runat="server" ID="BitmapViewer1" ZoomMode="BestFit" 
                         ScrollBarsStyle="Auto"></aur:BitmapViewer>
                </td>    
                <td>
                    Shadow options:<br>
                    Offset:
                    <select id="SelectOffset">
                        <option value="5">5</option>
                        <option value="10" selected="selected">10</option>
                        <option value="15">15</option>
                    </select>
                    <br>
                    <br>
                    Blur radius:
                    <select id="SelectRadius">
                        <option value="10">10</option>
                        <option value="15" selected="selected">15</option>
                        <option value="20">20</option>
                    </select>
                    <br>
                    <br>
                    <input type="button" value="Add Shadow" onclick="Add_Shadow()" />

                </td>
            </tr>
        </table>
    </div>
    
    <script type="text/javascript">
    
        function Add_Shadow() {
            var selectOffset = document.getElementById("SelectOffset");            
            var offset = selectOffset.options[selectOffset.selectedIndex].value * 1;

            var selectRadius = document.getElementById("SelectRadius");            
            var radius = selectRadius.options[selectRadius.selectedIndex].value * 1;
            
            var bv = $find("BitmapViewer1");
            
            var params=new Array();
            params.push(offset);
            params.push(radius);
            
            bv.invokeRemoteMethod("AddShadow", params);
        }
        
    </script>

    </form>
</body>
</html>

ASP.NET C#

<%@ Page Language="C#" AutoEventWireup="true"%>
<%@ Register TagPrefix="aur" Assembly="Aurigma.GraphicsMill.AjaxControls" 
    Namespace="Aurigma.GraphicsMill.AjaxControls" %>

<script type="text/C#" runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {
        BitmapViewer1.Bitmap.Load(Server.MapPath("TestImages/cat.jpg"));
	    BitmapViewer1.ViewportAlignment = Aurigma.GraphicsMill.AjaxControls.ViewportAlignment.CenterCenter;
    }		

    [Aurigma.GraphicsMill.AjaxControls.RemoteScriptingMethodAttribute()]
    public void AddShadow(int offset, int radius)
    {
        //Convert to format with alpha channel
        if (!BitmapViewer1.Bitmap.HasAlpha)
        {
            BitmapViewer1.Bitmap.Channels.AddAlpha(1);
        }

        //Drop a shadow with preset blur redius and offset 
        BitmapViewer1.Bitmap.Transforms.Shadow(Aurigma.GraphicsMill.RgbColor.Black, offset, offset, radius, true);
        
        //Flatten alpha channel
        BitmapViewer1.Bitmap.Channels.DiscardAlpha(Aurigma.GraphicsMill.RgbColor.White);
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Remote Scripting</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server" ID="ScriptManager1" />

        <table cellpadding="10">
            <tr valign="top">
                <td>
                    <aur:BitmapViewer runat="server" ID="BitmapViewer1" ZoomMode="BestFit" 
                         ScrollBarsStyle="Auto"></aur:BitmapViewer>
                </td>    
                <td>
                    Shadow options:<br>
                    Offset:
                    <select id="SelectOffset">
                        <option value="5">5</option>
                        <option value="10" selected="selected">10</option>
                        <option value="15">15</option>
                    </select>
                    <br>
                    <br>
                    Blur radius:
                    <select id="SelectRadius">
                        <option value="10">10</option>
                        <option value="15" selected="selected">15</option>
                        <option value="20">20</option>
                    </select>
                    <br>
                    <br>
                    <input type="button" value="Add Shadow" onclick="Add_Shadow()" />

                </td>
            </tr>
        </table>
    </div>
    
    <script type="text/javascript">
    
        function Add_Shadow() {
            var selectOffset = document.getElementById("SelectOffset");            
            var offset = selectOffset.options[selectOffset.selectedIndex].value * 1;

            var selectRadius = document.getElementById("SelectRadius");            
            var radius = selectRadius.options[selectRadius.selectedIndex].value * 1;
            
            var bv = $find("BitmapViewer1");
            
            var params=new Array();
            params.push(offset);
            params.push(radius);
            
            bv.invokeRemoteMethod("AddShadow", params);
        }
        
    </script>

    </form>
</body>
</html>

You see, Graphics Mill for .NET provides elegant and easy-to-use powerful remote scripting mechanism. You can use it to run almost any server code. However in the conclusion we would like to warn you to write server code carefully. We highly recommend you not to put a RemoteScriptingMethodAttribute attribute at the methods which are not actually necessary to be run. Also, if the performance of the method depends on the arguments, it is strongly recommended to check such argument to avoid malicious attacks. For example, if you create new bitmap in this method and pass it dimensions from the JavaScript, you must check them and do not run the method if the dimensions are too wild. You can find more guidelines for creating the reliable server code in the topic Scalability and Reliability of Web Applications.