Use and handling of the selection area

Before starting, complete the your first DocuVieware ASP.NET Web Forms page and client/server coming and going with custom actions guides.

This guide shows how to work with selection area (also known as region of interest, or ROI) in a sample ASP.NET Web Forms application that applies a negative filter on a particular area.

Requirements — .NET Framework 4.6 or above

Note — Screenshots were taken using Visual Studio 2015 and GdPicture.NET 14. They may differ from the current release.

In this guide, you’ll add three buttons above the DocuVieware control: one outputs the coordinates of the selection area (if any), another clears it, and the last button applies a negative filter on the selected area.

Displaying the ROI coordinates

This is done client-side. Add a button that calls a JavaScript function on click:

HTML
<button onclick="getROICoordinates(); return false;">Display ROI coordinates</button>
JavaScript
function getROICoordinates() {
 var coords = DocuViewareAPI.GetSelectionAreaCoordinates("DocuVieware1");
 if ((coords.width == 0) && (coords.height == 0)) {
 alert("No selection area set.");
 } else {
 alert("Selection area coordinates (in inches):\nLeft: " + coords.left + "\nTop: " + coords.top + "\nWidth: " + coords.width + "\nHeight: " + coords.height);
 }
}

Clearing the ROI

It’s often useful to have a button to clear the ROI (reset the selection area). This is done the same way: by using a button that calls a JavaScript function on click.

HTML
<button onclick="clearROI(); return false;">Clear ROI</button>
JavaScript
function clearROI() {
 DocuViewareAPI.ClearSelectionArea("DocuVieware1");
}

Applying the negative filter on the ROI

Now use a CustomAction to apply the Negative filter on the selected area. Send the ROI coordinates server-side, set a ROI on the actual image, and apply the filter on it.

HTML
<button onclick="Negative(); return false;">Apply Negative filter on the ROI</button>
JavaScript
function Negative() {
 var coords = DocuViewareAPI.GetSelectionAreaCoordinates("DocuVieware1");
 if ((coords.width != 0) && (coords.height != 0)) {
 DocuViewareAPI.PostCustomServerAction("DocuVieware1", false, "Negative", coords);
 }
}

Server-side

Now handle the custom action server-side. For more information, refer to the client/server coming and going with custom actions guide.

Create a class to retrieve the parameters (the ROI coordinates):

C#
public class roi
{
 public double left { get; set; }
 public double top { get; set; }
 public double width { get; set; }
 public double height { get; set; }
}

Because you’re handling a custom action that’s triggered client-side, handle it in the Global.asax.cs file, in Application_Start and the dispatcher. For more information, refer to the client/server coming and going with custom actions guide.

C#
protected void Application_Start(object sender, EventArgs e)
{
 DocuViewareLicensing.RegisterKEY("XXXX"); //Unlocking DocuVieware
 DocuViewareEventsHandler.CustomAction += CustomActionsHandler;
}
private void CustomActionsHandler(object sender, CustomActionEventArgs e)
{
 if ((e.actionName == "Negative") && (e.args != null))
 {
 Default.handleCustomAction(e);
 }
}

Then implement the custom action handler itself in the Default.aspx.cs file.

To retrieve the image object, set the ROI on it based on the coordinates received from the client, and apply the filter on it. Below is the corresponding source code:

C#
private static void handleCustomAction(CustomActionEventArgs e)
{
 using (GdPictureImaging gdPictureImaging = new GdPictureImaging())
 {
 int imageId;
 GdPictureStatus status = e.docuVieware.GetNativeImage(out imageId);
 if (status == GdPictureStatus.OK)
 {
 status = GdPictureStatus.GenericError;
 roi roi = (roi)JsonConvert.DeserializeObject<roi>(e.args.ToString());
 gdPictureImaging.SetROI((int)Math.Round(roi.left * gdPictureImaging.GetHorizontalResolution(imageId), 0),
 (int)Math.Round(roi.top * gdPictureImaging.GetVerticalResolution(imageId), 0),
 (int)Math.Round(roi.width * gdPictureImaging.GetHorizontalResolution(imageId), 0),
 (int)Math.Round(roi.height * gdPictureImaging.GetVerticalResolution(imageId), 0));
 status = gdPictureImaging.FxNegative(imageId);
 if (status != GdPictureStatus.OK)
 {
 e.message = SendErrorMessage("Error during Negative filter: " + status.ToString());
 }
 if (status == GdPictureStatus.OK)
 {
 status = e.docuVieware.RedrawPage();
 if (status == GdPictureStatus.OK)
 {
 e.message = new DocuViewareMessage("Filter successfully applied.");
 }
 else
 {
 e.message = SendErrorMessage("Error during redraw : " + status.ToString() + ".");
 }
 }
 }
 }
}
private static DocuViewareMessage SendErrorMessage(string message)
{
 return new DocuViewareMessage(message, "#ff5656", 2500, 300, 300, false, "130%", "normal", "#FFFFFF", "none", "none", "48px", DocuViewareMessageIcon.Error);
}