Display annotation over barcode

Discussions about annotation support.
Post Reply
tfierens1
Posts: 7
Joined: Fri Feb 24, 2017 12:55 pm

Display annotation over barcode

Post by tfierens1 » Fri Feb 24, 2017 2:16 pm

Hi,

I'm wondering if there was a way to display an annotation accurately (i.e. highlight or other) over a 1D barcode that's been detected on the page.

I've seen your demo on how to draw a rectangle on an image (from https://www.gdpicture.com/guides/gdpicture/web ... deX1.html) but I don't want to use this method as I have to reload the image every time I want to clear the rectangle so instead I thought I'd use an annotation but I can't get this to work, well not accurately anyway.

When calling 'Barcode1DReaderDoScan', I use the same method as per example from the above url i.e.

Code: Select all

oGdPictureImaging.Barcode1DReaderGetBarcodeX1(i) + LeftArea
etc...

I assume these values are returned in Pixels rather than Inches so before creating the annotation I call the following code:

Code: Select all

int dpi = 96;

float topLeftX = ((barcode.TopLeftPoints.X / dpi) + (float)this.LeftArea / dpi);
float topLeftY = (barcode.TopLeftPoints.Y / dpi) + (float)this.TopArea / dpi;

float topRightX = (barcode.TopRightPoints.X / dpi) + (float)this.LeftArea / dpi;
float topRightY = (barcode.TopRightPoints.Y / dpi) + (float)this.TopArea / dpi;

float bottomRightX = (barcode.BottomRightPoints.X / dpi) + (float)this.LeftArea / dpi;
float bottomRightY = (barcode.BottomRightPoints.Y / dpi) + (float)this.TopArea / dpi;

float bottomLeftX = (barcode.BottomLeftPoints.X / dpi) + (float)this.LeftArea / dpi;
float bottomLeftY = (barcode.BottomLeftPoints.Y / dpi) + (float)this.TopArea / dpi;
You'll notice that I've hardcoded the DPI which I don't like but I thought I didn't want to waste more time on this until someone from GdPicture confirmed that this could be done.

To add the annotation, I simply call the following:

AnnotationManager annotationManager = GdViewer1.GetAnnotationManager();
RectangleF rect = new RectangleF(topLeftX, topLeftY, bottomLeftX - topLeftX, bottomRightY - topLeftY);
var annotation = manager.AddRectangleHighlighterAnnot(Color.Yellow, rect.Left, rect.Top, rect.Width, rect.Height);

The problem I'm having with the above is that the highlighting annotation position is inconsistent. On some barcodes it's nearly perfectly over the barcode, and on some others it's completely off or too short and this seems to vary depending on the image resolution/image type? I'm trying it out on different images (.tiff/.jpg) I got from the web.

Is there a way to accurately cover a barcode with an annotation based on the barcode coordinates?

Thanks.

Thierry

Cedric
Posts: 269
Joined: Sun Sep 02, 2012 7:30 pm

Re: Display annotation over barcode

Post by Cedric » Mon Feb 27, 2017 4:25 pm

Hello Thierry,

Yes, this can be done and I believe that your problem is definitely related to the document resolution.
The Barcode1DReaderGetBarcodeX* and Barcode1DReaderGetBarcodeY* return a value in pixels so you indeed need a pixels to inches conversion because the annotation drawing methods measurement unit is inch. An hard coded resolution is definitely a bad choice because, unless it is the same value than the actual document resolution you are working with, it will distort the coordinates calculation and it will lead to an annotation that is not at the correct location and/or does not have the proper size.
GdPicture.NET provides the required methods to retrieve the horizontal and vertical resolution of a document so you can easily replace this hard coded value with the proper resolution.

We actually already did this in a demo for DocuVieware here: http://www.docuvieware-demo.com/barcode ... _demo.aspx
It is not primarily designed for WinForm but the barcode recognition and annotation part being done server side, it is written in C# and it can be very easily adapted.
You should take a look at it, you can find this source in your \GdPicture.NET 12\Samples\ASP.NET\DocuVieware\aspnet-webform_app\ folder, in the file barcode_recognition_demo.aspx.cs

tfierens1
Posts: 7
Joined: Fri Feb 24, 2017 12:55 pm

Re: Display annotation over barcode

Post by tfierens1 » Mon Feb 27, 2017 7:15 pm

Hi Cedric,

Thanks for getting back to me. This is exactly what I was looking for but my annotations are still not being positioned correctly. This is the code I have so far:

Code: Select all

           
                    // get image resolution i.e. 96         
                    float resolution = gdPictureImaging.GetHorizontalResolution(imageId);

                    // get barcode point locations
                    int topLeftX = barcode.TopLeftPoints.X;
                    int topLeftY = barcode.TopLeftPoints.Y;

                    int topRightX = barcode.TopRightPoints.X;
                    int topRightY = barcode.TopRightPoints.Y;

                    int bottomRightX = barcode.BottomRightPoints.X;
                    int bottomRightY = barcode.BottomRightPoints.Y;

                    int bottomLeftX = barcode.BottomLeftPoints.X;
                    int bottomLeftY = barcode.BottomLeftPoints.Y;

                    RectangleF box = GetBarcodeBoxInches(resolution, topLeftX, topLeftY, topRightX, topRightY, 
                                                                              bottomLeftX, bottomLeftY, bottomRightX, bottomRightY);

                    // Add Annotation
                    AnnotationManager manager = GdViewer1.GetAnnotationManager();
                    ClearAnnotations();
                    RectangleF rect = new RectangleF(topLeftX, topLeftY, bottomLeftX - topLeftX, bottomRightY - topLeftY);
                    var AnnotationObject = manager.AddRectangleHighlighterAnnot(Color.Yellow, box.Left, box.Top, box.Width, box.Height);
My test barcode lib is returning parameters in the wrong order for the bottom left & right points. I'll fix that later but for now, I've just swapped the params in the GetBarcodeBoxInches function.

This is the code for conversion function where I've simply renamed the parameters to more descriptive names. I think I renamed them correctly and in the correct order.

Code: Select all

        private static RectangleF GetBarcodeBoxInches(float resolution, int topLeftX, int topLeftY, int topRightX, int topRightY, int bottomRightX, int bottomRightY, int bottomLeftX, int bottomLeftY)
        {
            float left = Math.Min(Math.Min(Math.Min(topLeftX, topRightX), bottomRightX), bottomLeftX) / resolution;
            float top = Math.Min(Math.Min(Math.Min(topLeftY, topRightY), bottomRightY), bottomLeftY) / resolution;
            float right = Math.Max(Math.Max(Math.Max(topLeftX, topRightX), bottomRightX), bottomLeftX) / resolution;
            float bottom = Math.Max(Math.Max(Math.Max(topLeftY, topRightY), bottomRightY), bottomLeftY) / resolution;

            return new RectangleF(left, top, right - left, bottom - top);
        }
I've attached a couple of snapshots to show you the problem. In the first snapshot, I've selected the second barcode, and in the second snapshot I've selected the first snapshot. As you can see they're both off.

Am I missing anything?

Thanks.

Thierry
Attachments
Barcode2.PNG
Barcode1.PNG

Cedric
Posts: 269
Joined: Sun Sep 02, 2012 7:30 pm

Re: Display annotation over barcode

Post by Cedric » Mon Feb 27, 2017 7:21 pm

Would you be able to share your test project as well as the input document you are using so we properly can take a look into this?

tfierens1
Posts: 7
Joined: Fri Feb 24, 2017 12:55 pm

Re: Display annotation over barcode

Post by tfierens1 » Tue Feb 28, 2017 11:05 am

Hi Cedric,

Quick update. I thought it might have been related to the fact that I printed a .jpg to .tiff as I noticed yesterday that the resolution was returned as 96dpi but this is not the case. I printed this document this morning; re-scanned it as a b&w .tiff at 300dpi and now, even though its resolution is reflected as 300dpi, the annotation is still being displayed in the wrong location.

As for the project, I'll see what I can do. May be have to be tomorrow or later as I've got a lot going on today. I've attached both the original document I used at 96dpi (1.1Mb) and the one scanned at 300dpi (51Kb).

Hopefully this will help.

Thanks.

Thierry
Attachments
barcodes.tif
Barcode_Test.tif

Cedric
Posts: 269
Joined: Sun Sep 02, 2012 7:30 pm

Re: Display annotation over barcode

Post by Cedric » Tue Feb 28, 2017 11:23 am

Could you please also attach your test project (source code only, without the license key) so I can debug this?

tfierens1
Posts: 7
Joined: Fri Feb 24, 2017 12:55 pm

Re: Display annotation over barcode

Post by tfierens1 » Tue Feb 28, 2017 11:48 am

Hi Cedric,

Please find attached a sample project where I've reproduce the problem. I haven't included the barcode reader part as I don't have the time, so for now, I've simply hardcode the value that were returned from it for the "second barcode" displayed on the top right of the page I provided. Please note that in my test I used the .tiff that's 300dpi (51Kb) but I don't think it makes any difference.

I've kept the app as a WPF app as this is type of app it will be used with.

Hopefully, this will highlight the problem.

Thanks.

Thierry
Attachments
BarcodeTest.zip
(14.5 KiB) Downloaded 583 times

Cedric
Posts: 269
Joined: Sun Sep 02, 2012 7:30 pm

Re: Display annotation over barcode

Post by Cedric » Tue Feb 28, 2017 12:30 pm

I took the liberty to implement the barcode recognition part in order to work with proper values instead of hard coded ones and the result is now correct.
Attachments
BarcodeTest.zip
(9.1 KiB) Downloaded 580 times

tfierens1
Posts: 7
Joined: Fri Feb 24, 2017 12:55 pm

Re: Display annotation over barcode

Post by tfierens1 » Tue Feb 28, 2017 2:47 pm

Hi Cedric,

Thanks for that, but do you know what was actually incorrect in the app I provided you with? The only thing I've managed to spot is the barcode points. They appear to be completely different. I will check the barcode code tomorrow to see if there is anything else but the difference appear to be quite extreme which doesn't make sense as the value returned are using the same mechanism as the one you have used in the test app.

I'll update you as soon as I have something but if you know what I was doing wrong in the first place, can you please let me know.

Thierry

tfierens1
Posts: 7
Joined: Fri Feb 24, 2017 12:55 pm

Re: Display annotation over barcode

Post by tfierens1 » Wed Mar 01, 2017 12:05 pm

Hi Cedric,

I ended up with the same problem when using your code and calling the SetROI which was created based on a selection in the viewer. Once I added the top & left points returned from 'GetRectCoordinatesOnDocumentPixel', it sorted the problem.

Thanks again for your help.

Thierry

Cedric
Posts: 269
Joined: Sun Sep 02, 2012 7:30 pm

Re: Display annotation over barcode

Post by Cedric » Wed Mar 01, 2017 12:19 pm

You're welcome Thierry!

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest