Refresh/Paint drawings on ImageViewer

Questions, comments and suggestions concerning VintaSoft Imaging .NET SDK.

Moderator: Alex

JeromeC
Posts: 11
Joined: Wed Apr 22, 2015 4:56 pm

Refresh/Paint drawings on ImageViewer

Post by JeromeC »

Hello,

I'm currently testing the .NET SDK with a C#/WinForm solution to see if this is suitable for our project.
My goal is to be able to draw a point/rectangle/polygon with the mouse on a very large image which can be zoomed in or out.
I modified the Large Image Viewer Demo to do my tests.

I have been able to implement zooming functionnality with the ImageViewer, I'm working with very large image and it's very responsive (which is our main problem and our highest priority into choosing the library).

My problem now is that I have to draw on this image. I will draw points, line, rectangle, polygon, all of those will be movable on the image (on mousedown the element changes colors then I can move it on the image and it goes back to initial color state when I let go of the mouse).

I can draw what I want on the image, I have no trouble handling the mouse events. But my troubles come when I need to refresh the moved object.
At best I have my polygon several times on the screen following the movement of my mouse.

I tried to save the image, make a copy, draw on it and reinsert the image back into the ImageViewer.
I tried to simply draw on the image.
I tried to use the ImageViewerDrawingSurface, which seems to be a layer where I can draw shape on. But that did not work.

None of that worked out.
I looked at the API but there are no examples.

Could you help me with the refresh/repaint of the ImageViewer control, it's decisive into choosing your library and quite urgent.
I can provide chunk of code from the large image viewer demo program I modified.

Thanks,
Jerome.
Alex
Site Admin
Posts: 2305
Joined: Thu Jul 10, 2008 2:21 pm

Re: Refresh/Paint drawings on ImageViewer

Post by Alex »

Hello Jerome,

Do you want to draw the graphic primitives on image or do you want to draw the the graphic primitives over image in image viewer?

Best regards, Alexander
JeromeC
Posts: 11
Joined: Wed Apr 22, 2015 4:56 pm

Re: Refresh/Paint drawings on ImageViewer

Post by JeromeC »

Hello Alex,

I'm not quite sure about the answer.
I would say to draw the graphic primitives over the image as my goal is to move graphics around over the image while the image will be static.

I will still need to take into account the zoom, as users will need to draw shape with pretty huge zoom in.

I may have at a later time to print the images with their shape on but not at the moment.
I don't want any flicker when I'm moving the shapes around.

Best regards,
Jerome.
Alex
Site Admin
Posts: 2305
Joined: Thu Jul 10, 2008 2:21 pm

Re: Refresh/Paint drawings on ImageViewer

Post by Alex »

Hello Jerome,

Please try to use VintaSoft Annotation .NET Plug-in and annotate your images.

Best regards, Alexander
JeromeC
Posts: 11
Joined: Wed Apr 22, 2015 4:56 pm

Re: Refresh/Paint drawings on ImageViewer

Post by JeromeC »

Hello Alex,

I just looked into the annotation plugin and it seems to perfectly fill my needs.
I looked at the demo which have all the extensives operations I want to do on my images.

I will integrate the plugin in my solution to test that I'm able to do all I want with help from the demo's code.
I will come back here if I have any troubles.


Thanks for your help,
Jerome.
JeromeC
Posts: 11
Joined: Wed Apr 22, 2015 4:56 pm

Re: Refresh/Paint drawings on ImageViewer

Post by JeromeC »

Hello Alex,

I'm working with the annotationViews at the moment and I have some trouble with the mouse events.
I have the following code:

Code: Select all

            CreateGridGuidancePointAnnotationViews(new PointF((float)(imageWidth * 0.15) * 1F, (float)(imageHeight * 0.1)  * 1F), "Point en haut a gauche",   "GridPoint.TopLeft");
            DrawAllAnnotations();

Code: Select all

            
            //This function create the annotationView and store it into a List<AnnotationView>
        private void CreateGridGuidancePointAnnotationViews(PointF location, string toolTip, string name)
        {
            RectangleAnnotationData rectAnnotationData = new RectangleAnnotationData
            {
                CanResize = false,
                ToolTip = toolTip,
                CanRotate = false,
                FillBrush = new AnnotationSolidBrush(Color.Blue),
                Border = false,
                Symmetry = true,
                Location = location,
                Size = new SizeF(10F, 10F),
                Outline = {Color = Color.Red, Width = 0.5F}
            };

            AnnotationView annotationView = new RectangleAnnotationView(rectAnnotationData);
            annotationView.Name = name;

            annotationView.MouseUp += annotationView_MouseUp;
            annotationView.MouseDown += annotationView_MouseDown;
            annotationView.StateChanged += annotationView_StateChanged;
            annotationView.Click += annotationView_Click;
            annotationView.DoubleClick += annotationView_DoubleClick;
            annotationView.StateChanged +=annotationView_StateChanged;

            StoreAnnotationVIew(name, annotationView);
            StoreAnnotationData(name, rectAnnotationData);
        }

        public void annotationView_DoubleClick(object sender, MouseEventArgs e)
        {
            throw new NotImplementedException();
        }

        public void annotationView_Click(object sender, MouseEventArgs e)
        {
             MessageBox.Show("testdfg");
        }

        public void annotationView_StateChanged(object sender, EventArgs e)
        {
           //MessageBox.Show("testdfg");
        }

        public void annotationView_MouseDown(object sender, MouseEventArgs e)
        {
            AnnotationView annotationView = (AnnotationView)sender;
            MessageBox.Show("test  cccc");
            
        }

        public void annotationView_MouseUp(object sender, MouseEventArgs e)
        {
            MessageBox.Show("test  fff");
            AnnotationView annotationView = (AnnotationView) sender;
        }

            
            

Code: Select all

        private void DrawAllAnnotations()
        {
            //TODO: to check
            //TODO: by steps show the correct value
            AnnotationViewer annotationViewer = View.GetAnnotationViewer();
            annotationViewer.AnnotationViewCollection.Clear();
            foreach (var annotationView in _annotationsViewStorage.Values)
            {
                if (annotationView.IsVisible)
                {
                    
                    annotationView.MouseUp += annotationView_MouseUp;
                    annotationView.MouseDown += annotationView_MouseDown;
                    annotationView.StateChanged += annotationView_StateChanged;
                    annotationView.Click += annotationView_Click;
                    annotationView.DoubleClick += annotationView_DoubleClick;


                    annotationViewer.AnnotationViewCollection.Add(annotationView);
                }
            }
        }
My first trouble is with the outline, I specified it to be red but it's still in a blueish color when the annotationView is selected. I must be setting it wrong and I would like some pointer on how to define it. The outline need to be very subtule or I will perhaps have to remove it completely (I do not yet have that information so I'm checking for both).

My second problem is with the mouse event, only the state_changed is fired with my code.
I tried to specify the mouse event when I created the annotation and when I add them to the AnnotationViewer but none of the mouse event get fired.
Since the State_Changed event is fired, I wonder what is wrong in my code for it not to fire.
All this code are in the seperate class from the form, but I tried to add some event from my class in the form on some other button and it's working, so it seems to be located only on the annotationView mouse events.

My goal is to do some actions on the animationViews when I move it: I need to store it's state (the annotationData) to have an history of the movements of that annotationView, then go back to previous position on the press of some button of my Form.

If something is not clear, please do not hesitate to ask more questions. I can post some more code if needed.

Cheers,
Jerome.
Alex
Site Admin
Posts: 2305
Joined: Thu Jul 10, 2008 2:21 pm

Re: Refresh/Paint drawings on ImageViewer

Post by Alex »

Hello Jerome,
My first trouble is with the outline, I specified it to be red but it's still in a blueish color when the annotationView is selected. I must be setting it wrong and I would like some pointer on how to define it. The outline need to be very subtule or I will perhaps have to remove it completely (I do not yet have that information so I'm checking for both).
I think you not correctly specified the outline color, i.e. you mixed up color channel values in color value.

My second problem is with the mouse event, only the state_changed is fired with my code.
I tried to specify the mouse event when I created the annotation and when I add them to the AnnotationViewer but none of the mouse event get fired. ...
The AnnotationVisualTool class is used for interacting between annotation and user and you should subscribe to events of this class if you want to monitor mouse interaction with annotation. More info please read here: http://www.vintasoft.com/docs/vsimaging ... Forms.html

Also please read the "Programming => Annotate images" section in documentation: http://www.vintasoft.com/docs/vsimaging-dotnet/

Best regards, Alexander
JeromeC
Posts: 11
Joined: Wed Apr 22, 2015 4:56 pm

Re: Refresh/Paint drawings on ImageViewer

Post by JeromeC »

Hello Alex,

Thanks for the tips on the outline, I was using color instead of Brush. It's now working fine.


I still have trouble with MouseEvents. I'm using the AnnotationVisualTool as you recommended and I'm getting the mouse events to fire but it's behavior is off what I want.

I have the following code:

Code: Select all

        private void AddAnnotationViewerMouseEvents()
        {
            AnnotationVisualTool annotationVisualTool = View.GetAnnotationViewer().AnnotationVisualTool;
            annotationVisualTool.MouseDown += annotationVisualTool_MouseDown;
            annotationVisualTool.MouseUp += annotationVisualTool_MouseUp;
            annotationVisualTool.MouseMove += annotationVisualTool_MouseMove;
        }

        void annotationVisualTool_MouseMove(object sender, VisualToolMouseEventArgs e)
        {
        }

        void annotationVisualTool_MouseUp(object sender, VisualToolMouseEventArgs e)
        {
            AnnotationVisualTool anno = (AnnotationVisualTool)sender;
            if (null != anno.FocusedAnnotationView)
            {
                anno.FocusedAnnotationView.FillBrush = new AnnotationSolidBrush(Color.Red);
            }
        }

        void annotationVisualTool_MouseDown(object sender, VisualToolMouseEventArgs e)
        {
            AnnotationVisualTool anno = (AnnotationVisualTool)sender;
            if (null != anno.FocusedAnnotationView)
            {
                anno.FocusedAnnotationView.FillBrush = new AnnotationSolidBrush(Color.GreenYellow);
            }
        }
I get some weird behavior with that code. I created 8 rectangles on the annotationViewer I'm using with the following function:

Code: Select all

        private AnnotationView CreateGridGuidancePointAnnotationView(PointF location, string toolTip, string name)
        {
            var pointLocation = location;
            pointLocation.X -= 5F;
            pointLocation.Y -= 5F;
            RectangleAnnotationData rectAnnotationData = new RectangleAnnotationData
            {
                CanResize = false,
                ToolTip = toolTip,
                CanRotate = false,
                FillBrush = new AnnotationSolidBrush(Color.Blue),
                Border = false,
                Symmetry = true,
                Location = pointLocation,
                Size = new SizeF(10F, 10F)
            };
            AnnotationView annotationView = new RectangleAnnotationView(rectAnnotationData);
            annotationView.Name = name; 
            

            return annotationView;
        }
When I click on one rectangle, it moves with my mouse, but it doesn't change color until I release the left button.
Then I move another rectangle, and the color of the first one changes and so on and so on.

It seems the focused annotation is not updated everytimes I click down on one annotationView but only when I release the mouse. Which would explain why it's changing the properties of the previous rectangle everytimes.
I tried to use HoveringAnnotation instead of the FocusedAnnotation but it's not updated everytimes I click down on the annotation either.

I tried to look at the code of the annotation Demo but I didn't find something similar to what I want to achieve which is to drag my annotationView around the annotationViewer and launch some functions to update and save the coordinates of the new position.

Best wishes,
Jerome.
JeromeC
Posts: 11
Joined: Wed Apr 22, 2015 4:56 pm

Re: Refresh/Paint drawings on ImageViewer

Post by JeromeC »

Hello Alex,

I have another question.

I'm using the PannigTool to move my image when I zoom on the AnnotationViewer on the click of a button, the behavior is that the button will activate the panning, and when I click again the panning will stop.
I looked at the API and found the PanningTool, it's working fine for the panning part.
But when I activate my button, and move the image around, all the annotationView dissapear.

Here is my function, I create a new panning tool which will be added to the VisualTool, and then I set is to null to desactivate it. Is my way to create/destroy the panning function incorrect?

Code: Select all

        internal void ToggleCurrentAction(ViewerActions action, bool buttonIsChecked)
        {
            switch (action)
            {
                case ViewerActions.PanImage:
                    if (buttonIsChecked)
                    {
                        DesactivateAllOtherMenuButton(action);
                        PanTool panTool = new PanTool();
                        View.GetAnnotationViewer().VisualTool = panTool;
                        _currentAction = ViewerActions.PanImage;
                    }
                    else
                    {
                        View.GetAnnotationViewer().VisualTool = null;
                        _currentAction = ViewerActions.None;
                    }
                    break;
            }
        }
Best regards,
Jerome.
Alex
Site Admin
Posts: 2305
Joined: Thu Jul 10, 2008 2:21 pm

Re: Refresh/Paint drawings on ImageViewer

Post by Alex »

Hello Jerome,

The AnnotationVisualTool class is used for drawing annotations on image viewer. You need use the CompositeVisualTool class if you want to use several visual tools in image viewer. Here is correct code:

Code: Select all

...
PanTool panTool = new PanTool();
View.GetAnnotationViewer().VisualTool = new CompositeVisualTool(panTool, View.GetAnnotationViewer().AnnotationVisualTool);
...
Best regards, Alexander
Post Reply