---
title: "Adding Red-Eye Removal Functionality to AJAX Applications"
canonical: https://www.graphicsmill.com/docs/gm5/AddingRedEyeRemovalFunctionalitytoAjaxApplications.htm
product: "Graphics Mill 5.5 for .NET"
---
This documentation is for the old version. [Go to the latest Graphics Mill docs](https://www.graphicsmill.com/docs/gm/)
# Adding Red-Eye Removal Functionality to AJAX Applications
Red-Eye Removal cannot work in 100% automatic mode (i.e. without any user interaction). That's why it is necessary to design convenient user interface. This topic discusses how to organize the user interface for red-eye removal functionality in Web application.
- Semiautomatic Red-Eye Removal
- Manual Red-Eye Removal
- Wizard-like Red-Eye Removal
## Semiautomatic Red-Eye Removal
In semiautomatic mode it is necessary to provide ability to select red-eyed face. Ideal solution for that is to use the [Aurigma.GraphicsMill.AjaxControls.RectangleRubberband](https://www.graphicsmill.com/docs/gm5/T_Aurigma_GraphicsMill_AjaxControls_RectangleRubberband.htm.md) class in a combination with the [Aurigma.GraphicsMill.AjaxControls.BitmapViewer](https://www.graphicsmill.com/docs/gm5/T_Aurigma_GraphicsMill_AjaxControls_BitmapViewer.htm.md). See the [Using Navigators and Rubberbands (AJAX Controls)](https://www.graphicsmill.com/docs/gm5/AjaxControlsUsingNavigatorsandRubberbands.htm.md) topic for more information about rubberbands.
After the user selects a face, they need to click some button will run the server-side code which will initiate semiautomatic red-eye removal process. It can be done in two ways: using roundtrip and remote scripting approach.
### Roundtrip Approach
In the simplest case it can be done via common ASP.NET server button control which uses roundtrip approach:
```
<%@ Page Language="vb" AutoEventWireup="True" %>
<%@ Register Assembly="Aurigma.GraphicsMill.AjaxControls" Namespace="Aurigma.GraphicsMill.AjaxControls"TagPrefix="aur" %>
Red Eye Removal
```
```csharp
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Register Assembly="Aurigma.GraphicsMill.AjaxControls" Namespace="Aurigma.GraphicsMill.AjaxControls"TagPrefix="aur" %>
Red Eye Removal
```
### Remote Scripting Approach
To avoid roundtrip, we can use [remote scripting](https://www.graphicsmill.com/docs/gm5/AjaxControlsRemoteScripting.htm.md) features of Graphics Mill for .NET:
```
<%@ Page Language="vb" AutoEventWireup="True" %>
<%@ Register Assembly="Aurigma.GraphicsMill.AjaxControls" Namespace="Aurigma.GraphicsMill.AjaxControls"TagPrefix="aur" %>
Red Eye Removal
```
```csharp
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Register Assembly="Aurigma.GraphicsMill.AjaxControls" Namespace="Aurigma.GraphicsMill.AjaxControls"TagPrefix="aur" %>
Red Eye Removal
```
The semiautomatic red-eye removal code is discussed more detailed in the [Semiautomatic Red-Eye Removal](https://www.graphicsmill.com/docs/gm5/SemiautomaticRedEyeRemoval.htm.md) topic.
## Manual Red-Eye Removal
When red-eye removal is made in manual mode, it is required not only select a face, but also pick eyes with a mouse. Most convenient both from developer and user point of view would be to handle the [WorkspaceClick](https://www.graphicsmill.com/docs/gm5/E_Aurigma_GraphicsMill_AjaxControls_BaseViewer_WorkspaceClick.htm.md) event of the BitmapViewer. You also use either roundtrip or remote scripting approach.
### Roundtrip Approach
To be able to use server events with roundtrip, it is necessary to enable automatic postback generation on the WorkspaceClick event. It can be done by setting [PostBackOnWorkspaceClick](https://www.graphicsmill.com/docs/gm5/P_Aurigma_GraphicsMill_AjaxControls_ViewerClientSideOptions_PostBackOnWorkspaceClick.htm.md) to `true` value.
**Note**
It is not recommended to use the [AutoPostBack](https://www.graphicsmill.com/docs/gm5/P_Aurigma_GraphicsMill_AjaxControls_BaseViewer_AutoPostBack.htm.md) instead of PostBackOnWorkspaceClick. The AutoPostBack will cause automatic postback for each event raised by the control, including scroll, bitmap change, etc. This way you may suffer from a big number of unwanted roundtrips. In the same time the PostBackOnWorkspaceClick will cause postback only for the WorkspaceClick event.
Here is code which utilizes this approach:
```
<%@ Page Language="vb" AutoEventWireup="True" %>
<%@ Register Assembly="Aurigma.GraphicsMill.AjaxControls" Namespace="Aurigma.GraphicsMill.AjaxControls"TagPrefix="aur" %>
Red Eye Removal
```
```csharp
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Register Assembly="Aurigma.GraphicsMill.AjaxControls" Namespace="Aurigma.GraphicsMill.AjaxControls"TagPrefix="aur" %>
Red Eye Removal
```
### Remote Scripting Approach
If you prefer AJAX technique and want to avoid roundtrips at all, you should handle the [workspaceClick](https://www.graphicsmill.com/docs/gm5/E_J_GraphicsMill_BaseViewer_workspaceClick.htm.md) client-side event and invoke manual red-eye removal process from it:
```
<%@ Page Language="vb" AutoEventWireup="True" %>
<%@ Register Assembly="Aurigma.GraphicsMill.AjaxControls" Namespace="Aurigma.GraphicsMill.AjaxControls"TagPrefix="aur" %>
Red Eye Removal
```
```csharp
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Register Assembly="Aurigma.GraphicsMill.AjaxControls" Namespace="Aurigma.GraphicsMill.AjaxControls"TagPrefix="aur" %>
Red Eye Removal
```
The manual red-eye effect removal code is discussed more detailed in [Manual Red-Eye Removal](https://www.graphicsmill.com/docs/gm5/ManualRedEyeRemoval.htm.md) topic.
However you may find it awkward to have the user to select a face for manual mode. To increase usability, it is highly recommended to organize the user interface in such way to reuse the facial region selected for semiautomatic mode. Most natural way to do it is to use wizard-like interface.
## Wizard-based Red-Eye Removal
Wizard-like user interface means that it is splitted on several screens and the user can switch between them using **Next**/**Previous** buttons. Let's see how we can organize red-eye removal wizard on example of demo web application. You can find it in the Web Demos Bundle, located at Aurigma Forums:
*http://forums.aurigma.com/yaf\_postst3045\_Web-Demos-Bundle-photo-cropping-TIFF-viewer-red-eye-removal-and-business-card-editor.aspx*
This wizard contains three steps. Let's examine each of them.
### Step 1
On the first step the user selects a face. Also, they get back to this step when they complete red-eye removal to remove red-eye effect on another face (if available).
For clarity, each element of the user interface is labeled with a brief comment. Since accuracy of face selection matters, an image demonstrating how to select face properly is placed there too.
The first step looks as follows:
### Step 2
While switching between step 1 and 2, semiautomatic red-eye removal algorithm is applied. On this step the user should specify whether algorithm worked as expected or not. To make it easier to see the result, the image is zoomed to enlarge the selected face to size of the control.
If the result is fine, the user clicks **Yes** button. After that they get returned back to the step 1 where they can select one more face to fix.
If the algorithm mistakes, the user clicks **No**. In this case they are moved to the next step where manual red-eye removal can be applied.
The second steps looks as follows:
### Step 3
On the third step the user can remove red-eye effect manually. To do that they should click red-eyed areas. To make it easier to click the eye accurately, the face is also zoomed here.
If the algorithm "fixed" the image incorrectly (e.g. if the user clicked outside of an eye or if the algorithm captured too many colors), the user can revert to the previous state by clicking **Undo** button. They can also use **Redo** button to re-apply this change.
When the user is satisfied with the result, they click the **Finish** button which leads them to the step 1. They can repeat these operations for another face.
The third step looks as follows:
## See Also
### Manual
- [Semiautomatic Red-Eye Removal](https://www.graphicsmill.com/docs/gm5/SemiautomaticRedEyeRemoval.htm.md)
- [Manual Red-Eye Removal](https://www.graphicsmill.com/docs/gm5/ManualRedEyeRemoval.htm.md)
- [Remote Scripting Approach (AJAX Controls)](https://www.graphicsmill.com/docs/gm5/AjaxControlsRemoteScripting.htm.md)
- [Client-Side Control Scripting in AJAX Controls](https://www.graphicsmill.com/docs/gm5/AjaxControlsClientSideScripting.htm.md)
- [Using Navigators and Rubberbands (AJAX Controls)](https://www.graphicsmill.com/docs/gm5/AjaxControlsUsingNavigatorsandRubberbands.htm.md)