The Annotated Image Control in 2006

• Download demo - 219.1 KB
• Download source and help - 510.7 KB

Introduction

It's been about two years since I updated my Annotated Image control and an overhaul is long overdue: removal of a plethora of bugs, migration to VS2005, architectural changes, speed improvements, extra functionality, etc. For those who haven't read my other articles on previous incarnations of this control, here is briefly what it will do:

• Display an image and zoom it
• Display a mask in overlay
• Display annotations in overlay
• Create annotations interactively and save/load them
• Edit annotations: move annotation, move and delete points...

Background

My older articles on this subject might still help.

Using the Code

The control should be added to another project and a bitmap assigned to it. Annotations and masks can then be added/loaded/created and added to their respective collections.

Public Sub New() 
    MyBase.New() 
    InitializeComponent() 

    'Add the custom control 

    Me._annotatedImage = New AnnotatedImage
    Me.Controls.Add(Me.AnnotatedImage) 

    'Make sure image form is maximized 

    'so we can measure the maximal clientsize 

    Me.SuspendLayout() 
    Me.WindowState = FormWindowState.Normal 
    Dim rectScreen As Rectangle = _
            Screen.PrimaryScreen.WorkingArea 
    Dim objCurrentSize As Size = Me.Size 
    Me.Width = rectScreen.Width 
    'Dunno why, but we need to subtract 20 

    Me.Height = rectScreen.Height - 40
    Me.AnnotatedImage.MaximimumSize = Me.ClientSize 
    Me.ClientSize = objCurrentSize 

        'Load an image, e.g. from a command line argument

        Me.AnnotatedImage.LoadBitmap(new URI("C:\temp\anImage.jpg"))

    'Show annotations manager and add some menus 

    Me.AnnotatedImage.AddContextMenuItem("Measure", _
        AnnotatedImage.ContextMenus.Annotation, _
        New System.EventHandler(AddressOf _
        Me.MeasureAnnotationEventHandler)) 
    Me.AnnotatedImage.AddContextMenuItem("Measure", _
        AnnotatedImage.ContextMenus.AnnotationContainer, _
        New System.EventHandler(AddressOf _
        Me.MeasureAnnotationEventHandler)) 
    Me.AnnotatedImage.AddContextMenuItem("Morphology", _
        AnnotatedImage.ContextMenus.Mask, _
        New System.EventHandler(AddressOf _
        Me.MaskMorpholgyEventHandler)) 
    Me.AnnotatedImage.AddContextMenuItem("Save", _
        AnnotatedImage.ContextMenus.Mask, _
        New System.EventHandler(AddressOf Me.MaskSaveEventHandler)) 

    Me.ResumeLayout()
End Sub

The annotated image control communicates with its host using a series of events (see also the downloadable help file). The events list:

Event handlers:

Private Sub _annotatedImage_ItemSelected(ByVal sender _
    As Object) Handles _annotatedImage.ItemSelected
    ...
End Sub

Private Sub _annotatedImage_Updated(ByVal sender _
    As Object) Handles _annotatedImage.Updated
    ...
End Sub

Private Sub AnnotatedImageResize(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles _annotatedImage.Resize
    'Resize parent form to user control. Causes refresh ....

    Debug.WriteLine("Received resize event from AnnotatedImage," & _ 
                    " resizing client area", "AnnotatedsRGBImageResize")
    Dim iControlWidth As Integer = AnnotatedImage.Width
    Dim iControlHeight As Integer = AnnotatedImage.Height
    AnnotatedImage.Location = New Point(0, 0)
    Me.stbImage.Location = New Point(0, iControlHeight)
    Me.stbImage.Width = iControlWidth
    Me.ClientSize = New Size(Math.Max(iControlWidth, 600), _
        iControlHeight + stbImage.Height)
End Sub

Private Sub annotatedImage_BitmapChanged(ByVal sender As Object) _
    Handles _annotatedImage.BitmapChanged
    ...
End Sub
...

It is very important to turn off redrawing while performing extensive updates on the collections of the annotatedImage control by setting the Updating property to True. When resetting this property to False, the Updated event will be fired, allowing the host application to perform necessary updates. Also, avoid reacting to other events when the Updating property is still True, unless absolutely necessary!

An example of not handling events during updating of the internal collections is a control drawing a treeview of these collections:

Private Sub annotatedImage_CollectionsChanged(ByVal sender As Object, _
    ByVal e As CollectionChangedEventArgs) _ 
    Handles annotatedImage.MaskCollectionChanged, _
    annotatedImage.AnnotationCollectionChanged, _ 
    annotatedImage.AnnotationContainerCollectionChanged

    If Me.annotatedImage.Updating = False Then
        InvokeSynchronizeTree()
End Sub

Key Bindings, Interactive Creation and Manipulation

Some of the default key bindings are:

• Mouse wheel, Z, Shift-Z: Zoom
• Middle mouse button drag: Move the image when it is larger than the desktop. If it is smaller and the zoom is smaller than 1, it will bring up a magnifying glass.

The annotated image control has bindings for interactive creation and manipulation of annotations. Right-clicking brings up a context-sensitive menu that allows the creation of annotations and annotation containers.

When editing an annotation, the default action is selecting an annotation. You can then move it by dragging it or you can delete it using the delete key. Double-clicking will launch its properties dialog. If you use the Shift key during selection, the whole annotation will be selected, if you use the Control key, only the points can be selected.

Demo

The included sRGBViewer application is a simple viewer that allows creation and editing of annotations, and will save them. Note that the images can actually reside (and be saved back) on a website. This is actually how I use it: as a smart client for a web-based medical picture album system.

Points of Interest

It really is about time the GDI+ implementation used hardware acceleration, as announced years ago, and this is now a reality in Vista. I haven't tried it yet, though. The implementation of Regions is still terribly slow when testing repeatedly whether a point is inside it (hit testing).

History

Version of June 27, 2006: First versions of this control date from 2003, but the articles related to the older versions are no longer relevant due to fundamental changes.