Reference Guide
Tutorials / ASP.NET MVC Razor / Use and handling of the Selection Area
In This Topic
    Use and handling of the Selection Area
    In This Topic
    This tutorial assumes that you have fully followed and understood both Your first DocuVieware MVC Razor page 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 sample MVC Razor application that will apply a negative filter on a particular area.

    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.

    Summary

    The starting point of this tutorial is the application you have at the end of Your first DocuVieware MVC Razor page, it is a prerequisite so if you do not have it, please follow this tutorial first.

    You are going to add three buttons above the DocuVieware™ control, 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 click event. Here is the code to put in Index.cshtml:

    Displaying the ROI coordinates.
    Copy Code
    <div style="margin-top: 15px;">
        <button onclick="getROICoordinates(); return false;">Display ROI coordinates</button>
     </div>
    Displaying 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 click 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 click event.

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

    At this poing, your client source code looks like this:

     

    Step 2: You are going to need a class to retrieve the parameters (i.e. the ROI coordinates). Simply add this one to your Global.asax.cs :

    Class to retrieve the ROI coordinates.
    Copy Code
    public class roi
    {
         public double left { get; set; }
         public double top { get; set; }
         public double width { get; set; }
         public double height { get; set; }
    }

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

    Subscribing to the CustomAction event.
    Copy Code
    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))
        {
            //Custom action implementation will go here
        }
    }

    Step 4: You can implement the custom action handler itself still in the Global.asax.cs file.

    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 and finally apply the filter on it.

    You will need this source code:

    Implementing the custom action handler.
    Copy Code
    private void CustomActionsHandler(object sender, CustomActionEventArgs e)
    {
        if ((e.actionName == "Negative") && (e.args != null))
        {
           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);
    }
    See Also