Use and handling of the selection area

Before starting, complete the serving DocuVieware through a REST API 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 C# REST service project with ASP.NET Web API 2 from the .NET Framework.

Requirements — .NET Framework 4.6 or above

You’ll add three buttons on your DocuVieware client page: 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, onclick:

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: with a button calling a JavaScript function onclick event.

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

Applying a 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.

  1. Add the button and the JavaScript function that executes on the click event. The selected area resets if the operation is successful:

    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)) {
     var regionOfInterest = {
     RegionLeft: coords.left,
     RegionTop: coords.top,
     RegionWidth: coords.width,
     RegionHeight: coords.height
     };
     DocuViewareAPI.PostCustomServerAction("DocuVieware1", false, "Negative", regionOfInterest, function(){
     DocuViewareAPI.ClearSelectionArea("DocuVieware1");
     });
     }
    }

  2. Create a class to define the parameters that are sent (the ROI coordinates). Add a new class called RegionOfInterest.cs in your Models folder, as shown below:

    C#
    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; }
     }
    }

  3. Subscribe to the CustomAction event and dispatch to the event handler. For more information about this mechanism, refer to the client/server coming and going with custom actions guide.

    C#
    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);
     }
     }

  4. Implement the custom action handler itself. Add a CustomActions.cs class to your project if there isn’t one already.

    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.

    Below is the source code to achieve this:

    C#
    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);
     }
     }
     }
    }