In This Topic
Tutorials / Other Technologies / Use and handling of the Selection Area

Use and handling of the Selection Area

In This Topic
This tutorial assumes that you have fully followed and understood both Serving DocuVieware through a REST API and Client/Server coming and going with Custom Actions tutorials first. If this is not the case, please do it first.
 Overview

This tutorial shows how to work with selection area (also known as Region of Interest, or ROI) in a C# REST service project with ASP.NET Web API 2 from the .NET Framework.

DocuVieware™ requires .NET Framework 4.6 or above.

Summary

The starting point of this tutorial is the application you have at the end of Serving DocuVieware through a REST API, it is a prerequisite so if you do not have it, please follow this tutorial first.

You are going to add three buttons on your DocuVieware™ client page, one will simply output the coordinates of the selection area (if any), another one will clear it and finally the last button will apply a negative filter on the selected area.

 Display the ROI coordinates

This is done client side very easily, add a button that will call a JavaScript function on the onclick event. Here is the code:      

Getting the ROI coordinates.
Copy Code 
<button onclick="getROICoordinates(); return false;">Display ROI coordinates</button>
Getting the ROI coordinates.
Copy Code 
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);
    }
 }
 Clear the ROI

It is often usefull to have a button to clear the ROI (i.e. reset the selection area) and it is done the exact same way. Add button that calls a JavaScript function on the onclick event.

Clearing the ROI.
Copy Code 
<button onclick="clearROI(); return false;">Clear ROI</button>
Clearing the ROI.
Copy Code 
function clearROI() {
     DocuViewareAPI.ClearSelectionArea("DocuVieware1");
}
 Apply Negative on the ROI

Now you are going to use a CustomAction to apply the Negative filter on the selected area. You will need to send the ROI coordinates server side, set a ROI on the actual image and apply the filter on it.

Step 1 : Add the button and the JavaScript function that will be executed on the onclick event. We also want the selected area to be reset if the operation is successful.

Applying Negative on the ROI.
Copy Code 
<button onclick="Negative(); return false;">Apply Negative filter on the ROI</button>
Applying Negative on the ROI.
Copy Code 
function Negative() {
     var coords = DocuViewareAPI.GetSelectionAreaCoordinates("DocuVieware1");
     if ((coords.width != 0) && (coords.height != 0)) {
         var regionOfInterest = {
             RegionLeft: coords.left,
             RegionTop: coords.top,
             RegionWidth: coords.width,
             RegionHeight: coords.height
         };
         DocuViewareAPI.PostCustomServerAction("DocuVieware1", false, "Negative", regionOfInterest, function(){
             DocuViewareAPI.ClearSelectionArea("DocuVieware1");
         });
     }
}
               

Step 2 : You are going to need a class to define the parameters that well be sent (i.e. the ROI coordinates). Simply add a new class called RegionOfInterest.cs in your Models folder like this:

The class for ROI parameters.
Copy Code 
namespace DocuViewareREST.Models
{
     public class RegionOfInterest
     {
         public double RegionLeft { get; set; }
         public double RegionTop { get; set; }
         public double RegionWidth { get; set; }
         public double RegionHeight { get; set; }
     }
}

Step 3 : Subscribe to the CustomAction event and dispatch to the event handler (please refer to Client/Server coming and going with Custom Actions if you need more information about this mechanism).

Subscribing to the CustomAction event.
Copy Code 
protected void Application_Start()
 {
     GlobalConfiguration.Configure(WebApiConfig.Register);
     DocuViewareManager.SetupConfiguration();
     DocuViewareLicensing.RegisterKEY("XXXX"); //Unlocking DocuVieware. Please insert your demo or commercial license key here.
     DocuViewareEventsHandler.CustomAction += CustomActionsDispatcher;
 }
private static void CustomActionsDispatcher(object sender, CustomActionEventArgs e)
 {
     if ((e.actionName == "Negative") && (e.args != null))
     {
         CustomActions.ApplyNegativeFilter(e);
     }
 }

Step 4 : You can implement the custom action handler itself. Add a CustomActions.cs class to your project if there isn't one already.

What you will be doing here is first retrieve the image object, set the ROI on it based on the coordinates received from the client side, apply the filter on it and finally redraw the page.

Here is the source code to achieve this:

The custom action handler.
Copy Code 
private void ApplyNegativeFilter(CustomActionEventArgs e)
{
     using (GdPictureImaging gdPictureImaging = new GdPictureImaging())
     {
         int imageId;
         GdPictureStatus status = e.docuVieware.GetNativeImage(out imageId);
         if (status == GdPictureStatus.OK)
         {
             status = GdPictureStatus.GenericError;
             RegionOfInterest roi = JsonConvert.DeserializeObject<RegionOfInterest>(e.args.ToString());
             gdPictureImaging.SetROI((int)Math.Round(roi.RegionLeft * gdPictureImaging.GetHorizontalResolution(imageId), 0),
                 (int)Math.Round(roi.RegionTop * gdPictureImaging.GetVerticalResolution(imageId), 0),
                 (int)Math.Round(roi.RegionWidth * gdPictureImaging.GetHorizontalResolution(imageId), 0),
                 (int)Math.Round(roi.RegionHeight * gdPictureImaging.GetVerticalResolution(imageId), 0));
             status = gdPictureImaging.FxNegative(imageId);
             if (status != GdPictureStatus.OK)
             {
                 e.message = new DocuViewareMessage("Error during Negative filter: " + status + ".",
                     icon: DocuViewareMessageIcon.Error);
             }
             if (status == GdPictureStatus.OK)
             {
                 status = e.docuVieware.RedrawPage();
                 e.message = status == GdPictureStatus.OK
                     ? new DocuViewareMessage("Filter successfully applied.",
                         icon: DocuViewareMessageIcon.Ok)
                     : new DocuViewareMessage("Error during redraw : " + status + ".",
                         icon: DocuViewareMessageIcon.Error);
             }
         }
     }
}
See Also
Serving DocuVieware through a REST API
Client/Server coming and going with Custom Actions
Custom Snap-In implementation