--- title: "Use and handling of the selection area" canonical_url: "https://www.nutrient.io/guides/docuvieware/other-technologies/rest-use-and-handling-of-the-selection-area/" md_url: "https://www.nutrient.io/guides/docuvieware/other-technologies/rest-use-and-handling-of-the-selection-area.md" last_updated: "2026-05-23T00:08:18.055Z" description: "Use the selection area in a DocuVieware project, including button implementation for coordinate display and filtering." --- # Use and handling of the selection area > Before starting, complete the [serving DocuVieware through a REST API](https://www.nutrient.io/guides/docuvieware/other-technologies/serving-docuvieware-through-a-rest-api.md) and [client/server coming and going with custom actions](https://www.nutrient.io/guides/docuvieware/other-technologies/rest-client-server-coming-and-going-with-custom-actions.md) 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 ``` ```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 ``` ```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. **Steps:** 1. Add the button and the JavaScript function that executes on the click event. The selected area resets if the operation is successful: ```html ``` ```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: ```csharp 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](https://www.nutrient.io/guides/docuvieware/other-technologies/rest-client-server-coming-and-going-with-custom-actions.md) guide. ```csharp 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: ```csharp 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(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); } } } } ``` --- ## Related pages - [DocuVieware guide for Blazor](/guides/docuvieware/other-technologies/docuvieware-tutorial-for-blazor.md) - [Introduction](/guides/docuvieware/other-technologies.md) - [How to set up and use DocuVieware with React](/guides/docuvieware/other-technologies/how-to-set-up-and-use-docuvieware-with-react.md) - [Integrating DocuVieware in your Angular2 client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-angular2-client-application.md) - [Integrating DocuVieware in your ASP.NET Core MVC Razor client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-asp-dotnet-core-mvc-razor-client-application.md) - [Integrating DocuVieware in your Java client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-java-client-application.md) - [Integrating DocuVieware in your AngularJS client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-angularjs-client-application.md) - [Integrating DocuVieware in your JavaScript/jQuery client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-javascript-jquery-client-application.md) - [Integrating DocuVieware into SharePoint 2019](/guides/docuvieware/other-technologies/integrating-docuvieware-into-sharepoint-2019.md) - [Integrating DocuVieware in your PHP client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-php-client-application.md) - [Integrating DocuVieware in your ASP.NET MVC Razor client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-asp-dotnet-mvc-razor-client-application.md) - [Integrating DocuVieware in your Node.js client application](/guides/docuvieware/other-technologies/integrating-docuvieware-in-your-nodejs-client-application.md) - [Custom snap-in implementation](/guides/docuvieware/other-technologies/rest-custom-snap-in-implementation.md) - [Integrating DocuVieware with Electron](/guides/docuvieware/other-technologies/integrating-docuvieware-with-electron.md) - [Client/server coming and going with custom actions](/guides/docuvieware/other-technologies/rest-client-server-coming-and-going-with-custom-actions.md) - [Serving DocuVieware through a REST API](/guides/docuvieware/other-technologies/serving-docuvieware-through-a-rest-api.md) - [Your first Angular 10 application with DocuVieware](/guides/docuvieware/other-technologies/your-first-angular-10-application-with-docuvieware.md)