DocuVieware Reference Guide
Use and handling of the Selection Area
Tutorials > Other Web Technologies using REST > Angular2 > Use and handling of the Selection Area
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.

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.
The screenshots have been taken using Visual Studio 2015 and GdPicture.NET™ 14, it may differ from the current release.


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:
<button onclick="getROICoordinates(); return false;">Display ROI coordinates</button>
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: " +
         + "\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.
<button onclick="clearROI(); return false;">Clear ROI</button>
function clearROI() {
 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.

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

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:                

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).

protected void Application_Start()
    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))

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:

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